最近在项目开发中遇到了不规则搜索布局的问题。之前常用的解决方案是用一个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关于搜索不规则瀑布流布局的实现小结的更多相关文章

  1. Django 项目补充知识(JSONP,前端瀑布流布局,组合搜索,多级评论)

    一.JSONP 1浏览器同源策略 通过Ajax,如果在当前域名去访问其他域名时,浏览器会出现同源策略,从而阻止请求的返回 由于浏览器存在同源策略机制,同源策略阻止从一个源加载的文档或脚本获取或设置另一 ...

  2. jsonp、瀑布流布局、组合搜索、多级评论(评论树)、Tornado初识

    1.JSONP原理剖析以及实现 1.1 同源策略限制 用django分别建立两个项目,jsonp01和jsonp02,然后再在这两个项目里分别建立一个app,比如名字叫jsonp1.jsonp2:js ...

  3. Jquery瀑布流布局

    瀑布流布局最近真的很流行,很多人都跟我一样想知道是怎么做出来的吧,经过网上搜索大量的参考结合N边的实验今天终于被我写出来了,为了便于大家理解我使用了jQuery(当然用源生js代码执行的效率会高一些, ...

  4. Xamarin自定义布局系列——瀑布流布局

    Xamarin.Forms以Xamarin.Android和Xamarin.iOS等为基础,自己实现了一整套比较完整的UI框架,包含了绝大多数常用的控件,如下图 虽然XF(Xamarin.Forms简 ...

  5. vuejs实现瀑布流布局(二)

    瀑布流布局已然完成,那么剩下的就是另一个比较大的工程了——无限加载. 之前说了,这个活动项目是基于SUI-Mobile搭建的,所以可以直接使用sui内建组件“无限加载”来实现这个功能. 没有真实的数据 ...

  6. 手摸手,带你实现移动端H5瀑布流布局

    移动端瀑布流布局是一种比较流行的网页布局方式,视觉上来看就是一种像瀑布一样垂直落下的排版.每张图片并不是显示的正正方方的,而是有的长有的短,呈现出一种不规则的形状.但是它们的宽度通常都是相同的 因为移 ...

  7. JS瀑布流布局

    好久没有更新博客喽,今天来说一个瀑布流布局. 瀑布流在很多网站已有很多,现在只说一下简单的实现原理吧, 1.计算一行可以排放几个元素 2.建立一个数组用于存放第一行的每个元素的高度. 3.得到数组中的 ...

  8. CSS3学习总结——实现瀑布流布局与无限加载图片相册

    首先给大家看一下瀑布流布局与无限加载图片相册效果图: 一.pic1.html页面代码如下: <!DOCTYPE html> <html> <head> <me ...

  9. myWaterfall - jQuery瀑布流布局插件

    myWaterfall - jQuery瀑布流布局插件 Demo http://jsfiddle.net/q3011893/p5k2ogy8/embedded/result,html,css,js/ ...

  10. jquery实现简单瀑布流布局(续):图片懒加载

    # jquery实现简单瀑布流布局(续):图片懒加载 这篇文章是jquery实现简单瀑布流布局思想的小小扩展.代码基于前作的代码继续完善. 图片懒加载就是符合某些条件时才触发图片的加载.最常见的具体表 ...

随机推荐

  1. 【MySQL】二级MySQL考试 救场帮助表

    周六去考二级,应用第一题就是添加外键约束 草,写了半天老说语法不对,然后急中生智,觉得默认的库里应该有文档说明表 以下是SQL查询过程: -- 猜测是在mysql库里面 mysql> USE m ...

  2. 【Java】【常用类】Math 数学类

    一些常用的数学计算方法 public class MathTest { public static void main(String[] args) { int a = -10; // 获取绝对值 i ...

  3. 【Docker】04 部署MySQL

    从官网上拉取最新MySQL镜像: docker pull mysql:latest 创建并运行一个MySQL镜像的容器 docker run -itd --name mysql-test -p 330 ...

  4. 【Layui】05 进度条 Progress

    文档地址: https://www.layui.com/doc/element/progress.html 演示案例: <div class="layui-progress" ...

  5. TinyVue v3.17.0 正式发布,推出了一款基于 Quill 2.0 的富文本编辑器,功能强大、开箱即用!

    你好,我是 Kagol. 我们非常高兴地宣布,2024年6月26日,TinyVue 发布了 v3.17.0 . TinyVue 每次大版本发布,都会给大家带来一些实用的新特性,上一个版本我们重构了 c ...

  6. Ubuntu 18.04在已经安装Docker CE后如何安装NVIDIA-Docker,以使docker容器内可以使用宿主机显卡

    注意: 本文是在电脑上已经安装好docker环境的前提下进行的. docker环境如何安装参照前文. 本文内容节选自:  https://baimafujinji.blog.csdn.net/arti ...

  7. 2.3 Exception model

    2.3.1 异常状态 2.3.1 异常类型

  8. 【粉丝问答20】Linux内核定时器使用及其他时间操作

    问题描述 如何使用内核定时器? 内核定时器 Linux内核定时器是timer_list,下面我们详细介绍定时器的使用. 1. 简介 内核定时器是内核用来控制在未来某个时间点(基于jiffies)调度执 ...

  9. Vite+Vue3 项目 华仔待办

    此"华仔",不是彼"华仔",你懂的! 先来了个截图 紧跟着,实现步骤也来了 1. 安装 Node.js,终端运行 npm create vue@latest,项 ...

  10. Docker 构建多平台镜像

    构建多平台镜像的方法分为两种:一种是在不同平台的机器上分别构建并推送对应平台的镜像,然后通过 Docker Manifest 将两个镜像标签合并为一个.另一种是通过 Docker buildx 在一台 ...