热门标签 | HotTags
当前位置:  开发笔记 > Android > 正文

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开发者们能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对的支持。


推荐阅读
  • 在数字图像处理中,Photoshop 的直方图是一个重要的工具,它能够精确地反映图像中不同亮度级别的分布情况。通过分析直方图,用户可以深入了解图像的曝光、对比度和色调范围,从而进行更精细的调整。直方图不仅模拟了物体表面反射光线的原理,还能帮助摄影师和设计师更好地掌握图像的明暗细节,优化视觉效果。 ... [详细]
  • NOIP2000的单词接龙问题与常见的成语接龙游戏有异曲同工之妙。题目要求在给定的一组单词中,从指定的起始字母开始,构建最长的“单词链”。每个单词在链中最多可出现两次。本文将详细解析该题目的解法,并分享学习过程中的心得体会。 ... [详细]
  • 将解压缩版Tomcat集成至系统服务
    将解压缩版Tomcat集成至系统服务的方法如下:首先,在命令行中导航至Tomcat的`bin`目录,运行`service.bat install`命令以安装服务。需要注意的是,服务名称和显示名称已在`service.bat`脚本中预设,默认情况下会随不同版本有所变化。此外,建议检查并配置相关参数,确保服务能够稳定运行。 ... [详细]
  • 资源管理器的基础架构包括三个核心组件:1)资源池,用于将CPU和内存等资源分配给不同的容器;2)负载组,负责承载任务并将其分配到相应的资源池;3)分类函数,用于将不同的会话映射到合适的负载组。该系统提供了两种主要的资源管理策略。 ... [详细]
  • CSS3 @font-face 字体应用技术解析与实践
    在Web前端开发中,HTML教程和CSS3的结合使得网页设计更加多样化。长期以来,Web设计师受限于“web-safe”字体的选择。然而,CSS3中的`@font-face`规则允许从服务器端加载自定义字体,极大地丰富了网页的视觉效果。通过这一技术,设计师可以自由选择和使用各种字体,提升用户体验和页面美观度。本文将深入解析`@font-face`的实现原理,并提供实际应用案例,帮助开发者更好地掌握这一强大工具。 ... [详细]
  • 单链表的高效遍历及性能优化策略
    本文探讨了单链表的高效遍历方法及其性能优化策略。在单链表的数据结构中,插入操作的时间复杂度为O(n),而遍历操作的时间复杂度为O(n^2)。通过在 `LinkList.h` 和 `main.cpp` 文件中对单链表进行封装,我们实现了创建和销毁功能的优化,提高了单链表的使用效率。此外,文章还介绍了几种常见的优化技术,如缓存节点指针和批量处理,以进一步提升遍历性能。 ... [详细]
  • 小王详解:内部网络中最易理解的NAT原理剖析,挑战你的认知极限
    小王详解:内部网络中最易理解的NAT原理剖析,挑战你的认知极限 ... [详细]
  • 初探性能优化:入门指南与实践技巧
    在编程领域,常有“尚未精通编码便急于优化”的声音。为了从性能优化的角度提升代码质量,本文将带领读者初步探索性能优化的基本概念与实践技巧。即使程序看似运行良好,数据处理效率仍有待提高,通过系统学习性能优化,能够帮助开发者编写更加高效、稳定的代码。文章不仅介绍了性能优化的基础知识,还提供了实用的调优方法和工具,帮助读者在实际项目中应用这些技术。 ... [详细]
  • 在 Firefox Android 68.3.0 版本中,用户在尝试集成第三方搜索引擎 Startpage.com 时遇到了应用程序崩溃的问题。具体步骤包括:进入 Startpage.com 网站,点击地址栏中的“加号”图标以添加搜索引擎,但在此过程中浏览器会突然崩溃。这一问题严重影响了用户的使用体验,需要尽快修复。 ... [详细]
  • 在 Linux 环境下,多线程编程是实现高效并发处理的重要技术。本文通过具体的实战案例,详细分析了多线程编程的关键技术和常见问题。文章首先介绍了多线程的基本概念和创建方法,然后通过实例代码展示了如何使用 pthreads 库进行线程同步和通信。此外,还探讨了多线程程序中的性能优化技巧和调试方法,为开发者提供了宝贵的实践经验。 ... [详细]
  • macOS Beta 代码揭示:苹果计划禁止用户在 M1 Mac 上安装未通过 Mac App Store 分发的 iOS 应用程序 ... [详细]
  • 本文深入探讨了佩尔方程 \( x^2 - dy^2 = 1 \) 的递推关系式。通过构造特定的矩阵并利用矩阵快速幂的方法,可以高效地计算出该方程的第 k 组解。此外,文章还详细分析了递推关系式的数学背景及其在数论中的应用,为相关研究提供了坚实的理论基础。 ... [详细]
  • 【系统架构师精讲】(16):操作系统核心概念——寄存器、内存与缓存机制详解
    在计算机系统架构中,中央处理器(CPU)内部集成了多种高速存储组件,用于临时存储指令、数据和地址。这些组件包括指令寄存器(IR)、程序计数器(PC)和累加器(ACC)。寄存器作为集成电路中的关键存储单元,由触发器构成,具备极高的读写速度,使得数据传输非常迅速。根据功能不同,寄存器可分为基本寄存器和移位寄存器,各自在数据处理中发挥重要作用。此外,寄存器与内存和缓存机制的协同工作,确保了系统的高效运行。 ... [详细]
  • 在探讨P1923问题时,我们发现手写的快速排序在最后两个测试用例中出现了超时现象,这在意料之中,因为该题目实际上要求的是时间复杂度为O(n)的算法。进一步研究题解后,发现有选手使用STL中的`nth_element`函数成功通过了所有测试点。本文将详细分析这一现象,并提出相应的优化策略。 ... [详细]
  • 在洛谷 P1344 的坏牛奶追踪问题中,第一问要求计算最小割,而第二问则需要找到割边数量最少的最小割。通过为每条边附加一个单位权值,可以在求解最小割时优先选择边数较少的方案,从而同时解决两个问题。这种策略不仅简化了问题的求解过程,还确保了结果的最优性。 ... [详细]
author-avatar
柳辰光
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有