自定义button

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了自定义button相关的知识,希望对你有一定的参考价值。

1、何为自定义button?

  顾名思义会想到DIY,自然是系统提供的button不能够满足我的需求就需要自己DIY一个适用的button;

  比如我项目中遇到的需求:

  技术分享(这种图片在上文字在下的,系统自然不能满足,这就需要自己写一个button)

2、自定义button的思路?

  根据需求,不同之处在于button中的image和title位置的变化;所以需要重写UIButton;

  首先需要重写两个方法:

-(instancetype)initWithCoder:(NSCoder *)aDecoder;
-(instancetype)initWithFrame:(CGRect)frame;

  重写这两个方法可以确保代码创建与XIB两种方式都可实现。

  然后需要重写UIButton中的两个布局方法:

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

  以上只是大体思路,下面我会贴出具体实现的方法并作出解释;

3、自定义button的具体实现?

  既然是模仿UIbutton那么创建一个继承自UIbutton的类自不多说;

  实现代码都封装在.m文件中没必要暴漏,所以.h文件中没什么可说的;

  以下是.m文件中的具体实现:

@interface Kaka_Button ()

@property (nonatomic,strong) UIFont *myFont;

@end

@implementation Kaka_Button

#pragma mark - 重写button创建方法

-(instancetype)initWithCoder:(NSCoder *)aDecoder{
    if (self = [super initWithCoder:aDecoder]) {
        [self setup];
    }
    return self;
}

-(instancetype)initWithFrame:(CGRect)frame{
    if (self = [super initWithFrame:frame]) {
        [self setup];
    }
    return self;
}

-(void)setup{
    //设置文字字体
    self.myFont = [UIFont systemFontOfSize:15.0];
    self.titleLabel.font = self.myFont;
}

#pragma mark - 重写button内容布局方法

-(CGRect)imageRectForContentRect:(CGRect)contentRect{
    //获取文字
    NSString *title = self.currentTitle;
    
    //文字高度
    CGFloat titleH = [self getRectWithTitle:title].size.height;
//    NSLog(@"titleH = %f", titleH);
    
    //image的x、y、w、h
    CGFloat imageH = (contentRect.size.height)/2;
    CGFloat imageW = imageH;
    CGFloat imageX = (contentRect.size.width - imageW) / 2;
    CGFloat imageY = (contentRect.size.height - imageH - titleH - PADDING) / 2;
    
    return CGRectMake(imageX, imageY, imageW, imageH);
}

-(CGRect)titleRectForContentRect:(CGRect)contentRect{
    //获取文字
    NSString *title = self.currentTitle;
    
    //文字的Rect
    CGRect titleRect = [self getRectWithTitle:title];
    
    //btn的高
    CGFloat btnH = contentRect.size.height;
    
    //title的x、y、h
    CGFloat titleW = titleRect.size.width;
    CGFloat titleH = titleRect.size.height;
    CGFloat titleX = (contentRect.size.width - titleW)/2;
    CGFloat titleY = (btnH*1.5 - titleH + PADDING) / 2;   //此行代码是相加减后的数学公式,不用纠结!
    
    return CGRectMake(titleX, titleY, titleW, titleH);
}


#pragma mark - 获取文字Rect

-(CGRect)getRectWithTitle:(NSString *)title{
    //NSLog(@"title = %@", title);
    
    CGSize maxSize = CGSizeMake(MAXFLOAT, MAXFLOAT);
    NSMutableDictionary *md = [NSMutableDictionary dictionary];
    md[NSFontAttributeName] = self.myFont;
    
    return [title boundingRectWithSize:maxSize options:NSStringDrawingUsesLineFragmentOrigin attributes:md context:nil];
}

  注释:获取文字Rect那个方法目的在于:button中的文字是不可以换行的,但文字长度未知所以不限制长度;但文字的高度因字号大小不同而不同,所以我们需要算出文字所占的范围来得出高度,并以此来设定image与title的大小和相对父视图的位置;

  实现后效果:

  技术分享如此达到了项目需求,(此外若遇到需求如:图在下字在上、图在右字在左的情况也自不在话下!)

 

(小弟入行尚浅,学术不精,看官多留言,谢谢!)

以上是关于自定义button的主要内容,如果未能解决你的问题,请参考以下文章

html,网页自定义button外形

html,网页自定义button外形

简单自定义Button

WPF自定义控件,自定义控件中由多个button组成,如何给每个button添加不同事件处理?

Flutter 简单自定义一个button

自定义Button 的图片设置不显示问题。