Deep understand iOS view - Drawing(1)

Here discusses the mechanics of drawing. -- 不要害怕自己写绘图代码，本身并不难，要想让自己的app成为自己想要的样子就要自己捋起袖子?加油干！

Images and Image Views

The basic general UIKit image class is UIImage . UIImage can read a stored file  

如果不需要动态创建图像，并且在app运行之前就已经创建好了，就可以把图像文件作为app的bundle的资源，支持的图像文件类型有HEIC, TIFF, JPEG, GIF, and PNG，据说iOS对PNG有着特别的偏爱，也可以通过其它方式获取图像，比如网络下载并转化为UIImage, 相反的，图像数据也可以保存为图像文件。

Image Files

把图像文件作为app的bundle的资源最常用的是通过UIImage initializer init(named:),which takes a string and returns a UIImage
wrapped in an Optional, in case the image doesn’t exist。 This method looks in two places for the image:
Asset catalog
Looking in the asset catalog for an image set with the supplied name. The name is case-sensitive. 

Top level of app bundle
We look at the top level of the app’s bundle for an image file with the supplied name. The name is case-sensitive and should include the file extension; if it doesn’t include a file extension, .png is assumed.

When calling init(named:) asset catalog is searched before the top level of the app’s bundle, 如果有多个asset catalogs 尽量避免使用同名文件，并且image data may be cached in memory，所以如果后面继续使用calling init(named:) 速度会很快。但是如果只取一次数据，则会对设备内存造成压力！可以通过

read an image file from your app bundle

using init(contentsOfFile:)，which expects a pathname string，pathname of a file within the bundle, such as path(forResource:ofType:)

High-resolution variants

On a device with a double-resolution screen, when an image is obtained by name from the app bundle, a file with the same name extended by @2x Similarly, if there is a file with the same name extended by @3x, it will be used on a device with a tripleresolution screen. This works for image(named:) and image(contentsOfFile:). 

on a device with a double-resolution screen, these methods will access pic@2x.png as a UIImage with a scale of 2.0:
 

let im = UIImage(named:"pic") // uses pic@2x.png
if let path = Bundle.main.path(forResource: "pic", ofType: "png") {
let im2 = UIImage(contentsOfFile:path) // uses pic@2x.png
}

Device type variants

A file with the same name extended by ~ipad will automatically be used if the app is running natively on an iPad, use this in a universal app. This works for image(named:) and path(forResource:ofType:)

例子：there is a file called pic.png and a file called pic~ipad.png, then on an iPad, these methods will access pic~ipad.png:

let im = UIImage(named:"pic") // uses pic~ipad.png
let path = Bundle.main.path(
forResource: "pic", ofType: "png") // uses pic~ipad.png

有许多benefits of an asset catalog

1. it can forget all about those name suffix conventions! 
2. it can be a vectorbased PDF

 

Image files and size classes

An asset catalog can distinguish between versions of an image intended for different size class situations

In the Attributes inspector for your image set, use the Width Class and Height Class pop-up menus to specify which size class possibilities

for example, if we’re on an iPhone with the app rotated to landscape orientation, and if there’s both an Any Height and a Compact Height alternative in the image set, the Compact Height version is used. These features are live as the app runs; if the app rotates from landscape to portrait, and there’s both an Any height and a Compact height alternative in the image set, the Compact Height version is replaced with the Any Height version in your interface, there and then, automatically.

It is also possible to associate images as trait-based alternatives for one another without using an asset catalog,You might do this, for example, because you have constructed the images themselves in code, or obtained them over the network while the app is running. The technique is to instantiate a UIImageAsset and then associate each image with a different trait collection by registering it with this same UIImageAsset. For example:

let tcreg = UITraitCollection(verticalSizeClass: .regular)
let tccom = UITraitCollection(verticalSizeClass: .compact)
let moods = UIImageAsset()
let frowney = UIImage(named:"frowney")!
let smiley = UIImage(named:"smiley")!
moods.register(frowney, with: tcreg)
moods.register(smiley, with: tccom)

Namespacing image files

当图像文件很多或者需要分成组时，可以考虑以下的方式

1) Folder reference

不需要把图像放在top level of your app bundle 可以放在app bundle文件夹内，通过几种方式可以在文件夹下搜索文件

• Call UIImage init(named:)    for example: if folder is called pix and image file is called pic.png, then name of image is "pix/pic.png"
• Call Bundle path(forResource:ofType:inDirectory:) to get the image file’s path, followed by UIImage init(contentsOfFile:).
• Obtain the bundle path (Bundle.main.bundlePath) and use NSString pathname and FileManager methods to drill down to the desired file.

2) Asset catalog folder

An asset catalog can provide virtual folders that function as namespaces. For example, an image set myImage might be inside an asset catalog folder called pix. If you check Provides Namespace in the Attributes inspector for that folder, then the image can be accessed through UIImage init(name:) by the name "pix/myImage".

3) Bundle

A fuller form of init(named:) is init(named:in:), where the second parameter is a bundle. This means you can keep images in a secondary bundle, such as a framework

 

Image Views

许多内置的Cocoa界面对象接受 UIImage 作为绘制自己的一部分，比如UIButton可以显示一幅图，UINavigationBar or UITabBar 可以有

一个背景图片。但是当我们只是需要显示一幅图片的时候，只需要传给 图像视图 UIImageView 就可以了，它是一种最方便灵活的方式。

Nib editor 在这方面提供了一些捷径。The Attributes inspector of an interface object that can have an image, including a UIImageView, will have a popup menu from which you can choose an image in your project.

A UIImageView can actually have two images,  image property and highlightedImage property

the value of the UIImageView’s isHighlighted property dictates which of the two is displayed at any given moment.

比如在table view cell 被高亮的时候会用到

A UIImageView is a UIView, so it can have a background color in addition to its image,  it can have an alpha (transparency) value, and so forth.  一幅图像可能有些区域是透明的，一个UIImageView如果没有背景色的话除了图像外是不可见的，A UIImageView without an image and without a background color is invisible， 可以替换 UIImageView的 image 或者设置为nil达到移除的目的。

How a UIImageView draws its image depends upon the setting of its contentMode property (UIView.ContentMode) (This property is inherited from UIView）For example,  .scaleToFill means the image’s width and height are set to the width and height of the view, 不管图像变形； .center means the image is drawn centered in the view without altering its size.

UIImageView’s clipsToBounds property if it is false, its image,, even if it is larger than the image view and even if it is not scaled
down by the contentMode, may be displayed in its entirety, extending beyond the image view itself.

Note: By default, the clipsToBounds of a UIImageView dragged into the nib editor from the Library is false. This is unlikely to be what you want!