当前位置: 萬仟网 > IT编程>移动开发>IOS > iOS UICollectionView实现卡片效果

iOS UICollectionView实现卡片效果

2020年06月23日  | 萬仟网IT编程  | 我要评论

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

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

如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复

相关文章:

  • ios uicollectionview实现横向滚动

    现在使用卡片效果的app很多,之前公司让实现一种卡片效果,就写了一篇关于实现卡片的文章。文章最后附有demo实现上我选择了使用uicollectionview ... [阅读全文]
  • iOS UICollectionView实现横向滑动

    本文实例为大家分享了ios uicollectionview实现横向滑动的具体代码,供大家参考,具体内容如下uicollectionview的横向滚动,目前我使... [阅读全文]
  • iOS13适配深色模式(Dark Mode)的实现

    iOS13适配深色模式(Dark Mode)的实现

    好像大概也许是一年前, mac os系统发布了深色模式外观, 看着挺刺激, 时至今日用着也还挺爽的终于, 随着iphone11等新手机的发售, ios 13系统... [阅读全文]
  • ios 使用xcode11 新建项目工程的步骤详解

    ios 使用xcode11 新建项目工程的步骤详解

    xcode11新建项目工程,新增了scenedelegate这个类,转而将原appdelegate负责的对ui生命周期的处理担子接了过来。故此可以理解为:ios... [阅读全文]
  • iOS实现转盘效果

    本文实例为大家分享了ios实现转盘效果的具体代码,供大家参考,具体内容如下demo下载地址: ios转盘效果功能:实现了常用的ios转盘效果,轮盘抽奖效果的实现... [阅读全文]
  • iOS开发实现转盘功能

    本文实例为大家分享了ios实现转盘功能的具体代码,供大家参考,具体内容如下今天给同学们讲解一下一个转盘选号的功能,直接上代码直接看viewcontroller#... [阅读全文]
  • iOS实现轮盘动态效果

    本文实例为大家分享了ios实现轮盘动态效果的具体代码,供大家参考,具体内容如下一个常用的绘图,主要用来打分之类的动画,效果如下。主要是ios的绘图和动画,本来想... [阅读全文]
  • iOS实现九宫格连线手势解锁

    本文实例为大家分享了ios实现九宫格连线手势解锁的具体代码,供大家参考,具体内容如下demo下载地址:效果图:核心代码://// clockview.m// 手... [阅读全文]
  • iOS实现卡片堆叠效果

    本文实例为大家分享了ios实现卡片堆叠效果的具体代码,供大家参考,具体内容如下如图,这就是最终效果。去年安卓5.0发布的时候,当我看到安卓全新的material... [阅读全文]
  • iOS利用余弦函数实现卡片浏览工具

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

    本文实例为大家分享了ios利用余弦函数实现卡片浏览工具的具体代码,供大家参考,具体内容如下一、实现效果通过拖拽屏幕实现卡片移动,左右两侧的卡片随着拖动变小,中间... [阅读全文]
验证码:
Copyright © 2020  萬仟网 保留所有权利. 粤ICP备17035492号-1
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com