文档章节

UIScrollView 和UIPageControl 实现app启动滑动图

lady-奕奕
 lady-奕奕
发布于 2014/07/23 15:43
字数 1028
阅读 17249
收藏 69

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

NSUserDefaults 简介:

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

     这里只需要将UIScrollViewUIPageControl 从主屏幕上移除就可以了,别忘了将启动信息保存到 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"];
}


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

© 著作权归作者所有

共有 人打赏支持
lady-奕奕
粉丝 255
博文 34
码字总数 39252
作品 0
松江
私信 提问
加载中

评论(4)

夜雨风筝
mark 帮助很大
创意总监
创意总监
UIScrollView 和UIPageControl 实现app启动滑动图
创意总监
创意总监

引用来自“chengArthur”的评论

shafa

UIScrollView 和UIPageControl 实现app启动滑动图
chengArthur
chengArthur
shafa
UIScrollView 和UIPageControl 实现app启动滑动图

一、使用NSUserDefaults 判断滑动图有没有出现过,加载滑动图 二、初始化 UIScrollView 和 UIPageControl 为启动滑动图做准备 三、实现UIScrollView的代理方法 四、从屏幕上移除UIScrollVie...

蝴蝶庆庆
2016/05/03
33
0
iOS开发之分页控件的简单封装

初学了UIScrollView的分页的功能,只能说iOS中UIScrollView这玩意儿功能太强了,除了有类似于android中的scrollview的功能,还有Viewpager的功能,比如做app引导页、图片轮播器等,android中...

shenhuniurou
2016/03/06
447
0
UIScrollView 常见属性 手势缩放 分页效果

一、 基本使用 作用 UIScrollView可以用于显示多于一个屏幕的内容,超出屏幕范围的内容可以通过滑动进行查看 常见属性  CGSize contentSize :设置UIScrollView的滚动范围  CGPoint cont...

CEOIOS
2015/01/29
0
1
IOS之[UIPageControl:引导页]

1.UIPageConrol API 2.引导页制作 动画效果+代码参照:http://code4app.com/ios/ZWIntroductionViewController/54e1cb82933bf0212f8b5fbe 所需控件:UIScrollView + UIPageControl 需要一下......

言筱羽
2015/12/31
85
0
UIScrollView 常见属性 手势缩放 分页效果

一、 基本使用1. 作用UIScrollView可以用于显示多于一个屏幕的内容,超出屏幕范围的内容可以通过滑动进行查看 2. 常见属性 CGSize contentSize :设置UIScrollView的滚动范围 CGPoint co...

哥特复心
2013/11/27
0
0

没有更多内容

加载失败,请刷新页面

加载更多

RabbitMQ入门

RabbitMQ是一个由erlang开发的基于AMQP(Advanced Message Queue)协议的开源实现。用于在分布式系统中存储转发消息,在易用性、扩展性、高可用性等方面都非常的优秀。是当前最主流的消息中间...

watermelon11
今天
14
0
今天的学习

自动加载:方法一 function __autoload( $className ){在这里,完成加载B这个类文件的工作。}class A{} //这是一个类$a1 = new A(); //这里没有自动加载的发生,因为A这个类...

墨冥
今天
2
0
印刷工艺步骤

印刷厂从收到订单到交付整个流程,一般涉及到以下步骤 1.设计(经过软件如cdr,psd,ai等等设计需要印刷的名片,宣传单,画册等物料); 2.排版拼版(在电脑软件这区域完成); 3.出版、出硫...

focusone
昨天
2
0
virtualbox中安装ubuntu

virtualbox+ubuntu 安装virtualbox,当前版本是6.0.4 下载ubuntu安装盘,建议lubuntu,链接是http://mirrors.ustc.edu.cn/ubuntu-cdimage/lubuntu/releases/18.04.2/release/lubuntu-18.04.......

chuqq
昨天
5
0
exists 谓词的子查询

https://blog.csdn.net/qq_19782019/article/details/78730882

仟昭
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部