UIScrollView 和UIPageControl 实现app启动滑动图

移动开发 iOS
为了吸引用户眼球或者传达更多的信息,启动app时,一般都会附上一个滑动图(只显示一次),下面为大家详解。

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

NSUserDefaults 简介:

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

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

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

  1. NSUserDefaults *userDefaults = [NSUserDefaults standardUserDefaults]; 
  2.   
  3. //判断滑动图是否出现过,***次调用时“isScrollViewAppear” 这个key 对应的值是nil,会进入if中 
  4.     if (![@"YES" isEqualToString:[userDefaults objectForKey:@"isScrollViewAppear"]]) { 
  5.           
  6.         [self showScrollView];//显示滑动图 
  7.     } 

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

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

涉及的相关属性:

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

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

bounces:是否支持反弹,这是一个动画效果,大家可以设置来看看,一般滑动图设置为NO;
showsHorizontalScrollIndicator : 是否显示水平的滑动条
UIPageControl:一般配合UIScrollView使用,指向UIScrollView当前所指的页数

涉及的相关属性:

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

 

相关代码:

  1. #pragma mark - 滑动图 
  2.   
  3. -(void) showScrollView{ 
  4.   
  5.     UIScrollView *_scrollView = [[UIScrollView alloc] initWithFrame:[UIScreen mainScreen].bounds]; 
  6.       
  7.       //设置UIScrollView 的显示内容的尺寸,有n张图要显示,就设置 屏幕宽度*n ,这里假设要显示4张图 
  8.     _scrollView.contentSize = CGSizeMake([UIScreen mainScreen].bounds.size.width * 4, [UIScreen mainScreen].bounds.size.height); 
  9.       
  10.     _scrollView.tag = 101
  11.       
  12.     //设置翻页效果,不允许反弹,不显示水平滑动条,设置代理为自己 
  13.     _scrollView.pagingEnabled = YES; 
  14.     _scrollView.bounces = NO; 
  15.     _scrollView.showsHorizontalScrollIndicator = NO; 
  16.     _scrollView.delegate = self; 
  17.       
  18.     //在UIScrollView 上加入 UIImageView 
  19.     for (int i = 0 ; i < 4; i ++) { 
  20.           
  21.         UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake([UIScreen mainScreen].bounds.size.width * i , 0, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height)]; 
  22.           
  23.         //将要加载的图片放入imageView 中 
  24.         UIImage *image = [UIImage imageNamed:[NSString stringWithFormat:@"%d",i+1]]; 
  25.         imageView.image = image; 
  26.           
  27.         [_scrollView addSubview:imageView]; 
  28.     } 
  29.       
  30.     //初始化 UIPageControl 和 _scrollView 显示在 同一个页面中 
  31.     UIPageControl *pageConteol = [[UIPageControl alloc] initWithFrame:CGRectMake(140, self.view.frame.size.height - 605040)]; 
  32.     pageConteol.numberOfPages = 4;//设置pageConteol 的page 和 _scrollView 上的图片一样多 
  33.     pageConteol.tag = 201
  34.       
  35.     [self.view addSubview:_scrollView]; 
  36.     [self.view addSubview: pageConteol]; 

三、实现UIScrollView的代理方法

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView 介绍:
顾名思义,这是一个滑动后减速结束的方法,这里进行的是 UIPageControl 和 UIScrollView 的配
套使用、滑动图消失信息等:
涉及到的相关属性:
UIScrollView:
contentOffset : UIScrollView 的偏移量(滑动的位置)
UIPageControl:

currentPage : UIPageControl 的当前页

 

相关代码:

  1. #pragma mark - UIScrollViewDelegate 
  2.   
  3. - (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{ 
  4.       
  5.     // 记录scrollView 的当前位置,因为已经设置了分页效果,所以:位置/屏幕大小 = 第几页 
  6.     int current = scrollView.contentOffset.x/[UIScreen mainScreen].bounds.size.width; 
  7.       
  8.     //根据scrollView 的位置对page 的当前页赋值 
  9.     UIPageControl *page = (UIPageControl *)[self.view viewWithTag:201]; 
  10.     page.currentPage = current; 
  11.       
  12.     //当显示到***一页时,让滑动图消失 
  13.     if (page.currentPage == 3) { 
  14.           
  15.         //调用方法,使滑动图消失 
  16.         [self scrollViewDisappear]; 
  17.     } 

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

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

  1. -(void)scrollViewDisappear{ 
  2.   
  3.     //拿到 view 中的 UIScrollView 和 UIPageControl 
  4.     UIScrollView *scrollView = (UIScrollView *)[self.view viewWithTag:101]; 
  5.     UIPageControl *page = (UIPageControl *)[self.view viewWithTag:201]; 
  6.   
  7.     //设置滑动图消失的动画效果图 
  8.     [UIView animateWithDuration:3.0f animations:^{ 
  9.           
  10.         scrollView.center = CGPointMake(self.view.frame.size.width/21.5 * self.view.frame.size.height); 
  11.           
  12.     } completion:^(BOOL finished) { 
  13.           
  14.         [scrollView removeFromSuperview]; 
  15.         [page removeFromSuperview]; 
  16.     }]; 
  17.       
  18.     //将滑动图启动过的信息保存到 NSUserDefaults 中,使得第二次不运行滑动图 
  19.     NSUserDefaults *userDefaults = [NSUserDefaults standardUserDefaults]; 
  20.     [userDefaults setObject:@"YES" forKey:@"isScrollViewAppear"]; 

原文链接:http://my.oschina.net/u/1245365/blog/294146

责任编辑:chenqingxiang 来源: oschina
相关推荐

2011-08-12 18:18:03

iPhone开发UIPageContr按钮

2017-03-13 10:11:28

AndroidRecyclerVie功能介绍

2013-07-25 13:35:14

iOS开发学习UIScrollVietouchesBega

2011-03-21 15:44:52

Nagios启动

2020-11-13 08:17:48

App(滑动切换)

2011-08-15 11:23:41

iPhone开发循环滚动UIScrollVie

2021-08-10 20:41:33

AndroidApp流程

2021-11-23 10:25:35

性能优化iOS App 启动优化

2011-08-18 09:52:13

iPhone SDKUIPageContr

2013-03-29 11:06:24

iOS开发滚动视图UIScrol

2015-03-03 09:19:12

UIScrollVie

2011-03-24 10:08:41

nagios启动

2011-08-02 14:23:09

iPhone UIScrollVi 图片

2017-08-31 14:40:54

Linuxinit进程app启动

2017-01-23 21:05:00

AndroidApp启动优化

2012-06-14 15:49:59

Slider

2010-05-27 16:30:48

2022-11-10 15:25:09

机器学习Python图嵌入

2015-01-22 14:12:40

Android源码APP启动引导

2017-04-27 21:00:33

Android滑动分析
点赞
收藏

51CTO技术栈公众号