iOS关于搜索不规则瀑布流布局的实现小结
最近在项目开发中遇到了不规则搜索布局的问题。
之前常用的解决方案是用一个tableview用一个循环动态的加载,唯一的缺点是需要动态的移除,其实也已经足够。https://download.csdn.net/download/kuuailetianzi/9905316,需要的话可以下载使用。请教了一下身边的美女同事,她那边给出的思路是用UICollectionView的复用来实现。解决方案如下。
1、pod导入JQCollectionViewAlignLayout库
2、核心代码如下
//此处用库对象JQCollectionViewAlignLayout
JQCollectionViewAlignLayout * layout = [[JQCollectionViewAlignLayout alloc]init];
layout.itemSize = CGSizeMake(K_CC_SCREEN_WIDTH, 40);
//此处设置行间距
layout.minimumLineSpacing = 10;
//此处设置列间距
layout.minimumInteritemSpacing = 10;
self.collectionView = [[UICollectionView alloc]initWithFrame:CGRectZero collectionViewLayout:layout];
[self.bottomView addSubview:self.collectionView];
self.collectionView.delegate = self;
self.collectionView.dataSource = self;
self.collectionView.layer.masksToBounds = YES;
self.collectionView.layer.cornerRadius = 8.0;
self.collectionView.showsVerticalScrollIndicator = NO;
self.collectionView.showsHorizontalScrollIndicator = NO;
self.collectionView.backgroundColor = [UIColor clearColor];
[self.collectionView mas_makeConstraints:^(MASConstraintMaker *make) {
make.width.mas_equalTo(K_CC_SCREEN_WIDTH);
make.bottom.mas_equalTo(self.bottomView);
make.left.mas_equalTo(0);
make.top.mas_equalTo(60);
}];
self.collectionView.contentInset = UIEdgeInsetsMake(10, 10, 10, 10);
[self.collectionView registerClass:[CCHighSeasPoolReturnCell class] forCellWithReuseIdentifier:kCellReuseIdentifier];
[self.collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:kFooterReuseIdentifier];
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
CCHighSeasPoolReturnCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:kCellReuseIdentifier forIndexPath:indexPath];
NSString *codevalue= self.data[indexPath.section].items[indexPath.item].itemtitle;
//选中项索引,修改背景、文本颜色,并给变量赋值
if (indexPath.item==self.selectItemIndex) {
cell.contentView.backgroundColor = K_CC_COLOR_STRING(@"#343E79");
cell.lblTitle.textColor = K_CC_COLOR_STRING(@"#FFFFFF");
self.rejectreason=codevalue;
}else{
cell.contentView.backgroundColor = K_CC_COLOR_STRING(@"#F5F5F5");
cell.lblTitle.textColor = K_CC_COLOR_STRING(@"#333333");
}
cell.title = codevalue;
return cell;
}
//初始化数组数据
-(void)loadData{
if (!_data) {
NSMutableArray *data = [[NSMutableArray alloc] init];
//JQCollectionViewItemsVerticalAlignment verticalAlignments[] = {JQCollectionViewItemsVerticalAlignmentCenter, JQCollectionViewItemsVerticalAlignmentTop, JQCollectionViewItemsVerticalAlignmentBottom};
//设置每一项水平从左到右对齐
JQCollectionViewItemsHorizontalAlignment horizontalAlignments[] = {JQCollectionViewItemsHorizontalAlignmentCenter, JQCollectionViewItemsHorizontalAlignmentLeft, JQCollectionViewItemsHorizontalAlignmentRight, JQCollectionViewItemsHorizontalAlignmentFlow};
//JQCollectionViewItemsDirection directions[] = {JQCollectionViewItemsDirectionLTR, JQCollectionViewItemsDirectionRTL};
for (int i = 0; i < 1; i++) {
JQCollectionViewItemsHorizontalAlignment horizontal = horizontalAlignments[1];
NSInteger count = self.dataAddressList.count;
NSMutableArray *items = [[NSMutableArray alloc] init];
for (int j = 0; j < count; j++) {
UIColor *color = K_CC_COLOR_STRING(@"#F5F5F5");
NSDictionary *dic=[self.dataAddressList objectAtIndex:j];
NSString *codevalue=[dic objectForKey:@"codevalue"];
//宽度自适应
CGFloat labelW = [CCCommonAPI getWidthWithString:codevalue font:K_CC_FONT(14) constraintSize:CGSizeMake(MAXFLOAT, 40.0f)];
//此处为了给每一个项留一定的空白
CGFloat width = labelW+10;
CGSize size = CGSizeMake(width, 40);
CCHighSeasPoolReturnItemModel *item = [[CCHighSeasPoolReturnItemModel alloc] initWithColor:color size:size index:j];
item.itemtitle=codevalue;
[items addObject:item];
}
CCHighSeasPoolReturnModel *section = [[CCHighSeasPoolReturnModel alloc] init];
// section.verticalAlignment = vertical;
section.horizontalAlignment = horizontal;
//section.direction = JQCollectionViewItemsDirectionLTR;
section.items = items;
[data addObject:section];
// }
// }
_data = data;
}
}
}
iOS关于搜索不规则瀑布流布局的实现小结的更多相关文章
- Django 项目补充知识(JSONP,前端瀑布流布局,组合搜索,多级评论)
一.JSONP 1浏览器同源策略 通过Ajax,如果在当前域名去访问其他域名时,浏览器会出现同源策略,从而阻止请求的返回 由于浏览器存在同源策略机制,同源策略阻止从一个源加载的文档或脚本获取或设置另一 ...
- jsonp、瀑布流布局、组合搜索、多级评论(评论树)、Tornado初识
1.JSONP原理剖析以及实现 1.1 同源策略限制 用django分别建立两个项目,jsonp01和jsonp02,然后再在这两个项目里分别建立一个app,比如名字叫jsonp1.jsonp2:js ...
- Jquery瀑布流布局
瀑布流布局最近真的很流行,很多人都跟我一样想知道是怎么做出来的吧,经过网上搜索大量的参考结合N边的实验今天终于被我写出来了,为了便于大家理解我使用了jQuery(当然用源生js代码执行的效率会高一些, ...
- Xamarin自定义布局系列——瀑布流布局
Xamarin.Forms以Xamarin.Android和Xamarin.iOS等为基础,自己实现了一整套比较完整的UI框架,包含了绝大多数常用的控件,如下图 虽然XF(Xamarin.Forms简 ...
- vuejs实现瀑布流布局(二)
瀑布流布局已然完成,那么剩下的就是另一个比较大的工程了——无限加载. 之前说了,这个活动项目是基于SUI-Mobile搭建的,所以可以直接使用sui内建组件“无限加载”来实现这个功能. 没有真实的数据 ...
- 手摸手,带你实现移动端H5瀑布流布局
移动端瀑布流布局是一种比较流行的网页布局方式,视觉上来看就是一种像瀑布一样垂直落下的排版.每张图片并不是显示的正正方方的,而是有的长有的短,呈现出一种不规则的形状.但是它们的宽度通常都是相同的 因为移 ...
- JS瀑布流布局
好久没有更新博客喽,今天来说一个瀑布流布局. 瀑布流在很多网站已有很多,现在只说一下简单的实现原理吧, 1.计算一行可以排放几个元素 2.建立一个数组用于存放第一行的每个元素的高度. 3.得到数组中的 ...
- CSS3学习总结——实现瀑布流布局与无限加载图片相册
首先给大家看一下瀑布流布局与无限加载图片相册效果图: 一.pic1.html页面代码如下: <!DOCTYPE html> <html> <head> <me ...
- myWaterfall - jQuery瀑布流布局插件
myWaterfall - jQuery瀑布流布局插件 Demo http://jsfiddle.net/q3011893/p5k2ogy8/embedded/result,html,css,js/ ...
- jquery实现简单瀑布流布局(续):图片懒加载
# jquery实现简单瀑布流布局(续):图片懒加载 这篇文章是jquery实现简单瀑布流布局思想的小小扩展.代码基于前作的代码继续完善. 图片懒加载就是符合某些条件时才触发图片的加载.最常见的具体表 ...
随机推荐
- 【JS】05 DOM 文档对象模型 P2 元素的CRUD、Dom集合对象
Element & Node 元素,或者称为节点 在JS中创建一个HTML元素,但是因为没有指定在Dom对象中的节点位置,所以页面不会发生改变 var para = document.crea ...
- 甄嬛霸气照 —— Chinese Queen
- 华为显卡已经支持pytorch计算框架
相关链接: https://support.huawei.com/enterprise/zh/doc/EDOC1100079287/a21c08de https://www.zhihu.com/que ...
- 如何使用工具下载B站非会员视频(下载B站免费web视频)
最近准备从B站上下载几个web页面上的视频,但是B站的视频又没有提供相关的下载工具,于是找到了一款下载B站视频的工具( you-get ), 该工具不能下载会员版的视频,不能下载收费的视频,不过对于免 ...
- ubuntu环境下boost库的安装——Could NOT find Boost (missing: Boost_INCLUDE_DIR program_options) (Required is at least version "1.49.0")
在Ubuntu环境下使用cmake编译软件,报错,提示信息: Could NOT find Boost (missing: Boost_INCLUDE_DIR program_options) (Re ...
- 9组-Beta冲刺-4/5
一.基本情况(15分) 队名:不行就摆了吧 组长博客:9组-Beta冲刺-4/5 GitHub链接:https://github.com/miaohengming/studynote/tree/mai ...
- 18-canvas绘制饼状图
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="U ...
- 微服务全链路跟踪:grpc集成jaeger
微服务全链路跟踪:grpc集成zipkin 微服务全链路跟踪:grpc集成jaeger 微服务全链路跟踪:springcloud集成jaeger 微服务全链路跟踪:jaeger集成istio,并兼容u ...
- java本地增量打包工具
在打增量包每次都需要将class文件.jsp文件等拷贝到增量包中比较麻烦.所以就写了一个增量打包工具. 工作原理:根据文件的最后修改时间来打增量. 1.查找Java类增量:根据eclipse工程下的. ...
- 掌握Java面向对象OOP篇(一)
掌握面向对象OOP篇(一) 边学边记 -- OOP(Object Orientated Programing) 1. 为什么要引入面向对象? 原因:封装.继承.多态 举个例子理解面向对象代码的好处: ...