01.轮播图之一 :scrollView 轮播
接触的每个项目,都会用到轮播图的部分,轮播图都写了好多次,用过各种各样的方式写:
这篇总结的博客,我将分为几个篇幅写,希望写完这几篇博客之后,我能总结出自己写这个轮播的优缺和不同之处
- scrollview 制作轮播
- tableview 制作轮播
- collectionview 制作轮播
- 三个imageview 制作轮播,两个imageView 制作轮播
- 一个imageView 制作轮播
- 设计轮播计时器 和 总结代码的优缺点(希望顺利写到这篇博客)
介绍完篇幅了,现在进入本篇的主题,用scrollview 制作 轮播;
使用的还是那个很老套的思路,就是填补最初一张和最后一张 图片,向后滚动到最后一张的时候,设置成第二张的,向左滚动到第一张的时候,
设置成倒数第二张;逻辑图 就是这样了:::::
2 | 0 | 1 | 2 | 0 |
总之就是这样的吧:
顺利的谱写代码--- 写代码的艺术家 v^v
1.创建一个view 作为轮播图封装 ----ScrollViewShuffling
- @interface ScrollViewShuffling : UIView
// 这个是滚动视图 传入的数组- @property (nonatomic,strong)NSArray *array;
- @end
下面就是具体实现了,重中之重:::::::
- @interface ScrollViewShuffling ()<UIScrollViewDelegate>
- @property (nonatomic,strong)UIScrollView *scrollView;
- @property (nonatomic,strong)NSMutableArray *scrollArray;
- @end
- @implementation ScrollViewShuffling
- @synthesize array = _array;
- -(instancetype)initWithFrame:(CGRect)frame{
- if (self == [super initWithFrame:frame]) {
- }
- return self;
- }
- -(UIScrollView*)scrollView{
- if (_scrollView == nil) {
- CGRect scrollRect = CGRectMake(, , self.frame.size.width, self.frame.size.height);
- _scrollView = [[UIScrollView alloc]initWithFrame:scrollRect];
- [self addSubview:_scrollView];
- _scrollView.pagingEnabled = YES;
- _scrollView.delegate = self;
- }
- return _scrollView;
- }
- -(void)setArray:(NSArray *)array{
- NSAssert(array.count != , @"传入的滚动数组是 空的");
- _array = array;
- [self prepareData];
- [self initImageViews];
- }
- -(void)prepareData{
- self.scrollArray = [NSMutableArray new];
- // 首位 添加数组最后的元素
- [self.scrollArray addObject:_array.lastObject];
- // 添加数组元素
- [self.scrollArray addObjectsFromArray:_array];
- // 末尾 补充第一个元素
- [self.scrollArray addObject:_array.firstObject];
- }
- -(void)initImageViews{
- self.scrollView.contentSize = CGSizeMake(self.scrollArray.count *self.frame.size.width, );
- self.scrollView.contentOffset = CGPointMake(self.frame.size.width, ) ;
- for (int index = ; index < self.scrollArray.count; index++) {
- CGRect imageRect = CGRectMake(index*self.frame.size.width, , self.frame.size.width, self.frame.size.height);
- UIImageView *imageView = [[UIImageView alloc]initWithFrame:imageRect];
- // imageView.image =
- imageView.backgroundColor = (UIColor*)self.scrollArray[index];
- [self.scrollView addSubview:imageView];
- }
- }
- -(void)scrollViewDidScroll:(UIScrollView *)scrollView{
- if (scrollView == self.scrollView) {
- //检测移动的位移
- if (scrollView.contentOffset.x == (self.scrollArray.count-) * self.frame.size.width ) {
- CGPoint startPoint = CGPointMake(self.frame.size.width, );
- [self.scrollView setContentOffset:startPoint animated:false];
- }else if (scrollView.contentOffset.x == ){
- CGPoint endPoint = CGPointMake((self.scrollArray.count-) * self.frame.size.width,);
- [self.scrollView setContentOffset:endPoint animated:false];
- }else{
- // 正常的滚动
- }
- }
- }
现在实现了滚动的基本功能。
- 一定要设置scollview 的contensize和 contentoffset
- 设置scollview 的代理
- 数组asset 这个是考虑传空值,才加入的,如果有更好的方法,可以换掉吧
外界调用::::
- /*
- 引入头文件
- 创建 + 赋值
- */
- -(void)prepareScrollShuffling{
- ScrollViewShuffling *scrollShuffling = [[ScrollViewShuffling alloc]initWithFrame:CGRectMake(, , self.view.frame.size.width-, )];
- [self.view addSubview:scrollShuffling];;
- scrollShuffling.array = self.arr;
- }
scollview 就先写到这里好了,待续………………
01.轮播图之一 :scrollView 轮播的更多相关文章
- Android开发工程师文集-Fragment,适配器,轮播图,ScrollView,Gallery 图片浏览器,Android常用布局样式
Android开发工程师文集-Fragment,适配器,轮播图,ScrollView,Gallery 图片浏览器,Android常用布局样式 Fragment FragmentManager frag ...
- swiper轮播问题之一:轮播图内容为动态数据生成时轮播图无法自动轮播
本人在用H5做移动端项目中使用Swiper遇到的两个问题,因此加深了对Swiper的掌握,分享出来对刚开始接触Swiper的童鞋们或多或少会有帮助. 首先,new Swiper的初始化最 ...
- vue-music 使用better-scroll遇到轮播图不能自动轮播
根据vue-music视频中slider组建的使用,当安装新版本的better-scroll,轮播组件,不能正常轮播 这是因为,better-scroll发布新版本之后,参数设置发生改变 这是旧版本: ...
- 焦点轮播图(tab轮播)
主要有两部分:1.列表导航(小图片) 2.展示区(大图片) 页面布局: HTML部分: <div class="s_conC"> ...
- swiper手滑动轮播图后自动轮播失效解决办法
设置autoplay:true之后,再设置 autoplay:{disableOnInteraction: false} --------------------------------------- ...
- Android开发进程0.1 轮播图 Scrollview Fragment
轮播图的实现 轮播图通过banner可以较为便捷的实现 1.添加本地依赖,在dependence中搜索相关依赖 2.添加banner的view组件 3.创建适配器GlideImageLoader ex ...
- iOS回顾笔记(05) -- 手把手教你封装一个广告轮播图框架
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,bi ...
- iOS中 轮播图放哪最合适? 技术分享
我们知道,轮播图放在cell或collectionViewCell上会影响用户层级交互事件,并且实现起来比较麻烦,现在推出一个技术点:答题思路是:将UIScrollView放在UIView或UICol ...
- Swift-ScrollView轮播图的简易封装和使用
不多说,轮播图是开发中必要一项技能,直接上代码: 先说我的思路:首次继承于UIScrollView类自定义MyScrollView,在MyScrollView里自定制方法,func creatMySc ...
- JavaScript--缓动动画+轮播图
上效果: 实现步骤: 最重要的是运动公式!!! <!DOCTYPE html> <html> <head> <meta charset="UTF-8 ...
随机推荐
- C# TreeView 右键菜单
方法一: 在winform中,添加一个contextMenuStrip1,设置TreeView的属性ContextMenuStrip为contextMenuStrip1,并为这个contextMenu ...
- Substring Anagrams
Given a string s and a non-empty string p, find all the start indices of p's anagrams in s. Strings ...
- NodeJS事件环
1. 执行顺序说明 1. 清空主执行栈 2. 清空微任务队列 3. 运行一个timer队列的回调函数,询问微任务队列,如果有回调函数,清空. 4. 循环第3步,直到清空timer队列 5. 进入pol ...
- java application指的到底是什么?
在Java语言中,能够独立运行的程序称为Java应用程序(Application).Java语言还有另外一种程序——Applet程序.Applet程序(也称Java小程序)是运行于各种网页文件中,用于 ...
- vue自定义弹框
vue 全局自定义简单弹框 https://www.jianshu.com/p/1307329aa09e https://www.cnblogs.com/crazycode2/p/7907905.ht ...
- 心跳(纯代码制作心形,animation动画)
思路:利用两个长方形(比例是2:3 | 3:2)可以合成心形,然后利用动画,缩放大小实现心跳(纯代码),效果如下: <body> <div></div> </ ...
- URL中的String参数问题
测试一个查询数据的接口,类似这样的URL:.../search?type=Astring,在浏览器中输入URL获取到的数据为空,但通过其它方式确认数据库中确实已有数据,怀疑是接口实现问题.找接口实现的 ...
- 8.1.T1
string 题面什么的 抱歉,被我咕咕咕了 考场思路: sort大法好 n2log2n过 40% 令人着实兴奋 正解: 线段树+桶 利用只有26个字母的优势 好吧,26个字母,只怪我没想到 代码: ...
- P4316 绿豆蛙的归宿 期望DP
P4316 绿豆蛙的归宿 期望DP DAG上,每条边有边权,走向相连每条路的概率相等,问从起点到终点所经过的路径总长度期望 因为发现终点走到终点期望为0,定义\(f[i]\)从终点走到\(i\)所经过 ...
- Cogs 1714. [POJ1741][男人八题]树上的点对(点分治)
[POJ1741][男人八题]树上的点对 ★★★ 输入文件:poj1741_tree.in 输出文件:poj1741_tree.out 简单对比 时间限制:1 s 内存限制:256 MB [题目描述] ...