iOS UIButton文字和图片间距随意调整

阳光穿透心脏的1/2处 2022-05-30 07:47 316阅读 0赞

> 代码地址如下：  
> [http://www.demodashi.com/demo/11606.html][http_www.demodashi.com_demo_11606.html]

###### 前记 ######

在开发中，我们经常会遇到这么一种情况，就是一个按钮上面有图片也有文字，但是往往设计并不是我们想要的那种，比如可能图片在上，文字在下，或者图片在左，文字在右，关键是还有一定的距离，并不是系统默认`UIButton`中，图片和文字的间距。当然，这调整图片和文字的距离的小事，是难不倒大家的，因为大家都知道，在`UIButton`中，有这么两个属性`titleEdgeInsets`和`imageEdgeInsets`

###### 关于属性 ######

关于`titleEdgeInsets`和`imageEdgeInsets`这两个属性，简单介绍下：  
`titleEdgeInsets`是`title`相对于其上下左右的`inset`，跟`tableView`的`contentInset`是类似的，如果只有`title`，那它上下左右都是相对于`button`的，`imageEdgeInsets`也是一样  
如果同时有`image`和`title`，那这时候`image`的上左下是相对于`button`，右边是相对于`title`的；`title`的上右下是相对于`button`，左边是相对于`image`的，也就是说`image`是默认居左的。  
通过以上两个属性，可以很轻松的实现`文字`和`图片`的位置及距离的调整，如果每次在用的时候，都去重新写一片，难免会很麻烦，鉴于此，之前在谋篇博客中（具体忘了，原博主看到请勿见怪），看到过用`category`封装的，于是我在项目中，也写了一个`category`，其中也列举了四种不同的枚举来表现其不同的场景

枚举类型

// 定义一个枚举（包含了四种类型的button）
    typedef NS_ENUM(NSUInteger, GLButtonEdgeInsetsStyle) {
        GLButtonEdgeInsetsStyleTop, // image在上，label在下
        GLButtonEdgeInsetsStyleLeft, // image在左，label在右
        GLButtonEdgeInsetsStyleBottom, // image在下，label在上
        GLButtonEdgeInsetsStyleRight // image在右，label在左
    };

并且定义了一个简单使用的方法：

/** * 设置button的titleLabel和imageView的布局样式，及间距 * * @param style titleLabel和imageView的布局样式 * @param space titleLabel和imageView的间距 */
    - (void)layoutButtonWithEdgeInsetsStyle:(GLButtonEdgeInsetsStyle)style
                            imageTitleSpace:(CGFloat)space;

其中`space`是指`图片`和`文字`之间的间距，`style`对应上面的枚举，可以针对性的选择

具体实现方法

- (void)layoutButtonWithEdgeInsetsStyle:(GLButtonEdgeInsetsStyle)style
                            imageTitleSpace:(CGFloat)space {
        /** * 知识点：titleEdgeInsets是title相对于其上下左右的inset，跟tableView的contentInset是类似的， * 如果只有title，那它上下左右都是相对于button的，image也是一样； * 如果同时有image和label，那这时候image的上左下是相对于button，右边是相对于label的；title的上右下是相对于button，左边是相对于image的。 */
    
        // 1. 得到imageView和titleLabel的宽、高
        CGFloat imageWith = self.imageView.image.size.width;
        CGFloat imageHeight = self.imageView.image.size.height;
    
        CGFloat labelWidth = 0.0;
        CGFloat labelHeight = 0.0;
        if ([UIDevice currentDevice].systemVersion.floatValue >= 8.0) {
        // 由于iOS8中titleLabel的size为0，用下面的这种设置
            labelWidth = self.titleLabel.intrinsicContentSize.width;
            labelHeight = self.titleLabel.intrinsicContentSize.height;
        } else {
            labelWidth = self.titleLabel.frame.size.width;
            labelHeight = self.titleLabel.frame.size.height;
        }
    
        // 2. 声明全局的imageEdgeInsets和labelEdgeInsets
        UIEdgeInsets imageEdgeInsets = UIEdgeInsetsZero;
        UIEdgeInsets labelEdgeInsets = UIEdgeInsetsZero;
    
        // 3. 根据style和space得到imageEdgeInsets和labelEdgeInsets的值
    
        switch (style) {
            case GLButtonEdgeInsetsStyleTop:
            {            
                imageEdgeInsets = UIEdgeInsetsMake(-labelHeight-space/2.0, 0, 0, -labelWidth);
                labelEdgeInsets = UIEdgeInsetsMake(0, -imageWith, -imageHeight-space/2.0, 0);
            }
                break;
            case GLButtonEdgeInsetsStyleLeft:
            {
                imageEdgeInsets = UIEdgeInsetsMake(0, -space/2.0, 0, space/2.0);
                labelEdgeInsets = UIEdgeInsetsMake(0, space/2.0, 0, -space/2.0);
            }
                break;
            case GLButtonEdgeInsetsStyleBottom:
            {
                imageEdgeInsets = UIEdgeInsetsMake(0, 0, -labelHeight-space/2.0, -labelWidth);
                labelEdgeInsets = UIEdgeInsetsMake(-imageHeight-space/2.0, -imageWith, 0, 0);
            }
                break;
            case GLButtonEdgeInsetsStyleRight:
            {
                imageEdgeInsets = UIEdgeInsetsMake(0, labelWidth+space/2.0, 0, -labelWidth-space/2.0);
                labelEdgeInsets = UIEdgeInsetsMake(0, -imageWith-space/2.0, 0, imageWith+space/2.0);
            }
                break;
            default:
                break;
        }
    
        // 4. 赋值
        self.titleEdgeInsets = labelEdgeInsets;
        self.imageEdgeInsets = imageEdgeInsets;
    }

实现效果

![button][]

其实思路很简单，这里只是简单封装了下。

##### 项目文件截图： #####

![6JqK2CG5y8ONxs5i0yP.jpg][]iOS UIButton文字和图片间距随意调整

> 代码地址如下：  
> [http://www.demodashi.com/demo/11606.html][http_www.demodashi.com_demo_11606.html]
> 
> 注：本文著作权归作者，由demo大师发表，拒绝转载，转载需要作者授权

[http_www.demodashi.com_demo_11606.html]: http://www.demodashi.com/demo/11606.html
[button]: /images/20220530/751a1c4d91824a6b9e04c316e20146e3.png
[6JqK2CG5y8ONxs5i0yP.jpg]: /images/20220530/842cd542c79242deafc21e43f68f2016.png