UIScrollView 和UIPageControl 实现app启动滑动图

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

NSUserDefaults 简介:

NSUserDefaults可以将数据永久的保存在手机中,他是一个单例,用起来很方便,所以很适合用于保存简单的数据和为数据做标记

你可以选择在AppDelegate.m中的didFinishLaunchingWithOptions 方法或者“初始界面”(加载的第一个viewController)的 viewDidLoad 方法中进行判断滑动图是否出现过,写上代码:

NSUserDefaults *userDefaults = [NSUserDefaults standardUserDefaults];

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

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

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

涉及的相关属性:

contentSize : UIScrollView 显示的尺寸,这个按需求而设

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

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

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

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

涉及的相关属性:

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

相关代码:

#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的代理方法

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView 介绍:

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

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

涉及到的相关属性:

UIScrollView:

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

UIPageControl:

currentPage : UIPageControl 的当前页

相关代码:

#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,并保存信息

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

代码如下:

-(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"];
}

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

UIScrollView 和UIPageControl 实现app启动滑动图

时间: 2024-10-16 12:23:35

UIScrollView 和UIPageControl 实现app启动滑动图的相关文章

APP启动页

关于APP启动引导页面模块 时间:2016年6月14日 作者:赵锐 模块使用说明 模块暴露在外的接口是- (void)showGuideViewWithImages:(NSArray *)images;调用时候需要传入引导页图片的名字数组即可. @interface GuideManager : NSObject /** * 实现功能:APP启动引导图 * * @param images 引导图图片的名字数组 */ - (void)showGuideViewWithImages:(NSArray

[iOS]通过UIScrollView和UIPageControl实现滑动切换的效果

UIPageControl是自带的控件,可以查看官方文档,下载官方示例学习. 如果对Xcode自带的文档不熟悉可以参见:苹果Xcode帮助文档阅读指南 接下来是我学习笔记,使用Storyboard实现滑动切换的效果. ----------------------------------------------------------------------------- 新建一个项目,拖上一个UIScrollView和UIPageControl,并且建立关联: 新建一个ContentViewCo

UIScrollView和UIPageControl结合实现图片浏览

iOS中具有图片类的app通常都会有滑动浏览的功能,许多app第一次启动时,也会用UIScrollView+UIPageControl来展示新功能.今天探索一下如何实现该功能. 首先介绍下UIScrollView, UIScrollView中有个重要的属性是contentSize,用于界定滑动范围的大小.UIScrollView本身frame是我们在屏幕上可视部分,也就是说contentSize的宽要大于UIScrollView.frame.size.width才能实现滑动浏览的功能. 另外,图

iOS基础——通过案例学知识之LaunchScreen、APPIcon、StatusBar、UIScrollView、UIPageControl

iOS基础--通过案例学知识之LaunchScreen.APPIcon.StatusBar.UIScrollView.UIPageControl 今天要实现的案例效果图 一.LaunchScreen 1.设置程序的LaunchScreen 在项目配置文件中配置启动页,并且在LaunchScreen.storyboard中进行布局 2.设置LaunchScreen时间 //单位:秒 [NSThread sleepForTimeInterval:1.5f]; 二.APPIcon 1.命名规则:iOS

UIScrollView和UIPageControl

UIScrollView和UIPageControl 一般配合使用 //创建一个滑动/滚动的视图,大小和当前视图大小一样(可以自定义大小)    UIScrollView *scrollView=[[UIScrollView alloc] initWithFrame:self.view.bounds];    //设置显示内容区域的大小,宽度是当前视图的6倍(可以自定义大小),    scrollView.contentSize=CGSizeMake(self.view.frame.size.w

Android App 启动页(Splash)黑/白闪屏现象产生原因与解决办法(转)

转载: Android App 启动页(Splash)黑/白闪屏现象产生原因与解决办法   首先感谢博主分享,本文作为学习记录 惊鸿一瞥 微信的启动页,相信大家都不陌生. 不知道大家有没有发现一个现象,微信每次启动的时候,是直接进入这个启动页面. 我的意思是,很多应用,往往会先白屏停顿一下后再进入启动页面(Splash).为了印证这一点,我把手机上所有的App都点了一遍.选几个例子 如下图: 微信:  斗鱼:  斗鱼和微信是直接进入了,他们的Splash页面. 知乎:  B站:  知乎和B站要先

一触即发——App启动优化最佳实践

一触即发 App启动优化最佳实践 文中的很多图都是Google性能优化指南第六季中的一些截图 Google给出的优化指南来镇楼 https://developer.android.com/topic/performance/launch-time.html 闪屏定义 Android官方的性能优化典范,从第六季开始,发起了一系列针对App启动的优化实践,地址如下: https://www.youtube.com/watch?v=Vw1G1s73DsY&index=74&list=PLWz5r

一触即发 App启动优化最佳实践

一触即发 App启动优化最佳实践 本文在 DiyCode 和 CSDN个人博客 同时首发,关注作者的 DiyCode帐号 或者 作者微博 可第一时间收到新文章推送. 文中的很多图都是Google性能优化指南第六季中的一些截图 Google给出的优化指南来镇楼 https://developer.android.com/topic/performance/launch-time.html 闪屏定义 Android官方的性能优化典范,从第六季开始,发起了一系列针对App启动的优化实践,地址如下: h

IOS 之 UIScrollView,UIPageControl

UIScrollView 可以用于显示多于一个屏幕的内容,超出屏幕范围的内容可以通过滑动进行查看,UIPageControl 类提供一行点来指示当前显示的是多页面视图的哪一页. 下面实现一个简单的图片自动播放器为例说说 UIScrollView 与 UIPageControl类中的一些方法. 注意:下述代码中的 scrollY,kScreenWidth,kScreenHeight,kImgCount 等都是定义好的常量 #define kScreenHeight [UIScreen mainSc