iOS开发UI篇—UIScrollView控件实现图片轮播

简介: iOS开发UI篇—UIScrollView控件实现图片轮播 一、实现效果 实现图片的自动轮播            二、实现代码 storyboard中布局 代码: 1 #import "YYViewController.

iOS开发UI篇—UIScrollView控件实现图片轮播

一、实现效果

实现图片的自动轮播

          

二、实现代码

storyboard中布局

代码:

  1 #import "YYViewController.h"
  2 
  3 @interface YYViewController () <UIScrollViewDelegate>
  4 @property (weak, nonatomic) IBOutlet UIScrollView *scrollview;
  5 /**
  6  *  页码
  7  */
  8 @property (weak, nonatomic) IBOutlet UIPageControl *pageControl;
  9 
 10 @property (nonatomic, strong) NSTimer *timer;
 11 @end
 12 
 13 @implementation YYViewController
 14 
 15 - (void)viewDidLoad
 16 {
 17     [super viewDidLoad];
 18     
 19 //    图片的宽
 20     CGFloat imageW = self.scrollview.frame.size.width;
 21 //    CGFloat imageW = 300;
 22 //    图片高
 23     CGFloat imageH = self.scrollview.frame.size.height;
 24 //    图片的Y
 25     CGFloat imageY = 0;
 26 //    图片中数
 27     NSInteger totalCount = 5;
 28 //   1.添加5张图片
 29     for (int i = 0; i < totalCount; i++) {
 30         UIImageView *imageView = [[UIImageView alloc] init];
 31 //        图片X
 32         CGFloat imageX = i * imageW;
 33 //        设置frame
 34         imageView.frame = CGRectMake(imageX, imageY, imageW, imageH);
 35 //        设置图片
 36         NSString *name = [NSString stringWithFormat:@"img_0%d", i + 1];
 37         imageView.image = [UIImage imageNamed:name];
 38 //        隐藏指示条
 39         self.scrollview.showsHorizontalScrollIndicator = NO;
 40         
 41         [self.scrollview addSubview:imageView];
 42     }
 43     
 44 //    2.设置scrollview的滚动范围
 45     CGFloat contentW = totalCount *imageW;
 46     //不允许在垂直方向上进行滚动
 47     self.scrollview.contentSize = CGSizeMake(contentW, 0);
 48     
 49 //    3.设置分页
 50     self.scrollview.pagingEnabled = YES;
 51     
 52 //    4.监听scrollview的滚动
 53     self.scrollview.delegate = self;
 54     
 55     [self addTimer];
 56 }
 57 
 58 - (void)nextImage
 59 {
 60     int page = (int)self.pageControl.currentPage;
 61     if (page == 4) {
 62         page = 0;
 63     }else
 64     {
 65         page++;
 66     }
 67     
 68 //  滚动scrollview
 69     CGFloat x = page * self.scrollview.frame.size.width;
 70     self.scrollview.contentOffset = CGPointMake(x, 0);
 71 }
 72 
 73 // scrollview滚动的时候调用
 74 - (void)scrollViewDidScroll:(UIScrollView *)scrollView
 75 {
 76     NSLog(@"滚动中");
 77 //    计算页码
 78 //    页码 = (contentoffset.x + scrollView一半宽度)/scrollView宽度
 79     CGFloat scrollviewW =  scrollView.frame.size.width;
 80     CGFloat x = scrollView.contentOffset.x;
 81     int page = (x + scrollviewW / 2) /  scrollviewW;
 82     self.pageControl.currentPage = page;
 83 }
 84 
 85 // 开始拖拽的时候调用
 86 - (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
 87 {
 88 //    关闭定时器(注意点; 定时器一旦被关闭,无法再开启)
 89 //    [self.timer invalidate];
 90     [self removeTimer];
 91 }
 92 
 93 - (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
 94 {
 95 //    开启定时器
 96     [self addTimer];
 97 }
 98 
 99 /**
100  *  开启定时器
101  */
102 - (void)addTimer{
103     
104     self.timer = [NSTimer scheduledTimerWithTimeInterval:1 target:self selector:@selector(nextImage) userInfo:nil repeats:YES];
105 106 }
107 /**
108  *  关闭定时器
109  */
110 - (void)removeTimer
111 {
112     [self.timer invalidate];
113 }
114 @end

提示:以下两个属性已经和storyboard中的控件进行了连线。

@property (weak, nonatomic) IBOutletUIScrollView *scrollview;

@property (weak, nonatomic) IBOutletUIPageControl *pageControl;

补充:定时器NSTimer

   定时器 适合用来隔一段时间做一些间隔比较长的操作

 NSTimeInterval:多长多件操作一次

 target :操作谁

 selector : 要操作的方法

 userInfo: 传递参数

 repeats: 是否重复

  self.timer = [NSTimer scheduledTimerWithTimeInterval:1 target:self selector:@selector(nextImage) userInfo:nil repeats:YES];

目录
相关文章
|
7月前
|
开发框架 前端开发 JavaScript
【HarmonyOS Next之旅】基于ArkTS开发(二) -> UI开发一
本文介绍了方舟开发框架(ArkUI)及其两种开发范式:基于ArkTS的声明式开发范式和类Web开发范式。ArkUI是用于构建HarmonyOS应用界面的UI框架,提供极简UI语法和基础设施。声明式开发范式使用ArkTS语言,以组件、动画和状态管理为核心,适合复杂团队协作;类Web开发范式采用HML、CSS、JavaScript三段式开发,适用于简单界面应用,贴近Web开发者习惯。文中还概述了两者的架构和基础能力,帮助开发者选择合适的范式进行高效开发。
225 15
|
7月前
|
编解码 前端开发 Java
【HarmonyOS Next之旅】基于ArkTS开发(二) -> UI开发三
本文介绍了基于声明式UI范式的图形绘制与动画效果实现方法,涵盖绘制图形、添加动画效果及常见组件说明三部分内容。在绘制图形部分,详细讲解了如何通过Circle组件为食物成分表添加圆形标签,以及使用Path组件结合SVG命令绘制自定义图形(如应用Logo)。动画效果部分则展示了如何利用animateTo实现闪屏动画,包括渐出、放大效果,并设置页面跳转;同时介绍了页面间共享元素转场动画的实现方式。最后,文章列举了声明式开发范式中的各类组件及其功能,帮助开发者快速上手构建复杂交互页面。
253 11
|
3月前
|
存储 开发者 容器
鸿蒙 HarmonyOS NEXT星河版APP应用开发-ArkTS面向对象及组件化UI开发使用实例
本文介绍了ArkTS语言中的Class类、泛型、接口、模块化、自定义组件及状态管理等核心概念,并结合代码示例讲解了对象属性、构造方法、继承、静态成员、访问修饰符等内容,同时涵盖了路由管理、生命周期和Stage模型等应用开发关键知识点。
304 1
鸿蒙 HarmonyOS NEXT星河版APP应用开发-ArkTS面向对象及组件化UI开发使用实例
|
6月前
|
JavaScript 前端开发 UED
【HarmonyOS Next之旅】基于ArkTS开发(二) -> UI开发四
本文介绍了Web组件开发与性能优化的相关内容。在Web组件开发部分,涵盖创建组件、设置样式与属性、添加事件和方法以及场景示例,如动态播放视频。性能提升方面,推荐使用数据懒加载、条件渲染替代显隐控制、Column/Row替代Flex、设置List组件宽高及调整cachedCount减少滑动白块等方法,以优化应用性能与用户体验。
249 56
|
6月前
|
编解码 UED 开发者
【HarmonyOS Next之旅】基于ArkTS开发(二) -> UI开发之常见布局
本文主要介绍了自适应布局与响应式布局的相关内容。自适应布局部分涵盖线性布局、层叠布局、弹性布局和网格布局,详细说明了各布局的特性及使用方法,例如线性布局中的排列、拉伸与缩放,弹性布局的方向、换行与对齐方式等。响应式布局则重点讲解了栅格系统和媒体查询,阐述如何通过栅格组件和媒体查询条件实现不同设备上的适配效果。这些技术帮助开发者灵活应对多尺寸屏幕的设计需求,提升用户体验。
338 55
|
7月前
|
存储 开发框架 API
【HarmonyOS Next之旅】基于ArkTS开发(二) -> UI开发二
本文详细介绍了基于声明式UI开发的健康饮食应用的设计与实现过程。内容涵盖从基础环境搭建到复杂功能实现的全流程,包括创建简单视图、构建布局(如Stack、Flex)、数据模型设计、列表与网格布局构建,以及页面跳转和数据传递等核心功能。 本文通过实际案例深入浅出地解析了声明式UI开发的关键技术和最佳实践,为开发者提供了宝贵的参考。
265 14
|
6月前
|
JavaScript 前端开发 开发者
09.HarmonyOS Next数据驱动UI开发:ForEach与动态渲染完全指南(上)
在现代前端开发中,数据驱动UI已成为主流开发范式。HarmonyOS Next的ArkTS语言和声明式UI框架完美支持这一理念,使开发者能够以更高效、更直观的方式构建复杂应用。
179 1

热门文章

最新文章