接到一個需求就是要實(shí)現(xiàn)標(biāo)簽組的顯示和選擇是尖，如下圖所示：
一開始感覺沒有什么頭緒饺汹，參考網(wǎng)上各種demo痰催，發(fā)現(xiàn)大部分的demo都是以自繪制標(biāo)簽為主實(shí)現(xiàn)標(biāo)簽的長度計算和自動換行，但是這樣需要實(shí)現(xiàn)的計算量就非常大逸吵，對于一部分參考和后期維護(hù)起來就非常麻煩扫皱，稍微修改錯一個參數(shù)，導(dǎo)致計算不準(zhǔn)確编检，這就不太好實(shí)現(xiàn)扰才。
但是想了一下我們常用的系統(tǒng)控件中衩匣，是否有相關(guān)的控件可以實(shí)現(xiàn)呢？第一個想法就讓我想到了UICollectionView,既然UICollectionView能實(shí)現(xiàn)瀑布流生百，為什么標(biāo)簽這種無規(guī)則的界面不能實(shí)現(xiàn)呢柄延？搜吧，于是就開始初步搭建：
首先，先了解在UICollectionView中如何能或者每一個cell的大小摆昧，想到我們常用的UITableView的操作蜒程，其實(shí)兩者的用法基本也是一樣的昭躺，所以在UICollectionViewDelegate中就有
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
NSString * containString = @"你想知道怎么實(shí)現(xiàn)寬度計算嗎？";
CGFloat width = [NSString getWidthWithText:containString height:30 font:13];
return CGSizeMake(width + 25, 30.0f);
}
這個方法能手動設(shè)置cell的大小汉规。
既然能手動設(shè)置cell的大小了针史，那這樣實(shí)現(xiàn)起來就容易了碟狞，按照正常的流程設(shè)置UICollectionView的數(shù)據(jù)源方法和相關(guān)的代理方法即可。
接下來的就是一個封裝好的類频祝，即計算String的寬度：
/**
根據(jù)高度度求寬度
@param text 計算的內(nèi)容
@param height 計算的高度
@param font 字體大小
@return 返回寬度
*/
+ (CGFloat)getWidthWithText:(NSString *)text height:(CGFloat)height font:(CGFloat)font
{
//加上判斷常空，防止傳nil等不符合的值，導(dǎo)致程序奔潰
if (text == nil || [text isEqualToString:@""]){
text = @"無";
}
if (font <= 0){
font = 13;
}
if (height < 0){
height = 0;
}
CGRect rect = [text boundingRectWithSize:CGSizeMake(MAXFLOAT, height)
options:NSStringDrawingUsesLineFragmentOrigin
attributes:@{NSFontAttributeName:[UIFont systemFontOfSize:font]}
context:nil];
return rect.size.width;
}
這樣大概的設(shè)置昆禽，大概即可實(shí)現(xiàn)在UICollectionView中的每一個cell的大小醉鳖，而最重要的一步就來了盗棵，如何設(shè)置UICollectionView的布局呢纹因？，這個就是整個標(biāo)簽組最為重要的一部分。
1.如何實(shí)現(xiàn)cell的布局位置要靠左對齊寄疏，并實(shí)現(xiàn)到屏幕最右邊時能自動換行陕截；
2.如何實(shí)現(xiàn)每一個不同長度的cell的具體距離和到不會被UICollectionViewFlowLayout默認(rèn)數(shù)據(jù)自動拉伸到屏幕平分呢批什；
這個時候驻债，我們就需要重寫UICollectionViewFlowLayout，首先要獲取相關(guān)容器的寬度暮的，和或者每一個cell的寬度淌实，然后通過計算每一個行cell的寬度和間隙相加的和是否大于容器的寬度，如果大于恨闪，即可更換其行數(shù)咙咽，以下就是 .m文件的直接代碼展示（參考來源 @Giovanni Lodi）：
@interface UICollectionViewLayoutAttributes (LeftAligned)
- (void)leftAlignFrameWithSectionInset:(UIEdgeInsets)sectionInset;
@end
@implementation UICollectionViewLayoutAttributes (LeftAligned)
- (void)leftAlignFrameWithSectionInset:(UIEdgeInsets)sectionInset
{
CGRect frame = self.frame;
frame.origin.x = sectionInset.left;
self.frame = frame;
}
@end
#pragma mark -
@implementation UICollectionViewLeftAlignedLayout
#pragma mark - UICollectionViewLayout
- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect {
NSArray *originalAttributes = [super layoutAttributesForElementsInRect:rect];
NSMutableArray *updatedAttributes = [NSMutableArray arrayWithArray:originalAttributes];
for (UICollectionViewLayoutAttributes *attributes in originalAttributes) {
if (!attributes.representedElementKind) {
NSUInteger index = [updatedAttributes indexOfObject:attributes];
updatedAttributes[index] = [self layoutAttributesForItemAtIndexPath:attributes.indexPath];
}
}
return updatedAttributes;
}
- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath {
UICollectionViewLayoutAttributes* currentItemAttributes = [[super layoutAttributesForItemAtIndexPath:indexPath] copy];
UIEdgeInsets sectionInset = [self evaluatedSectionInsetForItemAtIndex:indexPath.section];
BOOL isFirstItemInSection = indexPath.item == 0;
CGFloat layoutWidth = CGRectGetWidth(self.collectionView.frame) - sectionInset.left - sectionInset.right;
if (isFirstItemInSection) {
[currentItemAttributes leftAlignFrameWithSectionInset:sectionInset];
return currentItemAttributes;
}
NSIndexPath* previousIndexPath = [NSIndexPath indexPathForItem:indexPath.item-1 inSection:indexPath.section];
CGRect previousFrame = [self layoutAttributesForItemAtIndexPath:previousIndexPath].frame;
CGFloat previousFrameRightPoint = previousFrame.origin.x + previousFrame.size.width;
CGRect currentFrame = currentItemAttributes.frame;
CGRect strecthedCurrentFrame = CGRectMake(sectionInset.left,
currentFrame.origin.y,
layoutWidth,
currentFrame.size.height);
// if the current frame, once left aligned to the left and stretched to the full collection view
// width intersects the previous frame then they are on the same line
BOOL isFirstItemInRow = !CGRectIntersectsRect(previousFrame, strecthedCurrentFrame);
if (isFirstItemInRow) {
// make sure the first item on a line is left aligned
[currentItemAttributes leftAlignFrameWithSectionInset:sectionInset];
return currentItemAttributes;
}
CGRect frame = currentItemAttributes.frame;
frame.origin.x = previousFrameRightPoint + [self evaluatedMinimumInteritemSpacingForSectionAtIndex:indexPath.section];
currentItemAttributes.frame = frame;
return currentItemAttributes;
}
- (CGFloat)evaluatedMinimumInteritemSpacingForSectionAtIndex:(NSInteger)sectionIndex
{
if ([self.collectionView.delegate respondsToSelector:@selector(collectionView:layout:minimumInteritemSpacingForSectionAtIndex:)]) {
id<UICollectionViewDelegateLeftAlignedLayout> delegate = (id<UICollectionViewDelegateLeftAlignedLayout>)self.collectionView.delegate;
return [delegate collectionView:self.collectionView layout:self minimumInteritemSpacingForSectionAtIndex:sectionIndex];
} else {
return self.minimumInteritemSpacing;
}
}
- (UIEdgeInsets)evaluatedSectionInsetForItemAtIndex:(NSInteger)index
{
if ([self.collectionView.delegate respondsToSelector:@selector(collectionView:layout:insetForSectionAtIndex:)]) {
id<UICollectionViewDelegateLeftAlignedLayout> delegate = (id<UICollectionViewDelegateLeftAlignedLayout>)self.collectionView.delegate;
return [delegate collectionView:self.collectionView layout:self insetForSectionAtIndex:index];
} else {
return self.sectionInset;
}
}
@end
那么既然最困難的一步就是布局的問題已經(jīng)解決了，那整體的頁面顯示已經(jīng)完成了余素，那接下來就是數(shù)據(jù)的處理了,那要如何實(shí)現(xiàn)下圖顯示炊昆？
那首先要思考兩個問題凤巨，如果通過對數(shù)據(jù)源的設(shè)置實(shí)現(xiàn)UICollectionView中每一組選中cell或者不選中cell敢茁，多選和單選的區(qū)別，此時我想到的一個方法就是給數(shù)據(jù)源一個屬性伸刃，標(biāo)識該cell是否選中：
/**
是否選中
*/
@property (nonatomic, assign) BOOL isSelect;
通過數(shù)據(jù)源的屬性來控制cell內(nèi)部選中的控件的顏色和狀態(tài)
[_tagBtn setTitle:model.name forState: UIControlStateNormal];
UIColor *containStringColor = model.color == 0 ? tagBlueColor : model.color == 1 ? tagRedColor : model.color == 2 ? tagGreenColor : model.color == 3 ? tagYellowColor : model.color == 4 ? tagVioletColor : tagIndigoColor;
if (model.isSelect == YES)
{
[_tagBtn setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
_tagBtn.backgroundColor = containStringColor;
}
else
{
[_tagBtn setTitleColor:labelBlackColor forState:UIControlStateNormal];
_tagBtn.backgroundColor = HEXCOLOR(0xeeeeee);
}
那controller中的數(shù)據(jù)該怎么判斷是否選中和未選擇捧颅，然后實(shí)現(xiàn)給數(shù)據(jù)源的屬性選中呢较雕？具體思路就是：需要進(jìn)行遍歷數(shù)據(jù)源中的所有模型進(jìn)行判斷和賦值選中狀態(tài)，實(shí)現(xiàn)方法如下：
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
[collectionView deselectItemAtIndexPath:indexPath animated:NO];
PBCTagGroundModel *groundModel = self.listArrM[indexPath.section];
DLog(@"indexPath.Seciont = %zd,row = %zd",indexPath.section,indexPath.row);
//替換成可選模式
for (int i = 0; i < groundModel.tags.count; ++i)
{
PBCTagModel *model = groundModel.tags[i];
if (indexPath.row == i)
{
if (model.isSelect == YES)
{
model.isSelect = NO;
}
else
{
model.isSelect = YES;
}
[groundModel.tags replaceObjectAtIndex:i withObject:model];
}
}
[self.listArrM replaceObjectAtIndex:indexPath.section withObject:groundModel];
[self.collectionView reloadData];
}
既然每一組的cell都實(shí)現(xiàn)了選中和未選中狀態(tài)了，那如何實(shí)現(xiàn)判斷全選和不選中的狀態(tài)呢激捏？這里就需要給UICollectionView的頭部設(shè)置一個點(diǎn)擊事件凄吏，并且也需要對數(shù)據(jù)源中的所有數(shù)據(jù)進(jìn)行遍歷，對數(shù)據(jù)的選中狀態(tài)進(jìn)行選中和未選中的屬性賦值图柏。
那么問題來了蚤吹，如何這是UICollectionView的頭部呢？這個和UITableView的操作其他大有雷同：
首先繁涂，要先注冊UICollectionView的頭部：
//注冊頭視圖
[collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"UICollectionViewHeader"];
然后實(shí)現(xiàn)collectionView的頭部尾部設(shè)置代理
//設(shè)置頭視圖的大小
-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section{
return CGSizeMake([UIScreen mainScreen].bounds.size.width, 44);
}
//創(chuàng)建頭視圖
- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView
viewForSupplementaryElementOfKind:(NSString *)kind
atIndexPath:(NSIndexPath *)indexPath {
NSString *indentifierString = @"UICollectionViewHeader";
UICollectionReusableView *headView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader
withReuseIdentifier:indentifierString
forIndexPath:indexPath];
headView.backgroundColor = [UIColor whiteColor];
//此處操作是為了防止頭部視圖重復(fù)使用（從緩存機(jī)制中取出）,導(dǎo)致重疊視圖扔罪，如要移除此前設(shè)置的視圖再進(jìn)行繪制
for (UIView *subView in headView.subviews)
{
[subView removeFromSuperview];
}
//設(shè)置相關(guān)視圖
//.....此處設(shè)置
return headView;
}
設(shè)置完頭部視圖了矿酵，那具體的數(shù)據(jù)操作就是遍歷數(shù)據(jù)修改數(shù)據(jù)源狀態(tài)了矗积，代碼如下：
/**
點(diǎn)擊選擇組便簽
@param btn 組標(biāo)簽
*/
- (void)clickSelectAllBtn:(UIButton *)btn
{
btn.selected = !btn.selected;
PBCTagGroundModel *groundModel = self.listArrM[btn.tag];
//替換成可選模式
for (int i = 0; i < groundModel.tags.count; ++i)
{
PBCTagModel *model = groundModel.tags[i];
if (btn.selected == YES)
{
model.isSelect = YES;
}
else
{
model.isSelect = NO;
}
[groundModel.tags replaceObjectAtIndex:i withObject:model];
}
[self.listArrM replaceObjectAtIndex:btn.tag withObject:groundModel];
[self.collectionView reloadData];
}
那么對數(shù)據(jù)源也處理完了棘捣，整體的標(biāo)簽組也是實(shí)現(xiàn)了。
其實(shí)整體設(shè)置標(biāo)簽組哪自，最大的難度是在于UICollectionViewFlowLayout的重寫和計算禁熏，如果這一步解決了瞧毙，整體的思路很清晰寄症，可以直接解決問題有巧。
以上就是通過UICollectionView來實(shí)現(xiàn)標(biāo)簽組的方法，可能實(shí)現(xiàn)的路徑和方法很多男图，也有更加多便捷方法和思路，上面方法如有不足之處望大家指出栈戳，或者有更優(yōu)的方法难裆，也歡迎大家來探討乃戈。
類似上圖介紹的demo地址：Demo地址
大千世界，求同存異缩歪；相遇是緣侦讨，相識是份韵卤，相知便是“猿糞”(緣分)
From MZou
