Questions tagged [adaptive-layout]

Adaptive Layout is a technique for supporting multiple display sizes and orientations in iOS applications.

Technical Overview

Adaptive Layout has been available since iOS 8. Instead of specific device types, or orientations, it introduces the concept of Size Classes. A size class can be either Compact or Regular in Horizontal or Vertical directions. Additionally there is an Any size class which serves for general layout constraints.

Some examples:

  • Compact Width + Regular Height represents an iPhone in portrait orientation.
  • Any Width + Compact Height will apply to iPhones in landscape.

Each size class may have its custom layout, with its own set of constraints. Adaptive Layout uses a hierarchical approach to determine which rules to use:

  • Any rules are used for general use: If there are no specific rules in either Horizontal or Vertical layouts, the screen will show according to these constraints. This is the perfect place for defining shared layout rules
  • Use Regular or Compact to achieve custom layout rules for a specific subset of Size classes. For example, to achieve a speficic layout for iPhones in landscale mode, proper constraints must be installed in the Any Width + Compact Height size class.

To support this new approach UIKit was also extended with Trait Collections. A UITraitCollection object describes the properties of an user interface element, such as its display scale (Retina or Non-Retina resolutions), device idiom (iPhone or iPad) and its size class.

In case of any change in layout (e.g.: a rotation), developers can examine the new traits, and act accordingly. In order to support this new approach, previous rotation-focused methods have been deprecated in favor of handling transitions between different trait collections.

Where to start?

106 questions
4
votes
1 answer

How to set the font and button sizes same for iphone4s, 5 and different for iPhone6 and 6+ devices?

I am working on an iOS app and I observed the UI in iPhone 5,6,6+ all fonts are different device by device, but my requirement is button sizes and font sizes must be same for iPhone4s,5 and different for iPhone 6 and 6+.How can I achieve this in my…
Ramakrishna
  • 712
  • 8
  • 26
4
votes
3 answers

Use Adaptive Layout programmatically to resize static cells height for hCompact

In a portait-only word game I use static cells to display an IAP store: You can see my problem in the iPhone 4 screenshot above - the pink button (to watch video ads and receive 150 coins) at the bottom is not visible. Here is my Xcode screenshot…
Alexander Farber
  • 21,519
  • 75
  • 241
  • 416
4
votes
2 answers

Is it possible to design different layouts for iPad portrait and landscape mode using Size classes?

I have an issue that, I have two different UI designs for iPad portrait and landscape orientations. But, in size classes Regular|Regular meant for ipad portrait and landscape too. Is it possible to design two different layouts for ipad…
Bhanu Prakash
  • 1,493
  • 8
  • 20
3
votes
1 answer

Importing XFA form into AEM, change event hander doesn't fire

I have an XFA form (authored in Adobe Designer ES4) with a change event handler defined on a field. When the form is rendered as a PDF and opened in Reader, the change event handler works fine. However, when importing the XFA into AEM forms (Adobe…
yas
  • 3,520
  • 4
  • 25
  • 38
3
votes
1 answer

Storyboard: assign IBOutlet for multiple object per size class

Since Apple introduce Size Classes, whew, routine work might gone, I thought. Going further, realised it's not so easy, so comfortable like it seemed to be. My real purposes a bit different by I've set-up test project for illustration: I have one…
Injectios
  • 2,777
  • 1
  • 30
  • 50
2
votes
0 answers

how to make the UI look the same in all diffrent phones

I have an app that has a UI displays a question answer some letter buttons and stuff . the problem is that this UI looks diffrent in every diffrent phone for exemple: UI in the Redmi 8 phone Redmi 8 UI in the Oppo A31: Oppo A31 UI in the Redmi…
2
votes
2 answers

Adaptive Card Input.Date

How to Set Todays Date as Minimum value in Input.Date Action of Adaptive Card. When a user select date ,all Backdates & Previous dates need to be blocked and he can select only Dates after Today. I used:- "type":…
2
votes
4 answers

How to deal with safe area when using Size Classes?

I just created a simple red view and create 4 constraints for it (top, left, right, bottom). I am trying to make adaptive layout using size classes, but cannot achieve correct layout in "landscape right" orientation: In portrait mode it's all…
Gikas
  • 961
  • 1
  • 8
  • 20
2
votes
1 answer

Adaptive layout on Bootstrap 4: what is the minimum supported screen resolution of an extra small mobile device?

Bootstrap 4 documetration says: Extra small devices (portrait phones, less than 576px) It is clear that extra small are devices whose screen width is less than 576 px. Well, less than 576 px ... and how less? The grid cannot decrease to zero.…
Bogdan
  • 558
  • 2
  • 8
  • 22
2
votes
1 answer

Autolayout for UIButton in table view cell not working

I have added UIButton to my table view cell with autolayout but UIButton height constraint not working (Already set >=) Below is my autolayout constraint settings, Below is the xib design of cell,
Vandit Mehta
  • 2,572
  • 26
  • 41
2
votes
1 answer

Is it okay to mix autoresizing mask with autolayout?

I believe using autoresizing for orientational changes would be good while managing the UI with Autolayout. So many programmers are recommending against both at the same time,But As far as I understand it should be fine. Because Autoresizingmask is…
Appu
  • 136
  • 3
  • 14
2
votes
2 answers

Fix chatbox to bottom, or adapt height to content

NO JS, Only CSS, flexbox allowed JsFiddle : https://jsfiddle.net/ex9fmqxv/ .mdl-layout .mdl-layout__inner-container .mdl-layout__header .mdl-layout__drawer .mdl-grid .mdl-cell ul (list-msg adaptive height) div (chat box…
artSx
  • 1,560
  • 1
  • 12
  • 19
2
votes
2 answers

ios: text does not wrap correctly on iPhone 5S and earlier (4 inch and smaller devices)

I have a label that is supposed to wrap around. There are 4 constraints on it (top/bottom and leading/trailing - no other constraints). The label wraps around correctly on iPhone 6 i.e. 4.7" screen and iPhone 6 Plus i.e. 5.5" screen, But gets cut…
ishaq
  • 1,781
  • 1
  • 11
  • 19
2
votes
1 answer

How can I transition from a custom presentation controller to a modal during size class changes?

I have a view controller that I want to present modally if the horizontal size class is compact, and with a custom transitioning delegate otherwise, like so: if traitCollection.horizontalSizeClass == .Compact { …
Eddie K
  • 503
  • 4
  • 18
2
votes
0 answers

Android: make ImageViews standing in one row of GridView have equal height

I have a GridLayout with 1-3 columns, depends on orientation & screen size. Each GridLayout item is a vertical LinearLayout with ImageView and others (LinearLayout with TextViews etc). Images have different sizes. I've written a simple algorithm to…
Miha_x64
  • 5,973
  • 1
  • 41
  • 63