iOS UICollectionView实现卡片效果

 更新时间:2020年6月30日 23:42  点击:2693

现在使用卡片效果的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 下载

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

[!--infotagslink--]

相关文章

  • MySQL性能监控软件Nagios的安装及配置教程

    这篇文章主要介绍了MySQL性能监控软件Nagios的安装及配置教程,这里以CentOS操作系统为环境进行演示,需要的朋友可以参考下...2015-12-14
  • iOS APP h5快捷程序 .mobileconfig的生成

    1.从APP Store 下载Apple Configurator 2从一个管理点管理所有iOS设备应用程序,文档和配置文件。想要确保您的所有家庭成员在其每台iOS设备上都有类似的应用和文档,管理日益增...2021-12-23
  • iOS设置UIButton文字显示位置和字体大小、颜色的方法

    这篇文章给大家分享了iOS如何设置UIButton的文字显示位置和字体的大小、颜色,文中给出了示例代码,相信对大家的学习和理解很有帮助,有需要的朋友们下面来一起看看吧。...2020-06-30
  • iOS如何将图片裁剪成圆形

    这篇文章主要为大家详细介绍了iOS如何将图片裁剪成圆形,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-30
  • iOS给border设置渐变色的方法实例

    这篇文章主要给大家介绍了关于iOS给border设置渐变色的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-09
  • iOS新版微信底部返回横条问题的解决

    这篇文章主要介绍了iOS新版微信底部返回横条问题的解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-06-30
  • vue+axios全局添加请求头和参数操作

    这篇文章主要介绍了vue+axios全局添加请求头和参数操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-24
  • iOS蓝牙设备名称缓存问题的解决方法

    这篇文章主要给大家介绍了关于iOS蓝牙设备名称缓存问题的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-12-08
  • Element Card 卡片的具体使用

    这篇文章主要介绍了Element Card 卡片的具体使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-07-26
  • iOS新版微信底部工具栏遮挡问题完美解决

    这篇文章主要介绍了iOS新版微信底部工具栏遮挡问题完美解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-06-30
  • iOS新增绘制圆的方法实例代码

    这篇文章主要给大家介绍了关于iOS新增绘制圆的方法,文中通过示例代码介绍的非常详细,对各位iOS开发者们具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧...2020-06-30
  • iOS UIBezierPath实现饼状图

    这篇文章主要为大家详细介绍了iOS UIBezierPath实现饼状图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-03-20
  • 封装 axios+promise通用请求函数操作

    这篇文章主要介绍了封装 axios+promise通用请求函数操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-08-12
  • IOS获取各种文件目录路径的方法

    ios获取文件路径的方法,iphone沙箱模型的四个文件夹,通过documents,tmp,app,Library得到模拟器路径的简单方式,下面小编整理相关资料,把IOS获取各种文件目录路径的方式总结如下,需要的朋友可以参考下...2020-06-30
  • iOS UICollectionView实现卡片效果

    这篇文章主要为大家详细介绍了iOS UICollectionView实现卡片效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-30
  • Vue使用axios引起的后台session不同操作

    这篇文章主要介绍了Vue使用axios引起的后台session不同操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-08-14
  • iOS实现电子签名

    这篇文章主要为大家详细介绍了iOS实现电子签名,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-12-08
  • iOS实现循环滚动公告栏

    这篇文章主要为大家详细介绍了iOS实现循环滚动公告栏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-03-20
  • iOS APP实现微信H5支付示例总结

    这篇文章主要介绍了iOS APP实现微信H5支付示例总结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-06-30
  • iOS WKWebview 白屏检测实现的示例

    这篇文章主要介绍了iOS WKWebview 白屏检测实现的示例,帮助大家更好的进行ios开发,感兴趣的朋友可以了解下...2020-10-20