自定義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的大小和相對父視圖的位置；

　　實現后效果：

　　如此達到了項目需求，（此外若遇到需求如：圖在下字在上、圖在右字在左的情況也自不在話下！）