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
0 answers

How do I draw an adaptive vertical slash line?

I'm just learning the layout and I would like to make a page where there are blocks and lines between them and when you scroll, they will appear I need to draw a vertical line that will connect the blocks, but so that it was adaptive. I tried using…
Aidar
  • 9
  • 2
0
votes
1 answer

How to make the video background the white or transparent and change the header color?

Softly speaking, I'm not strong in JS. When we first time scroll a mouse, the video lightens up (opacity?) and the header text changes from white to black. Could you show how to implement this? I'll try to understand with a live example. Suitable…
Otkambinok
  • 17
  • 6
0
votes
1 answer

How to create adaptive frames that work with all iOS screen sizes?

I have created a frame that works well with iPhone 13 Pro max. However, the placement is not correct for devices with smaller screens. How can I edit my code, so it adjusts when on a device with a smaller or larger view? My code: struct…
steeezyboy
  • 31
  • 4
0
votes
1 answer

How to REALLY support different Phone sizes in flutter?

I read tons of tutorials and seen lots of video but basically none of them solved my problem, so the question as the title. My doubt is this: if I develop a Flutter app I debug using my iPhone, and I set for example the font size of a text to, say,…
Ale TheFe
  • 1,540
  • 15
  • 43
0
votes
1 answer

Moving a block in an adaptive

I make layout from Figma Webovio Made the following code /* =================================================================== */ .techno-articles { margin-top: 104px; } .techno-articles__container {} .techno__block_container…
wfamilyweb
  • 99
  • 1
0
votes
3 answers

How to correctly place an image outside the container, and make them adaptive, HTML/CSS?

Maket link: https://www.figma.com/file/hYoPHDHOzzgzEPo4crMmy1/UH15U7CD4WZkbhcW?node-id=2%3A334 Project link: https://plupiks.github.io/Real-Estate-LandingPage/ I have a layout, it has an image of a building. This image is outside of the container. I…
Vitaliy
  • 135
  • 7
0
votes
1 answer

Flutter Flexible in Card

i'm having problems using flexible widget in card. I used Constrained Box but i'd like to use a widget without setting width. But if i use Flexible widget, card doesn't show up anymore. My goal is to make text use all the available space without…
0
votes
1 answer

How to display specific elements on a page at a specific screen resolution

How to display specific elements on a page at a specific screen resolution. A kind of mobile version for the site, something like media queries, only which will display a certain block of js (react) / html (jsx) code at a certain resolution
dev_lit
  • 55
  • 6
0
votes
1 answer

Visual state not firing when reducing window

I have 3 visual states , with adaptivetrigger. When windows is increasing they firing well. But if window is reducing from biggest state to smaller , setters not working and elements reset they style to defaut like they dont have visualstates.
Vladislav
  • 9
  • 2
0
votes
1 answer

Set Timer in adaptive card

I am trying to build a microsoft adaptive card with timer on top of the card and once timer expires automatically a action should invoked. Is this possible in adaptive card?
Ashwini Jha
  • 757
  • 1
  • 8
  • 16
0
votes
2 answers

Align list items horizontally in adaptive design

Please see the JSFiddle. This is an adaptive design with "vw" parameters in the code. I want Text_1, Text_2 and Text_3 be aligned horizontally, which means that when i change the browser's window size, the distance from the left side of the screen…
HexenSage
  • 117
  • 2
  • 10
0
votes
1 answer

How can I make adaptive website with vuetify?

I want to make a adaptive website with vuetify : https://vuetifyjs.com/en/ so there will provide several versions of the website which will be used according to the device. Adaptive design will provide several designs with different sizes, namely…
moses toh
  • 12,344
  • 71
  • 243
  • 443
0
votes
0 answers

Place absolute positioned dropdown relative to global container

I have this html code: On button click dropdown (element "menu") shows. This dropdown have "position: absolute". All my page conditionally limited to container, and nothing…
Ikor Jefocur
  • 121
  • 4
0
votes
1 answer

Getting a UI to be adaptive for iPhone and iPad

I'm working on a xamarin app and the goal is to have the UI be adaptive for both phone and tablet and so far it seems Android has a far easier way to achieve this. I'm reading this article on the matter and it honestly don't make a lick of…
Eman
  • 1,093
  • 2
  • 26
  • 49
0
votes
2 answers

Adaptation for a mobile device, Google does not see that it is adaptive

(Google translate) https://elenanovias.com/en/ There is a site, I adapted it under the mobile., But search.google says that the site is not adaptive viewport