UIKit User Interface Catalog Part One (About Views)

本文為大地瓜原創,歡迎知識共享,轉載請注明出處。
雖然你不注明出處我也沒什么精力和你計較。
作者微信號:christgreenlaw


2017-10-12日更新:
蘋果官網刪除了本文檔,已經找不到這個文檔了,好在我還有pdf版,現共享給大家。
鏈接:http://pan.baidu.com/s/1i5GKG9v 密碼:9g6z


正如文檔的名字,UIKit中的用戶界面目錄,其實簡單的來講,這篇文檔就是把常見的界面組件列了個目錄,大概介紹,而不深入。


About Views

Views are the building blocks for constructing your user interface. Rather than using one view to present your content, you are more likely to use several views, ranging from simple buttons and text labels to more complex views such as table views, picker views, and scroll views. Each view represents a particular portion of your user interface and is generally optimized for a specific type of content. By building view upon view, you get a view hierarchy.

Purpose. Views allow users to:

  • Experience app content
  • Navigate within an app

Implementation. Views are implemented in the UIView class and discussed in UIView Class Reference.
Configuration. Configure views in Interface Builder, in the View section of the Attributes Inspector. A few configurations cannot be made through the Attributes Inspector, so you must make them programmatically. You can set other configurations programmatically, too, if you prefer.

Content of Views

所有的UIKit中的view都是UIView的子類。當預先定義好的view不能滿足需求時,你可以自定義view來進行繪圖和事件處理。

Use the Mode (contentMode) field to specify how a view lays out its content when its bounds change. This property is often used to implement resizable controls. Instead of redrawing the contents of the view every time its bounds change, you can use this property to specify that you want to scale the contents or pin them to a particular spot on the view.

The Tag (tag) field serves as an integer that you can use to identify view objects in your app.

Behavior of Views

By default, the User Interaction Enabled (userInteractionEnabled) checkbox is selected, which means that user events—such as touch and keyboard—are delivered to the view normally. When the checkbox is unselected, events intended for the view are ignored and removed from the event queue.

默認情況下the User Interaction Enabled (userInteractionEnabled) checkbox是選中的,也就是說,用戶的事件--例如觸摸和鍵盤--都正常的傳遞給view。當這個checkbox不被選中時,view的事件就被忽略了,從事件隊列中被移除。

The Multiple Touch (multipleTouchEnabled) checkbox is unselected by default, which means that the view receives only the first touch event in a multi-touch sequence. When selected, the view receives all touches associated with a multitouch sequence.

The Multiple Touch (multipleTouchEnabled) checkbox默認是不選中的,意味著view在multi-touch序列中只會接受第一個touch事件。當選中時,就會接受所有與multitouch序列相關的touch。

Views have a number of properties related to drawing behavior:

  • The Opaque (opaque) checkbox tells the drawing system how it should treat the view. If selected, the drawing system treats the view as fully opaque, which allows the drawing system to optimize some drawing operations and improve performance. If unselected, the drawing system composites the view normally with other content. You should always disable this checkbox if your view is fully or partially transparent.

The Opaque (opaque) checkbox 告訴繪圖系統應該如何處理view。選中的話,繪圖系統將view視為完全不透明,這會讓繪圖系統優化一些繪圖操作,提升性能。如果沒選中,繪圖系統就正常地將其和其他內容繪制到一起。如果你的view是全透明或半透明的,你總是應該disable這個CheckBox。

  • If the Hidden (hidden) checkbox is selected, the view disappears from its window and does not receive input events.

If the Hidden (hidden) checkbox選中了,這個view就從window上消失了,不會接受任何輸入事件。

  • When the Clears Graphics Context (clearsContextBeforeDrawing) checkbox is selected, the drawing buffer is automatically cleared to transparent black before the view is drawn. This behavior ensures that there are no visual artifacts left over when the view’s contents are redrawn.

When the Clears Graphics Context (clearsContextBeforeDrawing) checkbox 選中時,在view繪制之前,繪圖buffer自動清除為透明的黑色。這個行為保證了當view的內容重繪時,不會有多余的可視化內容。

  • Selecting the Clip Subviews (clipsToBounds) checkbox causes subviews to be clipped to the bounds of the view. If unselected, subviews whose frames extend beyond the visible bounds of the view are not clipped.

選中 the Clip Subviews (clipsToBounds) checkbox 會導致subview被view的邊界所剪切。如果不選中,即使subview的frame如果超出了view的可視區域,也不會被剪切。

  • When the Autoresize Subviews (autoresizesSubviews) checkbox is selected, the view adjusts the size of its subviews when its bounds change.

當the Autoresize Subviews (autoresizesSubviews) checkbox 選中時,view會自動在bounds改變時調整subview的大小。

Appearance of Views

Background Color and Alpha

Adjusting the Alpha (alpha) field changes the transparency of the view as a whole. This value can range from 0.0 (transparent) to 1.0 (opaque). Setting a view’s alpha value does not have an effect on embedded subviews.

透明度0.0<->1.0,沒啥可解釋的。設置view的透明度不影響其嵌套的subview的透明度。

Use the Background (backgroundColor) field to select a color to fill in the entire frame of the view. The background color appears underneath all other content in the view.

使用the Background (backgroundColor) field將view的整個frame填滿。背景色在其他所有view中的內容之下。

Appearance Proxies

You can use an appearance proxy to set particular appearance properties for all instances of a view in your application. For example, if you want all sliders in your app to have a particular minimum track tint color, you can specify this with a single message to the slider’s appearance proxy.

可以使用一個appearance proxy為APP中某個view的所有實例設置特定的外觀屬性。 比如說,如果你希望你app中的所有slider都有一個特定的 minimum track tint color,你可以給slider的appearance proxy發送一條消息。

There are two ways to customize appearance for objects: for all instances and for instances contained within an instance of a container class.

  • To customize the appearance of all instances of a class, use appearance to get the appearance proxy for the class.
[[UISlider appearance] setMinimumTrackTintColor:[UIColor greenColor]];

要設置某個類的所有實例的外觀,使用 appearance來獲取類的外觀代理(appearance proxy)。

  • To customize the appearances for instances of a class when contained within an instance of a container class, or instances in a hierarchy, you use appearanceWhenContainedIn:
    to get the appearance proxy for the class.
[[UISlider appearanceWhenContainedIn:[UIView class], nil]
  setMinimumTrackTintColor:[UIColor greenColor]];

要自定義一個container class實例中的某個類的實例的外觀,或者一個層級結構中的實例,使用appearanceWhenContainedIn:獲得類的外觀代理。
就是可以將指定的容器類中的某類實例全部定制化。沒有聲明的容器類中的該類則不受影響。

NOTE

You cannot use the appearance proxy with the tintColor property on UIView. For more information on using tintColor, see Tint Color.
不能通過外觀代理來使用UIView的tintColor屬性。

Tint Color

Views have a tintColor property that specifies the color of key elements within the view. Each subclass of UIView defines its own appearance and behavior for tintColor. For example, this property determines the color of the outline, divider, and icons on a stepper:

view有一個tintColor屬性指明了view中關鍵元素的顏色。每個UIView的子類都為tintColor定義了獨有的外觀和行為。比如說,這個屬性決定了stepper的outline、divider、icons的顏色。

stepper

The tintColor property is a quick and simple way to skin your app with a custom color. Setting a tint color for a view automatically sets that tint color for all of its subviews. However, you can manually override this property for any of those subviews and its descendants. In other words, each view inherits its superview’s tint color if its own tint color is nil. If the highest level view in the view hierarchy has a nil value for tint color, it defaults to the system blue color.

tintColor屬性是給你的app賦值自定義顏色的簡單快速的方式。為一個view設置tintColor,就也自動地設置了其subview的tintColor。然而,你可以為任何subview以及其descendants手動重寫這個屬性。換句話說,如果view自己的tintColor是nil的話,每個view都繼承其superview的tintColor。如果層級結構中最高層的view的tintColor是nil,那么就默認是系統的藍色。

Template Images

In iOS 7, you can choose to treat any of the images in your app as a template—or stencil—image. When you elect to treat an image as a template, the system ignores the image’s color information and creates an image stencil based on the alpha values in the image (parts of the image with an alpha value of less than 1.0 get treated as completely transparent). This stencil can then be recolored using tintColor to match the rest of your user interface.

在iOS 7中,你可以將任何app中的圖片都當做模版圖片。當你選擇將一個圖片當做模版時,系統就忽略了圖片的顏色信息,而基于其圖片的alpha值生成一個圖片模版(圖片中alpha值小于1.0的話就會被處理成完全透明)。這個模版接下來就可以用tintColor來重新上色來match用戶界面。

By default, an image (UIImage) is created with UIImageRenderingModeAutomatic. If you have UIImageRenderingModeAutomatic set on your image, it will be treated as template or original based on its context. Certain UIKit elements—including navigation bars, tab bars, toolbars, segmented controls—automatically treat their foreground images as templates, although their background images are treated as original. Other elements—such as image views and web views—treat their images as originals. If you want your image to always be treated as a template regardless of context, set UIImageRenderingModeAlwaysTemplate; if you want your image to always be treated as original, set UIImageRenderingModeAlwaysOriginal.

默認情況下,an image (UIImage) is created with UIImageRenderingModeAutomatic.如果你的圖片設置了UIImageRenderingModeAutomatic ,它就會根據上下文被當做模版或者是原始文件。特定的UIKit元素--包括navigation bars, tab bars, toolbars, segmented controls--自動地將其foreground images當做模版,盡管其background images被處理為original。其他的元素--例如image views and web views--將其圖片都當做originals。如果你想讓你的圖片不管在任何上下文中都當做模版,set UIImageRenderingModeAlwaysTemplate; 如果你想讓你的圖片永遠被當做是original, set UIImageRenderingModeAlwaysOriginal。具體代碼如下面這段:

To specify the rendering mode of an image, first create a standard image, and then call the imageWithRenderingMode: method on that image.

UIImage *myImage = [UIImage imageNamed:@"myImageFile.png"];
myImage = [myImage imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];

Using Auto Layout with Views

The Auto Layout system allows you to define layout constraints for user interface elements, such as views and controls. Constraints represent relationships between user interface elements. You can create Auto Layout constraints by selecting the appropriate element or group of elements and selecting an option from the menu in the bottom right corner of Xcode’s Interface Builder.

自動布局系統允許你為用戶界面的元素(例如view和control)定義布局約束。約束代表了用戶界面元素之間的關系。你可以通過選擇合適的元素或者一組元素并且從Xcode IB的右下角界面菜單中選擇一個選項,來創建一個自動布局約束。

Auto layout contains two menus of constraints: pin and align. The Pin menu allows you to specify constraints that define some relationship based on a particular value or range of values. Some apply to the control itself (width) while others define relationships between elements (horizontal spacing). The following tables describes what each group of constraints in the Auto Layout menu accomplishes:

自動布局包含兩個約束菜單:pin和align。Pin菜單允許你指明約束以定義一些基于特定值或者范圍值的relationship。一些是應用到control自身(例如width)另一些定義了元素之間的relationship(例如horizontal spacing)。下面的表格描述了自動布局菜單中每組約束的功能:

布局約束描述表

The “Constant” value specified for any Pin constraints (besides Widths/Heights Equally) can be part of a “Relation.” That is, you can specify whether you want the value of that constraint to be equal to, less than or equal to, or greater than or equal to the value.

For more information, see Auto Layout Guide.

Making Views Accessible

To enhance the accessibility information for an item, select the object on the storyboard and open the Accessibility section of the Identity inspector.

要加強一個item的accessibility information,選中故事版上的對象,打開Accessibility section of the Identity inspector。

For more information, see Accessibility Programming Guide for iOS.

Debugging Views

When debugging issues with views, watch for this common pitfall:
Setting conflicting opacity settings. You should not set the opaque property to YES if your view has an alpha value of less than 1.0.

debug view時,注意一下這個陷阱:
設置了沖突的透明度設定。如果你的alpha值小于 1.0的話,
不應該將 opaque屬性設置為YES

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容