Coding

Published on February 14th, 2017 | by Guest

0

Adaptive User Interface Design in iOS App Development

Gone are the days when there was just one iPhone and developers had to design the apps for that particular orientation. Nowadays, there are multiple sizes and screen sizes available for iOS devices. It can be a challenge for iOS designers to create a universal app that adapts its UI for all the available screen sizes, iOS design patterns and orientations. So, what can be done to design a pixel-perfect app?

A mobile app should support any size display or orientation of a device to offer a great user experience. It is now easier to build apps that are adaptive to the size and characteristics of the device they’re being accessed from. View Controllers in iOS and Auto Layout in Xcode can make your app adaptive.

Starting from iOS 8, the OS comes with a new concept – Adaptive User Interface. The introduction of Adaptive Layout caused a paradigm shift for iOS application designers. It is now possible to create a single layout that works on all the existing iOS devices.

This new UI design concept allows the developers to build an app UI that adapts to different devices irrespective of the size of the screen and orientation.

In order to achieve adaptive layout, you will have to make use of a concept called Size classes that is available in iOS 8 and up. This is the major aspect that makes adaptive layout possible. Size classes and auto layout together can be used for designing adaptive user interfaces. In iOS 8/9/10, the process of creating adaptive layouts is as follows:

You can start with the designing of a generic layout. The base layout supports most of the screen sizes and orientations. You can choose a particular size class and provide your layout specializations. For instance, if you want to increase the spacing between two labels when the device is in landscape orientation.

Size classes

Size classes are the main feature of adaptive design. With the help of size classes, developers can eliminate code and logic that addresses multiple screen sizes and orientations. It makes it easier to have just one interface for multiple devices.

There are two types of size classes: Compact and Regular. Each size class can be represented vertically and horizontally, and each device is assigned a class for both the orientations. A regular size represents large amount of screen space, such as on an iPad. It also includes interface paradigms that provide a perception of extra space, such as scroll views on iPhone devices.

The “compact” screen size refers to a smaller amount of space available. iPhone or iPod Touches usually fit into this category.

VerticallyHorizontally
iPhone PortraitRegularCompact
iPhone LandscapeCompactCompact
iPhone 6 Plus LandscapeCompactRegular
iPad PortraitRegularRegular
iPad LandscapeRegularRegular

Step 1: Selecting a Size Class in Interface Builder

Open up Main.storyboard inside the project. You will come across the canvas, which is shaped like a rectangle. While jarring at first, it displays a core component of adaptive design. When you look at the bottom of interface builder, you will be able to see a button that says wAny hAny.

wAny hAny stands for Any Width, Any Height that indicates that any changes to the user interface here apply to every size class. If you click the button, a grid appears that allows you to toggle between different size classes:

In the above example, Compact Width | Compact Height is selected and you can see a green dot in the blue grid. The green dot shows the size classes that are represented. In the example, changes only apply to 3.5, 4, and 4.7 inch iPhones in landscape.

Interface Builder uses the terms width and height while size classes use the terms vertical and horizontal. The width corresponds to horizontal and height corresponds to vertical.

If you have changed the currently selected size class, make sure that you switch back to Any Width | Any Height.

Step 2: Adding an Image

Drag an image view to the view controller’s canvas from the Object Library. Use the Size Inspector to set its X position to 0 points and its Y position to 72 points. Set the width to 600 points and height to 218 points. Open the Attributes Inspector and change the view’s mode to aspect fit and image to “Laptop”. The canvas should look like the image below:

Step 3: Adding a Label

Open the Object Library once again and drag a label onto the canvas. Opening up the Size Inspector, set the label’s X position to 16 points and its Y position to 312 points. For the size, set its width to 568 points and height to 242 points.

In the Attributes Inspector, make these changes:

set Text to “Silver Laptop

change Font Size to System 100.0 points

set Alignment to Center

set Lines to 0

Step 4: Adding Constraints

Let’s add constraints for the label and image view. At the bottom of the Interface Builder, click Reset to Suggested Constraints under the All Views in View Controller section. If this option is greyed out, make sure that one of the views in the canvas is selected.

The image view has the same white background as its containing view. It’s mandatory to change the view’s background color to make it look different. Select View from the document outline and change its background color to Group Table View Background color.

Step 5: Build and Run

At the top of Xcode, select the iPad Retina to use for the iOS simulator. Develop and run the app by pressing Command + R. The application seems to look fine for iPad, but developers need to ensure that it displays properly on every existing device.

Final Thoughts

Adaptive design is a great advancement in iOS development. With adaptive design, iOS apps can be developed for all the current iOS devices available in the market.

 

Author Bio:

Binay Jha has 16+ years of experience in software development industry. Currently associated with the management team of Software Development Company, he has a flair for writing on technology related topics.

Like this post? Share with your friends.
Share on Facebook
Facebook
0Tweet about this on Twitter
Twitter
Share on LinkedIn
Linkedin
Share on Reddit
Reddit
0Share on Tumblr
Tumblr
0Share on VK
VK
Email this to someone
email

Tags: , , , , , ,


About the Author

Contribution of guest authors towards Techno FAQ blog



Leave a Reply

Your email address will not be published. Required fields are marked *

Back to Top ↑
  • Browse by category

  • Start reading

    • Common SEO Mistakes Most Startup Businesses CommitCommon SEO Mistakes Most Startup Businesses Commit
      The Internet is a marketplace, and your website is your …
    • Minecraft 1.17.0.50 for Android Caves & Cliffs UpdateMinecraft 1.17.0.50 for Android Caves & Cliffs Update
      Have you already studied all the features of the Minecraft PE 1.17.0.50 update? If not, then this article will be very useful to you, because here we will tell you in simple words and about the most important thing about the most significant update of this year, namely Minecraft PE 1.17.0.50. This update is available to all users of operating systems and Android users. In the new update, players can find a large number of the most interesting and unique content, namely new ore, new mobs, blocks, and much more. Let’s take a look at all the features of this update below. Features of the Minecraft PE 1.17.0.50 update As mentioned earlier, this update has a lot of interesting and unique content. The Mojang dev studio is releasing more and more updates every week, with more and more content being added in step to update the Caves and Cliffs. For example, if you go back a little and remember the release of Minecraft PE 1.16.221, new items were introduced into this update, namely, new candles were added, which are presented in 16 different colors, as well as amethysts. We draw your attention to the fact that players can interact with candles, namely, they can be set on fire and, accordingly, extinguished. These candles are made of honeycomb and thread. Many players can find different uses for candles, but most often candles are used as decoration in the Minecraft world. Let’s go back to our Minecraft PE 1.17.0.50 update. This update has a large number of different features, for example, one of the features of this update is Copper Ore. This ore has the ability to oxidize. Copper blocks oxidize over time and acquire a characteristic greenish coating. Thanks to the greenish coating on the copper, players can see how old a particular structure is. At the same time, it is possible to stop the oxidation process; for this, simply cover these blocks with honeycombs. By the way, from copper, players can craft an item called Spyglass, as well as a block called Lightning Rod in Minecraft. Also, a new item will be added to the game, namely the Amethyst Geode, using which players can create new items. You can get amethyst material in geodes that are located underground. In geodes, players can find Budding Amethyst blocks on which amethyst crystals form. A spyglass …
    • Apple’s Business Strategy – It’s Not a WinnerApple’s Business Strategy – It’s Not a Winner
      When Steve Jobs returned to Apple in the 90’s, the …
    • How FileMaker Solutions Can Make Your Small Business More EfficientHow FileMaker Solutions Can Make Your Small Business More Efficient
      Are you struggling to mobilize your small business? There could …
    • How Do I Choose an RC Servo Motor?How Do I Choose an RC Servo Motor?
      Machines are equipment that make human life easier. Through the …
  • Advertisement

  • Recent comments

  • Subscribe to updates

    You can get the latest posts from Techno FAQ delivered to you via Email or RSS.

    Enter your email address:

  • Subscribe to our RSS feed
  • Advertisement

  • Find us on Facebook

  • Latest tweets

  • Advertisement