CollectionView缩放水平卡片布局

简介:

概述

本篇一起来学习如何使用UICollectionView来实现水平滚动的缩放式卡片布局,就像Nice App中的卡片布局。

前一篇中讲了如何实现CollectionView旋转水平卡片布局,如果还没有阅读过,不防先看看再继续往下阅读。

实现效果

image

实现思路

从Demo效果图中,可以看出来,主要是缩放系数的计算。对于不同距离的cell,其缩放系数要变化,以便整体协调显示。

所以,我们必须重写-layoutAttributesForElementsInRect:方法来实现所有当前可见的cell的attributes。

计算比例,通过获取当前偏移rect的最小坐标x,再与atribute的中心x相减,再除以高度,就是高度的缩放倍数scaleForDistance。

最后,通过一个公式来计算缩放的Y系数。公式为:

scaleFactor因子可以自由调整,值越大,显示就越大。

核心代码

实现pagingEnabled的样式

这里是以1/3.0为分界,左、右的1/3作为分界线,超过才会切换过去!

感谢

感谢评论的朋友们的一句话,点醒了笔者。对于不分页的情况下,其实只要使用当前的偏移x除(itemSize.width + minimumLineSpacing)就得到一个倍数,然后四舍五入。比如,4.3取整得到4,那么就是没有超过一半,就要往回滚。而4.6取整得到5,表示要滚动到下一个。所以在不分页的情况下,其实也是非常简单的。

结尾

本篇文章经过朋友们的评论及反馈,可以说已经完善了!

目录
相关文章
|
4天前
|
前端开发 容器
如何实现一个两栏布局,右侧自适应?三栏布局中间自适应?
要实现一个两栏布局,右侧自适应的效果,可以使用 CSS 的 Flexbox 或 Grid 布局来实现。以下是使用 Flexbox 实现的示例:
35 1
|
4天前
横向滑块
横向滑块
52 7
|
7月前
|
UED 容器
如何实现侧边两栏宽度固定,中间栏宽度自适应的布局?——双飞翼布局、圣杯(Holy Grails)布局
如何实现侧边两栏宽度固定,中间栏宽度自适应的布局?——双飞翼布局、圣杯(Holy Grails)布局
45 0
|
11月前
|
前端开发 容器
Grid实现自适应九宫格布局
Grid实现自适应九宫格布局
184 0
|
11月前
R|绘图边距及布局
R|绘图边距及布局
RecyclerView 实现纵向,横向,和瀑布流 的滚动布局
RecyclerView 实现纵向,横向,和瀑布流 的滚动布局
RecyclerView 实现纵向,横向,和瀑布流 的滚动布局
|
Java Maven Android开发
Android文字轮播~可垂直可水平跑马灯
Android文字轮播~可垂直可水平跑马灯
Android文字轮播~可垂直可水平跑马灯
SwiftUI—创建一个水平方向上的滚动视图
SwiftUI—创建一个水平方向上的滚动视图
184 0
SwiftUI—创建一个水平方向上的滚动视图
UITableViewCell布局里面文字的自适应
UITableViewCell布局里面文字的自适应
136 0
UITableViewCell布局里面文字的自适应
淡入淡出垂直选项卡
在线演示       本地下载
741 0