广告
返回顶部
首页 > 资讯 > 移动开发 >iOS UICollectionView实现标签选择器
  • 413
分享到

iOS UICollectionView实现标签选择器

iOS标签选择器 2022-05-15 20:05:51 413人浏览 八月长安
摘要

近来,在项目中需要实现一个类似兴趣标签的选择器。由于标签的文字长度不定,所以标签的显示长度就不定。为了实现效果,就使用了UICollectionView来实现了每行的标签数量不定、c

近来,在项目中需要实现一个类似兴趣标签的选择器。由于标签的文字长度不定,所以标签的显示长度就不定。为了实现效果,就使用了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>

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

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

--结束END--

本文标题: iOS UICollectionView实现标签选择器

本文链接: https://www.lsjlt.com/news/30447.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • iOS UICollectionView实现标签选择器
    近来,在项目中需要实现一个类似兴趣标签的选择器。由于标签的文字长度不定,所以标签的显示长度就不定。为了实现效果,就使用了UICollectionView来实现了每行的标签数量不定、c...
    99+
    2022-05-15
    iOS 标签 选择器
  • AndroidFlutter实现兴趣标签选择功能
    目录前言InputChip兴趣标签选择实现总结前言 我们在首次使用内容类 App 的时候,不少都会让我们选择个人偏好。这种通常是通过标签来实现,比如列举出一系列的技术栈,然后让我们选...
    99+
    2022-11-13
    Android Flutter标签选择功能 Android 标签选择 Flutter 标签
  • 怎么实现vue图标选择器
    这篇文章主要讲解了“怎么实现vue图标选择器”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“怎么实现vue图标选择器”吧!import Vue from '...
    99+
    2023-06-25
  • 实现微信小程序中的标签选择功能
    实现微信小程序中的标签选择功能,需要具体代码示例随着微信小程序的流行,越来越多的开发者开始关注微信小程序的开发技术。在实际的小程序开发中,经常会遇到需要选择标签的情况,比如商品分类、兴趣爱好等。本文将详细介绍如何实现微信小程序中的标签选择功...
    99+
    2023-11-21
    微信小程序 实现 标签选择
  • HTML中标签选择器是什么意思
    这篇文章给大家分享的是有关HTML中标签选择器是什么意思的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。 标签选择器其实就是html代码中的标签。如右侧代码编辑器中的<ht...
    99+
    2022-10-19
  • jquery标签选择器应用示例详解
    本文实例为大家分享了jquery标签选择器应用的具体代码,供大家参考,具体内容如下 1、统一设置div内容 可以用标签选择器来选择所有的 div 元素; <!DOCTYP...
    99+
    2022-11-12
  • html中元素/标签选择器怎么用
    这篇文章将为大家详细讲解有关html中元素/标签选择器怎么用,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。元素/标签选择器h2,h3,h4,h5,h6,h7 { font-size:1...
    99+
    2023-06-27
  • css选择器可以是标签的名字吗
    本篇内容介绍了“css选择器可以是标签的名字吗”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成! ...
    99+
    2022-10-19
  • HTML5如何使用video标签实现选择摄像头功能
    这篇文章主要介绍了HTML5如何使用video标签实现选择摄像头功能,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。详解HTML5 使用vid...
    99+
    2022-10-19
  • 使用css选择器怎么设置标签样式
    这篇文章将为大家详细讲解有关使用css选择器怎么设置标签样式,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。css选择器在html标签上设置style可以给标签设置属性:<div&nbs...
    99+
    2023-06-08
  • css标签选择器使用时要注意什么
    本篇内容介绍了“css标签选择器使用时要注意什么”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!作用: 根据指定的标签名称, 在当前界面中找到...
    99+
    2023-06-20
  • iOS实现从通讯录中选择联系人
    有时候APP需要用户输入一位联系人的姓名和电话,除了用户手动输入,一般也允许用户从通讯录中选择一位联系人(图1),下面的代码就是使用系统的<AddressBookUI/Addr...
    99+
    2022-06-04
    iOS 通讯录 联系人
  • css选择器中如何获取有小数点的标签
    小编给大家分享一下css选择器中如何获取有小数点的标签,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!需求说明因为项目中章节配置的时候有小数点,1,1.1,1.2,...
    99+
    2023-06-08
  • vue 图标选择器的实例代码
    来源:http://www.ruoyi.vip/ import Vue from 'vue' import SvgIcon from '@/components/SvgIco...
    99+
    2022-11-12
  • HTML中的select标签如何实现单选和多选
    这篇文章主要为大家展示了“HTML中的select标签如何实现单选和多选”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“HTML中的select标签如何...
    99+
    2022-10-19
  • Android 实现IOS 滚轮选择控件的实例(源码下载)
     Android 实现IOS 滚轮选择控件的实例 最近根据项目需要,整理了一个相对比较全面的 WheelView 使用控件,借用之前看到的一句话来说,就是站在巨人肩膀...
    99+
    2022-06-06
    源码下载 选择 IOS 源码 Android
  • Android 实现IOS选择拍照相册底部弹出的实例
    Android 实现IOS选择拍照相册底部弹出的实例效果图1. AndroidStudio使用dependencies { compile 'com.guoqi.widget:actionsheet:1.0'}...
    99+
    2023-05-30
    android ios 拍照
  • Android时间选择器、日期选择器实现代码
    本文为大家分享了两款选择器,一款可以针对时间进行选择、一款可以针对日期进行选择,供大家参考,具体内容如下 一、时间选择器 1.1.布局 <?xml ver...
    99+
    2022-06-06
    选择器 选择 Android
  • elementUI实现级联选择器
    本文实例为大家分享了elementUI实现级联选择器的具体代码,供大家参考,具体内容如下 1、从后端调用接口,传递数据到前端 2、使用VUE代码显示级联选项 <el-ca...
    99+
    2022-11-12
  • jQuery如何实现选择器
    这篇文章主要为大家展示了“jQuery如何实现选择器”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“jQuery如何实现选择器”这篇文章吧。写自己的选择器$(do...
    99+
    2022-10-19
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作