iOS自定义View实现卡片滑动

2025-05-29 0 21

本文实例为大家分享了ios自定义view实现卡片滑动效果的具体代码,供大家参考,具体内容如下

说明

控件基于uiview封装完成,采用uipangesturerecognizer监听自身的触摸事件,以此处理各种滑动动画操作。
内容之间可以循环切换,采用类似tableview加载机制,达到复用效果

效果

iOS自定义View实现卡片滑动

代码实现

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24
#import <uikit/uikit.h>

@class smswipeview;

@protocol smswipedelegate <nsobject>

@required

//获取显示数据内容

-(uitableviewcell*)smswipegetview:(smswipeview*)swipe withindex:(int)index;

//获取数据源总量

-(nsinteger)smswipegettotalenum:(smswipeview*)swipe;

@end

@interface smswipeview : uiview

@property(nonatomic,weak)id<smswipedelegate> delegate;

//层叠透明方式显示 默认no

@property(nonatomic,assign)bool isstackcard;

//加载方法

-(void)reloaddata;

//根据id获取缓存的cell

-(uitableviewcell*)dequeuereusableuiviewwithidentifier:(nsstring*)identifier;

@end

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295
#import "smswipeview.h"

#define degreetoradians(x) (m_pi * (x)/180)

//childview距离父view左右的距离

const int left_right_margin=10;

//当前view距离父view的顶部的值

const int top_margtin=16;

@interface smswipeview()

//已经划动到边界外的一个view

@property(nonatomic,weak)uitableviewcell * viewremove;

//放当前显示的子view的数组

@property(nonatomic,strong)nsmutablearray * cacheviews;

//view总共的数量

@property(nonatomic,assign)int totalnum;

//当前的下标

@property(nonatomic,assign)int nowindex;

//触摸开始的坐标

@property(nonatomic,assign)cgpoint pointstart;

//上一次触摸的坐标

@property(nonatomic,assign)cgpoint pointlast;

//最后一次触摸的坐标

@property(nonatomic,assign)cgpoint pointend;

//正在显示的cell

@property(nonatomic,weak)uitableviewcell * nowcell;

//下一个cell

@property(nonatomic,weak)uitableviewcell * nextcell;

//第三个cell

@property(nonatomic,weak)uitableviewcell * thirdcell;

//自身的宽度

@property(nonatomic,assign)int w;

//自身的高度

@property(nonatomic,assign)int h;

//是否是第一次执行

@property(nonatomic,assign)bool isfirstlayoutsub;

@end

@implementation smswipeview

//从xib中加载该类

-(void)awakefromnib{

[super awakefromnib];

[self initself];

}

//直接用方法初始化

-(instancetype)initwithframe:(cgrect)frame{

self=[super initwithframe:frame];

[self initself];

return self;

}

//进行一些自身的初始化和设置

-(void)initself{

self.clipstobounds=yes;

self.cacheviews=[[nsmutablearray alloc]init];

//手势识别

uipangesturerecognizer * pan=[[uipangesturerecognizer alloc]initwithtarget:self action:@selector(pan:)];

[self addgesturerecognizer:pan];

}

//布局subview的方法

-(void)layoutsubviews{

if(!self.isfirstlayoutsub){

self.isfirstlayoutsub=yes;

self.w=self.bounds.size.width;

self.h=self.bounds.size.height;

[self reloaddata];

}

}

//重新加载数据方法,会再首次执行layoutsubviews的时候调用

-(void)reloaddata{

if (!self.delegate||![self.delegate respondstoselector:@selector(smswipegetview:withindex:)]||![self.delegate respondstoselector:@selector(smswipegettotalenum:)]) {

return;

}

self.totalnum=(int)[self.delegate smswipegettotalenum:self];

self.viewremove=nil;

uitableviewcell * nowcell=[self.delegate smswipegetview:self withindex:self.nowindex];

uitableviewcell * nextcell=[self.delegate smswipegetview:self withindex:self.nowindex+1<self.totalnum?self.nowindex+1:0];

uitableviewcell * thirdcell=[self.delegate smswipegetview:self withindex:self.nowindex+2<self.totalnum?self.nowindex+2:self.nowindex+2-self.totalnum];

if (self.isstackcard) {

[thirdcell setalpha:0.3f];

[nextcell setalpha:0.5f];

[nowcell setalpha:1];

}

[thirdcell removefromsuperview];

thirdcell.layer.anchorpoint=cgpointmake(1, 1);

thirdcell.frame=cgrectmake(left_right_margin*2, 0, self.w-2*2*left_right_margin, self.h-top_margtin);

[self addsubview:thirdcell];

self.thirdcell=thirdcell;

[nextcell removefromsuperview];

nextcell.layer.anchorpoint=cgpointmake(1, 1);

nextcell.frame=cgrectmake(left_right_margin, top_margtin/2*1, self.w-2*left_right_margin, self.h-top_margtin);

[self addsubview:nextcell];

self.nextcell=nextcell;

[nowcell removefromsuperview];

nowcell.layer.anchorpoint=cgpointmake(1, 1);

nowcell.frame=cgrectmake(0, top_margtin, self.w, self.h-top_margtin);

[self addsubview:nowcell];

self.nowcell=nowcell;

}

#pragma mark swipe触摸的相关手势处理

-(void)swipe:(uiswipegesturerecognizer*)sender{

nslog(@"swipe");

}

-(void)pan:(uipangesturerecognizer*)sender{

cgpoint translation = [sender translationinview: self];

//cgpoint speed=[sender velocityinview:self];//获取速度

if (sender.state==uigesturerecognizerstatebegan) {

//nslog(@"begin");

self.pointstart=translation;

self.pointlast=translation;

}

if (sender.state==uigesturerecognizerstatechanged) {

//nslog(@"change");

// cgfloat xmove=translation.x-self.pointlast.x;

// cgfloat ymove=translation.y-self.pointlast.y;

// self.pointlast=translation;

//

// cgpoint center=self.nowcell.center;

// self.nowcell.center=cgpointmake(center.x+xmove, center.y+ymove);

cgfloat xtotalmove=translation.x-self.pointstart.x;

// if (xtotalmove<0) {

// self.nowcell.transform = cgaffinetransformmakerotation(degreetoradians(90*xtotalmove/self.w));

// self.nextcell.transform= cgaffinetransformmakerotation(degreetoradians(90*xtotalmove/self.w/2));

// }else{

// self.nowcell.transform = cgaffinetransformmakerotation(degreetoradians(0));

// self.nextcell.transform= cgaffinetransformmakerotation(degreetoradians(0));

// }

}

if (sender.state==uigesturerecognizerstateended) {

//nslog(@"end");

cgfloat xtotalmove=translation.x-self.pointstart.x;

if (xtotalmove<0) {

[self swipeend];

}else{

[self swipegoback];

}

}

// nslog(@"%@%f%@%f",@"x:",speed.x,@"y:",speed.y);

//nslog(@"%@%f%@%f",@"x:",translation.x,@"y:",translation.y);

}

/**

* @author stonemover, 16-12-29 14:12:33

*

* @brief 获取为显示的cell,复用机制

*

* @param identifier id标志

*

* @return 返回的cell,如果缓存中没有则返回空

*/

-(uitableviewcell*)dequeuereusableuiviewwithidentifier:(nsstring *)identifier{

for (uitableviewcell * cell in self.cacheviews) {

if ([identifier isequaltostring:cell.reuseidentifier]) {

[self.cacheviews removeobject:cell];

return cell;

}

}

return nil;

}

//滑动到下一个界面

-(void)swipeend{

[uiview animatewithduration:0.3 animations:^{

self.nextcell.transform= cgaffinetransformmakerotation(degreetoradians(0));

}];

//self.nowcell.transform= cgaffinetransformmakerotation(degreetoradians(0));

cgpoint center=self.nowcell.center;

[uiview animatewithduration:0.3 animations:^{

self.nowcell.center=cgpointmake(center.x-self.w, center.y);

self.nowcell.transform= cgaffinetransformmakerotation(degreetoradians(0));

// [self.nowcell setalpha:0.0];

} completion:^(bool finished) {

self.nowindex++;

self.nowindex=self.nowindex<self.totalnum?self.nowindex:0;

if (self.viewremove&&[self isneedaddtocache:self.viewremove]) {

[self.cacheviews addobject:self.viewremove];

[self.viewremove removefromsuperview];

}

self.viewremove=self.nowcell;

//self.viewremove.layer.anchorpoint=cgpointmake(0, 0);

//self.viewremove.transform=cgaffinetransformmakerotation(degreetoradians(-35));

self.nowcell=self.nextcell;

self.nextcell=self.thirdcell;

uitableviewcell * thirdcell=[self.delegate smswipegetview:self withindex:self.nowindex+2<self.totalnum?(int)self.nowindex+2:(int)self.nowindex+2-(int)self.totalnum];

[thirdcell removefromsuperview];

thirdcell.layer.anchorpoint=cgpointmake(1, 1);

thirdcell.frame=cgrectmake(left_right_margin*2, 0, self.w-2*2*left_right_margin, self.h-top_margtin);

self.thirdcell=thirdcell;

if (self.isstackcard) {

[self.thirdcell setalpha:0.3f];

[self.nextcell setalpha:0.5f];

[self.nowcell setalpha:1];

}

[self insertsubview:thirdcell belowsubview:self.nextcell];

[uiview animatewithduration:0.2 animations:^{

self.nowcell.frame=cgrectmake(0, top_margtin, self.w, self.h-top_margtin);

self.nextcell.frame=cgrectmake(left_right_margin, top_margtin/2*1, self.w-2*left_right_margin, self.h-top_margtin);

}];

}];

}

//滑动到上一个界面

-(void)swipegoback{

if (!self.viewremove) {

nslog(@"!viewremove");

return;

}

if (self.nowindex==0) {

nslog(@"!viewremove+index");

return;

}

cgpoint center=self.viewremove.center;

self.nowindex--;

// if ([self isneedaddtocache:self.thirdcell]) {

// [self.cacheviews addobject:self.thirdcell];

// }

[self.thirdcell removefromsuperview];

self.thirdcell=self.nextcell;

self.nextcell=self.nowcell;

self.nowcell=self.viewremove;

if (self.nowindex==0) {

self.viewremove=nil;

}else{

uitableviewcell * cell=[self.delegate smswipegetview:self withindex:(int)self.nowindex-1];

[cell removefromsuperview];

[self insertsubview:cell abovesubview:self.nowcell];

cell.layer.anchorpoint=cgpointmake(1, 1);

cell.frame=self.viewremove.frame;

self.viewremove=cell;

}

[uiview animatewithduration:.5 animations:^{

self.nowcell.center=cgpointmake(center.x+self.w, center.y);

self.nowcell.transform= cgaffinetransformmakerotation(degreetoradians(0));

self.nextcell.frame=cgrectmake(left_right_margin, top_margtin/2*1, self.w-2*left_right_margin, self.h-top_margtin);

self.thirdcell.frame=cgrectmake(left_right_margin*2, 0, self.w-2*2*left_right_margin, self.h-top_margtin);

}];

}

//是否需要加入到缓存中去

-(bool)isneedaddtocache:(uitableviewcell*)cell{

for (uitableviewcell * cellin in self.cacheviews) {

if ([cellin.reuseidentifier isequaltostring:cell.reuseidentifier]) {

return no;

}

}

return yes;

}

@end

源码下载 点击查看

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

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

快网idc优惠网 建站教程 iOS自定义View实现卡片滑动 https://www.kuaiidc.com/89038.html

相关文章

发表评论
暂无评论