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
点开后,在右边的Slicing中选择切图的模式,是上下,左右,还是都要处理,center的Tiles(重复平铺)和Stratch(拉伸)也对应了中间部分的铺展模式. 如图2-2
PS: 如图所示,选了垂直模式.一共有三条线,oh mygod! 上下两条我可以理解,它们区分了不变的区域.但是中间那条我无法理解,尤其是中间和下方那条还被一层透明蒙了起来,不知道有什么作用.知道的能否告知下?
参考了两个帖子,加上自己的实践,依然不知道中间那条线的区别.但是用起来问题不大,毕竟只要不变的部分我们可以确定就OK了.
同理可得,水平模式和垂直水平混合模式.
还有一点,如果右边的slicing最初是None,那么你的界面长这样:如图2-3
点击 Start Slicing,出现三个按钮,如图2-4
左中右分别对应 水平 调整, 混合调整 和竖直调整.比如选择竖直调整,就会到了图2-2的界面了.
OK.完成!
还是需要运行一下来看实际效果的.通过两种方式的调整图片,是否你对ios的图片调整有了更清晰的认识呢?
效果:如图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
