Yet because you must also manage all the changes yourself, laying out a simple user interface requires a considerable amount of effort to design, debug, and maintain. When a change occurs, you can literally make any change you want. In many ways, programmatically defining a view’s frame provides the most flexibility and power. Then, if a change occurred, you had to recalculate the frame for all the effected views. To lay out your user interface, you had to calculate the size and position for every view in your view hierarchy. The frame defined the view’s origin, height, and width in the superview’s coordinate system. Traditionally, apps laid out their user interface by programmatically setting the frame for each view in a view hierarchy. You can programmatically lay out the user interface, you can use autoresizing masks to automate some of the responses to external change, or you can use Auto Layout. There are three main approaches to laying out a user interface. If the user changes the font size while your app is running, both the fonts and the layout must adapt. This can change both the height and the width of any textual elements in your user interface. If a button is in the bottom-right corner of the view in English, it should be in the bottom left in Arabic.įinally, if your iOS app supports dynamic type, the user can change the font size used in your app. In general, the order of the user interface elements should match the layout direction. English, for example, uses a left-to-right layout direction, and Arabic and Hebrew use a right-to-left layout direction. Different languages use different layout directions. Third, changing the language can affect not just the size of the text, but the organization of the layout as well. Although these changes are typically more subtle than the language changes, the user interface still needs to adapt to the slight variation in size. Second, the format used to represent dates and numbers can change from region to region, even if the language does not change. German, for example, typically requires considerably more space than English. First, when you translate your user interface into a different language, the labels require a different amount of space. Internationalization has three main effects on layout. The layout of an internationalized app must take these differences into account and appear correctly in all the languages and regions that the app supports. Internationalization is the process of making your app able to adapt to different languages, regions, and cultures. Similarly, a photo collage must handle a wide range of image sizes and aspect ratios. For example, a news app needs to adjust its layout based on the size of the individual news articles. This commonly occurs in apps that display text or images. When your app’s content changes, the new content may require a different layout than the old. The content displayed by the app changes. Here are some common sources of internal change: Internal changes occur when the size of the views or controls in your user interface change. Auto Layout is also a key component for supporting Slide Over and Split Views on the iPad. Even through the screen size won’t typically change at runtime, creating an adaptive interface lets your app run equally well on an iPhone 4S, an iPhone 6 Plus, or even an iPad. Others, like support for different screen sizes, represent the app adapting to different environments. Most of these changes can occur at runtime, and they require a dynamic response from your app. You want to support different screen sizes. You want to support different size classes. The active call and audio recording bars appear or disappear (iOS). The user enters or leaves Split View on an iPad (iOS). Here are some common sources of external change: With each change, you must update the layout of your view hierarchy to best use the available space. This constraint-based approach to design allows you to build user interfaces that dynamically respond to both internal and external changes.Įxternal changes occur when the size or shape of your superview changes. If the image view’s size or position changes, the button’s position automatically adjusts to match. For example, you can constrain a button so that it is horizontally centered with an Image view and so that the button’s top edge always remains 8 points below the image’s bottom. Auto Layout dynamically calculates the size and position of all the views in your view hierarchy, based on constraints placed on those views.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |