标签流水布局(TagsView)一行显示不下的自动折行

项目中经常遇到很多标签排列的那种, 之前一直用HXTagsView, 但是一个很小的需求, 就动用UICollectionView甚至是第三方, 总觉得有点小题大做, 索性自己动手写一个, 先看下效果图

核心代码:

CGFloat currentX &＃61; 10;CGFloat currentY &＃61; 44;CGFloat spaceX &＃61; 10; // 左右的空隙CGFloat spaceY &＃61; 15; // 上下的空隙CGFloat marginRL &＃61; 10; // 文字距左右边框的间距CGFloat lineH &＃61; 25;for (int i &＃61; 0; i kDeviceWidth-20) {currentY &＃43;&＃61; currentX &＃61;&＃61; 10 ? 0:(lineH&＃43;spaceY); // 第一行已经有的话折行 否则就显示在第一行currentX &＃61; 10;button.frame &＃61; CGRectMake(currentX, currentY, kDeviceWidth-20, lineH);currentX &＃61; 10; //currentY &＃43;&＃61; lineH&＃43;spaceY;}// 剩余的空间 能显示下else if (kDeviceWidth-currentX-25 > width) {button.frame &＃61; CGRectMake(currentX, currentY, width, lineH);currentX &＃43;&＃61; width&＃43;spaceX;}// 剩余的空间 显示不下 需要折行显示(但是这一行还没显示满 故不更新currentY)else{currentY &＃43;&＃61; lineH&＃43;spaceY;currentX &＃61; 10;button.frame &＃61; CGRectMake(currentX, currentY, width, lineH);currentX &＃43;&＃61; width&＃43;spaceX;}[self addSubview:button];}self.frame &＃61; CGRectMake(0, 0, kDeviceWidth, currentY&＃43;lineH&＃43;10);

具体样式可以自己修改,核心还是布局计算那块

完整代码如下:

typedef void(^HistoryBlock)(NSString *keyword, NSInteger index);
&＃64;interface SearchHistoryView : UIView
&＃64;property (nonatomic, strong) NSMutableArray *keywords; // 只保留最新的十条记录
&＃64;property (nonatomic, copy) HistoryBlock handle;/** 保存一条新的搜索记录*/
&＃43; (BOOL)saveKeyword:(NSString *)keyword;
&＃64;end实现:

&＃64;implementation SearchHistoryView- (instancetype)init
{self &＃61; [super init];if (self) {[self setUpSubviews];}return self;
}- (void)reloadData{for (UIView *view in self.subviews) {[view removeFromSuperview];}[self setUpSubviews];
}- (void)setUpSubviews{UILabel *titleLabel &＃61; [[UILabel alloc] initWithFrame:CGRectMake(10, 0, kDeviceWidth-20, 44)];titleLabel.font &＃61; kNormalFont(14);titleLabel.text &＃61; &＃64;"最近搜索";titleLabel.textColor &＃61; kColor333333;// UIButton *clear &＃61; [[UIButton alloc] initWithFrame:CGRectMake(kDeviceWidth-50, 0, 40, 44)];
// clear.hidden &＃61; self.keywords.count &＃61;&＃61; 0;
// [clear setImage:Image(&＃64;"icon_cache") forState:UIControlStateNormal];
// [clear addTarget:self action:&＃64;selector(clearKeywords) forControlEvents:UIControlEventTouchUpInside];
// [self addSubview:clear];[self addSubview:titleLabel];CGFloat currentX &＃61; 10;CGFloat currentY &＃61; 44;CGFloat spaceX &＃61; 10; // 左右的空隙CGFloat spaceY &＃61; 15; // 上下的空隙CGFloat marginRL &＃61; 10; // 文字距左右边框的间距CGFloat lineH &＃61; 25;for (int i &＃61; 0; i// button.layer.cornerRadius &＃61; 4;
// button.layer.borderColor &＃61; kColor999999.CGColor;
// button.layer.borderWidth &＃61; 1;[button setTitle:keyword forState:UIControlStateNormal];[button setTitleColor:kColor666666 forState:UIControlStateNormal];[button addTarget:self action:&＃64;selector(itemEvent:) forControlEvents:UIControlEventTouchUpInside];// 一行显示不下if (width > kDeviceWidth-20) {currentY &＃43;&＃61; currentX &＃61;&＃61; 10 ? 0:(lineH&＃43;spaceY); // 第一行已经有的话折行 否则就显示在第一行currentX &＃61; 10;button.frame &＃61; CGRectMake(currentX, currentY, kDeviceWidth-20, lineH);currentX &＃61; 10; //currentY &＃43;&＃61; lineH&＃43;spaceY;}// 剩余的空间 能显示下else if (kDeviceWidth-currentX-25 > width) {button.frame &＃61; CGRectMake(currentX, currentY, width, lineH);currentX &＃43;&＃61; width&＃43;spaceX;}// 剩余的空间 显示不下 需要折行显示(但是这一行还没显示满 故不更新currentY)else{currentY &＃43;&＃61; lineH&＃43;spaceY;currentX &＃61; 10;button.frame &＃61; CGRectMake(currentX, currentY, width, lineH);currentX &＃43;&＃61; width&＃43;spaceX;}[self addSubview:button];}self.frame &＃61; CGRectMake(0, 0, kDeviceWidth, currentY&＃43;lineH&＃43;10);
}#pragma mark - 数据
/** 获取当前关键字*/
- (NSMutableArray *)keywords{NSString *path &＃61; [SearchHistoryView getFilePath];_keywords &＃61; [NSMutableArray arrayWithContentsOfFile:path];if (_keywords &＃61;&＃61; nil) {_keywords &＃61; [NSMutableArray array];}return _keywords;
}/** 保存关键字*/
&＃43; (BOOL)saveKeyword:(NSString *)keyword{if (keyword &＃61;&＃61; nil || keyword.trim.length &＃61;&＃61; 0) return NO;NSString *path &＃61; [self getFilePath];NSMutableArray *keywords &＃61; [NSMutableArray arrayWithContentsOfFile:path];// 空的if (keywords &＃61;&＃61; nil) {keywords &＃61; [NSMutableArray array];}// 已经把包含if ([keywords containsObject:keyword]) {[keywords removeObject:keyword];}[keywords insertObject:keyword atIndex:0];// 超过十个if (keywords.count >10) {[keywords removeLastObject];}return [keywords writeToFile:path atomically:YES];
}#pragma mark - 事件
- (void)itemEvent:(UIButton *)button{if (_handle) {NSInteger index &＃61; [self.keywords indexOfObject:button.currentTitle];self.handle(button.currentTitle, index);}if ([SearchHistoryView saveKeyword:button.currentTitle]) {NSLog(&＃64;"保存搜索词成功");}[self removeFromSuperview];
}/** 清除所有关键字*/
- (void)clearKeywords{NSString *path &＃61; [SearchHistoryView getFilePath];NSMutableArray *keywords &＃61; [NSMutableArray arrayWithContentsOfFile:path];[keywords removeAllObjects];[keywords writeToFile:path atomically:YES];[self reloadData];[self removeFromSuperview];
}&＃43; (NSString *)getFilePath{// 获取 document 路径NSString *document &＃61; [NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES) objectAtIndex:0];// 获取 document下 文件夹路径NSString *directory &＃61; [document stringByAppendingPathComponent:&＃64;"AntiFakeChain"];// 判断文件夹是否存在BOOL isDirectory;BOOL isExistDirectory &＃61; [[NSFileManager defaultManager] fileExistsAtPath:directory isDirectory:&isDirectory] && isDirectory;// 如果不存在创建文件夹if (isExistDirectory &＃61;&＃61; NO){[[NSFileManager defaultManager] createDirectoryAtPath:directory withIntermediateDirectories:YES attributes:nil error:nil];}// 获取文件路径NSString *path &＃61; [directory stringByAppendingPathComponent:&＃64;"SeachHistory.plist"];return path;
}
&＃64;end