iOS UICollectionView实现卡片效果

现在使用卡片效果的app很多,之前公司让实现一种卡片效果,就写了一篇关于实现卡片的文章。文章最后附有demo

实现上我选择了使用UICollectionView ;用UICollectionViewFlowLayout来定制样式;下面看看具体实现

具体实现

1、创建UICollectionView

 - (void)createCollectionView {
 CGFloat pading = 0 * SCREEN_WIDTH/375;
 LHLeftCollocationView * layout = [[LHLeftCollocationView alloc]init];
 layout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
 layout.minimumLineSpacing = pading;
 layout.minimumInteritemSpacing = pading;
// UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc]init];
// layout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
 _collectionView3 = [[UICollectionView alloc] initWithFrame:CGRectMake(0, 100, [UIScreen mainScreen].bounds.size.width, imageHeight * SCREEN_RATE) collectionViewLayout:layout];
 _collectionView3.tag = 33;
 _collectionView3.dataSource = self;
 _collectionView3.delegate = self;
 _collectionView3.bounces = NO;
 _collectionView3.alwaysBounceHorizontal = NO;
 _collectionView3.alwaysBounceVertical = NO;
 _collectionView3.backgroundColor = [UIColor grayColor];
 _collectionView3.showsHorizontalScrollIndicator = NO;
 _collectionView3.showsVerticalScrollIndicator = NO;
 [self.view addSubview:_collectionView3];
 [_collectionView3 registerClass:[CollectionViewCell class] forCellWithReuseIdentifier:collectionViewCell];
}

2、实现具体代理方法 UICollectionViewDelegate,UICollectionViewDataSource

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
 return self.modelArray.count;
}

- (NSMutableArray *)modelArray {
 if (!_modelArray) {
 _modelArray = [NSMutableArray array];
 }
 return _modelArray;
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
 CollModel *infoModel = self.modelArray[indexPath.row];
 NSLog(@"section:%ld --- row:%ld -----%@",indexPath.section,indexPath.row,infoModel.title);
 CollectionViewCell * cell = [collectionView dequeueReusableCellWithReuseIdentifier:collectionViewCell forIndexPath:indexPath];
 cell.itemModel = infoModel;
 return cell;
}

// 返回每个item的大小
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
 CGFloat CWidth = 80 * SCREEN_RATE;
 CGFloat CHeight = 80 * SCREEN_RATE;
 return CGSizeMake(CWidth, CHeight);
}

#pragma mark - UICollectionViewDelegate点击事件
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{
 CollModel *infoModel = self.modelArray[indexPath.row];
 NSLog(@"infoModelArray----%@",infoModel.title);
}

3、自定义UICollectionViewFlowLayout

LHLeftCollocationView.m 实现

#import "LHLeftCollocationView.h"

@implementation LHLeftCollocationView

- (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity {
 CGRect targectRect = CGRectMake(proposedContentOffset.x, 0.0, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height);
 NSArray * attriArray = [super layoutAttributesForElementsInRect:targectRect];
 CGFloat horizontalCenterX = proposedContentOffset.x + ([UIScreen mainScreen].bounds.size.width);
 CGFloat offsetAdjustment = CGFLOAT_MAX;
 for (UICollectionViewLayoutAttributes * layoutAttributes in attriArray) {
 CGFloat itemHorizontalCenterX = layoutAttributes.center.x;
 if (fabs(itemHorizontalCenterX-horizontalCenterX) < fabs(offsetAdjustment)) {
  offsetAdjustment = itemHorizontalCenterX - horizontalCenterX;
 }
 }
 return CGPointMake(proposedContentOffset.x , proposedContentOffset.y);
}

CGFloat ActiveDistance = 400; //垂直缩放除以系数
CGFloat ScaleFactor = 0.50; //缩放系数 越大缩放越大

- (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect {
 NSArray * array = [super layoutAttributesForElementsInRect:rect];
 CGRect visibleRect = CGRectZero;
 visibleRect.origin = self.collectionView.contentOffset;
 visibleRect.size = self.collectionView.bounds.size;
 for (UICollectionViewLayoutAttributes *attributes in array) {
 CGFloat distance = CGRectGetMidX(visibleRect) - attributes.center.x;
 CGFloat normalizedDistance = fabs(distance / ActiveDistance);
 CGFloat zoom = 1 - ScaleFactor * normalizedDistance;
 NSLog(@"zoom----%f",zoom);
 attributes.transform3D = CATransform3DMakeScale(1.0, zoom, 1.0);
 //底部显示效果
 attributes.frame = CGRectMake(attributes.frame.origin.x, attributes.frame.origin.y + zoom, attributes.size.width, attributes.size.height);
 //居中显示效果
// CGFloat scrollDirectionItemHeight = self.itemSize.height;
// CGFloat sideItemFixedOffset = 0;
// sideItemFixedOffset = (scrollDirectionItemHeight - scrollDirectionItemHeight * 0.7) / 2;
// attributes.center = CGPointMake(attributes.center.x, attributes.center.y + zoom);

 }
 return array;
}

////设置放大动画
//-(NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect
//{
// NSArray *arr = [self getCopyOfAttributes:[super layoutAttributesForElementsInRect:rect]];
// //屏幕中线
// CGFloat centerX = self.collectionView.contentOffset.x + self.collectionView.bounds.size.width/2.0f;
// //刷新cell缩放
// for (UICollectionViewLayoutAttributes *attributes in arr) {
// CGFloat distance = fabs(attributes.center.x - centerX);
// //移动的距离和屏幕宽度的的比例
// CGFloat apartScale = distance/self.collectionView.bounds.size.width;
// //把卡片移动范围固定到 -π/4到 +π/4这一个范围内
// CGFloat scale = fabs(cos(apartScale * M_PI/4));
// //设置cell的缩放 按照余弦函数曲线 越居中越趋近于1
// attributes.transform = CGAffineTransformMakeScale(1.0, scale);
// }
// return arr;
//}

//防止报错 先复制attributes
- (NSArray *)getCopyOfAttributes:(NSArray *)attributes
{
 NSMutableArray *copyArr = [NSMutableArray new];
 for (UICollectionViewLayoutAttributes *attribute in attributes) {
 [copyArr addObject:[attribute copy]];
 }
 return copyArr;
}

- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds {
 return true;
}
@end

4、自定义cell 和model

model

#import <Foundation/Foundation.h>

@interface CollModel : NSObject
@property (nonatomic,strong)NSString *imgUrl;
@property (nonatomic,strong)NSString *title;
@property (nonatomic,strong)NSString *url;
@end 

cell 自定义

#import <UIKit/UIKit.h>
#import "CollModel.h"
@interface CollectionViewCell : UICollectionViewCell
@property (nonatomic, strong) CollModel * itemModel;

@end

#import "CollectionViewCell.h"
#define SCREEN_RATE ([UIScreen mainScreen].bounds.size.width/375.0)
@interface CollectionViewCell()
/**
 * 存放所有下载操作的队列
 */
@property (nonatomic, strong) UIImageView *itemIcon;
@property (nonatomic, strong) UILabel *itemLabel;
@property (nonatomic, strong) UILabel *priceLabel;
@end

@implementation CollectionViewCell
@synthesize itemModel = _itemModel;

- (instancetype)initWithFrame:(CGRect)frame
{
 if (self = [super initWithFrame:frame]) {
 self.contentView.backgroundColor = [UIColor clearColor];
 [self initView];
 }
 return self;
}

- (void)initView {
 _itemIcon = [[UIImageView alloc] init];
 [self.contentView addSubview:_itemIcon];
 _itemIcon.backgroundColor = [UIColor clearColor];
 // CGFloat iconWidth = ([UIScreen mainScreen].bounds.size.width / 5.0) * SCREEN_RATE;
 _itemIcon.frame = CGRectMake(0, 0, self.contentView.frame.size.width, self.contentView.frame.size.height);
 _itemIcon.center = self.contentView.center;
}

- (CollModel *)itemModel
{
 return _itemModel;
}

- (void)setItemModel:(CollModel *)itemModel
{
 if (!itemModel) {
 return;
 }
 _itemModel = itemModel;
 [self setCellWithModel:_itemModel];
}

- (void)setCellWithModel:(CollModel *)itemModel
{
 [[NSOperationQueue mainQueue] addOperationWithBlock:^{
 _itemIcon.image = [UIImage imageNamed:itemModel.url];
 }];
}
@end

运行效果

下载demo

github 下载

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2020-04-21

iOS实现3D卡片式轮播效果

本文实例为大家分享了iOS实现3D卡片式轮播效果的具体代码,供大家参考,具体内容如下 效果: 参考UITableView的UITableViewDataSource和UITableViewDelegate两个方法实现:支持五险轮播,可以加载本地图片,也可以加载网络图片,可以根据自己的需求自定义 Demo地址 UITableViewDelegate /** * 当前显示cell的Size(中间页显示大小) * * @param flowView <#flowView description#>

iOS实现卡片式滚动效果 iOS实现电影选片效果

本文实例为大家分享了iOS实现卡片式滚动效果的具体代码,供大家参考,具体内容如下 先来张效果图吧: 直接上源码了就(工作比较忙,就不一一解释了,有问题可以Q一同讨论,793136807): CardScrollView.h #import <UIKit/UIKit.h> @interface CardView : UIView @property (nonatomic, assign) CGFloat zoomRate; @property (nonatomic, strong) NSStri

iOS实现卡片堆叠效果

本文实例为大家分享了iOS实现卡片堆叠效果的具体代码,供大家参考,具体内容如下 如图,这就是最终效果. 去年安卓5.0发布的时候,当我看到安卓全新的Material Design设计语言后,真的是喜欢的不得了,这种设计语言不同于偏平式设计以及卡片式设计.简约,自然.直到15年初,偶然看到CM团队已经发布了好多基于安卓5.0的ROM,恰巧有我手机对应的版本,便迫不及待的刷了固件,体验了一把. 不得不说的是,安卓的这个版本简直历史性变革,更加流畅,好用,而且在开发者模式下,发现这个版本移除了Dalv

iOS自定义View实现卡片滑动

本文实例为大家分享了iOS自定义View实现卡片滑动效果的具体代码,供大家参考,具体内容如下 说明 控件基于UIView封装完成,采用UIPanGestureRecognizer监听自身的触摸事件,以此处理各种滑动动画操作. 内容之间可以循环切换,采用类似tableView加载机制,达到复用效果 效果 代码实现 #import <UIKit/UIKit.h> @class SMSwipeView; @protocol SMSwipeDelegate <NSObject> @requ

iOS利用余弦函数实现卡片浏览工具

本文实例为大家分享了iOS利用余弦函数实现卡片浏览工具的具体代码,供大家参考,具体内容如下 一.实现效果 通过拖拽屏幕实现卡片移动,左右两侧的卡片随着拖动变小,中间的变大.效果如下: 二.原理说明 1.上面的动画效果是根据余弦函数的曲线特性实现的,先看一下函数曲线y=cos(x),在区间-π/2 到 π/2的范围内,y的值在x的0的是后是最大的,左右则越来越小. 2.可以将被滚动的卡片的高度按照0.0~1.0的比例放大缩小,效果如下: 3.放置到手机屏幕上的效果如下: 三.代码 封装每个卡片为C

Python绘制正余弦函数图像的方法

今天打算通过绘制正弦和余弦函数,从默认的设置开始,一步一步地调整改进,让它变得好看,变成我们初高中学习过的图象那样.通过这个过程来学习如何进行对图表的一些元素的进行调整. 01. 简单绘图 matplotlib有一套允许定制各种属性的默认设置.你可以几乎控制matplotlib中的每一个默认属性:图像大小,每英寸点数,线宽,色彩和样式,子图(axes),坐标轴和网格属性,文字和字体属性,等等. 安装 pip install matplotlib 虽然matplotlib的默认设置在大多数情况下相

iOS利用UIBezierPath + CAAnimation实现路径动画效果

前言 上次给大家介绍了iOS利用UIBezierPath + CAAnimation实现路径动画效果的相关内容,今天实现一个根据心跳路径实现一个路径动画,让某一视图沿着路径进行运动.. 效果图如下: 核心代码 1-首先通过 drawRect 绘制心形路径 - (void)drawRect:(CGRect)rect { // Drawing code // 初始化UIBezierPath UIBezierPath *path = [UIBezierPath bezierPath]; // 首先设置

动感网页相册 python编写简单文件夹内图片浏览工具

不知道大家有没有这样的体验,windows电脑上查看一张gif图,默认就把IE给打开了,还弹出个什么询问项,好麻烦的感觉.所以为了解决自己的这个问题,写了个简单的文件夹内图片浏览工具. 效果图 以E盘某一文件夹为例 效果图 实现思路 业务代码 # coding:utf-8 import sys reload(sys) sys.setdefaultencoding('utf8') # __author__ = '郭 璞' # __date__ = '2016/8/5' # __Desc__ = 自

iOS利用UIScrollView实现图片的缩放实例代码

本文介绍了iOS利用UIScrollView实现图片的缩放实例代码,分享给大家: 第一步:添加scrollView到控制器中 UIScrollView *scrollView = [[UIScrollView alloc] init]; scrollView.frame = CGRectMake(40, 250, 300, 200); self.scrollView = scrollView; [self.view addSubview:scrollView]; 第二步:添加图片控件到scrol

详解IOS 利用storyboard修改UITextField的placeholder文字颜色

详解IOS 利用storyboard修改UITextField的placeholder文字颜色 最近有个需求需要修改UITextField的placeholder文字颜色,在网上找发现有用代码修改的,但是考虑到更加优雅的实现,所以尝试着在storyboard中直接实现,结果竟然真的成功了, 实现的位置如下: 具体步骤: 1.在User Defined Runtime Attributes中添加一个Key. 2.输入Key Path(这里我们输入_placeholderLabel.textColo

iOS利用MJRefresh实现自定义刷新动画效果

本文主要介绍iOS 利用MJRefresh实现自定义动画的上拉刷新下拉加载效果,一般的类型(包括更新时间与loading图案)这里不做介绍. 要想实现此功能,首先得有一套load的图片数组. 接下来就是实现过程: 引入头文件: #import "MJRefresh.h" //自定义一个方法实现 - (void)prepareRefresh { NSMutableArray *headerImages = [NSMutableArray array]; for (int i = 1; i

php中利用explode函数分割字符串到数组

分割字符串 //利用 explode 函数分割字符串到数组 复制代码 代码如下: <?php $source = "hello1,hello2,hello3,hello4,hello5";//按逗号分离字符串 $hello = explode(',',$source); for($index=0;$index<count($hello);$index++) { echo $hello[$index];echo "</br>"; } ?>

php 利用array_slice函数获取随机数组或前几条数据

先给大家说下基本语法: array_slice ( array $array , int $offset [, int $length [, bool $preserve_keys ]] ) array_slice() 返回根据 offset 和 length 参数所指定的 array 数组中的一段序列. 如果 offset 非负,则序列将从 array 中的此偏移量开始.如果 offset 为负,则序列将从 array 中距离末端这么远的地方开始. 如果给出了 length 并且为正,则序列中

利用PHP函数计算中英文字符串长度的方法

本文实例讲述了利用PHP函数计算中英文字符串长度的方法.分享给大家供大家参考.具体实现方法如下: 一般来说大家知道英文字符占一个字节,而中文字符gbk占两个字符,utf8占三个字符,很多人印象中php计算字符串长度就是strlen()函数,其实不然,它计算的是字节的长度而非字符的长度,那么如何获取一个字符串中字符的长度呢?还有有mb_strlen(). 具体代码如下: 复制代码 代码如下: echo $str = 'PHP点点通'; echo strlen($str); //3*1+3*3=12

sql server如何利用开窗函数over()进行分组统计

这是一道常见的面试题,在实际项目中经常会用到. 需求:求出以产品类别为分组,各个分组里价格最高的产品信息. 实现过程如下: declare @t table( ProductID int, ProductName varchar(20), ProductType varchar(20), Price int) --测试数据 insert @t select 1,'name1','P1',3 union all select 2,'name2','P1',5 union all select 3,