UICollectionView实现的标签选择器
来源:互联网 发布:wowhead的数据库 编辑:程序博客网 时间:2024/05/16 05:12
近来,在项目中需要实现一个类似兴趣标签的选择器。由于标签的文字长度不定,所以标签的显示长度就不定。为了实现效果,就使用了UICollectionView来实现了每行的标签数量不定、cell的宽度自适应的效果。先在此分享出来:
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]; //此处可以根据需要自己使用自动布局代码实现 _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的实现
.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.minimumInteritemSpacing = 5;//同一行不同cell间距 self.minimumLineSpacing = 5;//行间距 self.sectionInset = UIEdgeInsetsMake(10, 10, 10, 10); self.scrollDirection = UICollectionViewScrollDirectionVertical; _originxArray = [NSMutableArray array]; _originyArray = [NSMutableArray array]; } return self;}#pragma mark - 重写父类的方法,实现瀑布流布局#pragma mark - 当尺寸有所变化时,重新刷新- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds { return YES;}- (void)prepareLayout { [super prepareLayout];}#pragma mark - 处理所有的Item的layoutAttributes- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect{ NSArray *array = [super layoutAttributesForElementsInRect:rect]; NSMutableArray *mutArray = [NSMutableArray arrayWithCapacity:array.count]; for(UICollectionViewLayoutAttributes *attrs in array){ UICollectionViewLayoutAttributes *theAttrs = [self layoutAttributesForItemAtIndexPath:attrs.indexPath]; [mutArray addObject:theAttrs]; } return mutArray;}#pragma mark - 处理单个的Item的layoutAttributes- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath{ CGFloat x = self.sectionInset.left; CGFloat y = 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; } // 创建属性 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) { if ([number floatValue] > maxY) { maxY = [number floatValue]; } }]; return CGSizeMake(width, maxY + _rowHeight + self.sectionInset.bottom);}@end
实现思路:在YLWaterFlowLayout中使用originxArray和originyArray两个个数组记录了每一个自定义YLTagsCollectionViewCell的位置x和y。
在 -(UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath
方法中通获得与当前YLTagsCollectionViewCell临近的“上一个YLTagsCollectionViewCell”的位置和尺寸信息,将上一个cell的x加上上一个cell的width来得到当前cell的x。同时还要判断当前cell的x+width是否会超越出屏幕右边缘,如果超出,则表明需要换行显示了,这时候就要修改y的值了。
3、效果图
0 0
- UICollectionView实现的标签选择器
- jQuery实现select标签的生日选择器
- 标签选择器的补充
- UICollectionView 单选的实现
- UICollectionView的瀑布流实现
- 瀑布流的标签选择器
- css各种选择器,元素标签选择器,类选择器,id选择器,选择器的组合
- 关于利用UICollectionView展示图片的实现
- UICollectionview实现自定义cell的移动删除
- SpringBoard九宫格的实现 (基于UICollectionView)
- UICollectionView 实现的简易相册,可以缩放
- 关于不用nib实现UICollectionView的使用
- UICollectionView瀑布流的实现,带例子
- UICollectionView实现item的重新排布
- UICollectionView实现头部漂浮的效果
- Swift实现最简单的UICollectionView
- UICollectionView实现头部漂浮的效果
- 标签选择器
- mysql-5.7.5-labs-http-documentation中文翻译-摘要
- Java,quartz定时任务
- 欢迎使用CSDN-markdown编辑器
- leetcode——Majority Element II
- java中的abstract
- UICollectionView实现的标签选择器
- Google Play Store无法搜索应用或提示应用不兼容,此类问题该如何定位及分析
- android nfc中Ndef格式的读写
- IOS中获取各种文件的目录路径的方法
- shell 读取文件第几行 第几列的值
- 码农翻身
- MyBatis中Like语句使用方式
- 数据处理---Spring Batch之实践
- Java中的dom4j解析pdm文档