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
0
votes
1 answer

Give width to an element in Adaptive Layout

I implemented a stackview and set fill - fill equally with Vertical axis. And for landscape mode I do Regular Width & Compact Height fill - fill with Horizontal axis. I want to give static width to first element of stackview in Landscape Mode. When…
Ali Ihsan URAL
  • 1,894
  • 1
  • 20
  • 43
0
votes
1 answer

Where to add view for specific size class (programmatically)

A common use case that can occur is needing to add a view for a specific size class. For example, wRegular. We might want to add an extra label to take advantage of the extra space. My question is where should I add this label, more specifically…
3366784
  • 2,423
  • 1
  • 14
  • 27
0
votes
0 answers

Designing landscape oriented iPad only app in Xcode 8.3.3

How do i specify width and height of an image view specifically for iPad pro 12.9" and 10.5" and 9.7" using storyboard and how to modify leading and trailing edges for 12.9" and 10.5" as these measurements vary and are there any other ways than…
Kalaivani
  • 424
  • 4
  • 20
0
votes
0 answers

Setting Adaptive Layout to all iPhone Screen Sizes

I want my application screen to look same in all iPhones screen sizes i.e 3.5 inch 4 inch 4.7 inch 5.5 Inch Display Devices I am stuck in setting its auto layout constraint Here's how my screen looks like: Can Anyone help me?
Jayesh Gyanchandani
  • 305
  • 2
  • 6
  • 16
0
votes
1 answer

iOS: Correct method to set or increase text field width

Our UITextField instances are using the "default" settings. They auto expand based on user input. We'd like to set them to a larger initial width so they don't have to increase their width. What is the correct way to do this to while maintaining…
Marcus Leon
  • 55,199
  • 118
  • 297
  • 429
0
votes
3 answers

Specific table layout

I want to make an adaptive table with vertical left header row on mobile like this: Header 1 data data data Header 2 data data data Header 3 data data data And normal table for desktop like this: Header 1 Header 2 Header 3 data data …
bashkovpd
  • 598
  • 1
  • 7
  • 21
0
votes
1 answer

HTML css table width adaptive

How to make table width adaptive? That means, if there is enough room, make it 100%; if the table is too wide and it is clipped, make it auto so that the table columns will not be clipped.
Dave
  • 759
  • 2
  • 9
  • 31
0
votes
0 answers

Translucent white covering my button in UITableView

I've set constraints and everything but there's a translucent white "screen" covering the lower part of my screen. It's not fixed to my tableview because when I scroll down the button gets pulled up and is visible but the screen stays there. At…
blob12
  • 141
  • 2
  • 12
0
votes
1 answer

tableview compressed, label off center and can't see button

I'm done with the backend part of my app but am STUCK on the front-end. I'm not sure what's going on but the tableview is compressed, the label is off center and the button has completely disappeared. I'm not making the cells individually; I only…
blob12
  • 141
  • 2
  • 12
0
votes
1 answer

Constraints in Xcode (Swift 2 iOS App)

I'm making a simple iOS app in xcode using Swift and while I have the entire backend figured out (and it works perfectly), I don't understand constraints AT ALL. I'm trying to make my layout adaptive so it works on all iphone screens but I'm having…
blob12
  • 141
  • 2
  • 12
0
votes
2 answers

How can I make my app look alike in both portrait and landscape view?

This is my constraint I have made use of auto layout in my app, all the UI elements are visible in portrait mode: But the view is incomplete in landscape mode. How can I make my app look alike in both portrait and landscape view? I am using Swift…
Manee ios
  • 1,112
  • 11
  • 14
0
votes
1 answer

Designing adaptive layout is not workable due to weird proportion in the storyboard

I am trying to program with the adaptive layout of the XCode 7, and now am facing a major problem with designing the user interface. My problem is that the designing of the storyboard is not reflecting what is happening on the actual app on both…
Kann
  • 385
  • 1
  • 6
  • 22
0
votes
0 answers

Adaptive font and UI controls for portrait iPhone

I'm using auto layout for my project. I use the size class "compact width" and "regular height" for all portrait iPhones. I basically designed it using iPhone 6 metrics selected in the size inspector. My questions are: I need to fix the labels and…
0
votes
1 answer

Invisible and not selectable objects in cells scrolling down a long static table view in IB

Actually I'm using XCode 7 and I'm trying to lay out a static table view in IB. I have "sizes classes" ticked (adaptive layout) and the table view is taller than the default square scene of 600x600 points. I can work fine with the cells in the top…
0
votes
0 answers

Buttons are displayed as disabled on UIViewController in storyboard

I have developed my app using storyboards with size:iPhone3.5inch in simulated metrics..My app is working fine where after designing nearly 10 screens of my app, my storyboard showing some weried behaviour (Described below With image).. In my menu…
soumya
  • 3,801
  • 9
  • 35
  • 69