User Interface of iOS 7 - FREE Guru Level Training For Beginners (2014)

FREE Guru Level Training For Beginners (2014)

Chapter 9: User Interface of iOS 7

“Because of the nature of Moore's law, anything that an extremely clever graphics programmer can do at one point can be replicated by a merely competent programmer some number of years later.”- John Carmack

In this chapter, you will learn about user interface of iOS 7, including:

· Auto layout

· Constraints

The user interface of your app is what enables you to communicate with it. With iOS 7 Apple introduced several changes to the UI layout. You can use borderless buttons and such like because of the new UI. It is important that, as a beginner, you learn about auto layout.

Auto Layout

This is available in iOS6 and above and this enables you to calculate the values of the location and size of a view during runtime. So, the layout can change according to the screen but you won’t have to make many changes in your code. This is the only layout available to anyone using the Apple platform.

Fortunately, with XCode 5 you will have greater control over the layout and it will aid and assist you at your request. Unlike XCode 4 you can also create more view with iOS5 and this is due to the new and improved version of IB.

NSLayoutConstraint objects are utilized to define the correlation between the views in this iOS. What the iOS 7 does is that it will evaluate the constraints and then, find a solution so that the view can be positioned according to the constraints on the layout. Certain priorities are assigned to the view for this purpose but if you do not specify any priorities what happens is that the iOS will assign the highest priority. Constraints with higher priority levels are satisfied first. You can set the priority level with NSLayoutPriorityRequired.


You can add constraints where auto layout is concerned but if you do not do so, the interface builder (IB) will fix the height, width and position of the superview. You want to introduce constraints so that you can change the size, orientation and so your interface is responsive to these changes as well.

This can be done by adding constraints with control-drag. The control-drag constraint is perfect for those of you who know what kind of constraint you want to add.

You can also add constraints from the Auto Layout menu. Here are a few options that will enable you to manipulate the layout to your satisfaction:

Align- You can set alignment constraints in order to put the view in the center of the container or you can align it toward the left or right side of the view.

Resize- This will help you specify various ways via which you can resize the constraints
Pin-With this you can define the height of the view and you can also determine spacing constraints.

Issues- the Auto Layout Menu will suggest how you can add or reset constraints in order to resolve issues.


This chapter provides you with the basics of the Auto Layout menu. To read more about this check out the following link: