接触的每个项目,都会用到轮播图的部分,轮播图都写了好多次,用过各种各样的方式写:

这篇总结的博客,我将分为几个篇幅写,希望写完这几篇博客之后,我能总结出自己写这个轮播的优缺和不同之处

  1. scrollview 制作轮播
  2. tableview 制作轮播
  3. collectionview 制作轮播
  4. 三个imageview 制作轮播,两个imageView 制作轮播
  5. 一个imageView 制作轮播
  6. 设计轮播计时器 和 总结代码的优缺点(希望顺利写到这篇博客)

介绍完篇幅了,现在进入本篇的主题,用scrollview 制作 轮播;

使用的还是那个很老套的思路,就是填补最初一张和最后一张 图片,向后滚动到最后一张的时候,设置成第二张的,向左滚动到第一张的时候,

设置成倒数第二张;逻辑图 就是这样了:::::

2 0 1 2 0

总之就是这样的吧:

顺利的谱写代码--- 写代码的艺术家 v^v

1.创建一个view 作为轮播图封装 ----ScrollViewShuffling

  1. @interface ScrollViewShuffling : UIView

  2. // 这个是滚动视图 传入的数组
  3. @property (nonatomic,strong)NSArray *array;
  4.  
  5. @end

下面就是具体实现了,重中之重:::::::

  1. @interface ScrollViewShuffling ()<UIScrollViewDelegate>
  2.  
  3. @property (nonatomic,strong)UIScrollView *scrollView;
  4. @property (nonatomic,strong)NSMutableArray *scrollArray;
  5.  
  6. @end
  7.  
  8. @implementation ScrollViewShuffling
  9. @synthesize array = _array;
  10.  
  11. -(instancetype)initWithFrame:(CGRect)frame{
  12.  
  13. if (self == [super initWithFrame:frame]) {
  14. }
  15. return self;
  16. }
  17.  
  18. -(UIScrollView*)scrollView{
  19.  
  20. if (_scrollView == nil) {
  21. CGRect scrollRect = CGRectMake(, , self.frame.size.width, self.frame.size.height);
  22. _scrollView = [[UIScrollView alloc]initWithFrame:scrollRect];
  23. [self addSubview:_scrollView];
  24. _scrollView.pagingEnabled = YES;
  25. _scrollView.delegate = self;
  26. }
  27. return _scrollView;
  28. }
  29.  
  30. -(void)setArray:(NSArray *)array{
  31.  
  32. NSAssert(array.count != , @"传入的滚动数组是 空的");
  33. _array = array;
  34. [self prepareData];
  35. [self initImageViews];
  36. }
  37.  
  38. -(void)prepareData{
  39.  
  40. self.scrollArray = [NSMutableArray new];
  41. // 首位 添加数组最后的元素
  42. [self.scrollArray addObject:_array.lastObject];
  43. // 添加数组元素
  44. [self.scrollArray addObjectsFromArray:_array];
  45. // 末尾 补充第一个元素
  46. [self.scrollArray addObject:_array.firstObject];
  47. }
  48.  
  49. -(void)initImageViews{
  50.  
  51. self.scrollView.contentSize = CGSizeMake(self.scrollArray.count *self.frame.size.width, );
  52. self.scrollView.contentOffset = CGPointMake(self.frame.size.width, ) ;
  53.  
  54. for (int index = ; index < self.scrollArray.count; index++) {
  55.  
  56. CGRect imageRect = CGRectMake(index*self.frame.size.width, , self.frame.size.width, self.frame.size.height);
  57. UIImageView *imageView = [[UIImageView alloc]initWithFrame:imageRect];
  58. // imageView.image =
  59. imageView.backgroundColor = (UIColor*)self.scrollArray[index];
  60. [self.scrollView addSubview:imageView];
  61. }
  62. }
  63.  
  64. -(void)scrollViewDidScroll:(UIScrollView *)scrollView{
  65.  
  66. if (scrollView == self.scrollView) {
  67. //检测移动的位移
  68. if (scrollView.contentOffset.x == (self.scrollArray.count-) * self.frame.size.width ) {
  69.  
  70. CGPoint startPoint = CGPointMake(self.frame.size.width, );
  71. [self.scrollView setContentOffset:startPoint animated:false];
  72.  
  73. }else if (scrollView.contentOffset.x == ){
  74.  
  75. CGPoint endPoint = CGPointMake((self.scrollArray.count-) * self.frame.size.width,);
  76. [self.scrollView setContentOffset:endPoint animated:false];
  77. }else{
  78. // 正常的滚动
  79. }
  80. }
  81. }

现在实现了滚动的基本功能。

  1. 一定要设置scollview 的contensize和 contentoffset
  2. 设置scollview 的代理
  3. 数组asset 这个是考虑传空值,才加入的,如果有更好的方法,可以换掉吧

外界调用::::

  1. /*
  2. 引入头文件
  3. 创建 + 赋值
  4. */
  5. -(void)prepareScrollShuffling{
  6.  
  7. ScrollViewShuffling *scrollShuffling = [[ScrollViewShuffling alloc]initWithFrame:CGRectMake(, , self.view.frame.size.width-, )];
  8.  
  9. [self.view addSubview:scrollShuffling];;
  10. scrollShuffling.array = self.arr;
  11. }

scollview 就先写到这里好了,待续………………

01.轮播图之一 :scrollView 轮播的更多相关文章

  1. Android开发工程师文集-Fragment,适配器,轮播图,ScrollView,Gallery 图片浏览器,Android常用布局样式

    Android开发工程师文集-Fragment,适配器,轮播图,ScrollView,Gallery 图片浏览器,Android常用布局样式 Fragment FragmentManager frag ...

  2. swiper轮播问题之一:轮播图内容为动态数据生成时轮播图无法自动轮播

    本人在用H5做移动端项目中使用Swiper遇到的两个问题,因此加深了对Swiper的掌握,分享出来对刚开始接触Swiper的童鞋们或多或少会有帮助.        首先,new Swiper的初始化最 ...

  3. vue-music 使用better-scroll遇到轮播图不能自动轮播

    根据vue-music视频中slider组建的使用,当安装新版本的better-scroll,轮播组件,不能正常轮播 这是因为,better-scroll发布新版本之后,参数设置发生改变 这是旧版本: ...

  4. 焦点轮播图(tab轮播)

    主要有两部分:1.列表导航(小图片) 2.展示区(大图片) 页面布局: HTML部分:    <div class="s_conC">                  ...

  5. swiper手滑动轮播图后自动轮播失效解决办法

    设置autoplay:true之后,再设置 autoplay:{disableOnInteraction: false} --------------------------------------- ...

  6. Android开发进程0.1 轮播图 Scrollview Fragment

    轮播图的实现 轮播图通过banner可以较为便捷的实现 1.添加本地依赖,在dependence中搜索相关依赖 2.添加banner的view组件 3.创建适配器GlideImageLoader ex ...

  7. iOS回顾笔记(05) -- 手把手教你封装一个广告轮播图框架

    html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,bi ...

  8. iOS中 轮播图放哪最合适? 技术分享

    我们知道,轮播图放在cell或collectionViewCell上会影响用户层级交互事件,并且实现起来比较麻烦,现在推出一个技术点:答题思路是:将UIScrollView放在UIView或UICol ...

  9. Swift-ScrollView轮播图的简易封装和使用

    不多说,轮播图是开发中必要一项技能,直接上代码: 先说我的思路:首次继承于UIScrollView类自定义MyScrollView,在MyScrollView里自定制方法,func creatMySc ...

  10. JavaScript--缓动动画+轮播图

    上效果: 实现步骤: 最重要的是运动公式!!! <!DOCTYPE html> <html> <head> <meta charset="UTF-8 ...

随机推荐

  1. C# TreeView 右键菜单

    方法一: 在winform中,添加一个contextMenuStrip1,设置TreeView的属性ContextMenuStrip为contextMenuStrip1,并为这个contextMenu ...

  2. Substring Anagrams

    Given a string s and a non-empty string p, find all the start indices of p's anagrams in s. Strings ...

  3. NodeJS事件环

    1. 执行顺序说明 1. 清空主执行栈 2. 清空微任务队列 3. 运行一个timer队列的回调函数,询问微任务队列,如果有回调函数,清空. 4. 循环第3步,直到清空timer队列 5. 进入pol ...

  4. java application指的到底是什么?

    在Java语言中,能够独立运行的程序称为Java应用程序(Application).Java语言还有另外一种程序——Applet程序.Applet程序(也称Java小程序)是运行于各种网页文件中,用于 ...

  5. vue自定义弹框

    vue 全局自定义简单弹框 https://www.jianshu.com/p/1307329aa09e https://www.cnblogs.com/crazycode2/p/7907905.ht ...

  6. 心跳(纯代码制作心形,animation动画)

    思路:利用两个长方形(比例是2:3 | 3:2)可以合成心形,然后利用动画,缩放大小实现心跳(纯代码),效果如下: <body> <div></div> </ ...

  7. URL中的String参数问题

    测试一个查询数据的接口,类似这样的URL:.../search?type=Astring,在浏览器中输入URL获取到的数据为空,但通过其它方式确认数据库中确实已有数据,怀疑是接口实现问题.找接口实现的 ...

  8. 8.1.T1

    string 题面什么的 抱歉,被我咕咕咕了 考场思路: sort大法好 n2log2n过 40% 令人着实兴奋 正解: 线段树+桶 利用只有26个字母的优势 好吧,26个字母,只怪我没想到 代码: ...

  9. P4316 绿豆蛙的归宿 期望DP

    P4316 绿豆蛙的归宿 期望DP DAG上,每条边有边权,走向相连每条路的概率相等,问从起点到终点所经过的路径总长度期望 因为发现终点走到终点期望为0,定义\(f[i]\)从终点走到\(i\)所经过 ...

  10. Cogs 1714. [POJ1741][男人八题]树上的点对(点分治)

    [POJ1741][男人八题]树上的点对 ★★★ 输入文件:poj1741_tree.in 输出文件:poj1741_tree.out 简单对比 时间限制:1 s 内存限制:256 MB [题目描述] ...