iOS UIButton图片及文字排版

工作中我们常常碰到这样的点击按钮,实现方法有很多种,今天给大家介绍下我这边使用UIButton titleEdgeInsets和imageEdgeInsets的实现方案。

iOS UIButton图片及文字排版_第1张图片
iOS UIButton图片及文字排版_第2张图片


首先setImageEdgeInsets针对的是UIbutton的setImage方法。如果使用setbackimage方法。则会失效无用。其次titleEdgeInsets和imageEdgeInsets的偏移是相对于最始的图片和标题的布局。那么最原始的布局是什么样的呢?也就是你直接设置图片和标题的状态(无论先setTitle还是先setImage都一样),如图:

iOS UIButton图片及文字排版_第3张图片
iOS UIButton图片及文字排版_第4张图片

那么想实现第一种和第三种的效果怎么实现呢?向上向下偏移不用说,主要是向左和向右的偏移,偏移多少呢,答案是图片向右偏移文字一半的长度,文字向左偏移图片一半的长度,利用中心对称很容易想到。所以我加上 btn.titleEdgeInsets=UIEdgeInsetsMake(15, -55/2, -15,55/2);btn.imageEdgeInsets=UIEdgeInsetsMake(-15,15,15, -15);即可实现第一种效果,第三种直接改上下偏移即可。第二种效果更简单,直接设置btn.titleEdgeInsets=UIEdgeInsetsMake(0, -30,0,30);btn.imageEdgeInsets=UIEdgeInsetsMake(0,55,0, -55);完成!

iOS UIButton图片及文字排版_第5张图片

那么问题来了,如果图片和文字的宽度不知道或是自适应控件的封装怎么处理?我们可以使用方式titleRectForContentRectimageRectForContentRect来获取图片和标题的尺寸,例如:CGSizetitleSize = [orignalBtn titleRectForContentRect:orignalBtn.frame].size;CGSizeimageSize = [orignalBtn imageRectForContentRect:orignalBtn.frame].size;,将上面的固定尺寸替换即可。是不是要比单纯的使用图片和label进行封装要简单。

你可能感兴趣的:(iOS UIButton图片及文字排版)