Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >UIScrollView 和 UIPageControl 实现启动滑动图[通俗易懂]

UIScrollView 和 UIPageControl 实现启动滑动图[通俗易懂]

作者头像
全栈程序员站长
发布于 2022-07-20 03:05:03
发布于 2022-07-20 03:05:03
70700
代码可运行
举报
运行总次数:0
代码可运行

大家好,又见面了,我是全栈君。

一、使用NSUserDefaults 判断滑动图有没有出现过,加载滑动图

NSUserDefaults 简介:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
   NSUserDefaults可以将数据永久的保存在手机中,他是一个单例,用起来很方便,所以很适合用于保存简单的数据和为数据做标记。

更多的关于NSUserDefaults的介绍请看:NSUserDefaults 简介

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
 你可以选择在AppDelegate.m中的didFinishLaunchingWithOptions 方法或者“初始界面”(加载的第一个viewController)的 viewDidLoad 方法中进行判断滑动图是否出现过,写上代码:
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
NSUserDefaults *userDefaults = [NSUserDefaults standardUserDefaults];

//判断滑动图是否出现过,第一次调用时“isScrollViewAppear” 这个key 对应的值是nil,会进入if中
    if (![@"YES" isEqualToString:[userDefaults objectForKey:@"isScrollViewAppear"]]) {
        
        [self showScrollView];//显示滑动图
    }

二、初始化 UIScrollView 和 UIPageControl 为启动滑动图做准备

UIScrollView : 带有滑动效果,在上面加入UIImageView再设置代理后,可以实现翻页显示图片的效果

涉及的相关属性:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
contentSize : UIScrollView 显示的尺寸,这个按需求而设

pagingEnabled : 是否支持一页一页的翻,设置成YES后,每一次滑动,翻动一页;

bounces:是否支持反弹,这是一个动画效果,大家可以设置来看看,一般滑动图设置为NO;

showsHorizontalScrollIndicator : 是否显示水平的滑动条

UIPageControl:一般配合UIScrollView使用,指向UIScrollView当前所指的页数

涉及的相关属性:



numberOfPages:一共有几个点(几页),这个要设置得和滑动图的页数一样

相关代码:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
#pragma mark - 滑动图

-(void) showScrollView{

    UIScrollView *_scrollView = [[UIScrollView alloc] initWithFrame:[UIScreen mainScreen].bounds];
    
      //设置UIScrollView 的显示内容的尺寸,有n张图要显示,就设置 屏幕宽度*n ,这里假设要显示4张图
    _scrollView.contentSize = CGSizeMake([UIScreen mainScreen].bounds.size.width * 4, [UIScreen mainScreen].bounds.size.height);
    
    _scrollView.tag = 101;
    
    //设置翻页效果,不允许反弹,不显示水平滑动条,设置代理为自己
    _scrollView.pagingEnabled = YES;
    _scrollView.bounces = NO;
    _scrollView.showsHorizontalScrollIndicator = NO;
    _scrollView.delegate = self;
    
    //在UIScrollView 上加入 UIImageView
    for (int i = 0 ; i < 4; i ++) {
        
        UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake([UIScreen mainScreen].bounds.size.width * i , 0, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height)];
        
        //将要加载的图片放入imageView 中
        UIImage *image = [UIImage imageNamed:[NSString stringWithFormat:@"%d",i+1]];
        imageView.image = image;
        
        [_scrollView addSubview:imageView];
    }
    
    //初始化 UIPageControl 和 _scrollView 显示在 同一个页面中
    UIPageControl *pageConteol = [[UIPageControl alloc] initWithFrame:CGRectMake(140, self.view.frame.size.height - 60, 50, 40)];
    pageConteol.numberOfPages = 4;//设置pageConteol 的page 和 _scrollView 上的图片一样多
    pageConteol.tag = 201;
    
    [self.view addSubview:_scrollView];
    [self.view addSubview: pageConteol];
}

三、实现UIScrollView的代理方法

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView 介绍:

       顾名思义,这是一个滑动后减速结束的方法,这里进行的是 UIPageControl 和 UIScrollView 的配

套使用、滑动图消失信息等:

涉及到的相关属性:

UIScrollView:

contentOffset : UIScrollView 的偏移量(滑动的位置)

UIPageControl:

currentPage : UIPageControl 的当前页

相关代码:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
#pragma mark - UIScrollViewDelegate

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{
    
    // 记录scrollView 的当前位置,因为已经设置了分页效果,所以:位置/屏幕大小 = 第几页
    int current = scrollView.contentOffset.x/[UIScreen mainScreen].bounds.size.width;
    
    //根据scrollView 的位置对page 的当前页赋值
    UIPageControl *page = (UIPageControl *)[self.view viewWithTag:201];
    page.currentPage = current;
    
    //当显示到最后一页时,让滑动图消失
    if (page.currentPage == 3) {
        
        //调用方法,使滑动图消失
        [self scrollViewDisappear];
    }
}

四、从屏幕上移除UIScrollView,并保存信息

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
 这里只需要将UIScrollView和UIPageControl 从主屏幕上移除就可以了,别忘了将启动信息保存到 NSUserDefaults 中,当然你可以设置一些动画效果,或者需要点击才能移除都可以,下面给出的代码是一个简单的动画效果:

代码如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
-(void)scrollViewDisappear{

    //拿到 view 中的 UIScrollView 和 UIPageControl
    UIScrollView *scrollView = (UIScrollView *)[self.view viewWithTag:101];
    UIPageControl *page = (UIPageControl *)[self.view viewWithTag:201];

    //设置滑动图消失的动画效果图
    [UIView animateWithDuration:3.0f animations:^{
        
        scrollView.center = CGPointMake(self.view.frame.size.width/2, 1.5 * self.view.frame.size.height);
        
    } completion:^(BOOL finished) {
        
        [scrollView removeFromSuperview];
        [page removeFromSuperview];
    }];
    
    //将滑动图启动过的信息保存到 NSUserDefaults 中,使得第二次不运行滑动图
    NSUserDefaults *userDefaults = [NSUserDefaults standardUserDefaults];
    [userDefaults setObject:@"YES" forKey:@"isScrollViewAppear"];
}

这个滑动图代码稍作修改,可以添加定时翻页,相册浏览,点击连接到相应的事件等,原理都是一样的。

发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/108451.html原文链接:https://javaforall.cn

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022年3月3,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
iOS自带实现高斯模糊效果引iOS 7 UIToolbariOS 8 UIBlurEffect结
什么叫高斯模糊效果,通俗地说,就是毛玻璃效果,从iOS 7以来,就频繁地被设计使用,如果用得好,效果会显得非常的好。我们来看一个例子:
Cloudox
2021/11/23
8650
iOS自带实现高斯模糊效果引iOS 7 UIToolbariOS 8 UIBlurEffect结
UIScrollView视觉差动画
前言:看到凤凰新闻 头条栏目的编辑推荐新闻是这个效果,觉得不错,就想着实现一下,以下就是我的实现过程,示例代码请看这儿→UIScrollView视觉差动画。 总效果 一、首先实现一个基本的图集浏览
且行且珍惜_iOS
2018/05/22
7430
UIScrollView视觉差动画
那么拖拽中,逐渐移动复位rightView上的RightImage的X坐标:rightView.contentX = 需要移动距离长度 - 移动百分比 * 需要移动距离长度 ; leftView.contentX 和这个类似,交由小伙伴们去思考。
且行且珍惜_iOS
2018/05/21
8620
iOS 启动页后广告Demo
重点!       对于启动页后的广告,相信大家也都看到过很多很多的,比如我自己常看到的有 QQ音乐,爱奇艺了。你点击了APP,它会启动就会随之启动。。其实这些APP的启动页是没有消失的,你去认真的
Mr.RisingSun
2018/01/09
1.9K0
iOS 启动页后广告Demo
IOS开发系列——启动页专题【整理,部分原创】
两种方式,一种是使用系统自带的,按规则定义启动图片名称即可,显示为1秒,要想延长时间,用[nsthread sleepForTimeInterval:5.0] ,另一种就是自定义uiivew,加到window中去。
江中散人_Jun
2022/03/08
1.9K0
IOS开发系列——启动页专题【整理,部分原创】
iOS开发之UIScrollView无限滚动
UIScrollView 的无限滚动主要应用在图片轮播器、欢迎界面等场景。首先需要说明的是,文本所讲的是一种"笨办法",但是好理解且容易实现,在图片不多的时候用它也无妨。它的原理是在要显示的图片前后各加一张图片即在第一张图片之前放最后一张图片,在最后一张图片之后放第一张图片,然后在滚动到边缘的时候,巧妙的过渡一下就可以"瞒天过海","以假乱真"的造成无限滚动的假象。网络上有很多只用三张或两张图片实现的方法,效率比这个方法高,但实现起来稍微麻烦一点,有兴趣的可以去深入研究。 实现步骤 1、根据需求准备几张图片
YungFan
2018/05/03
1.8K0
iOS开发之UIScrollView无限滚动
iOS-UIScrollerView
xy_ss
2023/11/22
2130
iOS-UIScrollerView
iOS自定义的emoji表情键盘 原
        随着iOS系统版本的升级,对原生emoji表情的支持也越来越丰富。emoji表情是unicode码中为表情符号设计的一组编码,当然,还有独立于unicode的另一套编码SBUnicode,在OS系统中,这两种编码都有很好的支持。UI系统会自动帮我们将编码转义成表情符号,例如用SBUnicode如下代码:
珲少
2018/08/15
3K0
iOS自定义的emoji表情键盘
                                                                            原
iOS17适配指南之其他细节
UIView 增加了一个hoverStyle属性,可以设置鼠标移动到 UIView 之上的效果。
YungFan
2023/09/01
1K0
demo2动态加载显示商品详情页
/* 要求:实现 头像+昵称(多余7位用...)           商品图片(根据商品实际的图片的大小进行动态的展示。按照一定的比例进行展示。)           产品简介。产品简介在商品图片的下边。并跟随商品图片的大小进行动态的收缩或者是展示。 考虑:实现功能之后,是否要做占位图 进行图片的占位??! */ 难点:动态的加载。 实现:首先创建ui 然后请求数据 最后在主线程进行赋值 并且刷新ui 即可实现。 // // ACShowDetailVC.m // demo2详情动态加载展开
用户1219438
2018/02/01
7720
demo2动态加载显示商品详情页
iOS 毛玻璃
继承关系:毛玻璃效果的继承于nsobject  在UIkit框架中所以应用的时候,导入uikit框架即可。
星宇大前端
2022/12/03
2450
iOS_实现下来ScrollView放大轮播图
#define kWidth self.view.frame.size.width //屏幕宽
mikimo
2022/07/20
3490
iOS开发之多图片无缝滚动组件封装与使用
  经常有园友会问"博主,有没有图片无限滚动的Demo呀?", 正儿八经的图片滚动的Demo我这儿还真没有,今天呢就封装一个可以在项目中直接使用的图片轮播。没看过其他iOS图片无限轮播的代码,也不了解他们的原理,我今天封装这个图片无限轮播是借鉴Web前端中的做法,因为之前写Web前端的时候,实现幻灯片就是这么做的,今天就在iPhone上搞搞。下面的东西是自己写的了,关于轮播的东西这个开源项目也是相当不错的https://github.com/nicklockwood/iCarousel ,感兴趣的可以看一下
lizelu
2018/01/11
1.8K0
iOS开发之多图片无缝滚动组件封装与使用
iOS17适配指南之UIPageControl
YungFan
2023/07/24
4780
iOS17适配指南之UIPageControl
实践-小效果 V
关键效果设置:在改变tableHeaderView的高度后,再手动调用下 Tb 的 setTableHeaderView方法。
進无尽
2018/09/12
1.1K0
实践-小效果 V
Swift日常开发随笔
提示:之所以为空白,是因为我把下拉列表中的tableView.reloadData()这行代码屏蔽掉了,加入的数组没有刷新。
编程怪才-凌雨画
2020/10/11
2K0
iOS学习笔记——滚动视图(scrollView)
滚动视图:在根视图中添加UIScrollViewDelegate协议,声明一些对象属性
全栈程序员站长
2022/07/18
1.5K0
xcode uiscrollview with paging and zoom
Here is a simple and sample code that demonstrate the photo slide function with zoom using uiscrollview.  image.png this is the first photo  image.png sliding image.png zooming in particular photo  1. first drag three photos to your project , size no
阿新
2018/04/12
1.2K0
xcode uiscrollview with paging and zoom
iOS实现点击图片放大&长按保存图片
在项目中免不了会遇到,实名认证上传身份证、绑定银行卡等功能。在实际操作中呢,会涉及到上传图片,在页面布局时,可能图片不是一张,考虑到布局的美观等因素,显示图片的位置变得很小,如果想查看上传的图片是否清晰,内容是否完整,可能就需要放大才能实现,下面就和大家分享一下我封装的一类,完美的实现了图片的缩放功能。
网罗开发
2021/01/29
6.1K0
controller如何拿到自定义view的点击事件?
如下图所示:自定义PersonalCenterView,如何在controller拿到按钮(小箭头)的点击方法?
iOSSir
2019/06/14
5850
controller如何拿到自定义view的点击事件?
相关推荐
iOS自带实现高斯模糊效果引iOS 7 UIToolbariOS 8 UIBlurEffect结
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验