UIKit User Interface Catalog Part One (Image Views)

本文为大地瓜原创,欢迎知识共享,转载请注明出处。
虽然你不注明出处我也没什么精力和你计较。
作者微信号:christgreenlaw


2017-10-12日更新:
苹果官网删除了本文档,已经找不到这个文档了,好在我还有pdf版,现共享给大家。
链接:http://pan.baidu.com/s/1i5GKG9v 密码:9g6z


正如文档的名字,UIKit中的用户界面目录,其实简单的来讲,这篇文档就是把常见的界面组件列了个目录,大概介绍,而不深入。


Image Views

An image view displays an image or an animated sequence of images. An image view lets you efficiently draw an image (such as a JPEG or PNG file) or an animated series of images onscreen, scaling the images automatically to fit within the current size of the view. Image views can optionally display a different image or series of images whenever the view is highlighted. Image views support the same file formats as the UIImage class—TIFF, JPEG, PNG, Windows bitmap (bmp), Windows icon (ico), Windows cursor (cur), and X Window System bitmap (xbm) formats.

Image View显示一个图片、或者是一组图片的动画序列。Image View允许高效地绘制一张图片(JPEG or PNG)或者是一组动画序列的图片,自动地使这组图片适应当前view的大小。当Image View高亮时,Image View可选地可以展示一个不同的图片或者是一组图片。Image View支持UIImage所支持的相同格式--TIFF, JPEG, PNG, Windows bitmap (bmp), Windows icon (ico), Windows cursor (cur), and X Window System bitmap (xbm) formats。

Purpose. Image views allow users to:
View images within an app

Implementation. Image views are implemented in the UIImageView
class and discussed in the UIImageView Class Reference.
Configuration. Configure image views in Interface Builder, in the Image 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.

IB中有些属性不能设置,需要代码设置。也可以将所有的属性都代码设置,这个看你个人意愿。

ImageView

In addition, image views provide significant programmatic customization by modifying properties on the view objects and properties on whatever image object you have loaded into the view.

除此之外,image view可以通过修改view objects的属性来实现非常牛逼的programmatic自定义,也可以修改view中加载的image对象的属性。

Setting Image View Content

If you are displaying a single image, most image views require minimal configuration beyond setting the image. If you are displaying an animated series of images, you must also configure the animation settings.

如果你要显示单独的一张image,大多数image view除了设置image以外几乎不需要设置什么了。如果你要显示一系列图组成的动画,那么你必须配置animation settings。

When you first use an image view object to display a single image, you can select an image to display using the Image (image) field in the Attributes Inspector. If you did not choose an image in the Attributes Inspector, you must set the initial image by calling initWithImage: or by setting the image property to a UIImage object that describes the image you want to display.

首次使用image view对象来显示一个image时,你可以在Attributes Inspector中的image 域选择需要显示的image。如果你没这样做,你必须通过调用initWithImage:来设置初始image或者设置image属性来表明你想展示的image。

If you want to show a different image when the view is highlighted, you can specify this information in the Highlighted (highlightedImage) field. Alternatively, either call initWithImage:highlightedImage: when you initialize the image or set the highlightedImage property to the alternative image.

如果你想在view高亮时展示另一张图,你可以在Highlighted域设置此信息。同样地,要么使用initWithImage:highlightedImage:或者设置highlightedImage属性。

If you want your image view to display an animated sequence of images, you must do this programmatically. Because you cannot specify an array of images in the Attributes Inspector, you must write some code to tell the image view which images to use. To do this, set the animationImages property to an array of UIImage objects in the order in which they should be shown. Optionally set the highlightedAnimationImages property if you want to show a different animation while the view is highlighted.

如果你希望你的imageview展示一连串的image的动画,你必须用代码来做这件事。由于你不能在Attributes Inspector中设置图片数组,所以你必须用代码告知image view你想使用哪些image。要完成这项任务,按照image需要展示的顺序给animationImages属性赋值一个UIImage对象数组。如果你希望的话,你也可以同样设置高亮时的动画图片数组(highlightedAnimationImages)。

Important: All images associated with a UIImageView object should have the same scale value. If your application uses images with different scales, they may render incorrectly.

所有与UIImageView对象相关的images必须使用相同的scale值。如果使用不同的scale,也许他们会排列的有问题。

Specifying Image View Behavior

Use the Highlighted (highlighted) checkbox to specify whether the view should show the standard or highlighted image or image sequence.
You can change the image view’s state at any time.

用Highlighted checkbox来指明这个view是应该显示standard还是highlighted image 或 image sequences。任何时候你都可以修改image view的状态(state)。

If you are using an image sequence, you can instead configure the animation behavior programmatically:

  • Set the animationDuration to the desired animation period (in seconds). By default, this property is computed based on the number of images at 30 frames per second.
  • Set the animationRepeatCount to limit the number of iterations through the set of images. By default, this property has a value of zero, which means that the animation repeats forever.
    You start the animation by calling startAnimating.

如果你使用image序列,那么你就可以用代码来设置动画行为:

  • 设置animationDuration为你想要的动画周期长(以秒为单位)。默认情况下,这个属性按照每秒三十帧的速度依据图片的数量而计算得出。
  • 设置animationRepeatCount以限制这组图片的循环次数。默认情况下,这个值是0,表明这个动画永远循环下去。
    你可以通过调用startAnimating来开始动画。

Customizing Image View Appearance

You cannot customize the appearance of an image view directly. However, you can determine how images appear in the view by setting properties at the UIImage and UIView levels.

你不能直接地自定义image view的外观。然而,通过设置UIImage和UIView层级的属性,你可以决定view中的图片如何显示出来。

Setting View Content Mode

The view’s contentMode property specifies how the image should be scaled and aligned within the view. It is recommended (but not required) that you use images that are all the same size. If the images are different sizes, each will be adjusted to fit separately based on this mode.

view的contentMode属性指明了image在view中应该如何被缩放和对齐。推荐但是不强制的是:使用同样大小的图片。如果图片大小不同,那么每一个图片都会根据这个mode分别进行fit。

Creating Images

The image’s capInsets, leftCapWidth, and topCapHeight properties specify the width and height of a central portion of the image that should be scaled differently than the border areas (outside that central portion). The top and bottom border areas are tiled horizontally. The left and right border areas are tiled vertically. The corners are displayed as-is. Additionally, the image’s alignmentRectInsets property specifies portions of the image to ignore for alignment purposes (such as shadow and glow effects).

image的capInsets,leftCapWidth,topCapHeight属性指明了image的中间部分(central portion)的宽高应该不同地进行缩放,而不是边界地区(border area)。顶部底部的边界区水平堆叠,左右边界区竖直堆叠。而corners则按原样显示。除此之外,image的alignmentRectInsets属性指明了image不按照alignment purpose(例如阴影和发光效果)进行缩放的区域。

大地瓜碎碎念

上面这部分的意思就是说,把图片看做一个矩形,其中central portion是内部的另一个矩形,缩放时,只有central portion进行缩放,而四个边在对应方向上有缩放(左右两边上下缩放,上下两边左右缩放),四个角不缩放,按照原有样式显示。这种缩放方式保证了大多数情况下不同缩放样式中,图片的主要区域是按照比例的。只要图片的四周一圈没有重要信息,那么这种缩放方案将有很好的效果。不明白的同学在纸上画两个相互嵌套的矩形就明白了。

You can create images for images views in a number of ways, including:

  • Using the imageWithAlignmentRectInsets: method, which returns a derived image with nonzero alignment insets.
  • Using the resizableImageWithCapInsets: or resizableImageWithCapInsets:resizingMode: methods, which return a derived static image with nonzero cap insets. The image’s resizingMode property indicates whether the image should be scaled or tiled.
  • Using the animatedResizableImageNamed:capInsets:duration: or animatedResizableImageNamed:capInsets:resizingMode:duration: methods, which return a derived animated image with nonzero cap insets.
    These methods cannot be set after the image is created or loaded.

你有很多方式来为image view创建image,包括:

  • 使用imageWithAlignmentRectInsets:方法,此方法返回一个nonzero alignment insets的生成image。
  • 使用resizableImageWithCapInsets:或者resizableImageWithCapInsets:resizingMode: 方法,此方法返回一个nonzero cap insets的静态图片。image的resizingMode属性表明了image是否应该被scale或tile。
  • 使用animatedResizableImageNamed:capInsets:duration: 或 animatedResizableImageNamed:capInsets:resizingMode:duration: 方法,此方法返回nonzero cap insets的生成的动画图片。
    这些方法不可在image创建或加载之后进行设置。

Customizing Image Transparency and Alpha Blending

Transparency of an image view is defined by properties of both the underlying image and the view as follows:

  • If the view’s Opaque (opaque) flag is set, the image is alpha blended with the background color of the view, and the view itself is opaque. The view’s Alpha (alpha) setting is ignored.
  • If the view’s Opaque (opaque) flag is not set, the alpha channel for each pixel (or 1.0 if the image has no alpha channel) is multiplied by the view’s Alpha (alpha) setting, and the resulting value determines the transparency for that pixel.

image view的透明度由嵌入的image和view本身共同决定:

  • 如果view的不透明属性(opaque)flag有设置,image就根据view的背景色进行alpha blend,view本身是不透明的。view的alpha值就被忽略了。
  • 如果view的不透明属性(opaque)flag没设置,每个像素的alpha都和view的alpha相乘,得到最终的这个像素的透明度。

Important: It is computationally expensive to perform alpha compositing of non-opaque image views containing images with alpha channels. If you are not intentionally using the image alpha channel or the view’s Alpha setting, you should set the Opaque flag to improve performance. See the last bullet point of “Debugging Image Views” (page 46) for more information.

计算包含有alpha channel的image和非不透明的(也就是透明的 原文是non-opaque)image view所组成的最终alpha值是很耗费计算时间的。如果你不是非要有意地使用image alpha channel或者view的Alpha设置,你最好设置一下opaque flag来提升效率。更多信息参考末尾的Debugging Image Views。

Using Auto Layout with Image Views

You can create Auto Layout constraints between a image view and other user interface elements. You can create any type of constraint for a image view besides a baseline constraint.

你可以在image view和其他界面元素之间设置自动布局约束。除了baseline约束以外都可以设置。

You generally want the image view to fill the full width of your screen. To ensure that this happens correctly on all devices and orientations, you can create Leading Space to Superview and Trailing Space to Superview constraints, and set both values equal to 0. This will ensure that the image view remains pinned to the edges of the device screen.

一般来讲你需要image view铺满屏幕的全部宽度。要保证这个行为可以在任何设备和方向上都正确的执行,你需要创建Leading Space to Superview 和 Trailing Space to Superview这两个约束,两个值都设置为0。这将保证image view一直能够钉死在设备屏幕边上。

Making Image Views Accessible

Image views are accessible by default. The default accessibility traits for a image view are Image and User Interaction Enabled.
For general information about making iOS views accessible, see “Making Views Accessible” (page 21).

Internationalizing Image Views

Internationalization of image views is automatic if your view displays only static images loaded from your app bundle. If you are loading images programmatically, you are at least partially responsible for loading the correct image.
For resources in your app bundle, you do this by specifying the name in the attributes inspector or by calling the imageNamed: class method on UIImage to obtain the localized version of each image.
For images that are not in your app bundle, your code must do the following:

  1. Determine which image to load in a manner specific to your app, such as providing a localized string that contains the URL.
  2. Load that image by passing the URL or data for the correct image to an appropriate UIImage class method, such as imageWithData: or imageWithContentsOfFile:.
    For more information, see Internationalization Programming Topics .

Debugging Image Views

When debugging issues with image views, watch for these common pitfalls:

  • Not loading your image with the correct method. If you are loading an image from your app bundle, use imageNamed:. If you are loading an image from a file (with a full path or URL), use imageWithContentsOfFile:.

没使用正确的method来加载image。如果你从app bundle中加载图片,使用imageNamedL:。如果从文件加载image,比如说一个full path或者URL,那么使用imageWithContentsOfFile:方法。

  • Not making animated image frames the same size. This helps you avoid having to deal with scaling, tiling, or positioning differences between frames.

没把动画图片的帧设置成相同尺寸。这将帮助你避免处理帧之间scale、tile、positioning 上的不同。

  • Not using a consistent scale value for all animated image frames. Mixing images with different scale factors may produce undefined behavior.

对于所有的动画image帧没使用统一的scale 值。用不同的scale参数的混合image将会导致非定义行为。

  • Doing custom drawing in a subclass of an image view. The UIImageView class is optimized to draw its images to the display. UIImageView does not call the drawRect: method of its subclasses. If your subclass needs to include custom drawing code, you should subclass the UIView class instead.

在image view的子类中进行自定义drawing。UIImageView这个类已经对其image的绘画进行了优化。UIImageView不会调用其子类的drawRect:方法。如果你的子类需要自定义绘图,你应该去继承UIView类。

  • Not enabling event handling in subclasses if you need it. New image view objects are configured to disregard user events by default. If you want to handle events in a custom subclass of UIImageView, you must explicitly change the value of the userInteractionEnabled property to YES after initializing the object.
  • 如果你需要事件处理的话,你没在子类中启用事件处理。新的image view对象默认是忽略用户事件的。如果你需要在自定义的UIImageView的子类中处理事件,你必须显式地在初始化对象后将userInteractionEnabled属性设置为YES。
  • Not providing prescaled images where possible. For example, if you expect certain large images to be frequently displayed in a scaled-down thumbnail view, you might consider keeping the scaled-down images in a thumbnail cache. Scaling the image is a relatively expensive operation.

没在需要的地方提供预先缩放过的image。比如说,你需要一个特定的大图经常在缩小化的thumbnail view中显示,你就要考虑一下将缩小后的image存在thumbnail 缓存中。缩放image相对来说很expensive。

  • Not limiting image size. Consider prescaling or tiling large images. The MVCNetworking sample code project (QImageScrollView.m) demonstrates how to determine what model of iOS device your software is running on. You can then use that information to help you determine the image dimension thresholds to use when scaling or tiling.

没限制image 的尺寸。考虑提前缩放或者堆叠大的图片。MVCNetworking样例代码工程QImageScrollView.m阐述了怎样确定你的软件是泡在哪种iOS设备上。你可以使用这个信息来帮助你决定缩放或堆叠时image 的尺寸。

  • Not disabling alpha blending except where needed. Unless you are intentionally working with images that contain transparency (drawing UI elements, for example), you should generally mark the view as opaque by selecting the Opaque checkbox in the Attributes Inspector, or setting the opaque property on the view itself.
    For views that are not opaque, the device must perform a lot of unnecessary computation if alpha blending is enabled and the image contains an alpha channel. This performance impact is further magnified if you are using Core Animation shadows, because the shape of the shadow is then based on the contents of the view, and must be dynamically computed.

除了在必须的地方,没有将alpha blending 关闭。除非你有意地使用包含透明的图片(比如说画界面),一般来说你应该在Attributes Inspector中将Opaque checkbox 勾选以将其设置为opaque,或者将view本身的opaque属性进行设置。
对于非不透明的view来说,如果alpha blending启用了,image也包含了一个alpha channel,那么设备需要执行很多不必要的计算。如果你还使用了Core Animation的阴影,那么这个性能的影响将会非常大,因为阴影的形状是基于view的内容的,必须动态计算。

To learn more about how alpha blending works, see “Customizing Image Transparency and Alpha Blending” (page 45)

Elements Similar to an Image View

The following elements provide similar functionality to a image view:(原文此处误写为web view,作者大地瓜更正么么哒)

  • Button. You can set the background image of a button control (of type UIButtonTypeCustom). For more information, see “Buttons” (page 123).
  • Scroll View. An image view typically scales content up or down to fit the dimensions of the view. If you need to display an image with user-controlled zooming and scaling, you should place that image view inside a scroll view. For more information, see “Scroll Views” (page 69).
  • Custom Views. If you create a custom subclass of UIView, you can programmatically draw images inside its drawRect: method. (For maximum performance, you should do this only when absolutely necessary.) For more information, see “About Views” (page 14).
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,839评论 6 482
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,543评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 153,116评论 0 344
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,371评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,384评论 5 374
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,111评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,416评论 3 400
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,053评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,558评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,007评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,117评论 1 334
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,756评论 4 324
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,324评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,315评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,539评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,578评论 2 355
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,877评论 2 345

推荐阅读更多精彩内容