ios 按钮图片拉伸_iOS中实现图片自适应拉伸效果的方法
前言
在Android中实现图片的拉伸特别特别简单,甚至不用写一行代码,直接使用.9图片进行划线即可。但是iOS就没这么简单了,比如对于下面的一张图片(原始尺寸:200*103):
我们不做任何处理,直接将它用作按钮的背景图片:
//
// ViewController.m
// ChatBgTest
//
// Created by 李峰峰 on 2017/1/23.
// Copyright © 2017年 李峰峰. All rights reserved.
//
#import "ViewController.h"
@interface ViewController ()
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
[self addBtn];
}
-(void)addBtn{
// 创建一个按钮
UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
// 设置按钮的frame
btn.frame = CGRectMake(50, 300, 300, 103);
// 加载图片
UIImage *image = [UIImage imageNamed:@"chat_bg"];
// 设置按钮的背景图片
[btn setBackgroundImage:image forState:UIControlStateNormal];
// 将按钮添加到控制器的view
[self.view addSubview:btn];
}
@end
运行效果如下:
可以看到图片被明显拉伸,显示效果较差。今天我们研究内容就是图片自适应拉伸。
图片自适应拉伸
1、iOS5之前
iOS中有个叫端盖(end cap)的概念,用来指定图片中的哪一部分不用拉伸,如下图:设置topCapHeight、leftCapWidth、bottomCapHeight、lerightCapWidth,图中的黑色区域就是图片拉伸的范围,也就是说边上的不会被拉伸。
使用UIImage的下面这个方法,可以通过设置端盖宽度返回一个经过拉伸处理的UIImage对象:
- (UIImage *)stretchableImageWithLeftCapWidth:(NSInteger)leftCapWidth topCapHeight:(NSInteger)topCapHeight;
这个方法只有2个参数,leftCapWidth代表左端盖宽度,topCapHeight代表上端盖高度。系统会自动计算出右端盖宽度rightCapWidth和底端盖高度bottomCapHeight,代码如下:
/**
第一种拉伸方式(iOS5之前)
*/
-(void)stretchTest1{
// 创建一个按钮
UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
// 设置按钮的frame
btn.frame = CGRectMake(50, 300, 300, 103);
// 加载图片
UIImage *image = [UIImage imageNamed:@"chat_bg"];
// 设置左边端盖宽度
NSInteger leftCapWidth = image.size.width * 0.5f;
// 设置上边端盖高度
NSInteger topCapHeight = image.size.height * 0.5f;
UIImage *newImage = [image stretchableImageWithLeftCapWidth:leftCapWidth topCapHeight:topCapHeight];
// 设置按钮的背景图片
[btn setBackgroundImage:newImage forState:UIControlStateNormal];
// 将按钮添加到控制器的view
[self.view addSubview:btn];
}
这样一来,其实我们图片的可拉伸范围只有1 * 1,所以再怎么拉伸都不会影响图片的外观,运行效果如下:
现在再看一下效果是不是好多了。
2、iOS5
在iOS 5.0中,UIImage又有一个新方法可以处理图片的拉伸问题:
- (UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets
typedef struct UIEdgeInsets {
CGFloat top, left, bottom, right;
// specify amount to inset (positive) for each of the edges. values can be negative to 'outset'
} UIEdgeInsets;
这个方法只接收一个UIEdgeInsets类型的参数,可以通过设置UIEdgeInsets中的CGFloat top, left, bottom, right就是用来设置上端盖、左端盖、下端盖、右端盖的尺寸(逆时针方向)。
/**
第二种拉伸方式(iOS5)
*/
-(void)stretchTest2{
// 创建一个按钮
UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
// 设置按钮的frame
btn.frame = CGRectMake(50, 300, 300, 103);
// 加载图片
UIImage *image = [UIImage imageNamed:@"chat_bg"];
// 设置端盖的值
CGFloat top = image.size.height * 0.5;
CGFloat left = image.size.width * 0.5;
CGFloat bottom = image.size.height * 0.5;
CGFloat right = image.size.width * 0.5;
UIEdgeInsets edgeInsets = UIEdgeInsetsMake(top, left, bottom, right);
// 拉伸图片
UIImage *newImage = [image resizableImageWithCapInsets:edgeInsets];
// 设置按钮的背景图片
[btn setBackgroundImage:newImage forState:UIControlStateNormal];
// 将按钮添加到控制器的view
[self.view addSubview:btn];
}
运行效果与第一种一样,就不再截图了。
3、iOS6
在iOS6.0中,UIImage又提供了一个方法处理图片拉伸:
- (UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets resizingMode:(UIImageResizingMode)resizingMode
相比iOS5中的方法多了一个resizingMode参数:
typedef NS_ENUM(NSInteger, UIImageResizingMode) {
UIImageResizingModeTile, // 平铺模式,通过重复显示UIEdgeInsets指定的矩形区域来填充图片
UIImageResizingModeStretch, // 拉伸模式,通过拉伸UIEdgeInsets指定的矩形区域来填充图片
};
具体实现代码如下:
/**
第三种拉伸方式(iOS6)
*/
-(void)stretchTest3{
// 创建一个按钮
UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
// 设置按钮的frame
btn.frame = CGRectMake(50, 300, 300, 103);
// 加载图片
UIImage *image = [UIImage imageNamed:@"chat_bg"];
// 设置端盖的值
CGFloat top = image.size.height * 0.5;
CGFloat left = image.size.width * 0.5;
CGFloat bottom = image.size.height * 0.5;
CGFloat right = image.size.width * 0.5;
// 设置端盖的值
UIEdgeInsets edgeInsets = UIEdgeInsetsMake(top, left, bottom, right);
// 设置拉伸的模式
UIImageResizingMode mode = UIImageResizingModeStretch;
// 拉伸图片
UIImage *newImage = [image resizableImageWithCapInsets:edgeInsets resizingMode:mode];
// 设置按钮的背景图片
[btn setBackgroundImage:newImage forState:UIControlStateNormal];
// 将按钮添加到控制器的view
[self.view addSubview:btn];
}
运行效果与第一种一样,就不再截图了。
总结
以上就是这篇文章的全部内容了,希望本文的内容对给位iOS开发者们能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。
ios 按钮图片拉伸_iOS中实现图片自适应拉伸效果的方法相关推荐
- Android 加载本地图片(文件管理器中的图片墙)
Android 加载本地图片(文件管理器中的图片墙) --关于图片墙的一些感悟与疑问,希望大家共同探讨. (By伊叶也) 图片显示及监听 1.图片显示:基本上就5种显示形式(如果同时嵌入5种形式,采用 ...
- ctf图片隐写中改变图片高和宽
ctf图片隐写中改变图片高和宽 利用工具 Hex Editor Neo将图片进行十六进制分解, 然后我们可以找出该图片的像素高宽,转化成十六进制然后对应找到该像素点所在位置,进行修改即可.
- 计算机表格增加,电脑中给Excel表格添加水印效果的方法
相信不少朋友在日常办公中,都会使用Excel软件,它的功能十分强大,能够帮着我们很好地完成数据统计工作.那么,excel打印过程中需要设置水印的话怎么做呢?这里,系统城小编给大家分享一下电脑中设置ex ...
- android模糊检索_Android中实现输入框实时模糊搜索效果的方法
Android中实现输入框实时模糊搜索效果的方法 发布时间:2020-08-13 16:27:11 来源:亿速云 阅读:161 作者:小新 Android中实现输入框实时模糊搜索效果的方法?这个问题可 ...
- c# 保存html中的图片,c# HTML中提取图片地址
public class HtmlHelper { /// /// HTML中提取图片地址 /// public static List PickupImgUrl(string html) { Reg ...
- ios nstimer实现延时_iOS 中常见 Crash 总结
作者 | 在路上重名了啊 @(iOS总结)[温故而知新] [TOC] 1.找不到方法的实现unrecognized selector sent to instance 2.KVC造成的crash 3. ...
- picturebox显示服务器图片大小,WinForm中实现picturebox自适应图片大小的方法
本文实例讲述了winform中实现picturebox自适应图片大小的方法.分享给大家供大家参考,具体如下: picturebox控件共有两种载入图片方式,分别为: picturebox1.backg ...
- html5穿插动图,视频中间插播广告 在视频中的任意位置添加广告图片,视频中穿插图片的方法...
小编最近在看一个电视剧,这个电视剧只能用优酷的播放器进行播放,但优酷播放器真是让我很奔溃,看一集视频起码要插播三次广告,简直全程无感.幸好之前解决了优酷视频转换格式的问题,不然我真是要放弃优酷播放器了 ...
- css禁止图片保存,CSS中的图片保存方法
"css中的图片"指的就是镶在CSS样式表中的图片.在我们用在浏览器保存网页时,很多时候,下载网页里的图片都下载不到,这样的话就会使网页非常不美观.所以,今天小编就给大家介绍集中保 ...
最新文章
- class转java_[拒绝套路,纯干货]这一百多道 Java 基础问题你掌握了吗?
- 定义变量时一定要初始化
- 趣学python3(40)--TCP服务器和客户端(socketserver类)
- python参数中的*和**
- Java Web中的中文编码
- html插入图片和文字,HTML第三课文字图片插入
- 数学/sgu 130 Circle
- Mysql连接失败报Received fatal alert: protocol_version问题解决
- openwrt刷回原厂固件_小米路由器4刷breed, pandavan,openwrt
- batchplot插件用法_batchplot批量打印怎么用?Batchplot(CAD批量打印工具)安装步骤
- iperf 安卓 灌包命令_iperf工具测速
- excel中vba操作文件
- 8.局部变量、成员变量、jvm垃圾回收机制 、封装、this关键字、匿名对象
- python蒙特卡洛方法圆周率_使用Python语言的蒙特卡洛方法计算圆周率π的一种实现...
- python输入的光标变成了横线_光标变成下划线
- 数学建模——MATLAB基础知识
- 阿里企业邮箱526 Authentication failure[0]
- STM32添加以太网连接
- mixly编程怎样音乐_使用mixly和Arduino结合蜂鸣器播放音乐
- android canvas画渐变背景,View绘制系列(13)-Canvas渐变属性绘制
热门文章
- MySQL-获取每个部门在职员工的最高薪水
- Java数值型表现形式
- 章鱼猫(Octocat)
- 汽车降价结束会迎来报复性涨价吗
- 百度智能云实战——静态文件CDN加速
- 退休当月要干到月底吗_到了法定退休年龄,生日当月去办理退休,还是要提前一个月办理?...
- 抖音服务器到底有多大,能够供那么多人同时刷?
- 因子分析累计贡献率_累计方差贡献率_spss累计方差贡献率_因子分析方差贡献率...
- 分布式优化算法学习(一)
- JS-节点的属性 获取各种节点(全)