This article isIOS 7 user interface transition guide: update the UI
Layout & Appearance)
Buttons on the Operation bar and bar (bars & Bar buttons)
Content View)
Controls (controls)
Temporary view (temporary views)
Update the UI
Layout & Appearance)IOS 7 has brought many changes to your app layout and UI. Changes in view controllers, coloring, and font effects will affect all uikit objects in your app.
View Controller)In iOS 7, The View Controller is full screen. The appearance of the View Controller on iOS 7 conveys a more refined sense of control. In particular, the new full-screen appearance allows you to specify the layout of each edge of the view. View Controller Interface
WantsfullscreenlayoutExpired. If you specify wantsfullscreenlayout = No as before, the visual controller in iOS 7 will display its content to an unexpected screen location. Uiviewcontroller provides the following attributes to adjust the View Controller's appearance: 1. edgesforextendedlayout: This attribute belongs to the uiextendededge type. It can specify four sides of a rectangle, or specify, all, and none. Edgesforextendedlayout is used to specify which side of the view needs to be extended, so the transparency of the Operation column is ignored. The default value of this attribute is uirectedgeall. 2. extendedlayoutincludesopaquebars: If you use an opaque operation bar, set extendedlayoutincludesopaquebars to no when setting edgesforextendedlayout. The default value is yes ). 3. automaticallyadjustsscrollviewinsets: if you do not want the content of the scroll view to be adjusted automatically, set this attribute to no (default value: Yes ). In iOS 7, The View Controller supports the transition animation between custom views. In addition, you can use the new API of iOS 7 to support user interaction during the live animation process. For more information, see the following two documents :《
Uiviewcontroller transfer animation Protocol ReferenceAnd 《
Uiviewcontroller transfer interaction protocol reference. IOS 7 allows the View Controller to change the style of the system status bar during app running. To enable this function, add the uiviewcontrollerbasedstatusbarappearance key to the info. plist file and set the value to yes. A good way to dynamically change the system status bar is to rewrite the preferredstatusbarstyle method and use an animation module to update the status bar appearance, and call the setneedsstatusbarappearanceupdate method .................................... .....
Use tint color)In iOS 7, coloring is
Uiview. The iOS 7 app uses coloring to define a key color. This color indicates "this is interactive", or indicates the selected state of the element. When you specify the coloring of a view, the color is automatically inherited to all subviews. Because
UiwindowsInherited from uiview, you can specify the coloring by setting the coloring attribute of the form:
- Window. tintcolor = [uicolor purplecolor];
If you do not specify a color for the form, the system default color is used. By default, the color of the view is nil, which means that the view uses the parent color. That is to say, even if you do not set the color, the view can always get a color value. In general, it is best to specify its color before the view is displayed on the screen. If you want the view to inherit the coloring of the previous level, set the coloring to nil. Important: iOS 7 does not support coloring through the appearance proxy API. When the warning box (alert) and the Action sheet appear, iOS 7 automatically fades the color of the Back View. To respond to this color change, the tintcolordidchange method needs to be rewritten to use the subclass of the custom view of tintcolor during rendering so that the rendering can be refreshed as appropriate. Note: In iOS 6, tintcolor can be used to color the background color, Tab bar, toolbar, search bar, and search bar range in the navigation bar. In iOS 7, you only need to use the bartintcolor attribute to color the background.
Fonts)IOS 7 introduces a dynamic font (dynamic type), which improves the font display in your app. When the mail body under the minimum font size is used as a dynamic font, it means: 1. The width, spacing, and height of all text are automatically adjusted. 2. You can specify different text styles in semantics: body, footer, and title. 3. It can have a good response to both dynamic fonts and disability-assisted oversized fonts. To enjoy the benefits of dynamic fonts, use the preferredfontfortextstyle method in the uifont class to generate text, instead of directly specifying the font name and size. IOS 7 ensures the optimal readability of each font.
Buttons on the Operation bar and bar (bars & Bar buttons)In iOS 7, the status bar is transparent, and other operation columns (navigation bar, Tab bar, toolbar, search bar, range selection bar under search bar) are translucent. Generally, you want to see your content behind the operation bar. Most operation columns blur the hidden content unless you provide a custom background image. To identify the position of the Operation bar, the barposition attribute is introduced in iOS 7 to help you specify when the custom background image needs to be tiled on the status bar. Uibarpositiontopattached indicates that the Operation bar is close to the top of the screen, and the background is extended up to the system status bar area. Relatively, the value uibarpositiontop indicates that the Operation column is located at the top of the current partial content (for example, at the top of the pop-up bubble) and does not provide a background for the status bar. By default, buttons on all columns are borderless. For details, see the "button on the bar" On page 18th ".
System Status Bar)Because the system status bar is transparent, you can see the following view through it. The style of the status bar is displayed according to the appearance of its content, including time, power, Wi-Fi signal, etc. Use the constant uistatusbarstyle to specify whether the black style or white style is used: uistatusbarstyledefault displays the black text content. It is applicable when the content behind the status bar is light. Uistatusbarstylelightcontent displays white text. It is suitable when the content behind the status bar is dark. In some cases, the background image in the navigation bar and search bar can be extended to the back of the status bar (for details, see the "navigation bar" section on page 22 and the "search bar and range selection" section on page 23 ). If there are no other columns under the status bar, the full screen height must be used for the content view. To learn how the View Controller is properly laid out, see "use View Controller" on page 11 ". In iOS 7, the status bar style can be changed when the app is running through an independent view controller. You can add the uiviewcontrollerbasedstatusbarappearance key to info. plist and set the value to yes.
Navigation Bar)The navigation bar helps you navigate through different information hierarchies and manage Screen Content selectively. IOS 7 iOS 6 iOS 7 makes it easy to add a search bar on the navigation bar. For more information, see "search bar and range selection bar" On page 16th ". * If you want to replace the returned arrow "<" with a custom image, you must create a corresponding mask. When navigating the scene animation, iOS 7 uses a mask to gradually fade the title of the previous level. For more information about the control attributes of the return button and mask image, see"
Uinavigationbar class reference". If you use the uibarpositiontopattached style to create a navigation bar background, make sure that the image contains the area of the system status bar. Specifically, you need an image with a high resolution of 128 pixels. The following table describes how iOS 7 treats variable navigation bar backgrounds of different heights. (For more information, see"
Uiimage class reference") Table 5-1 variable-size background image processing policy
Search bar & scope bar)Avoid using ultra-high background images to create custom projection under the navigation bar. This technology does not work in iOS 7, because Ultra-high images will be expanded up (in the direction of the system status bar, instead of extending down (below the navigation bar. If you want to add a projection to the navigation bar, you can create a custom image and use the shadowimage attribute to customize the projection image. The search bar receives text entered by the user. A range selection bar can be attached below. In iOS 7, iOS 6, and iOS 7, uisearchdisplaycontroller contains the displaysearchbarinnavigationbar attribute, so that you can put the search bar in the navigation bar, just like in the calendar app: if you use uibarpositiontopattached to create a background image for the search bar, make sure that the height of the image contains the height of the status bar. If you have created a variable-size background image, see Table 5-1 on page 15 to obtain more rules for adjusting the background image size on iOS 7. You can select the search result range in the range selection column. Note: The range selection Column cannot appear separately. It must appear under the search bar. IOS 7 iOS 6
Tab bar)The tab bar allows you to switch between different subtasks, views, and modes. If a custom icon is used for iOS 7 or iOS 6, you can use the selectedimage attribute in uitabbaritem to set the image in the pressed state. If the icon in the pressed status is not provided, the icon in the two statuses is the same.
Toolbar)The operation button for placing objects on the current screen or view on the toolbar. IOS 7 iOS 6 if you have created a variable-size background image, refer to the 15-page table 5-1 to obtain details about how iOS 7 processes images of different sizes.
Bar buttons)In iOS 6, buttons can have borders or borders. In iOS 7, there can only be no borders. For the sake of clarity, the navigation buttons in iOS 6 in iOS 7 often use text rather than graphics on the app bar in iOS 7. For example, the calendar app in iOS 7 uses inbox instead of inbox graphics: iOS 7 iOS 6 in earlier versions of IOS, the button image on the custom bar is automatically treated as "template image ". (Template image is used as a mask for the final image .) In iOS 7, you can use the following uiimage attribute to specify whether to process custom images as template images: 1. uiimagerenderingmodealwaystemplate. The image is used as a template image. 2. uiimagerenderingmodealwaysoriginal. The image is rendered as is. If you do not specify a processing method for an image, the image uses the default Processing Method of the view containing the image. For example, the tab bar uses the template processing method by default, and the Progress slider uses the original complete rendering processing method. Note: The template image will be colored according to the color of its parent structure (for more information, see "Use coloring" on 18 pages "). If you do not want the elements on the bar to be colored, set the uiimagerendering-modealwaysoriginal attribute for the image.
Content View)The content view is used to display custom app content. Because most of the content view's appearance systems are not provided, visual changes on iOS 7 have almost no impact on them. A big exception is the grouped aggregate table view, which has a huge change in the appearance on iOS 7.
Activity menu)The activity menu indicates a function that can respond to the selected content. It can be provided by the system or customized. You can use these functions through the activity View Controller provided by the system. When you click the share button, the activity View Controller will rise from the bottom of the screen. The system provides two buttons in the activity menu: 1. original rendered app icon-for example, Icon 2 in the email below. the style is the same as that of the button on the tab bar-for example, the third-party function of copying and printing icons below always uses the second style icon. If you want to provide a service in your app, you can create a simple, box-like template image. When creating a template image, follow the following guidelines: 1. use black or white, with appropriate Alpha transparency 2. do not use projection 3. the template image on the activity menu of the anti-sawtooth effect should be centered in the area, with a resolution of about 70x70 pixels.
Collection View)The set view is used to manage and arrange projects in order and present them in a customizable layout. In iOS 7, the set view supports custom transition animation. For more information, see"
Uicollectionviewtransition-LayoutClass reference ". The photo app uses the set view to display the image set and supports the transition animation between them.
Image view ):The image view displays an image or a series of dynamic images. In iOS 7,
UiimageviewContains the coloring attribute tintcolor. When the Image view contains a template image, tintcolor is applied to the image.
Map view ):The map view displays geographical data and supports most of the functions of built-in map applications. The map view in the photo application helps you view the geographical location information of the photo. In iOS 7, only one new class can be used.
MkoverlayrendererTo create a cover layer on the map view. To add a 3D appearance to a map view, you only need to assign a camera object to its camera attribute (
Mkmapcamera). For more information, see"
Mkmapview class reference".
Page View Controller)The page view controller is used to manage multi-page content. You can use rolling transfer or rolling page transfer animation. In iOS 7, two methods are used to specify (pageviewcontrollerpreferredinterfaceorientationforpresentation and pageviewcontrollersupportedinterfaceorientations ). The default view controller on the page of the iOS 7 simulator is displayed as follows:
Popover (IPAD only)In iOS 7, the background of popover is blurred and white, which means that the background of the popover content view can be transparent. IOS 7 iOS 6 Note: Do not use the uipopoverpreferredpresentationdirection API. This API will be discarded in iOS 7 soon.
Scroll View)The scroll view helps you view the content that exceeds the view boundary. The only difference between the view on iOS 6 and 7 is the appearance of the scroll bar. On iOS 7, you can use
UiviewcontrollerThe automaticallyadjustsscrollviewinsets attribute of to manage the interval between project groups in the rolling view.
Split View Controller (IPAD only ):Splitviewcontroller can be used to manage two view controllers. Also changed in iOS 7.
Table View ):Table view displays data in a list of multiple rows and columns. IOS 7 introduces new changes to the table view of a single row and a group. Note: The separatorinset attribute is of the uiedgeinsets type. By default, uiedgeinsets is used to set the upper, lower, and lower parameters of uitableviewautomaticdimension. Elements in the table view also have different styles in iOS 7.
Text View ):The text view accepts and displays multiple lines of text. Use the preferredfontfortextstyle method of the uifont class to obtain the text content displayed in the text view.
Web View ):The webpage view is the area where rich HTML content can be displayed. In iOS 7,
UiwebviewDisplays the content of a page.
Controls (controls)A control is a special UI element that allows users to view (obtain information) and interact with (operate on it ). The appearance of all iOS 7 controls has been upgraded, and most of them have new scales. Because
UicontrolYesfrom
UiviewYou can use the tintcolor attribute of the control to color them. For more information, see "use coloring" On page 11th ". Controls provided by the system support system-defined motion effects by default, and the appearance changes with the highlighted and selected status.
Date Picker)The Date Picker displays the date and time, including minute, hour, date, and year. Its overall size remains unchanged compared with iOS 6, but its appearance changes dramatically. The iOS 7 app embeds the Date Picker into the content, instead of presenting it separately in a pop-up view. For example, the calendar application dynamically expands a row of a table and embeds the Date Picker. When you specify a time, you do not need to leave the current add item view.
Add contact button)The add contact button is a uibutton of the uibuttontypecontactadd type, which can add user information to other text fields based on the text view. The size and appearance of the new contact button are changed in iOS 7.
Detail button)The detail expand button is a uibuttontypedetaildisclosure type uibutton, which indicates that the current project has additional details and related functions, and will be displayed in another table or view after you click it. In iOS 7, the detail expand button uses the same symbol as the info button. When the detail Show button appears in a row of the table, clicking other places in the row will not activate the button. On the contrary, this operation selects the row or triggers the behavior defined by the app.
Info button)The info button type is uibuttontypeinfolight or uibuttontypeinfodark. It indicates the configuration details entry of the app, and the new page sometimes appears on the back of the current view. In iOS 7, the info button uses the same image as the detail expand button. In iOS 7, the size and appearance of the info button have changed.
Text label)Text labels are used to present static text. By default, text labels use system fonts, so they look different on iOS 6 and 7. Make sure that the uifont method preferredfontfortextstyle is used to obtain the text displayed on the label.
Page Control)The page number control indicates how many views are opened and which one is currently displayed. In iOS 7, the page number control size and appearance have changed.
Selector (Language selector)The size of the selector in iOS 6 and iOS 7 remains unchanged. The appearance and interaction behavior of the language selector in iOS 7 is similar to that of the time selector and date selector.
Progress View ):The progress view is used to display the progress of tasks and processes. The size and appearance of the progress view (in the built-in mail client) have changed in iOS 7.
Refresh Control)The refresh control responds to the user-triggered refresh operation, which usually appears on the table. Its size and appearance change in iOS 7.
Rounded Rectangle Button)The rounded rectangle button is discarded in iOS 7. Replace it with the borderless button of the system. The corresponding type is uibutton of uibuttontypesystem. IOS 7 system buttons do not include backcorners and background styles. The system button can contain a graphic or text information. You can specify a color or inherit the parent color. IOS 7 system button iOS 6 rounded Rectangle Button note: In iOS 7, uibuttontyperoundedrect is redefined as uibuttontype-system. The app that uses the rounded Rectangle Button in iOS 6 is automatically converted to the appearance of the system button. If you want to display a button that contains a chamfer, use the uibuttontypecustom button. This type supports custom background images.
Segmented Control)The segment control consists of a series of segments. Each segment has a function equivalent to a button, and each button is displayed with a different view. The size and style of the segment control vary as follows in iOS 7. In iOS 7, iOS 6, and iOS 7, the segment control uses a single style, and the segmentedcontrolstyle attribute is no longer used.
Slider): The slider allows you to adjust a value continuously within the permitted range. The size and style in iOS 7 are as follows. In iOS 7, iOS 6, iOS 7, you can still use the following attributes to color the minimum and maximum orbital images (minimumtracktintcolor, maximumtracktintcolor, and thumbtintcolor ). If you set the minimumtrackcolor attribute to nil, the region inherits the parent color. If the value of maximumtracktintcolor or thumbtintcolor is set to nil, the default color is used for both regions.
Stepper): The stepper can increase or decrease a value by a constant value. Its size and appearance in iOS 7 have changed. In iOS 7, by default, the stepper treats an image with a custom increase or decrease position as a template image.
Switch ):The toggle is used to indicate two mutually exclusive options or States (most often used in table view ). The changes in iOS 7 are as follows: iOS 7 can continue to be colored in three states: open, off, and unavailable. The following three attributes are used for coloring: ontintcolor, tintcolor, and thumbtintcolor. In iOS 7, custom switched images are ignored by default.
Text Field ):The text field accepts the user's single-line input. The size and appearance of iOS 7 vary as follows: iOS 7 (two lines in the MAP) iOS 6 (two lines in the MAP) ensures that
UifontTo obtain and display the text in the text field.
Temporary view (temporary views)Action List, warning dialog box, modal view is three temporary views, they appear when you need special attention, or provide additional options or functions. Although the content of the action list and warning dialog box can be customized, their appearance can be customized very little. Therefore, you hardly need to consider how to make them look more beautiful on iOS 7. Because a modal view is essentially a type of view, you may also need to redesign the modal view to make it look more appropriate on iOS 7. Note: When a temporary view appears, iOS 7 automatically fades the standard view behind it. You may need to adjust your code to handle this color change. For more information, see "use coloring" On page 18th ".
Action sheet)The action list is used to display the selection of a series of user-triggered tasks. In iOS 7, the action list is transparent by default, including buttons without borders. In iOS 7, the constant uiactionsheetstyle is no longer used. On iOS 7 devices, the default appearance of iOS 7 is used regardless of the UI provided by the system (such as the UI of the action list. Note the potentially dangerous option in the action list -- Parameter in destructivebuttontitle
Initwithtitle: Delegate: cancelbuttontitle: destructivebuttontitle: otherbuttontitlesThe specified -- automatically uses the system red.
Warning dialog box (alert ):The warning dialog box displays important information that affects users' use of apps or devices. It looks like this on iOS 7. IOS 7 iOS 6 on iOS 7 devices, the UI provided by the system (such as the warning box) uses the style provided by the system, regardless of the currently running app style. If the alarm dialog box contains three buttons, the third button is displayed in a row under the two main buttons.
Modal View ):The modal view provides the self-carrying Function of the current task or workflow. In iOS 7, the modal view provided by the system uses the same appearance as before. In iOS 7, you can use custom objects and selective interaction controller objects to manage modal presentations. For more information about the transition animation of the custom View Controller, see the reference of the uiviewcontrolleranimatortransitioning protocol and
Uiviewcontrollerinteractivetransitioning Protocol Reference. Document revision history 2013-06-10 Apple official documents released 2013-06-20 Chinese translation version completed 2013-06-21 completed the first revision (semantic Revision) 2013-06-24 completed the second revision (logical Revision)
Transferred from:Http://www.cocoachina.com/newbie/basic/2013/0703/6526.html
