App搜索頁面經(jīng)常用到關(guān)鍵詞提示吆寨，例如手機(jī)淘寶的【歷史搜索】启妹，網(wǎng)易云音樂的【熱門搜索】靶擦。為了方便使用再膳，筆者寫了一個可以流式布局按鈕的view并封裝挺勿。
【文末附運(yùn)行效果及demo】
思考
需要哪些樣式？
- 按鈕帶圓角喂柒，有邊框不瓶；
- 按鈕寬度根據(jù)標(biāo)題長度自適應(yīng)；
- 按鈕之間可以調(diào)整間距胳喷。
流式布局的核心是什么湃番？
- 核心邏輯：當(dāng) 當(dāng)前按鈕寬度在視圖水平方向放得下時就把按鈕添加在當(dāng)前水平方向，當(dāng) 當(dāng)前按鈕寬度在視圖水平方向放不下時就換一行添加吭露。
實(shí)現(xiàn)
- 自定義一個view吠撮，view上的按鈕根據(jù)傳進(jìn)來的關(guān)鍵詞數(shù)組循環(huán)創(chuàng)建。
- 將上一個按鈕做標(biāo)記讲竿，創(chuàng)建當(dāng)前按鈕時根據(jù)上一個按鈕的位置設(shè)置當(dāng)前按鈕位置泥兰。
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);
}
}
- 利用layer設(shè)置按鈕圓角、邊框等樣式题禀。
btn.layer.cornerRadius = 12;
btn.layer.masksToBounds = YES;
btn.layer.borderWidth = 1;
btn.layer.borderColor = self.borderColor.CGColor;
- 標(biāo)記按鈕鞋诗，利用
block（也可以選擇代理）將按鈕作為參數(shù)傳出，進(jìn)行點(diǎn)擊事件操作迈嘹。
- (void)onBtnClick:(UIButton *)btn {
if (self.clickBlock) {
self.clickBlock(btn);
}
}
注意
- 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;
}
- 為了更方面使用秀仲，封裝view時可以留出屬性接口方便對其設(shè)置融痛。
/* 可單獨(dú)設(shè)置樣式,不設(shè)置則為默認(rèn)樣式
* 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;
- 你也可以在自定義view時的初始化方法中添加好默認(rèn)設(shè)置，如果使用時不想過多設(shè)置神僵，可以使用默認(rèn)效果雁刷。
//初始化:默認(rèn)設(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;
}
- 在
block中將button作為唯一參數(shù)即可，標(biāo)題可以通過button.currentTitle獲取保礼，拿到button可以做的事情更多沛励，例如改變選中按鈕的顏色等等。
- (void)onBtnClick:(UIButton *)btn {
if (self.clickBlock) {
self.clickBlock(btn);
}
}
效果
總結(jié)
這個效果只要理解了流式布局的核心邏輯炮障，處理起來就很簡單了目派。最后為了方便使用，封裝時注意一些細(xì)節(jié)即可胁赢。
