CollectionView垂直缩放卡片布局

简介:

概述

突然想起小美到家App中的一个列表效果,反正正好最近在研究collectonview,正在拿它个效果来练练手。今天教大家如何实现竖直滚动的列表缩放式效果,体验果然提高了不少。

实现效果

image

缘由

10个月前的事了,那时候在一个很小的创业公司里做美容O2O的,然后研究了很多同行的App,看着人家的效果却不知如何入手,只怪当初太菜。

利用周末研究了一下,果然还是实现出来了。哈哈,时隔这么久还是不能忘记这份“耻辱”啊。不过上周末可不只是实现了这种效果哦,还有好几种效果的。大家可以看文章末尾的推荐阅读。

实现思路

从效果图可以看到变化是,越是往中间滚动的item显示最大,越显眼。而越是往前面,或者越是后面的,反而显示越小,这样就形成了视觉差。

实现的思路就是通过重写在可见范围内的所有item的方法:

通过这个API可以获取到原始属性,然后利用公式来计算缩放。

难点

如何计算缩放系数。这里实现的效果的公式如下:

其中,widthForScale是最难把握的系数。

如何计算widthForScale呢?方法是利用item的中心y与当前collectionview的contentOffset.y来计算:

其中,offset这么计算出来的:

最大的难点是distance的计算,如何拿捏呢?这需要慢慢分析。

假设有三个item显示,那么第一个item的缩放要比第二个item(主显示的item)要小,然后第二个item的缩放要比第三个要大。

第二个item(主)比第一个多了一个item,而第三个又比第二个多了一个item,所以再减去一个item的宽就可以了。

核心代码

系数0.15自由调整。

结尾

这里没有实现分页的特性,笔者还是尝试了的,不过因为一个item不是占满全屏,所以计算起来总是达不到笔者期望的效果。大家若能在笔者的基础上研究出来,请主动通知笔者,谢谢!

源代码

CollectionViewDemos

提示:本篇文章的demo对应于工程中的Demo4-CardLayout-vertical-scale分组。

推荐阅读

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