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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,332评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,508评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,812评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,607评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,728评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,919评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,071评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,802评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,256评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,576评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,712评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,389评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,032评论 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,798评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,026评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,473评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,606评论 2 350

推荐阅读更多精彩内容