自定义Button上image、title位置

在实际开发中,系统默认的UIButton不能满足需求,需要对button进行自定义。

UIButton的默认布局是: title在右, image在左。

image

如果要实现title在左,image在右,或者title、image在上/下,或者其他位置,就需要自定义button.

image

通常我们调整位置image和title的位置有两种方式:
1、直接调整EdgeInsets

@property (nonatomic) UIEdgeInsets titleEdgeInsets;
@property (nonatomic) UIEdgeInsets imageEdgeInsets;     

EdgeInsets是结构体,上左下右去添加约束,这里不重点讲。

2、自定义Button继承自UIButton, 重写如下方法:

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

这里看看image、title在水平方向效果,竖直方向的可以自己试试,下面有对应的枚举标识。

image
image

代码如下:

typedef NS_ENUM(NSInteger, KBMainButtonStyle) {
    
    ImageLeftTitleRight = 0,    //图片左title右
    ImageRightTitleLeft,        //图片右title左
    ImageTopTitleDown,          //图片上title下
    ImageDownTitleTop           //图片下title上
};

- (void)setButonStyle:(KBMainButtonStyle)buttonStyle imgFrame:(CGRect)imgFrame {
    
    _buttonStyle = buttonStyle;
    _imgFrame = imgFrame;
}

- (CGRect)titleRectForContentRect:(CGRect)contentRect  {

    CGFloat originX = 0;
    CGFloat originY = 0;
    CGFloat width   = 0;
    CGFloat height  = 0;
    CGRect rec = CGRectZero;
    
    switch (_buttonStyle)  {
        case ImageLeftTitleRight:
        {
            originX = _imgFrame.origin.x + _imgFrame.size.width;
            originY = 0;
            width   = contentRect.size.width - originX;
            height  = contentRect.size.height;
            rec     = CGRectMake(originX, originY, width, height);
        }
            break;
        case ImageRightTitleLeft:
        {
            originX = 0;
            originY = 0;
            width   = contentRect.size.width - _imgFrame.size.width;
            height  = contentRect.size.height;
            rec     = CGRectMake(originX, originY, width, height);
        }
            break;
        case ImageTopTitleDown:
        {
            originX = 0;
            originY =  _imgFrame.origin.y + _imgFrame.size.height;
            width   = contentRect.size.width;
            height  = contentRect.size.height - originY;
            rec     = CGRectMake(originX, originY, width, height);
        }
            break;
        case ImageDownTitleTop:
        {
            originX = 0;
            originY = 0;
            width   = contentRect.size.width;
            height  = contentRect.size.height - _imgFrame.size.height;
            rec     = CGRectMake(originX, originY, width, height);
        }
            break;
        default:
            break;
    }
    return rec;
}

- (CGRect)imageRectForContentRect:(CGRect)contentRect {
    
    return _imgFrame;
}

详细代码,见Demo

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 美团iOS面试败北感悟 | 掘金技术征文 http://www.cocoachina.com/special/20...
    小刘_假装是个程序员阅读 384评论 2 0
  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明AI阅读 16,026评论 3 119
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,269评论 4 61
  • 作者: 汪洁生 二人谈笑间,就到了婉儿居住点。岳女士开门,见柱子其人,不免惊讶。见他深度眼镜背后格外的小眼睛。 又...
    汪洁生阅读 242评论 0 0