iOS图片拉伸技巧

纵观移动市场,一款移动app,要想长期在移动市场立足,最起码要包含以下几个要素:实用的功能、极强的用户体验、华丽简洁的外观。华丽外观的背后,少不了美工的辛苦设计,但如果开发人员不懂得怎么合理展示这些设计好的图片,将会糟蹋了这些设计,功亏一篑。

比如下面张图片,本来是设计来做按钮背景的:

 button.png,尺寸为:24x60

现在我们把它用作为按钮背景,按钮尺寸是150x50:

[java] view plain copy
  1. // 得到view的尺寸  
  2. CGSize viewSize = self.view.bounds.size;  
  3.   
  4. // 初始化按钮  
  5. UIButton *button = [[UIButton alloc] init];  
  6. // 设置尺寸  
  7. button.bounds = CGRectMake(0, 0, 150, 50);  
  8. // 设置位置  
  9. button.center = CGPointMake(viewSize.width * 0.5f, viewSize.height * 0.5f);  
  10.   
  11. // 加载图片  
  12. UIImage *image = [UIImage imageNamed:@"button"];  
  13. // 设置背景图片  
  14. [button setBackgroundImage:image forState:UIControlStateNormal];  
  15.   
  16. // 添加按钮  
  17. [self.view addSubview:button];  

运行效果图:

可以看到,效果非常地差。原因很简单,因为原图大小为24x60,现在整张图片被全方位拉伸为150x50,比较严重的是图片的4个角。

有些人可能马上想到一个解决方案,你叫美工把图片做大一点不就好了么,怎么拉伸都没事。没错,这是一种解决方案,不过不建议采取。原因很简单:1.图片大,导致安装包也大,加载到内存中也大;2.有更好的解决方案。

细看一下图片,其实图片会变得难看,完全是因为4个角被拉伸了,中间的拉伸并没有明显地丑化外观。因此要想小图片被拉伸后不会变得难看,在图片拉伸的时候,我们只需拉伸图片的中间一块矩形区域即可,不要拉伸边缘部分。

比如只拉伸下图的矩形区域,上下左右的边缘都不拉伸:

iOS中提供很好用的API帮我们实现上述功能。到iOS 6.0为止,iOS提供了3种图片拉伸的解决方案,接下来分别详细介绍这些方案。

一、iOS 5.0之前

iOS中有个叫端盖(end cap)的概念,用来指定图片中的哪一部分不用拉伸。比如下图中,黑色代表需要被拉伸的矩形区域,上下左右不需要被拉伸的边缘就称为端盖。

使用UIImage的这个方法,可以通过设置端盖宽度返回一个经过拉伸处理的UIImage对象

 

[java] view plain copy
  1. - (UIImage *)stretchableImageWithLeftCapWidth:(NSInteger)leftCapWidth topCapHeight:(NSInteger)topCapHeight;  

 

这个方法只有2个参数,leftCapWidth代表左端盖宽度,topCapHeight代表顶端盖高度。系统会自动计算出右端盖宽度(rightCapWidth)和底端盖高度(bottomCapHeight),算法如下:

 

[java] view plain copy
  1. // width为图片宽度  
  2. rightCapWidth = width - leftCapWidth - 1;  
  3.   
  4. // height为图片高度  
  5. bottomCapHeight = height - topCapHeight - 1  

 

经过计算,你会发现中间的可拉伸区域只有1x1

 

[java] view plain copy
  1. // stretchWidth为中间可拉伸区域的宽度  
  2. stretchWidth = width - leftCapWidth - rightCapWidth = 1;  
  3.       
  4. // stretchHeight为中间可拉伸区域的高度  
  5. stretchHeight = height - topCapHeight - bottomCapHeight = 1;  

 

因此,使用这个方法只会拉伸图片中间1x1的区域,并不会影响到边缘和角落。

下面演示下方法的使用:

[java] view plain copy
  1. // 左端盖宽度  
  2. NSInteger leftCapWidth = image.size.width * 0.5f;  
  3. // 顶端盖高度  
  4. NSInteger topCapHeight = image.size.height * 0.5f;  
  5. // 重新赋值  
  6. image = [image stretchableImageWithLeftCapWidth:leftCapWidth topCapHeight:topCapHeight];  

调用这个方法后,原来的image并不会发生改变,会产生一个新的经过拉伸的UIImage,所以第6行中需要将返回值赋值回给image变量

运行效果:

可以发现,图片非常美观地显示出来了

注意:

1.这个方法在iOS 5.0出来后就过期了

2.这个方法只能拉伸1x1的区域

 

二、iOS 5.0

在iOS 5.0中,UIImage又有一个新方法可以处理图片的拉伸问题

 

[java] view plain copy
  1. - (UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets  

 

这个方法只接收一个UIEdgeInsets类型的参数,可以通过设置UIEdgeInsets的left、right、top、bottom来分别指定左端盖宽度、右端盖宽度、顶端盖高度、底端盖高度

[java] view plain copy
  1. CGFloat top = 25; // 顶端盖高度  
  2. CGFloat bottom = 25 ; // 底端盖高度  
  3. CGFloat left = 10; // 左端盖宽度  
  4. CGFloat right = 10; // 右端盖宽度  
  5. UIEdgeInsets insets = UIEdgeInsetsMake(top, left, bottom, right);  
  6. // 伸缩后重新赋值  
  7. image = [image resizableImageWithCapInsets:insets];  

运行效果:

 

三、iOS 6.0

在iOS6.0中,UIImage又提供了一个方法处理图片拉伸

 

[java] view plain copy
  1. - (UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets resizingMode:(UIImageResizingMode)resizingMode  

 

对比iOS5.0中的方法,只多了一个UIImageResizingMode参数,用来指定拉伸的模式:

  • UIImageResizingModeStretch:拉伸模式,通过拉伸UIEdgeInsets指定的矩形区域来填充图片
  • UIImageResizingModeTile:平铺模式,通过重复显示UIEdgeInsets指定的矩形区域来填充图片

 

[java] view plain copy
  1. CGFloat top = 25; // 顶端盖高度  
  2. CGFloat bottom = 25 ; // 底端盖高度  
  3. CGFloat left = 10; // 左端盖宽度  
  4. CGFloat right = 10; // 右端盖宽度  
  5. UIEdgeInsets insets = UIEdgeInsetsMake(top, left, bottom, right);  
  6. // 指定为拉伸模式,伸缩后重新赋值  
  7. image = [image resizableImageWithCapInsets:insets resizingMode:UIImageResizingModeStretch];  

 

运行效果:

转至:http://blog.csdn.net/q199109106q/article/details/8615661

转载于:https://www.cnblogs.com/haohao-developer/p/5328179.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/470892.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

LeetCode 2341. 数组能形成多少数对

文章目录1. 题目2. 解题1. 题目 给你一个下标从 0 开始的整数数组 nums 。在一步操作中,你可以执行以下步骤: 从 nums 选出 两个 相等的 整数从 nums 中移除这两个整数,形成一个 数对 请你在 nums 上多次执行此操作直到无法继续执行。 返…

三、MyBatis 使用传统 Dao 开发方式

1.0 使用 Dao 的实现类,操作数据库 1.0.1 Dao 开发 &#xff08;0&#xff09;定义接口StudentDao 及创建接口的映射文件StudentDao .xm package com.zep.dao;import com.zep.domain.Student;import java.util.List;public interface StudentDao {List<Student> selec…

LeetCode 2347. 最好的扑克手牌

文章目录1. 题目2. 解题1. 题目 给你一个整数数组 ranks 和一个字符数组 suit 。你有 5 张扑克牌&#xff0c;第 i 张牌大小为 ranks[i] &#xff0c;花色为 suits[i] 。 下述是从好到坏你可能持有的 手牌类型 &#xff1a; "Flush"&#xff1a;同花&#xff0c;五…

四、MyBatis 框架 Dao 动态代理

1.1 步骤 &#xff08;1&#xff09; 去掉 之前编写的Dao 接口实现类 &#xff08;2&#xff09; getMapper 获取代理对象 只需调用 SqlSession 的 getMapper()方法&#xff0c;即可获取指定接口的实现类对象。该方法的参数为指定 Dao接口类的 class 值。 不使用工具类&…

五、深入理解Mybatis中的参数parameterType (传递一个简单参数,传递多个参数:@Param、使用自定义对象、按位置、使用Map)

1.1 parameterType parameterType: 接口中方法参数的类型&#xff0c; 类型的完全限定名或别名。这个属性是可选的&#xff0c;因为 MyBatis可以推断出具体传入语句的参数&#xff0c;默认值为未设置&#xff08;unset&#xff09;。接口中方法的参数从 java 代码传入到mapper…

六、封装 MyBatis 输出结果resultType、resultMap 以及 数据库表中列名和返回对象属性名不一致的2种解决方案(详解)

1.1 resultType resultType: 执行 sql 得到 ResultSet 转换的类型&#xff0c;使用类型的完全限定名或别名。 注意&#xff1a;如果返回的是集合&#xff0c;那应该设置为集合包含的类型&#xff0c;而不是集合本身。resultType 和 resultMap&#xff0c;不能同时使用。 A、…

API 接口批量测试

ApiPost 创建接口 导入要测试的数据 测试结果 ApiFox 创建接口 导入接口 导入测试数据&#xff0c;可以直接编辑&#xff0c;粘贴进来 测试结果

LeetCode 2342. 数位和相等数对的最大和

文章目录1. 题目2. 解题1. 题目 给你一个下标从 0 开始的数组 nums &#xff0c;数组中的元素都是 正 整数。请你选出两个下标 i 和 j&#xff08;i ! j&#xff09;&#xff0c;且 nums[i] 的数位和 与 nums[j] 的数位和相等。 请你找出所有满足条件的下标 i 和 j &#xff…

软件项目管理-构建之法-四周总结

写在前面 课程名&#xff1a;软件项目管理 授课人&#xff1a;东北师范大学 杨贵福&#xff08; http://www.cnblogs.com/younggift/&#xff09; 教材&#xff1a;《构建之法 - 现代软件工程》 作者&#xff1a;邹欣老师 &#xff08;博客&#xff1a;http://www.cnblogs.com…

一、Vue基础语法学习笔记系列——插值操作(Mustache语法、v-once、v-html、v-text、v-pre、v-cloak)、绑定属性v-bind(绑定class、style)、计算属性

一、插值操作 1. Mustache 如何将data中的文本数据&#xff0c;插入到HTML中呢&#xff1f; 我们已经学习过了&#xff0c;可以通过Mustache语法(也就是双大括号)。 Mustache: 胡子/胡须. 我们可以像下面这样来使用&#xff0c;并且数据是响应式的 2. v-once 但是&#xff0…

LeetCode 2348. 全 0 子数组的数目

文章目录1. 题目2. 解题1. 题目 给你一个整数数组 nums &#xff0c;返回全部为 0 的 子数组 数目。 子数组 是一个数组中一段连续非空元素组成的序列。 示例 1&#xff1a; 输入&#xff1a;nums [1,3,0,0,2,0,0,4] 输出&#xff1a;6 解释&#xff1a; 子数组 [0] 出现了…

二、Vue基础语法学习笔记——事件监听v-on、条件判断(v-if、v-else-if、v-else、v-show)、循环遍历(v-for遍历数组对象,key属性、检测数组更新)、图书案例、双向绑定

四、事件监听 在前端开发中&#xff0c;我们需要经常和用于交互。 这个时候&#xff0c;我们就必须监听用户发生的时间&#xff0c;比如点击、拖拽、键盘事件等等 在Vue中如何监听事件呢&#xff1f;使用v-on指令 v-on介绍 作用&#xff1a;绑定事件监听器 缩写&#xff1a; 预…

LeetCode 2352. 相等行列对

文章目录1. 题目2. 解题1. 题目 给你一个下标从 0 开始、大小为 n x n 的整数矩阵 grid &#xff0c;返回满足 Ri 行和 Cj 列相等的行列对 (Ri, Cj) 的数目。 如果行和列以相同的顺序包含相同的元素&#xff08;即相等的数组&#xff09;&#xff0c;则认为二者是相等的。 示…

三、Vue组件化开发学习笔记——组件化的基本步骤、全局组件和局部组件、父组件和子组件、注册组件的语法糖、模板分离写法、组件的数据存放

一、什么是组件化&#xff1f; 人面对复杂问题的处理方式&#xff1a; 任何一个人处理信息的逻辑能力都是有限的 所以&#xff0c;当面对一个非常复杂的问题时&#xff0c;我们不太可能一次性搞定一大堆的内容。 但是&#xff0c;我们人有一种天生的能力&#xff0c;就是将问题…

LeetCode 2353. 设计食物评分系统(sortedcontainers)

文章目录1. 题目2. 解题1. 题目 设计一个支持下述操作的食物评分系统&#xff1a; 修改 系统中列出的某种食物的评分。返回系统中某一类烹饪方式下评分最高的食物。 实现 FoodRatings 类&#xff1a; FoodRatings(String[] foods, String[] cuisines, int[] ratings) 初始化…

四、Vue组件化开发学习笔记——父子组件通信,父级向子级传值(props),子级向父级传值(自定义事件),slot插槽

一、父子组件的通信 在上一篇博文中&#xff0c;我们提到了子组件是不能引用父组件或者Vue实例的数据的。 但是&#xff0c;在开发中&#xff0c;往往一些数据确实需要从上层传递到下层&#xff1a; 比如在一个页面中&#xff0c;我们从服务器请求到了很多的数据。其中一部分数…

LeetCode 2336. 无限集中的最小数字(SortedSet)

文章目录1. 题目2. 解题1. 题目 现有一个包含所有正整数的集合 [1, 2, 3, 4, 5, …] 。 实现 SmallestInfiniteSet 类&#xff1a; SmallestInfiniteSet() 初始化 SmallestInfiniteSet 对象以包含 所有 正整数。int popSmallest() 移除 并返回该无限集中的最小整数。void ad…

C# - 类_使用新成员隐藏基类成员

1 using System;2 3 namespace 类_使用新成员隐藏基类成员4 {5 // 基类 : Animal6 public class Animal7 {8 // 基类的普通方法Eat(), 并未用Virtual修饰9 public void Eat() 10 { 11 Console.WriteLine("动物吃的方法: …

五、Vue模块化开发学习笔记——JavaScript原始功能、匿名函数的解决方案、使用模块作为出口、CommonJS、ES6 export和import的使用

一、JavaScript原始功能 -在网页开发的早期&#xff0c;js制作作为一种脚本语言&#xff0c;做一些简单的表单验证或动画实现等&#xff0c;那个时候代码还是很少的。 那个时候的代码是怎么写的呢&#xff1f; 直接将代码写在<script>标签中即可 随着ajax异步请求的出现&…

LeetCode 2333. 最小差值平方和(贪心)

文章目录1. 题目2. 解题1. 题目 给你两个下标从 0 开始的整数数组 nums1 和 nums2 &#xff0c;长度为 n 。 数组 nums1 和 nums2 的 差值平方和 定义为所有满足 0 < i < n 的 (nums1[i] - nums2[i])^2 之和。 同时给你两个正整数 k1 和 k2 。你可以将 nums1 中的任意…