UIScrollView 和UIPageControl 實現app啟動滑動圖
一、使用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,并保存信息
這里只需要將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"];
- }
原文鏈接:http://my.oschina.net/u/1245365/blog/294146