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
1
vote
2 answers

Size classes on Modal Views

I am trying to set different constraints for iPad and iPhone (4''). I have set Regular Height and Compact width constraints for iPhone. But these constraints are shown on 7.9'' iPad, 9.7'' iPad. These constraints are for a modal view. How do i make…
mdkr
  • 225
  • 2
  • 13
1
vote
2 answers

change color of uilabel based adaptive layout

I need to have different color of a label for iPad and iPhone, I know we can change font size for different size classes but is there any way we can set different color based on size class value I know there is code solution available but i was…
Arslan Asim
  • 1,232
  • 1
  • 11
  • 29
1
vote
0 answers

iOS 9 - Dynamically setting margins in UITableView cells

iOS 9, Xcode 7, Swift 2.2 I have a Storyboard containing one UIViewController, which in turn contains a single UITableView. The UITableView is pinned to the edges of the UIViewController's view using Constraints. Design Requirement When the app is…
Womble
  • 4,607
  • 2
  • 31
  • 45
1
vote
1 answer

Change cell layout when traitCollection changes

I'm having problems adjusting a cell's layout when the horizontal size class changes. My cell has a stackView and I want the axis to be Horizontal for Compact size class and Vertical for Regular. This is what I tried: override func…
LarsJK
  • 2,196
  • 18
  • 23
1
vote
0 answers

Adaptive swapping of View Controllers in response to Size Class Trait changes iOS 9

(I have read other answers on this subject, but they refer to older tech and practices.) I have also read: https://developer.apple.com/library/ios/featuredarticles/ViewControllerPGforiPhoneOS/TheAdaptiveModel.html I have an iOS app featuring 3 pages…
Womble
  • 4,607
  • 2
  • 31
  • 45
1
vote
1 answer

How to deal with adaptive layout in Xcode

I'm new to iOS development and I'm having some issues with the auto layout feature in Xcode 7. As the image attached, my circle progression view doesn't scales fine for the 3.5" iPhone and it certainly looks fine with the other size classes. Is…
J.Doe
  • 1,097
  • 1
  • 16
  • 34
1
vote
3 answers

AutoLayout on Xcode7

I am having a lot of trouble understanding the Autolayout and how it is working phenomenally for everyone else but me. The problem is, the constraints when they end up working for me for one resolution e.g. for iPad, fail to comply with another like…
Mohsin Khubaib Ahmed
  • 1,008
  • 16
  • 32
1
vote
1 answer

Multi-Entry Wrapping Xaml Grid

In a UWP app, I want to have a dynamic layout of a XAML Grid style control that will use all the horizontal space available of the screen. For example when I am on a small screen like a phone, I want the list to simply scroll down the screen like…
George M Ceaser Jr
  • 1,497
  • 3
  • 23
  • 52
1
vote
0 answers

Xcode Adaptive Layout - Specific image sizes

I'm building a UI for the iPhone in portrait mode only. The UI contains several images. The images are different sizes based on the device. For example, on an iPhone 5 a button is 250x250, but on an iphone 6 it's 295x295. The problem is that the…
RickR
  • 513
  • 4
  • 9
1
vote
2 answers

UIScrollView with Adaptive Layout

I have a UIScrollView inside a UIView and another UIView (the container view) inside the scroll view. Before adaptive layout I pinned the scroll view to fit the external view and set the width and height of the container view (that was pinned to the…
Luciano
  • 1,208
  • 2
  • 17
  • 36
1
vote
1 answer

How to get the width of the Custom TableviewCell using Autolayout and Size Classes

I use Any-Any Size in Storyboard and define the following constraints for UITableViewCell, Leading Space To SuperView -16.00px Trailing Space To SuperView -16.00px Top Space to SuperView 0.00px Bottom Space to SuperView 0.00px When I print the…
Rabindra Nath Nandi
  • 1,433
  • 1
  • 15
  • 28
1
vote
0 answers

UITableViewCell Row Height Changes Flicker - Font Sizes

I am using adaptive layout, and cannot find a solution to this simple problem. While setting the text size for iphone to 18px, and the ipad to 24px for a Basic Tableview cell. Like this I initially get the large font, and cell row height which then…
DogCoffee
  • 19,820
  • 10
  • 87
  • 120
1
vote
1 answer

How to get iAdBannerView to stretch across full width of Adaptive Layout Storyboard xcode 6

Just wondering how you are supposed to stretch the iAdBannerView across the full width of the Adaptive Layout Storyboard that exists in Xcode 6. When I try and stretch it to the corners (so I can set auto layout values), it does allow it to be…
Charlie S
  • 4,366
  • 6
  • 59
  • 97
1
vote
1 answer

Adaptive Layout UICollectionViewCell Size for Different iDevices

I am using adaptive layout for different iDevices screen sizes, I am having troubles showing two cells in portrait orientation. I designed a cell say 130 x 210 which looks perfect on iPhone 5, but when in iPhone 6 we have more 30 px, for which i…
0
votes
1 answer

How to achieve this kind of navigation in flutter?

I want you guys' insight on how this kind of navigation can be achieved in Flutter. How can we put navigation bar on the left side of the screen? How this can be done in a cleanest way? Source:…
Harish
  • 649
  • 5
  • 11