朝花夕拾之UIButton的title和image自訂布局，uibuttontitle

朝花夕拾之UIButton的title和image自訂布局，uibuttontitle

當需要實現一個自訂布局圖片和標題的按鈕時候，不知道有多少少年直接布局了UIButton，亦或是自訂一個UIView，然後以空白UIButton、UILabel、UIImageVew作為subViews。

兩者其實都一樣，因為UIButton的內部subViews中，就已經存在一個UILabel和UIImageView。

不談論優劣，只記錄一下直接布局UIButton的過程。

因為UIButton已經有一個UILabel顯示標題，一個ImageView顯示圖片，所以可以直接布局。但是需要注意下面記錄的問題。

首先，對一個UIButton執行個體button直接設定title（使用setTitle或者setAttributedTitle方法）和image（使用setImage方法），會發現，圖片和標題依次緊貼並排置中顯示。

然後，修改一下這個button的titleLabel和imageView的frame，會發現，並沒有什麼作用。

最後，嘗試使用方法setTitleEdgeInsets和setImageEdgeInsets，會發現，沒有作用或者布局異常。

 

問題在於：

1.擷取titleLabel的frame時候，size始終是(0, 0)

2.修改titleLabel的frame時機不對

 

將上述修改操作放在方法layoutSubviews中是合適的。

至於建立UIButton的子類重載方法，還是建立分類來swizzle方法都可以。

 

即使在這個時機，使用setTitleEdgeInsets還是可能會出現文字顯示不全的問題。建議直接修改titleLabel的frame。

我採用了建立分類的方案。定義了一個方法，在+load方法中與layoutSubViews交換。

- (void)base_layoutSubviews{    [self base_layoutSubviews];        if (self.resetTitleAndImageLayoutBlock) {        self.resetTitleAndImageLayoutBlock();    }}

代碼中自訂的block變數，將重設布局代碼延遲到此處調用。

以下代碼，是我寫的UIButton分類中自訂圖片和標題布局的主要方法，其中圖片位置暫時只自訂了四種：

- (void)resetButtonTitleAndImageLayoutWithMidInset:(CGFloat)midInset imageLocation:(ButtonImageLocation)imageLocation{    CGSize titleSize  = [self.titleLabel.attributedText boundingRectWithSize:CGSizeMake(MAXFLOAT, MAXFLOAT) options:NSStringDrawingUsesLineFragmentOrigin context:nil].size;;    CGSize imageSize = self.imageView.size;        __weak typeof(self) weakSelf = self;        //因為UIButton在layoutSubviews時候，會重設titleLabel的frame，所以需要延遲調用block    self.resetTitleAndImageLayoutBlock = ^{        switch (imageLocation) {            case ButtonImageLocationUp: {                CGFloat imageOriginX = (weakSelf.width - imageSize.width) / 2.0;                CGFloat imageOriginY = (weakSelf.height - titleSize.height - midInset - imageSize.height) / 2.0;                weakSelf.imageEdgeInsets = UIEdgeInsetsMake(imageOriginY, imageOriginX, weakSelf.height - imageOriginY - imageSize.height, imageOriginX);                                CGFloat titleOriginX = (weakSelf.width - titleSize.width) / 2.0;                CGFloat titleOriginY = imageOriginY + imageSize.height + midInset;                weakSelf.titleEdgeInsets = UIEdgeInsetsMake(titleOriginY, titleOriginX, weakSelf.height - titleOriginY - titleSize.height, titleOriginX);                break;            }            case ButtonImageLocationLeft: {                CGFloat imageOriginX = (weakSelf.width - imageSize.width - midInset - titleSize.width) / 2.0;                CGFloat imageOriginY = (weakSelf.height - imageSize.height) /  2.0;                weakSelf.imageEdgeInsets = UIEdgeInsetsMake(imageOriginY, imageOriginX, imageOriginY, weakSelf.width - imageOriginX - imageSize.width);                                                CGFloat titleOriginX = imageOriginX + imageSize.width + midInset;                //橫向時候，label的frame可以取較大範圍//                CGFloat titleOriginY = (weakSelf.height - titleSize.height) / 2.0;//                weakSelf.titleLabel.frame = CGRectMake(titleOriginX, titleOriginY, titleSize.width, titleSize.height);                weakSelf.titleLabel.frame = CGRectMake(titleOriginX, 0, weakSelf.width - titleOriginX, weakSelf.height);                [weakSelf.titleLabel setTextAlignment:NSTextAlignmentLeft];                break;            }            case ButtonImageLocationDown: {                CGFloat titleOriginX = (weakSelf.width - titleSize.width) / 2.0;                CGFloat titleOriginY = (weakSelf.height - titleSize.height - midInset - imageSize.height) / 2.0;                weakSelf.titleEdgeInsets = UIEdgeInsetsMake(titleOriginY, titleOriginX, weakSelf.height - titleOriginY - titleSize.height, titleOriginX);                                CGFloat imageOriginX = (weakSelf.width - imageSize.width) / 2.0;                CGFloat imageOriginY = titleOriginY + titleSize.height + midInset;                weakSelf.imageEdgeInsets = UIEdgeInsetsMake(imageOriginY, imageOriginX, weakSelf.height - imageOriginY - imageSize.height, imageOriginX);                break;            }            case ButtonImageLocationRight: {                CGFloat titleOriginX = (weakSelf.width - imageSize.width - midInset - titleSize.width) / 2.0;                //橫向時候，label的frame可以取較大範圍//                CGFloat titleOriginY = (weakSelf.height - titleSize.height) / 2.0;//                weakSelf.titleLabel.frame = CGRectMake(titleOriginX, titleOriginY, titleSize.width, titleSize.height);                weakSelf.titleLabel.frame = CGRectMake(0, 0, titleOriginX + titleSize.width, weakSelf.height);                [weakSelf.titleLabel setTextAlignment:NSTextAlignmentRight];                                CGFloat imageOriginX = titleOriginX + titleSize.width + midInset;                CGFloat imageOriginY = (weakSelf.height - imageSize.height) /  2.0;                weakSelf.imageEdgeInsets = UIEdgeInsetsMake(imageOriginY, imageOriginX, imageOriginY, weakSelf.width - imageOriginX - imageSize.width);                break;            }        }    };}

 

完整的代碼請參考Base項目中UIButton的分類。

Base項目已更新：https://github.com/ALongWay/base.git