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
2
votes
6 answers

How to load or not a JS script (into the head section) based on screen resolution?

on a website, I have these lines on the tag
Tormy Van Cool
  • 658
  • 10
  • 29
2
votes
2 answers

How to change the value of 'mutiplier' property of NSLayoutConstarint in iOS8

I use Adaptive layout features for designing an app. I take a IBOutlet of an "Aspect Ratio" constraint . I want to change the value of this Aspect Ratio Value to the double of current value. The problem is that "constraint" property can be set…
Rabindra Nath Nandi
  • 1,433
  • 1
  • 15
  • 28
1
vote
1 answer

How to implement nested navigation in a Two Pane layout in Jetpack Compose?

I'm developing an app with a Settings-like screen using Jetpack Compose, that adapts to different screen sizes. The app incorporates a NavGraph which has a top-level screen containing a LazyColumn. Clicking on an item in the LazyColumn takes the…
1
vote
1 answer

All elements of the page move after changing the size of the window

I am new to coding, my code moves when I change the size of the browser window (divs and pictures start moving up and down and as a result my web page can only be correctly visible in one window size. What should I change to adapt the page to…
Smith82
  • 19
  • 5
1
vote
1 answer

How to scale layout in mobile device for height

I'm building a mobile site that needs to be used equally on all mobile screens. All dimensions in the layout are obtained for a screen of 1080 for 1920, while only the width is scaled normally on a mobile device, scrolling appears in height. How can…
ToDoThis
  • 45
  • 6
1
vote
0 answers

Flutter full platform adaptiveness for iOS and Android

I would like to introduce full platform adaptiveness to my app. Currently I use Material for both iOS and Android version. I would like to show appropriate version of Widget depending on detected platform but I don't want to do this as shown on…
Ensei Tankado
  • 270
  • 2
  • 12
1
vote
2 answers

Updating constraints on orientation change

Below is the view in portrait mode (Image 1) and in landscape I wanted to show as (Image 2). I am facing issue to show in it properly in landscape. Image 1: I have setup constraints in storyboard. greenView: top: 0, leading: 0, trailing: 0, width:…
JiteshW
  • 2,195
  • 4
  • 32
  • 61
1
vote
1 answer

Rounding the height of a table cell in Swift

I need to calculate the cell height of the table and round it to a divisible value by 5. For example, when the cell size is 116, the correct height should be 120. The point is that I use the adaptive layout to calculate the cell height. One of the…
zyxman
  • 72
  • 5
1
vote
4 answers

IOS adaptive layout using Autolayout

I am working on IOS app and its my first app to be build on IOS. I have good experience of developing Android apps. So I have gathered basic information and knowledge about IOS development. I am working on autolayout. But I am not getting it work…
Android teem
  • 780
  • 2
  • 13
  • 36
1
vote
1 answer

Is horizontal size class still compact for iPhone 7 Plus on landscape?

As per references like this or this, I take that iPhone 7 Plus on landscape should have regular size class. This is the code in the current view controller, as per this reference: - (void) traitCollectionDidChange: (UITraitCollection *)…
atineoSE
  • 3,597
  • 4
  • 27
  • 31
1
vote
0 answers

Xcode/Swift Adaptive Layout Issues

I am currently in the process of testing if my app works on both iphone and ipad and setting up the respective autolayout. For some reason on this particular viewcontroller, when I switch from iphone to ipad 9.7 the viewcontroller does not change…
JustANoob
  • 65
  • 2
  • 14
1
vote
2 answers

IOS/Storyboard: Adapt view to different size devices

I have an app originally prototyped with an iphone 4. However, when I display it on an iphone 5 or above, it leaves a black border on the top and bottom as shown. How can I get it to fill up screen? Using the size inspector I have set the screen…
user6631314
  • 1,751
  • 1
  • 13
  • 44
1
vote
0 answers

Disable landscape orientation for iPhone only using size classes

I am using adaptive layout with size classes (iOS10). For an iPad I want to support portrait & landscape views, but for iPhone I only want to support portrait. I don't want to rotate screen for compact height. iPad is all fine and I have set-up…
MikeJ
  • 2,367
  • 3
  • 18
  • 23
1
vote
0 answers

How to design different layouts for iPad landscape and portrait mode?

I am working on an universal app both for iPad and iPhone devices that supports both landscape and portrait mode. In landscape it has more buttons in addition to what is there in portrait mode. For iPhone, i was able to design different layouts…
1
vote
1 answer

How to swap view controllers based on the change in the size class in iOS 9?

In my app, most of the views have major UI design differences when used on a small device (e.g. iPhone portrait) vs a large one (e.g. iPad fullscreen.) The basic architecture remains the same, but each View Controller needs to display a very…