App搜索頁面經(jīng)常用到關(guān)鍵詞提示，例如手機淘寶的【歷史搜索】，網(wǎng)易云音樂的【熱門搜索】。為了方便使用，筆者寫了一個可以流式布局按鈕的view并封裝。

【文末附運行效果及demo】

思考

需要哪些樣式？

• 按鈕帶圓角，有邊框；
• 按鈕寬度根據(jù)標題長度自適應(yīng)；
• 按鈕之間可以調(diào)整間距。

流式布局的核心是什么？

• 核心邏輯：當 當前按鈕寬度在視圖水平方向放得下時就把按鈕添加在當前水平方向，當 當前按鈕寬度在視圖水平方向放不下時就換一行添加。

實現(xiàn)

1. 自定義一個view，view上的按鈕根據(jù)傳進來的關(guān)鍵詞數(shù)組循環(huán)創(chuàng)建。
2. 將上一個按鈕做標記，創(chuàng)建當前按鈕時根據(jù)上一個按鈕的位置設(shè)置當前按鈕位置。

if (i == 0) {

    btn.frame = CGRectMake(self.padding, self.padding, rect.size.width + 15, rect.size.height + 15);
}else {

    CGFloat leftWidth = CGRectGetWidth(self.frame) - btnPrev.frame.origin.x - btnPrev.frame.size.width - self.padding * 2;
    if (leftWidth > rect.size.width) {

        btn.frame = CGRectMake(CGRectGetMaxX(btnPrev.frame) + self.padding, btnPrev.frame.origin.y, rect.size.width + 15, rect.size.height + 15);
    }else {

        btn.frame = CGRectMake(self.padding, CGRectGetMaxY(btnPrev.frame) + self.padding, rect.size.width + 15, rect.size.height + 15);
    }
}

3. 利用layer設(shè)置按鈕圓角、邊框等樣式。

btn.layer.cornerRadius = 12;
btn.layer.masksToBounds = YES;
btn.layer.borderWidth = 1;
btn.layer.borderColor = self.borderColor.CGColor;

4. 標記按鈕，利用 block（也可以選擇代理）將按鈕作為參數(shù)傳出，進行點擊事件操作。

- (void)onBtnClick:(UIButton *)btn {

    if (self.clickBlock) {

        self.clickBlock(btn);
    }
}

注意

1. view的高度在創(chuàng)建完最后一個按鈕后才能確定，所以在for循環(huán)中別忘了最后設(shè)置一下view的高度。

//最后一個按鈕時設(shè)置視圖高度
if (i == self.words.count - 1) {

    CGRect aRect = self.frame;
    aRect.size.height = CGRectGetMaxY(btn.frame) + 10;
    self.frame = aRect;
}

2. 為了更方面使用，封裝view時可以留出屬性接口方便對其設(shè)置。

/* 可單獨設(shè)置樣式,不設(shè)置則為默認樣式
* words 詞匯數(shù)組
* btnColor 按鈕背景色
* titleColor 文字顏色
* borderColor 按鈕邊框顏色
* padding 按鈕間隔
* wordHeight 詞匯高度
* fontSize 字體大小
*/
@property (nonatomic, strong) NSArray *words;
@property (nonatomic, strong) UIColor *btnColor;
@property (nonatomic, strong) UIColor *titleColor;
@property (nonatomic, strong) UIColor *borderColor;
@property (nonatomic, assign) CGFloat padding;
@property (nonatomic, assign) CGFloat wordHeight;
@property (nonatomic, assign) CGFloat fontSize;

3. 你也可以在自定義view時的初始化方法中添加好默認設(shè)置，如果使用時不想過多設(shè)置，可以使用默認效果。

//初始化:默認設(shè)置
- (instancetype)init {
    if (self = [super init]) {

        self.btnColor = [UIColor whiteColor];
        self.titleColor = [UIColor blackColor];
        self.borderColor = [UIColor lightGrayColor];
        self.padding = 10;
        self.wordHeight = 25;
        self.fontSize = 15;
    }
    return self;
}

4. 在 block 中將 button 作為唯一參數(shù)即可，標題可以通過 button.currentTitle 獲取，拿到 button 可以做的事情更多，例如改變選中按鈕的顏色等等。

- (void)onBtnClick:(UIButton *)btn {

    if (self.clickBlock) {

        self.clickBlock(btn);
    }
}

效果

完整demo

總結(jié)

這個效果只要理解了流式布局的核心邏輯，處理起來就很簡單了。最后為了方便使用，封裝時注意一些細節(jié)即可。