iOS Assets Catalogs

Bye 1x 2x 3x

如果你的App要适配retina或者非retina的3.5寸、4寸、4.7寸的iPhone，为了最求最完美的图片显示效果，你需要1x 2x 3x三种图， 去跪求忙得像陀螺一样的设计师给切图？还是自己默默拿起PS or 写一套切图代码？

从iOS7开始有更好的解决方法了：Vector Assets！它提供了一种只需要一张图完美适配不同尺寸和分辨率的方案，从此不再重复切图，并且App的也变小了！不过这种方法只适用于非位图的内容，例如icon，并且Xcode的版本必须在6.x。

具体实现

选择xcassets，右键，“New image set”新建一个Image set，选中右侧的Attributes inspector菜单，在Scale Factors这一项中选择Single Vector



然后中间的操作区域会变成只有一个虚线框



将你的pdf格式的矢量图拖入这个框内即可，为了节省空间，你可以把你的矢量图尺寸尽可能的压缩，据说一张5像素宽的矢量图在拉伸到5,000,000像素宽时依然没有锯齿。

Change images’ color

（接上一节）如果想要在不同页面中使用相同图案不同颜色的图片，可以把Scale Factors下方的Render As的值设置为： Template Image



给image填入tintColor的方法如下：

// 获取图片，并设置图片的RenderingMode
UIImage *image = [[UIImage imageNamed:@"image"]imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];

_imageView.image = image;

// 设置图片的tintColor
_imageView.tintColor = [UIColor orangeColor];

其中RenderingMode有三种：

UIImageRenderingModeAutomatic

系统自动判断是Original还是Template。例如，navigation bars, tab bars, toolbars, and segmented controls会自动把它们的前景图片判断为Template；而image views和web views把图片判断为Original。

UIImageRenderingModeAlwaysOriginal

保留图片原来的颜色。

UIImageRenderingModeAlwaysTemplate

忽略图片原来的颜色，通过设置tintColor给图片着色

这里我们需要对图片的颜色进行修改，所以设置的是UIImageRenderingModeAlwaysTemplate。如果设置tintColor，则图片默认为透明。

Resize images

说到拉伸图片，以前我们的做法是：

UIEdgeInsets edgeInsets = UIEdgeInsetsMake(5, 5, 5, 5);

// 默认UIImageResizingModeTile填充方式
_imageView.image = [image resizableImageWithCapInsets:edgeInsets];

// 拉伸方式
_imageView.image = [image resizableImageWithCapInsets:edgeInsets resizingMode:UIImageResizingModeStretch];

上面代码的作用是将下面的图片除了四个圆角以外，其余的部分进行拉伸。

现在，Xcode提供了更加直观的图片拉伸方式。点击xcassets中相应的图片，在操作区域的右下角有一个Start Slicing按钮



点击Start Slicing按钮，图片变成这个，



点击图片上的按钮，可以看到有三种方式可以选择：只水平拉伸、水平和垂直都拉伸，只垂直拉伸：



我们选择水平和垂直都拉伸，系统会根据图片的圆角自动给出拉伸建议，你也可以自己做一些调整，再也不用自己把图片放大N倍盯着屏幕调整了。



拉伸后的效果如图：