近來，在項目中需要實現(xiàn)一個類似興趣標簽的選擇器溶推。由于標簽的文字長度不定否灾，所以標簽的顯示長度就不定。為了實現(xiàn)效果稍算，就使用了UICollectionView來實現(xiàn)了每行的標簽數(shù)量不定典尾、cell的寬度自適應的效果。先在此分享出來：
2017-09-07 update
現(xiàn)已支持多section效果和記錄上一次選中的標簽的效果糊探，并解決UICollectionView在滑動過程中有些cell一會顯示一會不顯示的bug钾埂。bug詳情見：UICollectionView滾動的時候會出現(xiàn)cell消失的情況，代碼已更新到GitHub科平，歡迎star褥紫。
1、自適應UICollectionViewCell
這里只是在自適應UICollectionViewCell上放一個和UICollectionViewCell保持一樣大小的按鈕瞪慧，當選中和取消選中時改變按鈕的文字顏色和邊框顏色：
#pragma mark---標簽cell
@implementation YLTagsCollectionViewCell
-(instancetype)initWithFrame:(CGRect)frame
{
if(self = [super initWithFrame:frame]){
self.backgroundColor = [UIColor clearColor];
_btn = [UIButton buttonWithType:UIButtonTypeCustom];
//此處可以根據(jù)需要自己使用自動布局代碼實現(xiàn)
_btn.frame = CGRectMake(0, 0, frame.size.width, frame.size.height);
_btn.backgroundColor = [UIColor whiteColor];
_btn.titleLabel.font = [UIFont systemFontOfSize:14];
_btn.layer.borderWidth = 1.f;
_btn.layer.cornerRadius = frame.size.height/2.0;
_btn.layer.masksToBounds = YES;
[_btn setTitleColor:HEXCOLOR(0x666666) forState:UIControlStateNormal];
_btn.layer.borderColor = HEXCOLOR(0xdddddd).CGColor;
_btn.userInteractionEnabled = NO;
[self.contentView addSubview:_btn];
}
return self;
}
-(void)layoutSubviews
{
[super layoutSubviews];
_btn.frame = CGRectMake(0, 0, self.contentView.frame.size.width, self.contentView.frame.size.height);
}
-(void)setSelected:(BOOL)selected
{
[super setSelected:selected];
_btn.layer.borderColor = selected?HEXCOLOR(0xffb400).CGColor:HEXCOLOR(0xdddddd).CGColor;
[_btn setTitleColor:selected?HEXCOLOR(0xffb400):HEXCOLOR(0x666666) forState:UIControlStateNormal];
}
-(void)setHighlighted:(BOOL)highlighted
{
[super setHighlighted:highlighted];
_btn.layer.borderColor = highlighted?HEXCOLOR(0xffb400).CGColor:HEXCOLOR(0xdddddd).CGColor;
[_btn setTitleColor:highlighted?HEXCOLOR(0xffb400):HEXCOLOR(0x666666) forState:UIControlStateNormal];
}
@end
2髓考、UICollectionViewFlowLayout子類--YLWaterFlowLayout的實現(xiàn)
.h頭文件
#import <UIKit/UIKit.h>
@class YLWaterFlowLayout;
@protocol YLWaterFlowLayoutDelegate <NSObject>
/**通過代理獲得每個cell的寬度*/
- (CGFloat)waterFlowLayout:(YLWaterFlowLayout *)layout
widthAtIndexPath:(NSIndexPath *)indexPath;
@end
@interface YLWaterFlowLayout : UICollectionViewFlowLayout
@property (nonatomic,assign) id<YLWaterFlowLayoutDelegate> delegate;
@property(nonatomic,assign)CGFloat rowHeight;///< 固定行高
@end
.m文件
#import "YLWaterFlowLayout.h"
@interface YLWaterFlowLayout()
@property(nonatomic,strong)NSMutableArray *originxArray;
@property(nonatomic,strong)NSMutableArray *originyArray;
@end
@implementation YLWaterFlowLayout
#pragma mark - 初始化屬性
- (instancetype)init {
self = [super init];
if (self) {
[self setupLayout];
_originxArray = [NSMutableArray array];
_originyArray = [NSMutableArray array];
}
return self;
}
- (void)setupLayout
{
self.minimumInteritemSpacing = 5;//同一行不同cell間距
self.minimumLineSpacing = 5;//行間距
self.headerReferenceSize = CGSizeMake(0, 50);//設置section header 固定高度，如果需要的話
self.sectionInset = UIEdgeInsetsMake(10, 10, 10, 10);
self.scrollDirection = UICollectionViewScrollDirectionVertical;
}
#pragma mark - 重寫父類的方法弃酌，實現(xiàn)瀑布流布局
#pragma mark - 當尺寸有所變化時氨菇，重新刷新
- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds {
return NO;
}
- (void)prepareLayout {
[super prepareLayout];
}
#pragma mark - 所有cell和view的布局屬性
//sectionheader sectionfooter decorationview collectionviewcell的屬性都會走這個方法
- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect
{
NSArray *array = [super layoutAttributesForElementsInRect:rect];
for(UICollectionViewLayoutAttributes *attrs in array){
//類型判斷
if(attrs.representedElementCategory == UICollectionElementCategoryCell){
UICollectionViewLayoutAttributes *theAttrs = [self layoutAttributesForItemAtIndexPath:attrs.indexPath];
attrs.frame = theAttrs.frame;
}
}
return array;
}
#pragma mark - 指定cell的布局屬性
- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath
{
CGFloat x = self.sectionInset.left;
//如果有sectionheader需要加上sectionheader高度
CGFloat y = self.headerReferenceSize.height + self.sectionInset.top;
//判斷獲得前一個cell的x和y
NSInteger preRow = indexPath.row - 1;
if(preRow >= 0){
if(_originyArray.count > preRow){
x = [_originxArray[preRow]floatValue];
y = [_originyArray[preRow]floatValue];
}
NSIndexPath *preIndexPath = [NSIndexPath indexPathForItem:preRow inSection:indexPath.section];
CGFloat preWidth = [self.delegate waterFlowLayout:self widthAtIndexPath:preIndexPath];
x += preWidth + self.minimumInteritemSpacing;
}
CGFloat currentWidth = [self.delegate waterFlowLayout:self widthAtIndexPath:indexPath];
//保證一個cell不超過最大寬度
currentWidth = MIN(currentWidth, self.collectionView.frame.size.width - self.sectionInset.left - self.sectionInset.right);
if(x + currentWidth > self.collectionView.frame.size.width - self.sectionInset.right){
//超出范圍儡炼，換行
x = self.sectionInset.left;
y += _rowHeight + self.minimumLineSpacing;
}
// 創(chuàng)建屬性
UICollectionViewLayoutAttributes *attrs = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
attrs.frame = CGRectMake(x, y, currentWidth, _rowHeight);
_originxArray[indexPath.row] = @(x);
_originyArray[indexPath.row] = @(y);
return attrs;
}
#pragma mark - CollectionView的滾動范圍
- (CGSize)collectionViewContentSize
{
CGFloat width = self.collectionView.frame.size.width;
__block CGFloat maxY = 0;
[_originyArray enumerateObjectsUsingBlock:^(NSNumber *number, NSUInteger idx, BOOL * _Nonnull stop) {
CGFloat y = [number floatValue];
if (y > maxY) {
maxY = y;
}
}];
return CGSizeMake(width, maxY + _rowHeight + self.sectionInset.bottom);
}
@end
實現(xiàn)思路：在YLWaterFlowLayout中使用originxArray和originyArray兩個個數(shù)組記錄了每一個自定義YLTagsCollectionViewCell的位置x和y。
在 -(UICollectionViewLayoutAttributes *) layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath方法中通獲得與當前YLTagsCollectionViewCell臨近的“上一個YLTagsCollectionViewCell”的位置和尺寸信息门驾，將上一個cell的x加上上一個cell的width來得到當前cell的x射赛。同時還要判斷當前cell的x+width是否會超越出屏幕右邊緣多柑，如果超出奶是，則表明需要換行顯示了，這時候就要修改y的值了竣灌。
3聂沙、效果圖
YLTagsChooser.gif
大家可以參考這種思路來實現(xiàn)其他類似的標簽選擇視圖。
demo地址YLTagsChooser
