扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
小编这次要给大家分享的是iOS UICollectionView如何实现标签选择器，文章内容丰富，感兴趣的小伙伴可以来了解一下，希望大家阅读完这篇文章之后能够有所收获。
在成都网站设计、成都网站制作过程中，需要针对客户的行业特点、产品特性、目标受众和市场情况进行定位分析，以确定网站的风格、色彩、版式、交互等方面的设计方向。创新互联建站还需要根据客户的需求进行功能模块的开发和设计，包括内容管理、前台展示、用户权限管理、数据统计和安全保护等功能。
近来，在项目中需要实现一个类似兴趣标签的选择器。由于标签的文字长度不定，所以标签的显示长度就不定。为了实现效果，就使用了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];
}
@end2、UICollectionViewFlowLayout子类--YLWaterFlowLayout的实现
.h头文件
#import@class YLWaterFlowLayout; @protocol YLWaterFlowLayoutDelegate /**通过代理获得每个cell的宽度*/ - (CGFloat)waterFlowLayout:(YLWaterFlowLayout *)layout widthAtIndexPath:(NSIndexPath *)indexPath; @end @interface YLWaterFlowLayout : UICollectionViewFlowLayout @property (nonatomic,assign) id 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的值了。
看完这篇关于iOS UICollectionView如何实现标签选择器的文章，如果觉得文章内容写得不错的话，可以把它分享出去给更多人看到。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网