Objectiv-c - UICollectionViewLayout自定义布局-瀑布流
最近刚写的一个简单的瀑布流.
整体思路可能不是很完善.
不过也算是实现效果了.
高手勿喷
思路: 自定义
UICollectionViewLayout
实际上就是需要返回每个item的fram就可以了.
先说简单的,width值 = (CollectionView的整体宽度 - 左右边距 - 每列的间距 )/列数
height = 按照原图比例缩放就行
x 需要定位 在哪一列上 = 左边距 + (列间距 + width) * 最小列的列号
y 永远是在列高最小的那列下添加 = 最小列高 + 行间距
最小列高的计算需要 将每一列的列高算出来 比较下,最小列高的值是不断被替代.初始化应当就是上边距的值.
由于需要计算出最小列高于是我定义一个字典.
{ key0:columnHeight0,
key1: columnHeight0
...
}
字典元素的个数由 column来决定. 每列存放的是当前列的列高.
通过比较columnHeight中最小的来获得最小 key ,每次更新这个最小key对应的columnHeight就行了
- 下面看代码:
公开变量以及代理.
公开的变量是可以进行调用时设置,一般就为这些,delegate用来实现动态的高度设置
//
// WaterFallLayout.h
// 作业3
//
// Created by gongwenkai on 2016/12/7.
// Copyright © 2016年 gongwenkai. All rights reserved.
//
#import <UIKit>
@protocol WaterFallLayoutDelegate<NSObject>
///设置图片高度
//width为cell实际宽度
- (CGFloat) collectionViewHeightAtIndexPath:(NSIndexPath *)indexPath withItemWidth:(CGFloat)width;
@end
@interface WaterFallLayout : UICollectionViewLayout
@property(nonatomic,assign)int column; //设置列数
@property(nonatomic,assign)int rowMargin; //设置行间距
@property(nonatomic,assign)int columnMargin;//设置列间距
@property(nonatomic,assign)UIEdgeInsets edge;//设置边距
@property(nonatomic,strong)id<WaterFallLayoutDelegate>delegate;
@end
由于我们的自定义布局继承UICollectionViewLayout.
每次布局都会调用
//准备布局做一些准备工作,例如初始化
- (void)prepareLayout;
//这个方法在prepareLayout后调用.每次拖动都会调用,有点类似scrollview的那个.
//这里需要返回一个UICollectionViewLayoutAttributes数组里面就能存放fram信息
- (nullable NSArray<__kindof UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect ;
先做准备工作:初始化字典
- (void)prepareLayout {
[super prepareLayout];
// NSLog(@"prepareLayout");
//初始化字典
for (int i = 0; i < _column; i++) {
[self.maxYDict setObject:[NSNumber numberWithFloat:self.edge.top] forKey:[NSString stringWithFormat:@"%d",i]];
}
self.minKey = @"0";
NSMutableArray *array = [NSMutableArray array];
NSInteger count = [self.collectionView numberOfItemsInSection:0];
for (int i = 0; i<count xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed> height) {
minY = height;
self.minKey = [NSString stringWithFormat:@"%d",i];
columnHeight = minY + heightAtt;
} else {
columnHeight = height;
[self.maxYDict setObject:[NSNumber numberWithFloat:columnHeight] forKey:[NSString stringWithFormat:@"%d",i]];
}
}
//设置X,Y坐标
CGFloat x = self.edge.left + [self.minKey floatValue] * (width + self.columnMargin);
CGFloat y = [[self.maxYDict objectForKey:self.minKey] floatValue] ;
//更新最小列的高度
[self.maxYDict setObject:[NSNumber numberWithFloat:y+heightAtt] forKey:self.minKey];
UICollectionViewLayoutAttributes *attrs = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
attrs.frame = CGRectMake(x, y, width, heightAtt);
return attrs;
}
计算完了就可以让layoutAttributesForElementsInRect
设置回布局了
- (nullable NSArray<__kindof UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect {
// NSLog(@"layoutAttributesForElementsInRect");
return self.attrsArray;
}
最后我们需要重写一下内容的范围,高为最大的列高
/*
重写 设置collectionViewContentSize
*/
- (CGSize)collectionViewContentSize {
//最高列关键字
int columnHeight = 0;
//默认取第一个元素
float maxY = [[self.maxYDict objectForKey:@"0"] floatValue];
//找到字典中最大的数
for (int i = 0; i < self.maxYDict.allKeys.count; i++) {
float height = [[self.maxYDict objectForKey:[NSString stringWithFormat:@"%d",i]] floatValue];
if (maxY < height) {
//保持maxY最小
maxY = height;
//记录key
columnHeight = i;
}
}
//读取最高列
CGFloat maxHeight = [[self.maxYDict objectForKey:[NSString stringWithFormat:@"%d",columnHeight]] floatValue];
return CGSizeMake(0, maxHeight + self.edge.bottom);
}
大功告成。
Demo地址
https://github.com/gongxiaokai/WaterFallLayoutDemo
Objectiv-c - UICollectionViewLayout自定义布局-瀑布流的更多相关文章
- 详细分享UICollectionView的自定义布局(瀑布流, 线性, 圆形…)
前言: 本篇文章不是分享collectionView的详细使用教程, 而是属于比较’高级’的collectionView使用技巧, 阅读之前, 我想你已经很熟悉collectionView的基本使用, ...
- 详细分享UICollectionView的自定义布局(瀑布流, 线性, 圆形...)
前言: 本篇文章不是分享collectionView的详细使用教程, 而是属于比较'高级'的collectionView使用技巧, 阅读之前, 我想你已经很熟悉collectionView的基本使用, ...
- css布局-瀑布流的实现
一.基本思路 1.先看最终的效果图: 2.实现原理:通过position:absolute(绝对定位)来定位每一个元素的位置,并且将当前列的高度记录下来方便下一个dom位置的计算 二.代码实现 1.版 ...
- js-实现多列布局(瀑布流)
本文是使用面向对象的思想实现多列布局(瀑布流).当然,使用面向过程也能实现,具体效果图和案例如下: 具体实现代码如下: <!DOCTYPE html> <html lang=&quo ...
- css3多列布局瀑布流加载样式
看了一些网站的瀑布流加载,正好看到css3的多列属性,尝试着写了一个css做布局的瀑布流. 直接上代码: <!DOCTYPE html> <html lang="en&qu ...
- 自定义UICollectionViewLayout之瀑布流
目标效果 因为系统给我们提供的 UICollectionViewFlowLayout 布局类不能实现瀑布流的效果,如果我们想实现 瀑布流 的效果,需要自定义一个 UICollectionViewLay ...
- iOS自定义UICollectionViewLayout之瀑布流
目标效果 因为系统给我们提供的 UICollectionViewFlowLayout 布局类不能实现瀑布流的效果,如果我们想实现 瀑布流 的效果,需要自定义一个 UICollectionViewLay ...
- iOS开发之窥探UICollectionViewController(三) --使用UICollectionView自定义瀑布流
上篇博客的实例是自带的UICollectionViewDelegateFlowLayout布局基础上来做的Demo, 详情请看<iOS开发之窥探UICollectionViewControlle ...
- iOS 瀑布流之栅格布局
代码地址如下:http://www.demodashi.com/demo/14760.html 一 .效果预览 二.确定需求 由下面的需求示意图可知模块的最小单位是正方形,边长是屏幕宽除去边距间隔后的 ...
随机推荐
- 关于前后端同构,我的一点思路和心得(vue、nodejs、react、模版、amd)
最近1年多,前后端同构慢慢变成一个流行词,也许很多人还停留在前后端分离的最佳实践道路上,但实际上又有一批人已经从简单的服务端渲染走向探索最佳前后端同构方案的路上了.不过,我只是膜拜后者的过客. 虽然大 ...
- HTML5 中的拖放
今天,给大家整理一个html5 拖放. 首先,我们先了解一下什么是拖放? 拖放(Drag 和 drop)是 HTML5 标准的组成部分. 拖放是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HT ...
- 提高驾驶技术:用GAN去除(爱情)动作片中的马赛克和衣服
同步自我的知乎专栏:https://zhuanlan.zhihu.com/p/27199954 作为一名久经片场的老司机,早就想写一些探讨驾驶技术的文章.这篇就介绍利用生成式对抗网络(GAN)的两个基 ...
- JS对象创建常用方式及原理分析
====此文章是稍早前写的,本次属于文章迁移@2017.06.27==== 前言 俗话说"在js语言中,一切都对象",而且创建对象的方式也有很多种,所以今天我们做一下梳理 最简单的 ...
- 深入理解YYCache
前言 本篇文章将带来YYCache的解读,YYCache支持内存和本地两种方式的数据存储.我们先抛出两个问题: YYCache是如何把数据写入内存之中的?又是如何实现的高效读取? YYCache采用了 ...
- php第三方类库定时任务
<?php /** * Created by PhpStorm. * User: hanks * Date: 5/27/2017 * Time: 3:11 PM */ //2 .常驻内存的各种P ...
- DataFrame操作方式
DataFrame/DataSet 操作 Databricks 不止一次提到过希望未来在编写 Spark 应用程序过程中,对于结构化/半结构化数据,使用 Datasets(DataFrame 的扩展) ...
- C语言精要总结-指针系列(二)
此文为指针系列第二篇: C语言精要总结-指针系列(一) C语言精要总结-指针系列(二) 指针运算 前面提到过指针的解引用运算,除此之外,指针还能进行部分算数运算.关系运算 指针能进行的有意义的算术运算 ...
- 如何使用VBS脚本给在直播间授权登陆
直接上代码,看不懂说明你技术不够 set WshShell=WScript.CreateObject("WScript.Shell") Dim ie Set mouse=New S ...
- RunTime 运行时
简单介绍RunTime 运行时的用法 以下操作都需要导入头文件 #import <objc/message.h> #pragma mark -- 发消息 //OC方法调用的本质就是让对象发 ...