CollectionView垂直缩放卡片布局

实现效果

实现思路

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

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

1

2

3

- (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect

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

难点

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

1

2

3

CGFloat zoom = 1 + 0.15 * (1 - fabs(widthForScale));

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

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

1

2

3

4

CGFloat distance =  obj.center.y - fabs(offset) - self.itemSize.width;

CGFloat widthForScale = distance / self.itemSize.height;

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

1

2

3

4

5

6

7

CGRect visibleRect = CGRectZero;

visibleRect.origin = self.collectionView.contentOffset;

visibleRect.size = self.collectionView.frame.size;

CGFloat offset = CGRectGetMinY(visibleRect);

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

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

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

核心代码

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

- (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect {

NSArray *superAttributes = [super layoutAttributesForElementsInRect:rect];

NSArray *attributes = [[NSArray alloc] initWithArray:superAttributes copyItems:YES];

CGRect visibleRect = CGRectZero;

visibleRect.origin = self.collectionView.contentOffset;

visibleRect.size = self.collectionView.frame.size;

CGFloat offset = CGRectGetMinY(visibleRect);

[attributes enumerateObjectsUsingBlock:^(UICollectionViewLayoutAttributes *obj, NSUInteger idx, BOOL * _Nonnull stop) {

CGFloat distance =  obj.center.y - fabs(offset) - self.itemSize.width;

CGFloat widthForScale = distance / self.itemSize.height;

CGFloat zoom = 1 + 0.15 * (1 - fabs(widthForScale));

obj.transform3D = CATransform3DMakeScale(zoom, 1.0, 1.0);

}];

return attributes;

}

系数0.15自由调整。

时间: 2024-10-13 19:27:21

CollectionView垂直缩放卡片布局的相关文章

CollectionView旋转水平卡片布局

概述 UICollectionView真的好强大,今天我们来研究一下这种很常见的卡片动画效果是如何实现了.本篇不能太深入地讲解,因为笔者也是刚刚摸索出点眉目,但是并没有深刻地理解.如果在讲解过程中,出现不对的地方,请及时反馈. 效果图 重写API 1 2 3 4 5 6 7 8 9 10 11 12 // 我们必须重写此方法,指定布局大小 // 每次layout invalidated或者重新query布局信息时,会调用 - (void)prepareLayout; // 用于决定布局信息 //

GUI布局:边界布局、流式布局、网格布局、卡片布局

边界布局 package guiTest; //JFrame默认的是边界布局BorderLayout import java.awt.BorderLayout; import javax.swing.JButton; import javax.swing.JFrame; public class BorderLayoutDemo { public static void main(String[] args) { JFrame f = new JFrame("边界布局BorderLayout&q

老白的JAVA课程16 卡片布局 javaBean

基于组件的开发 javaBean 组成部件 规范   1: 必须要有一个公共的构造方法,javaBean这个类也必须是公共的   2:javaBean中的属性都是私有的,每一个属性都必须提供符合命名规范的set和get方法   3:应该是可序列化的,但是并不是必须的 类型:  1:简单属性javabean  set和get足够简单  2:绑定属性JavaBean  属性复杂,需要绑定其他属性  3:约束属性JavaBean  set和get方法有约束 cardlayout.show(父容器,按钮

卡片布局页面跳转运用

例:我有一个ATM机界面,用的是卡片布局,现在我在查询功能页面,如果点击退出应该回到选择页面. import java.awt.*; import javax.swing.*; public class ChaXun { private ATMButton tuibtn; private Container contentp; public ChaXun(final ATMFrame frame){   //传入ATM整个大页面,想用它里面的什么就用什么 this.getContentP().s

卡片布局管理器(CardLayout)

1.作用: 卡片布局管理器是管理器的一种,卡片布局能够让多个组件共享同一个显示空间,共享空间的组件之间的关系就像一叠牌,组件叠在一起,初始时显示该空间中第一个添加的组件,通过CardLayout类提供的方法可以切换该空间中显示的组件. 2.CardLayout的常用构造方法: void   first(Container    parent)               翻转到指定容器的第一张卡片 void   next(Container   parent)               翻转到

布局管理器之CardLayout(卡片布局管理器)

对于选项卡这个概念大家可能不会陌生,就是在一个窗口中可以切换显示多页不同的内容,但同一时间只能是其中的某一页可见的,这样的一个个的页面就是选项卡. CardLayout就是类似的这样一个布局管理器,它能够让多个组件共享同一个显示空间,共享空间的组件之间的关系就像重叠在一起的一幅扑克牌,组件重叠在一起,初始时显示该空间中第一个组件,通过CardLayout类提供的方法可以切换该空间中显示的组件. 下面我们来看一个例子,实现CardLayout布局管理器的使用. 创建一个使用CardLayout布局

Java图形化界面设计——布局管理器之CardLayout(卡片布局)

卡片布局能够让多个组件共享同一个显示空间,共享空间的组件之间的关系就像一叠牌,组件叠在一起,初始时显示该空间中第一个添加的组件,通过CardLayout类提供的方法可以切换该空间中显示的组件. 1.  CardLayout类的常用构造函数及方法 2.  使用CardLayout类提供的方法可以切换显示该空间中的组件 方法一步骤: (1)      定义使用卡片布局的容器 例如:Panel cardPanel=new Panel(); (2)      定义卡片对象:CardLayout 布局对象

三十二、Java图形化界面设计——布局管理器之CardLayout(卡片布局)

摘自 http://blog.csdn.net/liujun13579/article/details/7773945 三十二.Java图形化界面设计--布局管理器之CardLayout(卡片布局) 卡片布局能够让多个组件共享同一个显示空间,共享空间的组件之间的关系就像一叠牌,组件叠在一起,初始时显示该空间中第一个添加的组件,通过CardLayout类提供的方法可以切换该空间中显示的组件. 1.  CardLayout类的常用构造函数及方法 2.  使用CardLayout类提供的方法可以切换显

卡片布局管理器

本例因为要制作卡片布局管理器,所以首先要构造框架窗体.先通过函数this.setLayout(new BorderLayout())设置Frame的布局管理器为BorderLayout:再两次实例化Panel类得到两个对象pnlCommandArea和pnlDisplayArea:然后通过函数this.add( pnlCommandArea, BorderLayout.NORTH和函数this.add( pnlDisplayArea, BorderLayout.CENTER) 将两Panel对象