下次自动登录
关注移动互联网和移动APP开发工具、开发框架、测试工具、微信开发、Android源码、Android开源类库以及各种开源组件的IT科技网站
现在的位置:
关于自定义UICollectionViewLayout的一点个人理解
自定义UICollectionView，主要会用到以下几个方法：
- (void)prepareL 第一次加载layout、刷新layout、以及- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newB这个方法返回yes时，会调用。这是苹果官方的说明The collection view calls -prepareLayout once at its first layout as the first message to the layout instance. The collection view calls -prepareLayout again after layout is invalidated and before requerying the layout information. Subclasses should always call super if they override。实现该方法后应该调用［super prepareLayout］保证初始化正确。该方法用来准备一些布局所需要的信息。该方法和init方法相似，但该方法可能会被调用多次，所以一些不固定的计算（比如该计算和collectionView的尺寸相关），最好放在这里，以保证collectionView发生变化时，自定义CollectionView能做出正确的反应。
- (nullable NSArray&__kindof UICollectionViewLayoutAttributes *& *)layoutAttributesForElementsInRect:(CGRect) 该方法用来返回rect范围内的 cell supplementary 以及 decoration的布局属性layoutAttributes（这里保存着她们的尺寸，位置，indexPath等等），如果你的布局都在一个屏幕内 活着 没有复杂的计算，我觉得这里可以返回全部的属性数组，如果涉及到复杂计算，应该进行判断，返回区域内的属性数组，有时候为了方便直接返回了全部的属性数组，不影响布局但可能会影响性能（如果你的item一屏幕显示不完，那么这个方法会调用多次，当所有的item都加载完毕后，在滑动collectionView时不会调用该方法的）。
- (nullable UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexP 该方法不是必须实现的，即便你实现了，我们对collectionView的任何操作，也不会导致系统主动调用该方法。该方法通常用来定制某个IndexPath的item的属性。当然我们也可以重写这个方法，将布局时相关的属性设置放在这里，在- (nullable NSArray&__kindof UICollectionViewLayoutAttributes *& *)layoutAttributesForElementsInRect:(CGRect)rect 或者 - (void)prepareLayout 中 需要创建用来返回给系统的属性数组 主动调用这个方法，并添加带可变数组中去返回给系统。当然我们也可以在 - (void)prepareLayout 中 通过[UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:[NSIndexPath indexPathForRow:i inSection:0]] 获取 每个indexPath的attributes，在- (void)prepareLayout中设置所有item的属性。看需求以及个人喜欢。
- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newB 用来刷新layout的，当我们返回yes的时候。如果我们的需求不需要实时的刷新layout，那么最好判断newBounds 和 我们的collectionView的bounds是否相同，不同时返回yes；（例如苹果官方的lineLayout，因为每次滑动都要放大item，所以这了就直接返回yes）。
以苹果官方的lineLayout为例，这个是对UICollectionViewFlowLayout的扩充，
self = [super init];
if (self) {
self.itemSize = CGSizeMake(ITEM_SIZE, ITEM_SIZE);
self.scrollDirection = UICollectionViewScrollDirectionH
self.sectionInset = UIEdgeInsetsMake(200, 0.0, 200, 0.0);//上下边距
self.minimumLineSpacing = 50.0;//行间距
这里初始化一些信息。
- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds
return YES;
因为滑动放大，故这里需要返回yes，实时刷新layout。
-(NSArray*)layoutAttributesForElementsInRect:(CGRect)rect
NSArray* array = [super layoutAttributesForElementsInRect:rect];
//可视rect
CGRect visibleR
visibleRect.origin = self.collectionView.contentO
visibleRect.size = self.collectionView.bounds.
//设置item的缩放
for (UICollectionViewLayoutAttributes* attributes in array) {
if (CGRectIntersectsRect(attributes.frame, rect)) {
CGFloat distance = CGRectGetMidX(visibleRect) - attributes.center.x;//item到中心点的距离
CGFloat normalizedDistance = distance / ACTIVE_DISTANCE;//距离除以有效距离得到标准化距离
//距离小于有效距离才生效
NSLog(@"%f",distance);
if (ABS(distance) & ACTIVE_DISTANCE) {
CGFloat zoom = 1 + ZOOM_FACTOR*(1 - ABS(normalizedDistance));//缩放率范围1~1.3,与标准距离负相关
attributes.transform3D = CATransform3DMakeScale(zoom, zoom, 1.0);//x,y轴方向变换
//attributes.zIndex = 0;
这里对item进行放大操作（因为该类是继承自UICollectionViewFlowLayout，苹果重写了该方法，所以调用super可以拿到当前rect范围内attributes，如果继承自UICollectionViewLayout，调用super是什么都拿不到的）。这里的思想就是：距离屏幕中心超过一定距离（假设200，自己设定）开始放大，CGFloat normalizedDistance = distance / ACTIVE_DISTANCE;item中心到屏幕中心点距离占200的比例，
CGFloat zoom = 1 + ZOOM_FACTOR*(1 - ABS(normalizedDistance));
这样便得到放大的倍数。
- (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity
//proposedContentOffset是没有对齐到网格时本来应该停下的位置
//计算出实际中心位置
CGFloat offsetAdjustment = MAXFLOAT;
CGFloat horizontalCenter = proposedContentOffset.x + (CGRectGetWidth(self.collectionView.bounds) / 2.0);
//取当前屏幕中的UICollectionViewLayoutAttributes
CGRect targetRect = CGRectMake(proposedContentOffset.x, 0.0, self.collectionView.bounds.size.width, self.collectionView.bounds.size.height);
NSArray* array = [super layoutAttributesForElementsInRect:targetRect];
//对当前屏幕中的UICollectionViewLayoutAttributes逐个与屏幕中心进行比较，找出最接近中心的一个
for (UICollectionViewLayoutAttributes* layoutAttributes in array) {
CGFloat itemHorizontalCenter = layoutAttributes.center.x;
if (ABS(itemHorizontalCenter - horizontalCenter) & ABS(offsetAdjustment)) {
offsetAdjustment = itemHorizontalCenter - horizontalC
//返回调整好的point
return CGPointMake(proposedContentOffset.x + offsetAdjustment, proposedContentOffset.y);
- (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity 这个方法简单理解可以当作是用来设置collectionView的偏移量的，计算当前屏幕哪个item中心点距离屏幕中心点近，就将该item拉到中心去。
个人理解，不对的地方还请见谅。
【上篇】【下篇】iOS 问题：用collectionview浏览图片 横向滑动，想设置2页之间有间距，但又想一张图片填满一页，和朋友圈里浏览图片一样的，这要怎么弄 -
用collectionview浏览图片 横向滑动，想设置2页之间有间距，但又想一张图片填满一页，和朋友圈里浏览图片一样的，这要怎么弄
共有 1 个回答
flowLayout.minimumLineSpacing = 7;设置行的最小间距，或者将你的图片进行缩放，这样看着更整齐
登录后方可回复
登录后方可回答BiliBili客户端中瀑布流的图片是怎么做到宽度固定，根据图片比例来设置长度呢？
-----------------[
update ]------------------------&br&为了方便后来者，还是把问题总结下吧。&br&结合各位所答，我的做法是给数据中增加了图片的宽高比。&br&&div class=&highlight&&&pre&&code class=&language-java&&&span class=&n&&TuiJianViewHolder&/span& &span class=&n&&viewholder&/span& &span class=&o&&=&/span& &span class=&o&&(&/span&&span class=&n&&TuiJianViewHolder&/span&&span class=&o&&)&/span& &span class=&n&&holder&/span&&span class=&o&&;&/span&
&span class=&c1&&//实现根据屏幕宽度计算高度&/span&
&span class=&c1&&//获取屏幕的宽度&/span&
&span class=&kt&&int&/span& &span class=&n&&screenWidth&/span& &span class=&o&&=&/span& &span class=&n&&UIUtils&/span&&span class=&o&&.&/span&&span class=&na&&getScreenWidth&/span&&span class=&o&&();&/span&
&span class=&c1&&//一列的宽度 = 屏幕宽度 - 图片之间的间隙 / 2 (两列)&/span&
&span class=&kt&&int&/span& &span class=&n&&myWidth&/span& &span class=&o&&=&/span& &span class=&o&&(&/span&&span class=&n&&screenWidth&/span& &span class=&o&&-&/span& &span class=&n&&UIUtils&/span&&span class=&o&&.&/span&&span class=&na&&dip2px&/span&&span class=&o&&(&/span&&span class=&mi&&16&/span&&span class=&o&&))&/span& &span class=&o&&/&/span& &span class=&mi&&2&/span&&span class=&o&&;&/span&
&span class=&c1&&//高度 = 一列的宽度 / 从数据中得到的宽高比&/span&
&span class=&kt&&int&/span& &span class=&n&&height&/span& &span class=&o&&=&/span& &span class=&o&&(&/span&&span class=&kt&&int&/span&&span class=&o&&)&/span& &span class=&o&&(&/span&&span class=&n&&myWidth&/span& &span class=&o&&/&/span& &span class=&n&&mDatas&/span&&span class=&o&&.&/span&&span class=&na&&get&/span&&span class=&o&&(&/span&&span class=&n&&position&/span&&span class=&o&&).&/span&&span class=&na&&ratio&/span& &span class=&o&&+&/span& &span class=&mf&&0.5f&/span&&span class=&o&&);&/span&
&span class=&c1&&//最后给图片重新布局即可&/span&
&span class=&n&&viewholder&/span&&span class=&o&&.&/span&&span class=&na&&mIcon&/span&&span class=&o&&.&/span&&span class=&na&&setLayoutParams&/span&&span class=&o&&(&/span&&span class=&k&&new&/span& &span class=&n&&RelativeLayout&/span&&span class=&o&&.&/span&&span class=&na&&LayoutParams&/span&&span class=&o&&(&/span&&span class=&n&&myWidth&/span&&span class=&o&&,&/span& &span class=&n&&height&/span&&span class=&o&&));&/span&
&/code&&/pre&&/div&可以参考我的仿B站客户端：&br&&a href=&///?target=https%3A///liujia95/BiliPlayer& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&GitHub - liujia95/BiliPlayer&i class=&icon-external&&&/i&&/a&&br&------------------------[ 原描述 ]------------------------&br&&img src=&/eb3fdda6a8de291b5bd513f_b.png& data-rawwidth=&322& data-rawheight=&527& class=&content_image& width=&322&&
-----------------[
update ]------------------------为了方便后来者，还是把问题总结下吧。结合各位所答，我的做法是给数据中增加了图片的宽高比。TuiJianViewHolder viewholder = (TuiJianViewHolder) holder;
//实现根据屏幕宽度计算高度
//获取屏幕的宽度
int screenWidth = UIUtils.getScreenWidth();
//一列的宽度 = 屏幕宽度 - 图片之间的间隙 / 2 (两列)
int myWidth = (screenWidth - UIUtils.dip2px(16)) / 2;
//高度 = 一列的宽度 / 从数据中得到的宽高比
int height = (int) (myWidth / mDatas.get(position).ratio + 0.5f);
//最后给图片重新布局即可
viewholder.mIcon.setLayoutParams(new RelativeLayout.LayoutParams(myWidth, height));
可以参考我的仿B站客户端：------------------------[ 原描述 ]------------------------…
邀请, 我是B站客户端程序猿4.0版本之前的瀑布流布局使用一个开源的库并做了一些优化修改,见地址： 4.0版本之后改用RecyclerView+StaggeredGridLayoutManager()推荐第二种(RecyclerView+ StaggeredGridLayoutManager)做法。适应图片高度宽度的方法，最好的办法在服务端就有图片尺寸的数据返回，根据图片大小设置itemview的高宽(方法很多,可以动态修改layoutparams或者扩展view使用setMeasuredDimension)
如果因为条件限制服务端不能返回正确的图片尺寸，可以自己预读并缓存图片头部信息拿到图片尺寸(使用),因为只是读取头部字节所以效率并不会有太大影响.回答完毕, 最后打个广告，欢迎大家安装并使用哔哩哔哩动画客户端 , 是倾注了我们大量心思与爱(?)研发的一款产品，感谢.
另外客户端招聘开发攻城狮,欢迎对B站对移动端项目感兴趣的同学投简历到wangyongrong#
我猜接口返回的数据肯定带有图片的长宽信息，所以可以得到图片的比例。可以根据此比例在绑定ItemView数据的时候先计算并动态的设置ItemView里面的ImageView的高度。这样即使在图片还没有完成加载之前，占位区域的宽高比例都和实际图片一致。
服务器保存图片的宽高比 + 客户端缓存图片的宽高比；宽度铺满，在通过宽度和宽高比计算当前图片的高度，在布局渲染的时候预先设置高度；优先使用本地的，如果计算出来的高度和图片实际高度相差太远的话会造成界面跳动；推荐使用“交错式GridLayout”来展示图片，因为这种布局会使得界面上的图片数量比较少，有利于优化流畅程度；具体代码请参考：
这个跟Ray家的一个collectionview教程一毛一样
既然你知道是瀑布流，那么问题就可以简单地归结为如何从网络获取图片并得到其宽高比例，根据宽高比去修改item的高度。另外，在bilibili开源协议中提到，它是利用Facebook的fresco裤子来完成图片加载的，有兴趣你可以更具体化为，如何使用fresco获得已加载的图片的宽高。很多事，其实你只要多去搜搜
数据接口返回尺寸，用recyclerview，我LOFTER就是这么干的！
看到有bilibili的官方开发回答了安卓端的方法，我这里说一下iOS端的方法。很简单collectionview + 自定义layout.原理是，每个cell宽度固定，屏幕的宽度-leftinset -rightinset-itemspace,然后除以2，高度需要根据宽度来进行等比例的缩放，有一个函数，AVMakeRectWithAspectRatioInsideRect可以帮助计算。然后layout通过代理获知vc里数据源的图片高度，在prepare方法里拿到之后。在layoutAttributesForElementsInRect赋值给attributes 就行了。详情请看我的这个博客，
服务器返回图片宽高，本地自己算。我们是这样实现的
强答一波，安卓开发新人一枚==========分割线=========简单的说，我不知道他用的是什么，但是可以据我的开发经验（做过类似的）可以使用RecycleView+CardView。从功能上讲RecycleView就可以完全替代listview甚至完败它，至于如何实现该瀑布流可以google一下，或者csdn。有时间我也会贴上我的实现过程，现在夜已经深了，明天还要考试呢 。谢谢
楼主问题解决了吗？求指点求源码，我也遇到这样的问题
已有帐号？
无法登录？
社交帐号登录}