1. 代码缩放

众所周知,图片 和 提供的UIImageView的尺寸合不上时,有三个模式可供选择:

aspectFill  保持原图比例,让图片短边完全处于UIImageView中,可能会导致图片溢出

aspectFit  保持原图比例,让图片长边完全处于UIImageView中,可能会导致图片留白

scale to fill 不保持原图比例,让图片缩放完全处于UIImageView中,可能会导致图片走样

问题是:有的图有一部分是纯色,需要部分可缩放,其他地方保持原样,于是用到UIImage的下列四个方法:

前面两个是类方法

@available(iOS 5.0, *)

open class func animatedResizableImageNamed(_ name: String, capInsets: UIEdgeInsets, duration: TimeInterval) -> UIImage? // sequence of files

@available(iOS 6.0, *)

open class func animatedResizableImageNamed(_ name: String, capInsets: UIEdgeInsets, resizingMode: UIImageResizingMode, duration: TimeInterval) -> UIImage?

后面两个是实例方法

@available(iOS 5.0, *)

open func resizableImage(withCapInsets capInsets: UIEdgeInsets) -> UIImage // create a resizable version of this image. the interior is tiled when drawn.

@available(iOS 6.0, *)

open func resizableImage(withCapInsets capInsets: UIEdgeInsets, resizingMode: UIImageResizingMode) -> UIImage // the interior is resized according to the resizingMode

很好理解,重点参数:

capInsets: 一张图片不变的部分,由于是个UIEdgeInsets,只能选择四条边挨着的部分不能变化了,如果中间有一块不能变化,边缘却要拉伸,办不到!

resizingMode: 变化的部分的绘制模式,是重叠平铺还是拉伸.

代码:

func resizeImage(){

//这个方法获取出来的image是nil,不知道为何

//        let dealOne = UIImage.animatedResizableImageNamed( "ivy", capInsets:UIEdgeInsets(top:30, left:30, bottom:30, right:30), resizingMode:.tile, duration:1.0)

//

let origin = UIImage(named: "ivy")

let dealOne = origin?.resizableImage(withCapInsets: UIEdgeInsets(top:30, left:30, bottom:30, right:30), resizingMode: .stretch)

imageView.image = dealOne

}

2. 用Image Asset调整

本人是可视化编程的拥护者,能少写代码就少写.试想别人累死累活敲一下午,咱几个拖拉就搞定,多cool.(前提是搞清楚拖拉的原理~_~)

选定Image Asset的一张图片,点击右下角的show slicing ,如图2-1

2-1

点开后,在右边的Slicing中选择切图的模式,是上下,左右,还是都要处理,center的Tiles(重复平铺)和Stratch(拉伸)也对应了中间部分的铺展模式. 如图2-2

2-2

PS: 如图所示,选了垂直模式.一共有三条线,oh mygod! 上下两条我可以理解,它们区分了不变的区域.但是中间那条我无法理解,尤其是中间和下方那条还被一层透明蒙了起来,不知道有什么作用.知道的能否告知下?

参考了两个帖子,加上自己的实践,依然不知道中间那条线的区别.但是用起来问题不大,毕竟只要不变的部分我们可以确定就OK了.

同理可得,水平模式和垂直水平混合模式.

还有一点,如果右边的slicing最初是None,那么你的界面长这样:如图2-3

2-3

点击 Start Slicing,出现三个按钮,如图2-4

2-4

左中右分别对应 水平 调整, 混合调整 和竖直调整.比如选择竖直调整,就会到了图2-2的界面了.

OK.完成!

还是需要运行一下来看实际效果的.通过两种方式的调整图片,是否你对ios的图片调整有了更清晰的认识呢?

效果:如图2-5

2-5

我设置眼睛那块是重复的,鼻子那里是隐藏的,而且是平铺模式,所以最终显示上,一共有三块重复的眼睛.耳朵和嘴巴都是垂直方向的边缘,不会变动.

至于水平上多的部分,嘿嘿,那是因为如果图片尺寸没有UIImageView的尺寸大,没有设置的地方就会平铺,可以继续设置水平方向.

注意: 

1 . 代码和Image Asset不能混用,二选一

2. UIImageView在xib或者storyboard上图片的表现不是最终结果,还是要运行看效果的.

参考:http://blog.csdn.net/cuibo1123/article/details/39486197/

http://benbeng.leanote.com/post/4%E4%B8%AA%E4%BD%A0%E9%9C%80%E8%A6%81%E7%9F%A5%E9%81%93%E7%9A%84Asset-Catalog%E7%9A%84%E7%A7%98%E5%AF%86

https://onevcat.com/2013/06/new-in-xcode5-and-objc/

demo: https://github.com/ivychenyucong/TestImageResize.git