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

Create iOS style for Qt Quick Controls

    XMLWordPrintable

    Details

    • Platform/s:
      iOS/tvOS/watchOS

      Description

      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 Progress
      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
      Done
      SpinBox UIStepper   Done
      Dial   Technically the same as slider Done
      Slider UISlider Draws handle and groove separate. Groove fills up on left
      side as you drag. Needs coding for animation
      Done
      Switch UISwitch   Done
      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
      attachment. 
      Done
      ProgressBar UIProgressView Just a (rounded) rectangle. It can use the Slider's background. But indeterminate should be an animation (which is missing in UIKit) Done
      TextField UITextField Just a thin frame, can probably just use Frame directly Done 
      PageIndicator UIPageControl   Done
      ScrollIndicator   Just a thin line (with rounded cap) Done 
      ItemDelegate   Background with separator line Done
      Menu UIMenu Background In progress
      Menu Item   Background with separator line In progress
      MenuSeparator   Thick separator line In progress
      • therefore skipped|-|
        ToolTip   QPA -
        Tumbler UIPickerView QPA -

        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
        Popup background and overlay ComboBox popup, Menu See attachment (popup_menus)
        Horizontal separator Views (ItemDelegate) Just a horizontal line
        Vertical separator ToolSeparator, DialogButtonBox separator Vertical line
        Handle for Selection rectangle SelectionRectangle  

        Controls that can be coded exclusively in QML 

        Quick Control UIKit Control Notes Progress
        Label UILabel   Done
        Button UIButton Just a Label Done
        ComboBox UIButton (Pull Down configuration) Just a Label + popup. Reuse Menu pixmaps  
        Frame   Missing in UIKit. But should have the same shape as TextInput. Done
        GroupBox   Just a Frame + Label Done  
        RangeSlider   Slider with two handles. Reuse Slider pixmaps Done
        ScrollBar   Same as ScrollIndicator Done
        StackView   Uses Back Icon + animations Done
        SplitView   Thin separator line with increased hit area Done
        TreeViewDelegate   Uses Expand Icon Done 
        CheckDelegate   Uses checkmark/checkbox icon Done
        RadioDelegate   Uses checkmark icon Done
        SwitchDelegate   Uses Switch Done
        SwipeDelegate     Done
        Drawer   Just a filled rectangle with drop shadow  
        MenuBarItem Missing in UIKit. Should be same as UIBarButtonItem Just a Label (with expand icon) Done 
        TextArea UITextView   Done
        TabBar UITabBar Rectangle with separator line for now.
        Later we can implement a translucency effect which blurs the background similar to the native one.
        Done
        MenuBar - Same as Tabbar Done
        ToolBar UIToolBar Same as Tabbar Done
        TabButton UITabBarItem   Done
        ToolButton UIBarButtonItem   Done

       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.

      Figma

      – Buttons|https://developer.apple.com/videos/play/wwdc2021/10064/]

      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?

        Attachments

        1. qtdeclarative-413036-3.mp4
          21 kB
        2. Quick_controls.png
          Quick_controls.png
          356 kB
        3. QuickControls.mov
          3.68 MB
        4. UIKit_back_and_checkmark.png
          UIKit_back_and_checkmark.png
          624 kB
        5. UIKit_physical_accurate_dark_mode.png
          UIKit_physical_accurate_dark_mode.png
          330 kB
        6. UIKit_physical_accurate.png
          UIKit_physical_accurate.png
          337 kB
        7. UIKit_pixel_accurate.png
          UIKit_pixel_accurate.png
          692 kB
        8. UIKit_tree_expand.png
          UIKit_tree_expand.png
          373 kB
        9. UIKit_yellow_bg.png
          UIKit_yellow_bg.png
          358 kB
        10. UIKit.mov
          1.26 MB

          Issue Links

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

            Activity

              People

              Assignee:
              richard Richard Moe Gustavsen
              Reporter:
              andysh Andy Shaw
              Votes:
              7 Vote for this issue
              Watchers:
              14 Start watching this issue

                Dates

                Created:
                Updated:

                  Time Tracking

                  Estimated:
                  Original Estimate - Not Specified
                  Not Specified
                  Remaining:
                  Remaining Estimate - 0 minutes
                  0m
                  Logged:
                  Time Spent - 6 hours
                  6h

                    Gerrit Reviews

                    There are no open Gerrit changes