服务器之家:专注于服务器技术及软件下载分享
分类导航

PHP教程|ASP.NET教程|Java教程|ASP教程|编程技术|正则表达式|C/C++|IOS|C#|Swift|Android|VB|R语言|JavaScript|易语言|vb.net|

服务器之家 - 编程语言 - IOS - iOS利用UIScrollView实现无限滚动效果

iOS利用UIScrollView实现无限滚动效果

2021-02-22 14:32YungFan IOS

这篇文章主要给大家介绍了iOS如何利用UIScrollView实现无限滚动的效果,首先需要说明的是,文本所讲的是一种"笨办法",但是好理解且容易实现,在图片不多的时候用它也无妨。感兴趣的朋友们下面跟着小编一起来学习学习吧。

前言

众所周知uiscrollview 的无限滚动主要应用在图片轮播器、欢迎界面等场景。它的原理是在要显示的图片前后各加一张图片即在第一张图片之前放最后一张图片,在最后一张图片之后放第一张图片,然后在滚动到边缘的时候,巧妙的过渡一下就可以"瞒天过海","以假乱真"的造成无限滚动的假象。网络上有很多只用三张或两张图片实现的方法,效率比这个方法高,但实现起来稍微麻烦一点,有兴趣的可以去深入研究。

实现步骤

      1、根据需求准备几张图片,在网上找了5张图片,分别命名为 img_01,img_02,img_03,img_04,img_05 。

      2、代码实现,主要分为:添加uiscrollview,添加显示图片,添加uipagecontrol,然后监听uiscrollview的滚动,根据滚动的位置来设置uipagecontrol,最重要的是对于滚动到两个边缘时要特殊处理一下

代码如下:

?
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
#import "viewcontroller.h"
 
//屏幕宽度
#define screen_width [uiscreen mainscreen].bounds.size.width
//图片高度
#define img_height 180
//要显示的图片总数
#define max_size 7
 
#import "viewcontroller.h"
 
@interface viewcontroller () <uiscrollviewdelegate>
 
//滚动视图
@property (strong, nonatomic) uiscrollview *loopscrollview;
//指示器
@property (strong, nonatomic) uipagecontrol *pageindicator;
//要展示的图片数组
@property(strong, nonatomic) nsmutablearray *imgarray;
 
@end
 
@implementation viewcontroller
 
//懒加载数组
-(nsmutablearray *)imgarray
{
  if(_imgarray == nil)
  {
    _imgarray = [[nsmutablearray alloc]initwithcapacity:max_size];
    //在要展示的5张图片的前后各加一张图片,第一张前面加第五张,第五张后面加第一张
    [_imgarray addobject:[uiimage imagenamed:@"img_05.jpg"]];
    for (int i = 1; i< max_size - 1; i++) {
      nsstring *imgname = [[nsstring alloc]initwithformat:@"img_0%d.jpg", i];
      [_imgarray addobject:[uiimage imagenamed:imgname]];
    }
    [_imgarray addobject:[uiimage imagenamed:@"img_01.jpg"]];
 
  }
  return _imgarray;
}
 
 
- (void)viewdidload {
  [super viewdidload];
 
  [self setupscrollview];
  [self setuppagecontrol];
 
}
 
/**
 * 创建uiscrollview并设置其属性
 */
-(void)setupscrollview
{
  uiscrollview *sc = [[uiscrollview alloc]initwithframe:cgrectmake(0, 64, screen_width, img_height)];
 
  //创建uiimageview并添加到uiscrollview中
  for (int i = 0; i< max_size; i++) {
    uiimageview *img = [[uiimageview alloc]initwithimage:[self.imgarray objectatindex:i]];
    img.frame = cgrectmake(screen_width * i, 0, screen_width, img_height);
    [sc addsubview:img];
  }
 
  //设置uiscrollview的属性
  sc.contentsize = cgsizemake(screen_width * self.imgarray.count, img_height);
  sc.showshorizontalscrollindicator = no;
  sc.pagingenabled = yes;
  //刚开始应该滚动到第二张显示,因为第一张其实是最后一张图片
  [sc setcontentoffset:cgpointmake(screen_width, 0) animated:no];
 
 
  //设置代理并添加到当前view中
  sc.delegate = self;
  [self.view addsubview:sc];
 
  self.loopscrollview = sc;
}
 
 
/**
 * 创建uipagecontrol并设置其属性
 */
-(void)setuppagecontrol
{
  //注意frame,这样设置可以居中显示
  uipagecontrol *pc = [[uipagecontrol alloc]initwithframe:cgrectmake(self.view.center.x - 50, cgrectgetmaxy(self.loopscrollview.frame) - 25 , 100, 25)];
  //设置uipagecontrol的属性并添加到当前view中
  pc.numberofpages = max_size - 2;
  pc.currentpage = 0;
  pc.pageindicatortintcolor = [uicolor redcolor];
  [self.view addsubview:pc];
 
  self.pageindicator = pc;
 
}
 
//uiscrollview的代理方法,在该方法中改变uipagecontrol并且处理边缘滚动
-(void)scrollviewdidenddecelerating:(uiscrollview *)scrollview
{
  //获取当前uiscrollview的位置
  cgpoint offset = [scrollview contentoffset];
  //算出滚动到第几页
  int currentpage = offset.x/screen_width;
  //设置uipagecontrol
  self.pageindicator.currentpage = currentpage - 1;
  //对最后一张和第一张要进行特殊处理
  //1、如果是第一张
  if (currentpage == 0) {
    //下面两个方法任选其一都可以达到效果,但是注意动画一定要设置为no,不然会有视觉会有辣眼睛的感觉
    //方法1
    [self.loopscrollview setcontentoffset:cgpointmake(screen_width * (max_size-2), 0) animated:no];
    //方法2,该方法要求设置contentsize时,任一方向就算不滚动也不能为0,否则无效
    //[self.loopscrollview scrollrecttovisible:cgrectmake(screen_width * (max_size-2), 0, screen_width, img_height) animated:no];
    self.pageindicator.currentpage = max_size - 2;
  }
 
  //2、如果是最后一张
  else if(currentpage == max_size - 1) {
    [self.loopscrollview setcontentoffset:cgpointmake(screen_width, 0) animated:no];
    //[self.loopscrollview scrollrecttovisible:cgrectmake(screen_width, 0, screen_width, img_height) animated:no];
    self.pageindicator.currentpage = 0;
  }
}
 
@end

实现效果

iOS利用UIScrollView实现无限滚动效果

总结

好了,以上就是这篇文章的全部内容了,其实实现轮播现在最好的方案应该是使用uicollectionview,因为它是利用重用机制来实现的,性能会好很多,代码写起来类似。希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

延伸 · 阅读

精彩推荐
  • IOS关于iOS自适应cell行高的那些事儿

    关于iOS自适应cell行高的那些事儿

    这篇文章主要给大家介绍了关于iOS自适应cell行高的那些事儿,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的...

    daisy6092021-05-17
  • IOSiOS布局渲染之UIView方法的调用时机详解

    iOS布局渲染之UIView方法的调用时机详解

    在你刚开始开发 iOS 应用时,最难避免或者是调试的就是和布局相关的问题,下面这篇文章主要给大家介绍了关于iOS布局渲染之UIView方法调用时机的相关资料...

    windtersharp7642021-05-04
  • IOSiOS通过逆向理解Block的内存模型

    iOS通过逆向理解Block的内存模型

    自从对 iOS 的逆向初窥门径后,我也经常通过它来分析一些比较大的应用,参考一下这些应用中某些功能的实现。这个探索的过程乐趣多多,不仅能满足自...

    Swiftyper12832021-03-03
  • IOSiOS中tableview 两级cell的展开与收回的示例代码

    iOS中tableview 两级cell的展开与收回的示例代码

    本篇文章主要介绍了iOS中tableview 两级cell的展开与收回的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧...

    J_Kang3862021-04-22
  • IOSiOS 雷达效果实例详解

    iOS 雷达效果实例详解

    这篇文章主要介绍了iOS 雷达效果实例详解的相关资料,需要的朋友可以参考下...

    SimpleWorld11022021-01-28
  • IOS解析iOS开发中的FirstResponder第一响应对象

    解析iOS开发中的FirstResponder第一响应对象

    这篇文章主要介绍了解析iOS开发中的FirstResponder第一响应对象,包括View的FirstResponder的释放问题,需要的朋友可以参考下...

    一片枫叶4662020-12-25
  • IOSIOS开发之字典转字符串的实例详解

    IOS开发之字典转字符串的实例详解

    这篇文章主要介绍了IOS开发之字典转字符串的实例详解的相关资料,希望通过本文能帮助到大家,让大家掌握这样的方法,需要的朋友可以参考下...

    苦练内功5832021-04-01
  • IOSIOS 屏幕适配方案实现缩放window的示例代码

    IOS 屏幕适配方案实现缩放window的示例代码

    这篇文章主要介绍了IOS 屏幕适配方案实现缩放window的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要...

    xiari5772021-06-01