iOS UICollectionView實(shí)現(xiàn)標(biāo)簽選擇器
近來(lái),在項(xiàng)目中需要實(shí)現(xiàn)一個(gè)類(lèi)似興趣標(biāo)簽的選擇器。由于標(biāo)簽的文字長(zhǎng)度不定,所以標(biāo)簽的顯示長(zhǎng)度就不定。為了實(shí)現(xiàn)效果,就使用了UICollectionView來(lái)實(shí)現(xiàn)了每行的標(biāo)簽數(shù)量不定、cell的寬度自適應(yīng)的效果。先在此分享出來(lái):
1、自適應(yīng)UICollectionViewCell
這里只是在自適應(yīng)UICollectionViewCell上放一個(gè)和UICollectionViewCell保持一樣大小的按鈕,當(dāng)選中和取消選中時(shí)改變按鈕的文字顏色和邊框顏色:
#pragma mark---標(biāo)簽cell @implementation YLTagsCollectionViewCell -(instancetype)initWithFrame:(CGRect)frame { if(self = [super initWithFrame:frame]){ self.backgroundColor = [UIColor clearColor]; _btn = [UIButton buttonWithType:UIButtonTypeCustom]; //此處可以根據(jù)需要自己使用自動(dòng)布局代碼實(shí)現(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子類(lèi)--YLWaterFlowLayout的實(shí)現(xiàn)
.h頭文件
#import <UIKit/UIKit.h> @class YLWaterFlowLayout; @protocol YLWaterFlowLayoutDelegate <NSObject> /**通過(guò)代理獲得每個(gè)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 - 重寫(xiě)父類(lèi)的方法,實(shí)現(xiàn)瀑布流布局 #pragma mark - 當(dāng)尺寸有所變化時(shí),重新刷新 - (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 - 處理單個(gè)的Item的layoutAttributes - (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath { CGFloat x = self.sectionInset.left; CGFloat y = self.sectionInset.top; //判斷獲得前一個(gè)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]; //保證一個(gè)cell不超過(guò)最大寬度 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的滾動(dòng)范圍 - (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
實(shí)現(xiàn)思路:在YLWaterFlowLayout中使用originxArray和originyArray兩個(gè)個(gè)數(shù)組記錄了每一個(gè)自定義YLTagsCollectionViewCell的位置x和y。
在 -(UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath方法中通獲得與當(dāng)前YLTagsCollectionViewCell臨近的“上一個(gè)YLTagsCollectionViewCell”的位置和尺寸信息,將上一個(gè)cell的x加上上一個(gè)cell的width來(lái)得到當(dāng)前cell的x。同時(shí)還要判斷當(dāng)前cell的x+width是否會(huì)超越出屏幕右邊緣,如果超出,則表明需要換行顯示了,這時(shí)候就要修改y的值了。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
iOS開(kāi)發(fā)實(shí)現(xiàn)隨機(jī)圖片驗(yàn)證碼封裝
這篇文章主要介紹了iOS開(kāi)發(fā)實(shí)現(xiàn)隨機(jī)圖片驗(yàn)證碼封裝,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08iOS實(shí)現(xiàn)卡片式滾動(dòng)效果 iOS實(shí)現(xiàn)電影選片效果
這篇文章主要為大家詳細(xì)介紹了iOS實(shí)現(xiàn)卡片式滾動(dòng)效果,實(shí)現(xiàn)電影選片效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-02-02NSURLSession跨域重定向透?jìng)鱄TTP Header問(wèn)題解決
這篇文章主要為大家介紹了NSURLSession跨域重定向透?jìng)鱄TTP Header問(wèn)題解決方案,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-11-11iOS中解決Xcode9的Log日志無(wú)法輸出中文的問(wèn)題小結(jié)
這篇文章主要介紹了iOS中解決Xcode9的Log日志無(wú)法輸出中文的問(wèn)題小結(jié),需要的朋友可以參考下2017-11-11iOS 11 UINavigationItem 去除左右間隙的方法
本篇文章主要介紹了iOS 11 UINavigationItem 去除左右間隙的方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10iOS開(kāi)發(fā)之tableView cell的展開(kāi)收回功能實(shí)現(xiàn)代碼
本文介紹了iOS開(kāi)發(fā)之tableView cell的展開(kāi)收回功能實(shí)現(xiàn)代碼,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01iOS關(guān)鍵字static extern const使用示例詳解
這篇文章主要為大家介紹了iOS關(guān)鍵字static extern const使用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11iOS UICollectionView實(shí)現(xiàn)卡片效果
這篇文章主要為大家詳細(xì)介紹了iOS UICollectionView實(shí)現(xiàn)卡片效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-04-04