iOS开发image背景图片拉伸问题解决分析
<div id="navCategory"><h5 class="catalogue">目录</h5><ul class="first_class_ul"><li>前言</li><ul class="second_class_ul"><li>方法一：</li><li>方法二：</li><li>方法三：</li></ul><li>补充知识</li><ul class="second_class_ul"></ul></ul></div><p class="maodian"></p><h2>前言</h2><p>（如果是imageView的图片拉伸问题，可直接看文章结尾，OC和Swift）</p>
<p>在开发中聊天、按钮等背景图片，UI设计师可以仅设计其边框样式，然后通过代码就行处理，以适应聊天文字的大小或按钮的大小。</p>
<p>这样不仅可以使安装包更轻巧而且可以更灵活的使用图片；</p>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202307/2023072709454503.jpg" /></p>
<p class="maodian"></p><h3>方法一：</h3>
<p><strong>即将弃用方法</strong>这个函数是UIImage的一个实例函数，它的功能是创建一个内容可拉伸，而边角不拉伸的图片，需要两个参数，第一个是左边不拉伸区域的宽度，第二个参数是上面不拉伸的高度。</p>
<p>根据设置的宽度和高度，将接下来的一个像素进行左右扩展和上下拉伸。</p>
<div class="jb51code"><pre class="brush:cpp;">- (UIImage *)stretchableImageWithLeftCapWidth:(NSInteger)leftCapWidth topCapHeight:(NSInteger)topCapHeight;</pre></div>
<p><strong>注意：可拉伸的范围都是距离leftCapWidth后的1竖排像素，和距离topCapHeight后的1横排像素。</strong></p>
<div class="jb51code"><pre class="brush:cpp;"> UIImage *image = ;
//原始图片样式添加
self.originalImageView.image = image;
//没处理好的图片
self.badImageView.image = image;
//图片处理后的 将被弃用 方法一：
//这个函数是UIImage的一个实例函数，它的功能是创建一个内容可拉伸，而边角不拉伸的图片，需要两个参数，第一个是左边不拉伸区域的宽度，第二个参数是上面不拉伸的高度。
//根据设置的宽度和高度，将接下来的一个像素进行左右扩展和上下拉伸。
];
//注意：可拉伸的范围都是距离leftCapWidth后的1竖排像素，和距离topCapHeight后的1横排像素。</pre></div>
<p>图片讲解</p>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202307/2023072709454504.jpg" /></p>
<p><strong>可拉伸的范围都是距离leftCapWidth后的1竖排像素，和距离topCapHeight后的1横排像素。</strong></p>
<p class="maodian"></p><h3>方法二：</h3>
<p><strong>iOS 5 推出</strong></p>
<div class="jb51code"><pre class="brush:cpp;">- (UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets;
// create a resizable version of this image. the interior is tiled when drawn.
</pre></div>
<div class="jb51code"><pre class="brush:cpp;"> UIImage *image = ;
//原始图片样式添加
self.originalImageView.image = image;
//没处理好的图片
self.badImageView.image = image;
//处理图片 iOS 5 方法三：
CGFloat width = image.size.width;
CGFloat height = image.size.height;
CGFloat top = height/2.0f - 0.5f; // 顶端盖高度
CGFloat bottom = height/2.0f - 0.5f ; // 底端盖高度
CGFloat left = width/2.0f - 0.5f; // 左端盖宽度
CGFloat right = width/2.0f - 0.5f; // 右端盖宽度
UIEdgeInsets insets = UIEdgeInsetsMake(top, left, bottom, right);
//创建 一个可变的image版本，内部平铺，类：UIImageResizingModeTile模式；
self.textImageView.image = ;</pre></div>
<p>图片讲解</p>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202307/2023072709454505.jpg" /></p>
<p><strong>中间的框框是复制平铺区域，在本工程中为2px大小，Cap部分（即线的区域）为保留样式</strong></p>
<p class="maodian"></p><h3>方法三：</h3>
<p><strong>iOS 6 方法</strong></p>
<div class="jb51code"><pre class="brush:cpp;">- (UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets resizingMode:(UIImageResizingMode)resizingMode;
// the interior is resized according to the resizingMode</pre></div>
<div class="jb51code"><pre class="brush:cpp;"> UIImage *image = ;
//原始图片样式添加
self.originalImageView.image = image;
//没处理好的图片
self.badImageView.image = image;
//处理图片 iOS 6 方法二：
CGFloat width = image.size.width;
CGFloat height = image.size.height;
CGFloat top = height/2.0f - 0.5f; // 顶端盖高度
CGFloat bottom = height/2.0f - 0.5f ; // 底端盖高度
CGFloat left = width/2.0f - 0.5f; // 左端盖宽度
CGFloat right = width/2.0f - 0.5f; // 右端盖宽度
UIEdgeInsets insets = UIEdgeInsetsMake(top, left, bottom, right);
// 指定为拉伸模式，伸缩后重新赋值
//UIImageResizingModeStretch：拉伸模式，通过拉伸UIEdgeInsets指定的矩形区域来填充图片
//UIImageResizingModeTile：平铺模式，通过重复显示UIEdgeInsets指定的矩形区域来填充图片
_textImageView.image = ;
// Swift
let image = UIImage(named: "rounded_rectangle_7_copy")
if image != nil {
self.originalImageView.image = image
self.badImageView.image = image
} else {
self.originalImageView.image = image
self.badImageView.image = image
}
let width = image?.size.width ?? 0
let height = image?.size.height ?? 0
let top = height / 2 - 0.5
let bottom = height / 2 - 0.5
let left = width / 2 - 0.5
let right = width / 2 - 0.5
let insets = UIEdgeInsets(top: top, left: left, bottom: bottom, right: right)
if image != nil {
let resizingMode = UIImage.resizableImageResizingMode.tile
self.textImageView.image = UIImage(resizableImageWithCapInsets: insets, resizingMode: resizingMode)
} else {
self.textImageView.image = UIImage(resizableImageWithCapInsets: insets, resizingMode: resizingMode)
}</pre></div>
<p class="maodian"></p><h2>补充知识</h2>
<p>关于imageView的图片拉伸问题，在这里稍作总结，希望可以给你提供帮助。</p>
<div class="jb51code"><pre class="brush:cpp;">typedef NS_ENUM(NSInteger, UIViewContentMode) {
UIViewContentModeScaleToFill,
UIViewContentModeScaleAspectFit,
// contents scaled to fit with fixed aspect. remainder is transparent
UIViewContentModeScaleAspectFill,
// contents scaled to fill with fixed aspect. some portion of content may be clipped.
UIViewContentModeRedraw,
// redraw on bounds change (calls -setNeedsDisplay)
UIViewContentModeCenter,
// contents remain same size. positioned adjusted.
UIViewContentModeTop,
UIViewContentModeBottom,
UIViewContentModeLeft,
UIViewContentModeRight,
UIViewContentModeTopLeft,
UIViewContentModeTopRight,
UIViewContentModeBottomLeft,
UIViewContentModeBottomRight,
};</pre></div>
<div class="jb51code"><pre class="brush:cpp;">//使用方法
;
//OR
ImageView.contentMode = UIViewContentModeScaleAspectFit;
//以下方法，图片保持原有大小比例的情况下，展示在ImageView的上下左右等位置；如果视图大小小于图片的尺寸，则图片会超出视图边界；
UIViewContentModeTop,
UIViewContentModeBottom,
UIViewContentModeLeft,
UIViewContentModeRight,
UIViewContentModeTopLeft,
UIViewContentModeTopRight,
UIViewContentModeBottomLeft,
UIViewContentModeBottomRight,
UIViewContentModeCenter,
UIViewContentModeScaleToFill,//根据视图的比例去拉伸图片内容。图片可能变形；
UIViewContentModeScaleAspectFit,//保持图片内容的纵横比例，来适应视图的大小。
UIViewContentModeScaleAspectFill, //用图片内容来填充视图的大小，多余得部分可以被修剪掉来填充整个视图边界。
UIViewContentModeRedraw, //这个选项是单视图的尺寸位置发生变化的时候通过调用setNeedsDisplay方法来重新显示。 </pre></div>
<p>以上就是iOS开发image背景图片拉伸问题解决分析的详细内容，更多关于iOS image背景图片拉伸的资料请关注琼殿技术社区其它相关文章！</p>
<div class="art_xg">
<b>您可能感兴趣的文章:</b><ul><li>iOS中实现imageView任意角度旋转的方法</li><li>iOS开发之image图片压缩及压缩成指定大小的两种方法</li><li>iOS如何固定UITableView中cell.imageView.image的图片大小</li><li>IOS 中UIImageView响应点击事件</li><li>IOS 出现错误reason: image not found的解决方案</li><li>ios通过SDWebImage实现图片加载时的渐变效果</li></ul>
</div>
</div>
<!--endmain-->
頁:
[1]