2023年7月14日发(作者：)

iOSUICollectionView实现卡⽚效果现在使⽤卡⽚效果的app很多，之前公司让实现⼀种卡⽚效果，就写了⼀篇关于实现卡⽚的⽂章。⽂章最后附有demo实现上我选择了使⽤UICollectionView ；⽤UICollectionViewFlowLayout来定制样式；下⾯看看具体实现具体实现1、创建UICollectionView - (void)createCollectionView { CGFloat pading = 0 * SCREEN_WIDTH/375; LHLeftCollocationView * layout = [[LHLeftCollocationView alloc]init]; Direction = UICollectionViewScrollDirectionHorizontal; mLineSpacing = pading; mInteritemSpacing = pading;// UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc]init];// Direction = UICollectionViewScrollDirectionHorizontal; _collectionView3 = [[UICollectionView alloc] initWithFrame:CGRectMake(0, 100, [UIScreen mainScreen]., imageHeight * SCREEN_RATE) collectionViewLayout:layout]; _ = 33; _urce = self; _te = self; _s = NO; _BounceHorizontal = NO; _BounceVertical = NO; _oundColor = [UIColor grayColor]; _orizontalScrollIndicator = NO; _erticalScrollIndicator = NO; [ addSubview:_collectionView3]; [_collectionView3 registerClass:[CollectionViewCell class] forCellWithReuseIdentifier:collectionViewCell];}2、实现具体代理⽅法 UICollectionViewDelegate,UICollectionViewDataSource- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{ return ;}- (NSMutableArray *)modelArray { if (!_modelArray) { _modelArray = [NSMutableArray array]; } return _modelArray;}- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath { CollModel *infoModel = rray[]; NSLog(@"section:%ld --- row:%ld -----%@",n,,); CollectionViewCell * cell = [collectionView dequeueReusableCellWithReuseIdentifier:collectionViewCell forIndexPath:indexPath]; del = 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 = rray[]; NSLog(@"infoModelArray----%@",);}3、⾃定义UICollectionViewFlowLayoutLHLeftCollocationView.m 实现#import "LHLeftCollocationView.h"@implementation LHLeftCollocationView- (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity { CGRect targectRect = CGRectMake(proposedContentOffset.x, 0.0, [UIScreen mainScreen]., [UIScreen mainScreen].); NSArray * attriArray = [super layoutAttributesForElementsInRect:targectRect]; CGFloat horizontalCenterX = proposedContentOffset.x + ([UIScreen mainScreen].); CGFloat offsetAdjustment = CGFLOAT_MAX; for (UICollectionViewLayoutAttributes * layoutAttributes in attriArray) { CGFloat itemHorizontalCenterX = .x; if (fabs(itemHorizontalCenterX-horizontalCenterX) < fabs(offsetAdjustment)) { offsetAdjustment = itemHorizontalCenterX - horizontalCenterX; } } return CGPointMake(proposedContentOffset.x , proposedContentOffset.y);}CGFloat ActiveDistance = 400; //垂直缩放除以系数CGFloat ScaleFactor = 0.50; //缩放系数 越⼤缩放越⼤- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect { NSArray * array = [super layoutAttributesForElementsInRect:rect]; CGRect visibleRect = CGRectZero; = tOffset; = ; for (UICollectionViewLayoutAttributes *attributes in array) { CGFloat distance = CGRectGetMidX(visibleRect) - .x; CGFloat normalizedDistance = fabs(distance / ActiveDistance); CGFloat zoom = 1 - ScaleFactor * normalizedDistance; NSLog(@"zoom----%f",zoom); orm3D = CATransform3DMakeScale(1.0, zoom, 1.0); //底部显⽰效果 = CGRectMake(.x, .y + zoom, , ); //居中显⽰效果// CGFloat scrollDirectionItemHeight = ;// CGFloat sideItemFixedOffset = 0;// sideItemFixedOffset = (scrollDirectionItemHeight - scrollDirectionItemHeight * 0.7) / 2;// = CGPointMake(.x, .y + zoom); } return array;}////设置放⼤动画//-(NSArray *)layoutAttributesForElementsInRect:(CGRect)rect//{// NSArray *arr = [self getCopyOfAttributes:[super layoutAttributesForElementsInRect:rect]];// //屏幕中线// CGFloat centerX = tOffset.x + /2.0f;// //刷新cell缩放// for (UICollectionViewLayoutAttributes *attributes in arr) {// CGFloat distance = fabs(.x - centerX);// //移动的距离和屏幕宽度的的⽐例// CGFloat apartScale = distance/;// //把卡⽚移动范围固定到 -π/4到 +π/4这⼀个范围内// CGFloat scale = fabs(cos(apartScale * M_PI/4));// //设置cell的缩放 按照余弦函数曲线 越居中越趋近于1// orm = 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;}@end4、⾃定义cell 和modelmodel#import @interface CollModel : NSObject@property (nonatomic,strong)NSString *imgUrl;@property (nonatomic,strong)NSString *title;@property (nonatomic,strong)NSString *url;@end

cell ⾃定义#import #import "CollModel.h"@interface CollectionViewCell : UICollectionViewCell@property (nonatomic, strong) CollModel * itemModel;@end#import "CollectionViewCell.h"#define SCREEN_RATE ([UIScreen mainScreen]./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]) { oundColor = [UIColor clearColor]; [self initView]; } return self;}- (void)initView { _itemIcon = [[UIImageView alloc] init]; [tView addSubview:_itemIcon]; _oundColor = [UIColor clearColor]; // CGFloat iconWidth = ([UIScreen mainScreen]. / 5.0) * SCREEN_RATE; _ = CGRectMake(0, 0, , ); _ = ;}- (CollModel *)itemModel{ return _itemModel;}- (void)setItemModel:(CollModel *)itemModel{ if (!itemModel) { return; } _itemModel = itemModel; [self setCellWithModel:_itemModel];}- (void)setCellWithModel:(CollModel *)itemModel{ [[NSOperationQueue mainQueue] addOperationWithBlock:^{ _ = [UIImage imageNamed:]; }];}@end运⾏效果下载github以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。