多语言展示
当前在线:457今日阅读:168今日分享:49

iOS开发 实现气泡图片指定部位拉伸

在开发即时通讯的时候,我们往往需要做聊天对话框。看到企鹅漂亮的聊天气泡是不是很羡慕啊?那是一张图片,我们怎么样才能实现根据文字内容的多少,来加宽加高图片,却又保证图片的主要元素不变形呢。这里有方法告诉大家。代码在github的Chat-Bubble上。
工具/原料
1

Mac OS X操作系统:OS X 10.11.5

2

编译环境:Xcode 7.3.1

方法/步骤
1

创建工程项目和视图控制器      1、创建一个Sing View Application工程项目;      2、为项目命名,生成工程文件。

2

添加UIImageView显示气泡      在Main.storyboard的ViewController拖进5个UIImageView,用作对比效果。做好UI约束。

3

Storyboard与ViewController对象关联

4

设置不拉伸的图片      1、添加气泡图片bubble_image到工程中      2、设置imageView.contentMode      3、显示imageView.image

5

显示各种效果      由于原图太小,拉伸会变模糊,拉伸会变形,所以明显看出这样的效果不合适。

6

需要用到端盖(end cap)的概念来实现      根据图片大小,大概算出需要拉伸的区域,得出UIEdgeInsets。这里的大概为:UIEdgeInsetsMake(15, 10, 10, 30);)(上,左,下,右)

7

实现拉伸变形      UIEdgeInsets insets = UIEdgeInsetsMake(15, 10, 10, 30);      image = [image resizableImageWithCapInsets:insets resizingMode:UIImageResizingModeStretch];

8

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

9

如果您喜欢,请按投票;如果有疑问,欢迎一起探讨。

推荐信息