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];
}

@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的值了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2020-04-20

iOS左右滑动标签页导航的设计

iOS中左右滑动切换,滑动标签页导航的设计思路,具体内容如下 iOS开发中经常(几乎每个APP都含有这样的页面吧,几乎!UI设计师也都是这样抄来抄去-..) demo见Github:SliderTab 估计很多人都会说,直接用第三方就可以了,很多人封装过,很好用.而且这样的页面用第三方2分钟搞定,省时省力. 笔者也曾用过第三方,但是屡屡出bug.而且不好修改.所以只能自己写,bug少,代码通俗易懂,童叟无欺. 这里介绍一个第三方DLSlideView,Github地址:DLSlideView,目

iOS实现去除html标签的方法汇总

前言 我们在一些开发中,很有必要过滤掉用户输入的文本中的HTML标签以防范XSS攻击,本文将详细介绍关于iOS去除html标签的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 请求接口返回的数据里包含html标签,OC中去掉的方法之前做过,代码如下 -(NSString *)filterHTML:(NSString *)html{ NSScanner * scanner = [NSScanner scannerWithString:html]; NSString *

iOS仿微信添加标签效果(shape实现)

一. 概述 可以说微信做的用户体验太棒了,可以做到老少皆宜,给个赞,我们也同时应该告诫自己,用户体验应该向微信看齐,微信就是我们的标杆,那我们今天也来仿一仿微信添加的标签功能.只能仿着做了,真是做不到微信的那种体验.甘拜下风. 我们上篇学习了shape属性的用法,那我们今天就用shape来做下微信的标签功能.先看一下效果. 我不仅用到了shape属性,还用到了翔哥的标签布局FlowLayout跟TagFlowLayout鸿洋的博客 二.效果图 三 .定义shape 添加标签 <?xml vers

iOS实现顶部标签式导航栏及下拉分类菜单

本文实例为大家分享了iOS实现顶部标签式导航栏及下拉分类菜单的全部过程,供大家参考,具体内容如下 当内容及分类较多时,往往采用顶部标签式导航栏,例如网易新闻客户端的顶部分类导航,最近刚好有这样的应用场景,参考网络上一些demo,实现了这种导航效果,记录一些要点. 效果图(由于视频转GIF掉帧,滑动和下拉动画显得比较生硬,刚发现quickTime可以直接录制手机视频,推荐一下,很方便) 1.顶部标签式导航栏 (1)实现思路 其实就是在上下两个UIScrollView上做文章,实现联动选择切换的效果

iOS应用开发中UITabBarController标签栏控制器使用进阶

做了这么长时间的ios开发了,最基本的UITabBarController和UINavigationController都用了好长时间了,总是改现成的代码,或者各种自定义控件的修改,用的都有些混乱了,呵呵.还是自己做个demo再复习一下吧,记录下来以备后续翻查. 一.UITabBarController和UINavigationController的联合使用 这种方法最常见,好像一般有tabbar都会有naviBar.一般使用, 1. 在appDelegate里面创建UITabBarContro

iOS实现动态自适应标签

先上效果图  设计要求 1.标签的宽度是按内容自适应的 2.一行显示的标签个数是动态的,放得下就放,放不下就换行 3.默认选中第一个 4.至少选中一个标签 实现思路 首先我们从这个效果上来看,这个标签是有选中和不选中状态,那我们首选的控件肯定就是用 UIButton来实现了. 这个小程度的重点就在于标签能自动换行,还是智能的,不是固定一行多少个那种,这个我们通过计算每个按钮实际宽度与屏幕的宽度进行比较就能判断是否需要换行了. 还有一点就是处理 至少选中一个标签的功能,我这里有一种方式,就是控制按

JS脚本实现动态给标签控件添加事件的方法

本文实例讲述了JS脚本实现动态给标签控件添加事件的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &l

iOS本地动态生成验证码的方法

前几天app注册被人攻击了,从网上找了这个先保存下.... 用于ios本地动态生成验证码,效果如下: 导入CoreGraphics.framework 用于绘制图形 封装UIView,便捷使用,代码如下: AuthcodeView.h #import <UIKit/UIKit.h> @interface AuthcodeView : UIView @property (strong, nonatomic) NSArray *dataArray;//字符素材数组 @property (stron

iOS Runntime 动态添加类方法并调用-class_addMethod

上手开发 iOS 一段时间后,我发现并不能只着眼于完成需求,利用闲暇之余多研究其他的开发技巧,才能在有限时间内提升自己水平.当然,"其他开发技巧"这个命题对于任何一个开发领域都感觉不找边际,而对于我来说,尝试接触 objc/runtime 不失为是开始深入探索 iOS 开发的第一步. 刚了解 runtime 当然要从比较简单的 api 开始,今天就罗列整理一下 class_addMethod 的相关点: 首先从文档开始. /** * Adds a new method to a cla

iOS实现动态的开屏广告示例代码

一.实现效果图 二.实现思路: 用一个固定的png图片左启动图,应该和广告视图需要进行动画的期初的位置一致,当启动图消失的时候,呈现出图片,实际遇到的困难是,因为广告图片是从网络请求加载的,当时把广告视图放在了请求数据的块里面,广告出现的时候会闪一下,放在外面就没事了. 三.实现示例 1.广告的头文件 // XBAdvertView.h // scoreCount // // Created by 王国栋 on 15/12/22. // Copyright © 2015年 xiaobai. Al

JS实现动态给标签控件添加事件的方法示例

本文实例讲述了JS实现动态给标签控件添加事件的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <

jQuery 动态云标签插件

前言: 最近对js的插件封装特别感兴趣,无耐就目前的技术想做到js的完全封装,还是有一定困难,就基于jQuery封装了一个小的插件,而且是基于对象级开发的,不是添加全局方法.高深的语法几乎没有,就有一个return:foreach()方法来返回对象实例本身,还有一个extend()函数,用来扩展参数对象的属性,这也是为了对象在调完我这个方法后方便链式操作. 插件打包下载地址:点我下载 插件名:动态云标签 插件特点: 在指定块级元素内动态生成a标签 a标签的高度.宽度.位置.层数.背景颜色随机可控

javascript的document中的动态添加标签实现方法

document的高级篇中提供了节点操作的函数,具体包括:获取节点,改变节点,删除节点,替换节点,创建节点,添加节点,克隆节点等函数.我们可以利用这些函数动态改变html的节点. 1.JavaScript <script type="text/javascript"> function test1(){//对个节点的ID相同时候的情况 var myhref = document.getElementById('same'); window.alert(myhref.inne

MyBatis使用动态SQL标签的小陷阱

MyBatis是一个支持普通SQL查询,存储过程和高级映射的优秀持久层框架.MyBatis消除了几乎所有的JDBC代码和参数的手工设置以及对结果集的检索封装.MyBatis可以使用简单的XML或注解用于配置和原始映射,将接口和Java的POJO(Plain Old Java Objects,普通的Java对象)映射成数据库中的记录. 现在MyBatis越来越受大家的喜爱了,它的优势大家都知道,我就不多说了,直接说重点. MyBatis中提供动态SQL功能,我们可以使用<if><when&