Uploaded image for project: 'Qt'
  1. Qt
  2. QTBUG-80261

Create iOS style for Qt Quick Controls



    • Platform/s:


      Add a new "native" style to Qt Quick Controls for iOS. The style will be pixmap based (as opposed to the native macOS and Windows style), which means that we accept that it will deviate a bit from UIKit's own controls, but still look at home on iOS. This is basically the same approach as done with the Cupertino style in Flutter The upshot is that the style will be easier to implement and maintain, and not be subject to annual visual regressions as a result of changes to iOS. The worst-case is that the style can end up looking outdated over time if not maintained, but that is easier to accept, and also easier to fix.

      Controls that need styling

      Quick Control UIKit Control Notes
      DelayButton   A variant of Button with a progress indicator.
      BusyIndicator UIActivityIndicatorView A Spinning wheel
      CheckBox   Technically the same as Switch, which you would
      probably use in a native iOS app instead
      SpinBox UIStepper  
      Dial   Technically the same as slider
      Slider UISlider Draws handle and groove separate. Groove fills up on left
      side as you drag. Needs coding for animation
      Switch UISwitch  
      RadioButton   There is no RadioButton control in UIKit. Instead they use a list
      with checkmarks (ref the iOS Settings app - see attachment
      UIKit_back_and_checkmark). But let's create a RadioButton anyway, for
      cross-platform support. Then we say that a Button that is checkable
      can be rendered as a list item with a checkmark to the right. And when
      added to a ButtonGroup, you should get the same effect as shown in the
      ProgressBar UIProgressView Just a (rounded) rectangle. But indeterminate should be an
      animation (which is missing in UIKit)
      Frame   Missing in UIKit. But should have the same shape as TextInput.
      TextField UITextField Just a thin frame, can probably just use Frame directly
      PageIndicator UIPageControl  
      TabBar UITabBar Just the background needed (for now)
      ScrollIndicator   Just a thin line (with rounded cap)
        UISegmentedControl Does not exist in Quick Controls - therefore skipped

      Additional pixmaps / icons

      Pixmap Usage Notes
      Checkmark StackView, Checkable Button See attachement UIKit_back_and_checkmark
      Back Icon StackView See attachement UIKit_back_and_checkmark
      Drill-down / Expand Icon TreeView (TreeViewDelegate) See attachement UIKit_tree_expand

      Controls that can be coded exclusively in QML 

      Quick Control UIKit Control Notes
      Button UIButton Just a Label
      ComboBox UIButton (Pull Down configuration) Just a Label
      GroupBox   Just a Frame + Label
      RangeSlider   Slider with two handles. Reuse Slider pixmaps
      ScrollBar   Same as ScrollIndicator
      StackView   Uses Back Icon + animations
      TreeViewDelegate   Uses Expand Icon
      • All pixmaps will need to be a NinePatchImage
      • All pixmaps must have three sizes: 1x, 2x, and 3x . E.g switch-background.9.png, switch-background@2x.9.png, switch-background@3x.9.png
      • All pixmaps must have a dark and a light mode version
      • All controls must provide a set of pixmaps that corresponds to the (most important) states listed in the Imagine style element reference, like disabled and pressed.

       Addition notes

      We could implement this style using the Imagine style . But since we want to add animation effects here and there (like for a Switch), we should probably just create a style from scratch that uses NinePatchImages internally. This gives us more freedom when it comes to adding animations and tweaking details. But the naming of the images created by designers can preferably follow the naming convention used in the Imagine style.

      As a reference application, we should be able to write an an app that looks like the Settings app on iOS, by using an ApplicationWindow with a StackView. That is, we need to implement any drill-down animations and transitions so that they appear native. The same if using it a TabBar. The items in the list on each page in the stack view should also look native. And hopefully all such styling can be available out-of-the-box. TODO: Add an example / manual test that show cases this.

      Useful links

      Imagine style source code - can be used to see how the 9p images look like. A sketch design file is also here.


      Action points

      1. lets do one control at a time
        1. start with Slider, create all images needed, and we code that to be up'n'running - so that we know that e.g 9p works correctly, and 2x, 3x works.
        2. for the controls that need animation, we can do that from QML (coding). Just give us the pixmaps otherwise needed, like the background, rather than creating an animation consisting of static images.
      2. create gerrit repo
      3. create style boilerplate code
      4. for each control, perhaps copy in imagine style QML code as a starting point?


        1. Quick_controls.png
          356 kB
        2. QuickControls.mov
          3.68 MB
        3. UIKit_back_and_checkmark.png
          335 kB
        4. UIKit_physical_accurate_dark_mode.png
          330 kB
        5. UIKit_physical_accurate.png
          337 kB
        6. UIKit_pixel_accurate.png
          692 kB
        7. UIKit_tree_expand.png
          373 kB
        8. UIKit_yellow_bg.png
          358 kB
        9. UIKit.mov
          1.26 MB

          Issue Links

          No reviews matched the request. Check your Options in the drop-down menu of this sections header.



              richard Richard Moe Gustavsen
              andysh Andy Shaw
              5 Vote for this issue
              12 Start watching this issue



                  Time Tracking

                  Original Estimate - Not Specified
                  Not Specified
                  Remaining Estimate - 0 minutes
                  Time Spent - 6 hours

                    Gerrit Reviews

                    There are no open Gerrit changes