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.
|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
|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
|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|
|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|
|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|
|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, firstname.lastname@example.org, email@example.com
- 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.
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.
Imagine style source code - can be used to see how the 9p images look like. A sketch design file is also here.
- lets do one control at a time
- 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.
- 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.
- create gerrit repo
- create style boilerplate code
- for each control, perhaps copy in imagine style QML code as a starting point?