iOS 7过渡之--控件

来源:互联网 发布:新版淘宝店铺装修教程 编辑:程序博客网 时间:2024/06/10 00:50

Controls are UI elements that users either view (to get information) or interact with (to perform an action). All iOS 7 controls have an updated appearance, and most of them also have different metrics.

Because UIControl inherits from UIView, you can use a control’s tintColor property to tint the control. For more information about tinting views, see Using Tint Color.

By default, system-provided controls support system-defined animations and appearance changes that indicate highlighted and selected states.

Date Picker

A date picker displays components of date and time, such as minutes, hours, days, and years.

The overall size of the date picker is the same in iOS 7 as it is in iOS 6, but the appearance is very different.

iOS 7

image: ../Art/date_picker_7_2x.png

iOS 6

image: ../Art/date_picker_6_2x.png

iOS 7 apps tend to embed date pickers within the content instead of displaying them in a different view. For example, Calendar dynamically expands a table row to let users specify a time without leaving the event-creation view:

image: ../Art/inline_date_picker_2x.png

Contact Add Button

A Contact Add button—that is, a UIButton of type UIButtonTypeContactAdd—lets users add a contact’s information to a text field or other text-based view.

The size and appearance of the Contact Add button have changed in iOS 7.

iOS 7

image: ../Art/contact_add_7_2x.png

iOS 6

image: ../Art/contact_add_6_2x.png

Detail Disclosure Button

A Detail Disclosure button—that is, a UIButton of type UIButtonTypeDetailDisclosure—reveals additional details or functionality related to an item in a table or other view. In iOS 7, the Detail Disclosure button uses the same symbol as the Info button.

The size and appearance of the Detail Disclosure button has changed in iOS 7:

iOS 7

image: ../Art/detail_disclosure_7_2x.png

iOS 6

image: ../Art/detail_disclosure_6_2x.png

When a Detail Disclosure button appears in a table row, tapping elsewhere in the row doesn’t activate the button; instead, it selects the row item or triggers app-defined behavior.

Info Button

An Info button—that is, a UIButton of type UIButtonTypeInfoLight or UIButtonTypeInfoDark—reveals configuration details about an app, sometimes on the back of the current view. In iOS 7, the Info button uses the same symbol as the Detail Disclosure button.

The size and appearance of the Info button have changed in iOS 7.

iOS 7

image: ../Art/info_button_2x.png

iOS 6 (shown in Weather)

image: ../Art/info_weather_6_2x.png

Label

A label displays static text.

By default a label uses the system font, so it looks different in iOS 7 than it does in iOS 6.

iOS 7

image: ../Art/labels_7_2x.png

iOS 6

image: ../Art/labels_6_2x.png

Be sure to use the UIFont method preferredFontForTextStyle to get the text for display in a label.

Page Control

A page control indicates how many views are open and which one is currently visible.

The size and appearance of the page control have changed in iOS 7.

iOS 7 (control shown in Weather)

image: ../Art/page_control_weather_7_2x.png

iOS 6 (control shown in Weather)

image: ../Art/page_control_6_2x.png

Picker

A picker displays a set of values from which a user can choose.

The overall size of a picker is the same in iOS 7 as it is in iOS 6; its appearance and behavior in iOS 7 are similar to the appearance and behavior of the date and time picker.

iOS 7

image: ../Art/picker_7_2x.png

iOS 6

image: ../Art/picker_6_2x.png

Progress View

A progress view shows the progress of a task or process that has a known duration.

The size and appearance of the progress view—shown here in the Mail toolbar—have changed in iOS 7.

iOS 7

image: ../Art/progress_view_7_2x.png

iOS 6

image: ../Art/progress_view_6_2x.png

If you currently use the trackTintColor property to specify a tint for the progress view’s track, the track continues to use this tint in iOS 7. If you set trackTintColor to nil, the track uses the tint of its parent.

Refresh Control

A refresh control performs a user-initiated content refresh—typically, in a table.

The size and appearance of the refresh control have changed in iOS 7.

iOS 7

image: ../Art/refresh_control_7_2x.png

iOS 6

image: ../Art/refresh_control_6.png

Rounded Rectangle Button

The rounded rectangle button has been deprecated in iOS 7. Instead, use the system button—that is, aUIButton of type UIButtonTypeSystem.

iOS 7 system buttons don’t include a bezel or a background appearance. A system button can contain a graphical symbol or a text title, and it can specify a tint color or receive its parent’s color.

iOS 7 system button

image: ../Art/system_button_2x.png

iOS 6 rounded rectangle button

image: ../Art/rounded_rect_button_2x.png

NOTE

In iOS 7, UIButtonTypeRoundedRect has been redefined as UIButtonTypeSystem. An app that uses a rounded rectangle button in iOS 6 automatically gets the system button appearance when it links against iOS 7.

If you need to display a button that includes a bezel, use a button of type UIButtonTypeCustom and supply a custom background image.

Segmented Control

A segmented control is a linear set of segments, each of which functions as a button that can display a different view.

The size and appearance of the segmented control have changed in iOS 7.

iOS 7

image: ../Art/segmented_control_7_2x.png

iOS 6

image: ../Art/segmented_control_6_2x.png

In iOS 7, the segmented control uses a single style, and the segmentedControlStyle property is unused.

Slider

A slider lets users make adjustments to a value or process throughout a range of allowed values.

The size and appearance of the slider have changed in iOS 7.

iOS 7

image: ../Art/slider_7_2x.png

iOS 6

image: ../Art/slider_6_2x.png

iOS 7 continues to use the tints you specify for the minimum and maximum track images and for the thumb, using the properties minimumTrackTintColormaximumTrackTintColor, and thumbTintColor. If you set the minimumTrackColor property to nil, the area uses the tint of its parent; if you set themaximumTrackTintColor or thumbTintColor properties to nil, both areas use their default color.

Stepper

A stepper increases or decreases a value by a constant amount.

The size and appearance of the stepper have changed in iOS 7.

iOS 7

image: ../Art/stepper_7_2x.png

iOS 6

image: ../Art/stepper_6_2x.png

In iOS 7, by default, a stepper treats custom increment and decrement images as template images.

Switch

A switch presents two mutually exclusive choices or states (typically used only in table views).

The size and appearance of the switch have changed in iOS 7.

iOS 7

image: ../Art/switch_7_2x.png

iOS 6

image: ../Art/switch_6_2x.png

iOS 7 continues to use the tints you specify for the on and off—or disabled—states and for the thumb, using the properties onTintColortintColor, and thumbTintColor.

In iOS 7, by default, custom on and off images are ignored.

Text Field

A text field accepts a single line of user input.

The size and appearance of the text field have changed in iOS 7.

iOS 7 (two text fields shown in Maps)

image: ../Art/text_field_7_2x.png

iOS 6 (two text fields shown in Maps)

image: ../Art/text_fields_6_2x.png

Be sure to use the UIFont method preferredFontForTextStyle to get the text for display in a text view.

更多0

0 0