iOS中图片(UIImage)拉伸技巧

简介: iOS中图片(UIImage)拉伸技巧

iOS中图片拉伸技巧与方法总结


一、了解几个图像拉伸的函数和方法


1、直接拉伸法


简单暴力,却是最最常用的方法,直接将图片设置为ImageView的image属性,图片便会随UIImageView对象的大小做自动拉伸。这种拉伸的方法有一个致命的缺陷,它会使图像发生失真与形变。


2、像素点的拉伸



- (UIImage *)stretchableImageWithLeftCapWidth:(NSInteger)leftCapWidth topCapHeight:(NSInteger)topCapHeight;


这个函数我们可以用来拉伸类似QQ,微信的聊天气泡背景图,它的两个参数分别leftCapWidth和topCapHeight,这两个参数给定一个坐标,比如:


   UIImage * img= [UIImage imageNamed:@"11.png"];

   img = [img stretchableImageWithLeftCapWidth:1 topCapHeight:1];

这段代码的意思是将图片从左起第2列,上起第2行,坐标为(2,2)的像素点进行复制。将图片进行拉伸。这个方法和上面的方法比起来似乎灵活性更多了,但其也有它的一些局限,如果被拉伸的图片中间也有需要拉伸的像素,这个方法就无能为力了,例如,如下的一张图片,我们需要将其拉伸放大:


image.png


便会出现这样的效果:

image.png



这明显和我们的意图是不符的,那么,我们可以使用下面的方法。


3、区域的拉伸


- (UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets;


这个函数需要设置一个UIEdgeInsets参数,UIEdgeInsets结构体如下:


typedef struct UIEdgeInsets {

   CGFloat top, left, bottom, right;

} UIEdgeInsets;

它分别对用了图片进行拉伸的区域距离顶部、左部、下部、右部的像素。比如,一个10*10像素的图片,将UIEdgeInsets参数全部设置为1,则实际拉伸的部分就是中间的8*8的区域的像素。有一点需要注意,这个方法默认使用的拉伸模式是区域复制,比如还是上面的图案,如下代码拉伸:


   UIImage * img= [UIImage imageNamed:@"11.png"];

   img = [img resizableImageWithCapInsets:UIEdgeInsetsMake(1, 1, 1, 1)];

结果如下:


image.png


可以明显的看到中间的虚线,这便是区域复制的杰作。


那么问题又来了,如果某些图片中间有渐变,我们该怎么处理了,来看下一个函数。


4、拉伸模式的设置


- (UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets resizingMode:(UIImageResizingMode)resizingMode;


这个函数和上一个函数相比,唯一的差别是多了一个参数。这个参数是个枚举,如下:


typedef NS_ENUM(NSInteger, UIImageResizingMode) {

   UIImageResizingModeTile,//进行区域复制模式拉伸

   UIImageResizingModeStretch,//进行渐变复制模式拉伸

};

现在就明了了,我们只需要设置一下模式,就可以实现渐变拉伸了:


   UIImage * img= [UIImage imageNamed:@"11.png"];

   img = [img resizableImageWithCapInsets:UIEdgeInsetsMake(1, 1, 1, 1) resizingMode:UIImageResizingModeStretch];

来看一下效果:




二、拉伸的用武之地


圆角按钮,空心按钮,渐变的背景,内容可变的标签,聊天气泡等等这样的素材在APP中很可能会多次出现,并且每次出现的尺寸可能还会略微有些差异,如果仅仅依靠美工的素材,恐怕不仅很难达到要求,也会额外增加软件的内存开销,这时,我们使用恰当的拉伸技巧,能使我们的代码更加健壮,APP更加高效。


三、一点小经验


你是否注意观察过最细的线?


看到上面的问句,你可能有些差异。最细的线不就是一像素么?确实,能绘图画出来的最细的实心线确实是一像素,但在一个项目中,我们优秀的美工察觉到无论她把线做的多么细,无论我怎样控制拉伸方法,绘制出的登录框总是没有QQ的细,QQ的框线看起来更加干脆利索。后来索性用绘图画出登录框,结果很不幸,我依然无法将线做到像QQ登录框那样细致。后来偶然试了一种方法,不知原理是否正确,效果总算达到了,当然这也要归功于我们的美工,她将一个图片做的很大,适配最大的分辨率,然后让我手动缩,如此一来,那线就变得非常细。

目录
相关文章
|
1月前
|
JSON JavaScript 安全
iOS应用程序数据保护:如何保护iOS应用程序中的图片、资源和敏感数据
iOS应用程序数据保护:如何保护iOS应用程序中的图片、资源和敏感数据
31 1
|
9月前
|
iOS开发
iOS TextView插入表情或者图片后字体变大或变小
iOS TextView插入表情或者图片后字体变大或变小
77 1
|
10月前
|
Android开发 iOS开发
iOS 替换WebView网页图片为本地图片
iOS 替换WebView网页图片为本地图片
221 0
|
1月前
|
存储 缓存 安全
基于iOS平台的高效图片缓存策略实现
【4月更文挑战第22天】 在移动应用开发中,图片资源的加载与缓存是影响用户体验的重要因素之一。尤其对于iOS平台,由于设备存储空间的限制以及用户对流畅性的高要求,设计一种合理的图片缓存策略显得尤为关键。本文将探讨在iOS环境下,如何通过使用先进的图片缓存技术,包括内存缓存、磁盘缓存以及网络请求的优化,来提高应用的性能和响应速度。我们将重点分析多级缓存机制的设计与实现,并对可能出现的问题及其解决方案进行讨论。
|
1月前
|
存储 缓存 算法
实现iOS平台的高效图片缓存策略
【4月更文挑战第22天】在移动应用开发中,图片资源的处理是影响用户体验的重要因素之一。特别是对于图像资源密集型的iOS应用,如何有效地缓存图片以减少内存占用和提升加载速度,是开发者们面临的关键挑战。本文将探讨一种针对iOS平台的图片缓存策略,该策略通过结合内存缓存与磁盘缓存的机制,并采用先进的图片解码和异步加载技术,旨在实现快速加载的同时,保持应用的内存效率。
|
1月前
|
存储 缓存 编解码
实现iOS平台的高效图片缓存策略
【4月更文挑战第23天】在移动应用开发领域,尤其是图像处理密集型的iOS应用中,高效的图片缓存策略对于提升用户体验和节省系统资源至关重要。本文将探讨一种针对iOS平台设计的图片缓存方案,该方案通过结合内存缓存与磁盘缓存的多层次结构,旨在优化图片加载性能并降低内存占用。我们将深入分析其设计理念、核心组件以及在实际场景中的应用效果,同时对比其他常见缓存技术的优势与局限。
|
1月前
|
存储 Web App开发 Android开发
iOS不支持WebP格式图片解决方案和iPhone 7及其后硬件拍照的HEIC格式图片
iOS不支持WebP格式图片解决方案和iPhone 7及其后硬件拍照的HEIC格式图片
58 1
iOS不支持WebP格式图片解决方案和iPhone 7及其后硬件拍照的HEIC格式图片
|
1月前
按钮的image图片是非圆角,直接对UIButton设置圆角,iOS13系统没有圆角效果的问题及解决方案
按钮的image图片是非圆角,直接对UIButton设置圆角,iOS13系统没有圆角效果的问题及解决方案
20 0
|
1月前
|
存储 缓存 iOS开发
实现iOS平台的高效图片缓存策略
【4月更文挑战第4天】在移动应用开发中,图片资源的加载与缓存是影响用户体验的关键因素之一。尤其对于iOS平台,由于设备存储和内存资源的限制,设计一个高效的图片缓存机制尤为重要。本文将深入探讨在iOS环境下,如何通过技术手段实现图片的高效加载与缓存,包括内存缓存、磁盘缓存以及网络层面的优化,旨在为用户提供流畅且稳定的图片浏览体验。
|
1月前
|
存储 缓存 监控
实现iOS平台的高效图片缓存策略
【4月更文挑战第18天】在移动应用开发中,图片资源的加载与缓存是影响用户体验的重要因素之一。特别是对于iOS平台,合理设计图片缓存策略不仅能够提高应用的响应速度,还能降低内存消耗和网络流量。本文将探讨一种针对iOS环境的图片缓存方案,该方案通过多级缓存机制、内存管理和磁盘存储策略相结合,旨在提升图片加载效率并优化性能。