前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >iOS-自定义 UIButton-文字在左、图片在右(二)

iOS-自定义 UIButton-文字在左、图片在右(二)

作者头像
用户1890628
发布2018-05-10 14:14:49
2.3K0
发布2018-05-10 14:14:49
举报
文章被收录于专栏:Objective-CObjective-C

接上一篇--->1. 不自定义 Button,设置titleEdgeInsets 和 imageEdgeInsets 属性,代码如下:

代码语言:javascript
复制
    UIButton *button02 = [[UIButton alloc] init];
    button02.titleLabel.font = [UIFont systemFontOfSize:14];
    [button02 setTitle:@"地区" forState:UIControlStateNormal];
    UIImage *imageBtn02 = [UIImage imageNamed:@"YellowDownArrow"];
    [button02 setImage:imageBtn02 forState:UIControlStateNormal];
    [view addSubview:button02];
    // 设置 frame
    [button02 mas_makeConstraints:^(MASConstraintMaker *make) {
        make.centerY.equalTo(view);
        make.left.equalTo(view).offset(kScreenWidth / 8 * 3.5);
    }];
    // 如果用 Masnory 一定要调这句,不然约束有问题
    [button02 layoutIfNeeded];
    
    // 取出 titleLabel 的宽度
    CGFloat labelWidth02 = button02.titleLabel.bounds.size.width;
    // 取出 imageView 的宽度
    CGFloat imageWidth02 = button02.imageView.bounds.size.width;
    // 设置 titleLabel 的内边距
    button02.titleEdgeInsets = UIEdgeInsetsMake(0, -imageWidth02, 0, imageWidth02);
    // 设置 imageView 的内边距
    button02.imageEdgeInsets = UIEdgeInsetsMake(0, labelWidth02, 0, -labelWidth02);

2. 实现效果(见下图)

实现效果对比.png

3. 自定义 Button 和 系统 Button 对比(见下图):

1.如果用系统Button,那么直接设置Button的 titleEdgeInsetsimageEdgeInsets即可(就可以不用创建自定义Button) 2.但是每次要用到创建类似的Button的话,就要写这四句代码 3.当你的项目中有较多地方用到类似的Button的时候,建议考虑自定义,这样可能方便一些

个人小建议.png

4. 温馨提示:

1.如果使用 Masonry 框架进行自动布局的话,那么给 button 设置完约束以后一定要调用 [button02 layoutIfNeeded];不然布局显示就会有问题(见下图):

没有调用[button layoutIfNeeded].png

2.调用 [button02 layoutIfNeeded];布局显示正常(见下图):

调用[button layoutIfNeeded].png

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2016.07.24 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档