iOS UIButton根据内容自动布局

- 日理万妓 2022-01-19 02:21 313阅读 0赞

> 级别： ★☆☆☆☆  
> 标签：「iOS」「UIButton」「自动布局」  
> 作者： [沐灵洛][Link 1]  
> 审校： [QiShare团队][QiShare]

--------------------

UIButton是开发过程中最常用的控件，可以设置各种样式，也可以自定义添加图片、标题。

但是，实际设计中往往与上图的默认样式不一致。比如图片和文字间距为10，图片距离左边的间距为10，标题距离右边为10，这就需要我们使用一些方法来实现效果。

##### 1. 使用imageEdgeInsets和titleEdgeInsets #####

btn.imageEdgeInsets = UIEdgeInsetsMake(0, 10, 0, 0);
    btn.titleEdgeInsets = UIEdgeInsetsMake(0, 20, 0, 10);
    复制代码

上述方式可以实现需求效果，但由于特殊的计算方式，使得代码不太直观。具体内容可参考文章 [iOS UIButton之UIEdgeInsets详解][iOS UIButton_UIEdgeInsets]

##### 2.渲染时给出imageView和titleLabel的frame #####

重写以下两个方法，返回需要的frame，使imageView和titleLabel分开渲染。

*  \-(CGRect)titleRectForContentRect:(CGRect)contentRect;
 *  \-(CGRect)imageRectForContentRect:(CGRect)contentRect;

所以我们创建一个QiShareButton继承自UIButton，并定义两个属性

@interface QiShareButton : UIButton
    
    @property (nonatomic, assign) CGRect imageRect;
    @property (nonatomic, assign) CGRect titleRect;
    
    @end
    复制代码

在.m中重写两个方法

- (CGRect)titleRectForContentRect:(CGRect)contentRect {
        
        if (!CGRectIsEmpty(self.titleRect) && !CGRectEqualToRect(self.titleRect, CGRectZero)) {
            return self.titleRect;
        } else {
            return [super titleRectForContentRect:contentRect];
        }
    }
    
    - (CGRect)imageRectForContentRect:(CGRect)contentRect {
        
        if (!CGRectIsEmpty(self.imageRect)&&!CGRectEqualToRect(self.imageRect, CGRectZero)) {
            return self.imageRect;
        } else {
            return [super imageRectForContentRect:contentRect];
        }
    }
    复制代码

关于使用：

QiShareButton *btn = [[QiShareButton alloc]initWithFrame:CGRectZero];
    btn.backgroundColor = [UIColor cyanColor];
    [btn addTarget:self action:@selector(test) forControlEvents:UIControlEventTouchUpInside];
    [btn setTitle:@"QiShareBtn" forState:UIControlStateNormal];
    [btn setImage:[UIImage imageNamed:@"icon_presonal_sign"] forState:UIControlStateNormal];
    btn.titleRect = CGRectMake(60.0 , 10.0, 100.0, 40.0);
    btn.imageRect = CGRectMake(10.0, 10.0, 40.0, 40.0);
    [self.view addSubview:btn];
    复制代码

在上述代码中，以CGRectZero初始化button，然后分别设置titleRect和imageRect属性，观察到虽然imageView和titleLabel正常绘制，但是button的frame依然是Zero，在橙色的大背景下看不到青色（cyanColor）的button。

我们设置button的frame不足以显示imageView和titleLabel

QiShareButton *btn =  [[QiShareButton alloc] initWithFrame:CGRectMake(100.0, 100.0, 20.0, 20.0)];
    复制代码

我们希望button能够根据titleRect和imageRect属性的值自动适配合适的frame。即：设置titleRect和imageRect便可以算出button的大小。 所以重写UIButton的layoutSubViews方法：

- (void)layoutSubviews {
        
        [super layoutSubviews];
        
        BOOL hasSetTitleRect = !(CGRectIsEmpty(self.titleRect) || CGRectEqualToRect(self.titleRect, CGRectZero));
        BOOL hasSetImageRect = !(CGRectIsEmpty(self.imageRect) || CGRectEqualToRect(self.imageRect, CGRectZero));
        
        if (hasSetImageRect || hasSetTitleRect) {
            CGRect rect = self.frame;
            CGRect curentRect =  CGRectUnion(hasSetImageRect ? self.imageRect : CGRectZero, hasSetTitleRect  ? self.titleRect : CGRectZero);
            rect.size.width = curentRect.size.width + curentRect.origin.x * 2;
            rect.size.height = curentRect.size.height + curentRect.origin.y * 2;
            self.frame = rect;
        }
        
    }
    复制代码

使用效果（未给定button的frame或者宽高不正确）

btn.titleRect = CGRectMake(60.0 , 10.0, 100.0, 40.0);
    btn.imageRect = CGRectMake(10.0, 10.0, 40.0, 40.0);
    复制代码

btn.imageRect = CGRectMake(110.0 , 10.0, 40.0, 40.0);
    btn.titleRect = CGRectMake(10.0, 10.0, 100.0, 40.0);
    复制代码

btn.titleRect = CGRectMake(10.0 , 10.0, 100, 40);
    btn.imageRect = CGRectMake(40, 60, 40, 40);
    复制代码

btn.titleRect = CGRectMake(10 , 60, 100, 40);
    btn.imageRect = CGRectMake(40, 10, 40, 40);
    复制代码

源码：[Demo源码][Demo]

--------------------

小编微信：可加并拉入《QiShare技术交流群》。

> 关注我们的途径有：  
> [QiShare(简书)][QiShare 1]  
> [QiShare(掘金)][QiShare 2]  
> [QiShare(知乎)][QiShare 3]  
> [QiShare(GitHub)][QiShare_GitHub]  
> [QiShare(CocoaChina)][QiShare_CocoaChina]  
> [QiShare(StackOverflow)][QiShare_StackOverflow]  
> QiShare(微信公众号)

> 推荐文章：  
> [iOS 指定初始化方法][iOS]  
> [UIView中的hitTest方法][UIView_hitTest]  
> [iOS关于tabBar的几处笔记][iOS_tabBar]  
> [A的女儿是B的女儿的妈妈，A是B的谁？][A_B_A_B]  
> [算法小专栏：选择排序][Link 2]  
> [iOS Runloop（一）][iOS Runloop]  
> [奇舞周刊][Link 3]

转载于:https://juejin.im/post/5cdd2e8fe51d45475b17e3b4

[Link 1]: https://link.juejin.im?target=https%3A%2F%2Fwww.jianshu.com%2Fu%2F2efd1004e4d0
[QiShare]: https://link.juejin.im?target=https%3A%2F%2Fwww.jianshu.com%2Fc%2Fb3bd94559163
[iOS UIButton_UIEdgeInsets]: https://link.juejin.im?target=https%3A%2F%2Fwww.jianshu.com%2Fp%2Fb4cb35c41bf0
[Demo]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2FQiShare%2FQiShareButtonDemo
[QiShare 1]: https://link.juejin.im?target=https%3A%2F%2Fwww.jianshu.com%2Fu%2F3db23baa08c7
[QiShare 2]: https://juejin.im/user/5b542b76e51d4533d2042b62
[QiShare 3]: https://link.juejin.im?target=https%3A%2F%2Fwww.zhihu.com%2Fpeople%2Fedit
[QiShare_GitHub]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2FQiShare
[QiShare_CocoaChina]: https://link.juejin.im?target=http%3A%2F%2Fwww.cocoachina.com%2Fbbs%2Fu.php%3Ftid%3D658244
[QiShare_StackOverflow]: https://link.juejin.im?target=https%3A%2F%2Fstackoverflow.com%2Fusers%2F10118400%2Fqishare
[iOS]: https://link.juejin.im?target=https%3A%2F%2Fwww.jianshu.com%2Fp%2F31aad4b01606
[UIView_hitTest]: https://link.juejin.im?target=https%3A%2F%2Fwww.jianshu.com%2Fp%2Fccde97aae849
[iOS_tabBar]: https://link.juejin.im?target=https%3A%2F%2Fwww.jianshu.com%2Fp%2F9dd05fd2b81e
[A_B_A_B]: https://link.juejin.im?target=https%3A%2F%2Fwww.jianshu.com%2Fp%2Fb62f54654568
[Link 2]: https://link.juejin.im?target=https%3A%2F%2Fwww.jianshu.com%2Fp%2Fda2a0d81c447
[iOS Runloop]: https://link.juejin.im?target=https%3A%2F%2Fwww.jianshu.com%2Fp%2F413811babe1e
[Link 3]: https://link.juejin.im?target=https%3A%2F%2Fweekly.75team.com