前言
前段時間公司另一iOS工程師在做項目的時候遇到一個標簽視圖，剛開始的時候他是自己創(chuàng)建的，但遇到一些問題，我就建議他去網(wǎng)上找一些比較好的第三方，因為這些標簽不是一個地方出現(xiàn)，你總不能一直粘貼復制吧。遇到這種情況最好的處理方式就是自己封裝一套，雖然剛開始設計的時候需要耗一些時間，一旦封裝完成以后寫代碼就是一路綠燈，既然要封裝一套那就要考慮其他開發(fā)者使用的便利性、代碼的可讀性以及功能的拓展性。自己之前做電商項目的時候也寫過一套，這次在之前的那套基礎上對代碼做了一定的完善與拓展便開源出來了
先看一下QQ音樂、美團、天貓以及SGTagsView實現(xiàn)的標簽效果圖展示
代碼介紹
SGTagsViewConfigure *configure = [SGTagsViewConfigure configure];
NSArray *tags = @[@"iPhone 8", @"iPhone 8P", @"iPhone X", @"iPhone XR", @"iPhone XS", @"iPhone XS Max"];
SGTagsView *tagsView = [SGTagsView tagsViewWithFrame:CGRectMake(0, 100, self.view.frame.size.width, 50) configure:configure];
tagsView.tags = tags;
[self.view addSubview:tagsView];
tagsView.singleSelectedBlock = ^(SGTagsView * _Nonnull tagsView, NSString *tag, NSInteger index) {
NSLog(@"%@ - - %ld", tag, index);
};
看完代碼是不是相當便利，而且SGTagsView的設計理念來源是對SGPagingView框架內(nèi)部的SGPageTitleView的抽取，目前GitHub1200+star，希望能夠方便更多的開發(fā)者使用和了解
設計過程中遇到的一些問題及處理
- 垂直布局自適應以及標簽自動換行問題及處理
- (void)P_layoutVerticalStyle {
__block CGFloat btnX = 0;
CGFloat btnY = (self.tag_rown - 1) * (self.configure.verticalSpacing + self.configure.height);
CGFloat btnH = self.configure.height;
CGFloat contentScrollViewWidth = self.contentScrollView.frame.size.width;
[self.tempMArr enumerateObjectsUsingBlock:^(id _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {
UIButton *btn = obj;
CGSize tempSize = [self P_sizeWithString:btn.currentTitle font:self.configure.font];
CGFloat btnW = tempSize.width + self.configure.additionalWidth;
btn.frame = CGRectMake(btnX, btnY, btnW, btnH);
btnX = CGRectGetMaxX(btn.frame) + self.configure.horizontalSpacing;
if (btnX > contentScrollViewWidth) {
*stop = YES;
self.tag_rown += 1;
for (NSInteger index = 0; index < idx; index++) {
[self.tempMArr removeObjectAtIndex:0];
}
[self P_layoutVerticalStyle];
}
}];
}
看內(nèi)部代碼可以得知 P_layoutVerticalStyle 這個函數(shù)在不停的自我調(diào)用，這里最重要就是 self.tempMArr 這個臨時數(shù)組記錄要布局的標簽進行標簽布局；如果當前標簽的整體frame小于SGTageView的寬，取下一標簽繼續(xù)比較當前標簽與SGTageView寬做對比；如果當前標簽的整體frame大于SGTageView的寬，1、停止遍歷，2、記錄標簽行數(shù)，3、移除之前標簽對象，4、再次調(diào)用自身函數(shù)繼續(xù)計算直到所有標簽布局完成為止
- 圖片與文字布局遇到的問題及處理
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.02 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
[button setImage:[UIImage imageNamed:imageName] forState:(UIControlStateNormal)];
[self P_button:button imagePositionStyle:imagePositionStyle spacing:spacing];
});
這里之所以使用dispatch_after函數(shù)是因為內(nèi)部子視圖布局是在layoutSubviews里面處理的，這個函數(shù)調(diào)用時機相對其他函數(shù)較晚，而調(diào)整圖片與文字位置的布局方法是在得知圖片以及文字frame才開始的，所以簡單粗暴的就這樣解決了
end
如有技術(shù)問題請前往GitHub；看到之后會抽時間處理的
