天天看點

iOS啟動時如何添加引導頁面 (更新)

           相信大家都看到過手機應用在啟動的時候,都會有一個很漂亮的頁面,在這個頁面顯示之後,如果你是第一次打開該應用還會有提示圖檔(如程式怎麼使用等等),今天自己寫了一個小demo 在此分享一下,可以給新學者一個參考

===========================我是華麗麗的分割線==================================================================

分割線内為最新的加入引導頁的辦法,之前的是剛剛接觸ios 時自己寫的,有很多的不足,在此在提供一種比較完善的方法,供大家參考

此處 是自己封裝了一個獨立的引導頁,在任何項目中均可獨立引用

首先看.h

<span style="color:#666666;">#import <UIKit/UIKit.h>

/**
 *  App首次開機引導頁
 */
@interface GuideView : UIScrollView<UIScrollViewDelegate>

@end</span><span style="color:#ff4647;">
</span>
           

接着.m

#import "GuideView.h"

/**
 *  引導頁張數
 */
#define DEF_GUIDE_COUNT 3

@implementation GuideView

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) 
    {
        self.bounces=NO;
        self.contentSize = CGSizeMake(DEF_WIDTH(self)*DEF_GUIDE_COUNT, DEF_HEIGHT(self));
        self.backgroundColor = [UIColor blackColor];
        self.showsHorizontalScrollIndicator = NO;
        self.pagingEnabled = YES;
        self.delegate=self;
        self.backgroundColor = [UIColor clearColor];
       
        for (int i=0; i<DEF_GUIDE_COUNT; i++) 
        {
            UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(DEF_SCREEN_WIDTH*i, 0, DEF_SCREEN_WIDTH,DEF_SCREEN_HEIGHT)];
            [imageView setBackgroundColor:[UIColor redColor]];
            [imageView setImage:[UIImage imageNamed:[NSString stringWithFormat:@"Guide%d",i]]];
            if ([UIScreen mainScreen].bounds.size.height == 480) {
                [imageView setImage:[UIImage imageNamed:[NSString stringWithFormat:@"Guide%d-480",i]]];
            }
            [self addSubview:imageView];
            if (i==2) {
                UIButton*button = [UIButton buttonWithType:UIButtonTypeCustom];
                button.frame = CGRectMake(0,0, DEF_SCREEN_WIDTH, DEF_SCREEN_HEIGHT);
                button.alpha = 0.5;
                [button addTarget:self action:@selector(beginClick) forControlEvents:UIControlEventTouchUpInside];
                imageView.userInteractionEnabled = YES;
                [imageView addSubview:button];
            }
        }
    }
    return self;
}
-(void)scrollViewDidScroll:(UIScrollView *)scrollView{
    if (scrollView.contentOffset.x>DEF_SCREEN_WIDTH*3+20) {
        [UIView animateWithDuration:0.3 animations:^{
            self.alpha = 0.0;
        } completion:^(BOOL finished) {
            [self removeFromSuperview];
        }];

    }
}
#pragma mark - 點選事件

- (void)beginClick
{
    self.userInteractionEnabled = NO;
    [UIView animateWithDuration:0.3 animations:^{
        self.alpha = 0.0;
    } completion:^(BOOL finished) {
        [self removeFromSuperview];
    }];
}
           

引導頁上 有的是點選的,有的是需要滑動進入首頁的,這兩個根據自己的需求來,例子中這兩種情況都滿足,具體的還得根據自己的需求來,

使用方法也十分簡單

//引導頁
    if (![DEF_PERSISTENT_GET_OBJECT(@"showGuide") boolValue])
    {
    [self makeui];
        DEF_PERSISTENT_SET_OBJECT([NSNumber numberWithBool:YES], @"showGuide");
        GuideView *guide = [[GuideView alloc] initWithFrame:self.window.bounds];
        [self.window addSubview:guide];
    }
           

#define DEF_PERSISTENT_GET_OBJECT(key) [[NSUserDefaults standardUserDefaults] objectForKey:key] 

這是我自己定義的一個宏 用來本地化的  

===========================我是華麗麗的分割線==================================================================

iOS啟動時如何添加引導頁面 (更新)
iOS啟動時如何添加引導頁面 (更新)
iOS啟動時如何添加引導頁面 (更新)

  以上就是在Xcode中如何找到設定引導頁面的位置

    對于圖檔的設定大家可以看到圖中有2x  和R4 兩種,對于這兩種類型的差別如下

    R4 代表的是Retina螢幕也就是高清屏,那麼這裡我們選擇的引導圖檔,一般情況下,在工程中如果有[email protected] 或者是Default.png 或者是[email protected],這樣的圖檔,那麼這個圖檔就會預設設定為我們程式的引導圖檔 ,那麼這三種圖檔的差別如下

  1.    Default.png  适配的是普通螢幕的iPhone手機  如iPhone4以前的
  2. [email protected]  适配的是Retina屏 的iPhone4s 
  3. [email protected]  适配的則是iPhone5 5c 5s 

對于iPhone6的引導頁面圖檔格式,我還不知道(如果您知道可以補充哦)

   以上都是在Xcode内設定的,那麼就像文章開頭所說的,我們每次第一次啟動程式除了引導頁面圖檔外 還有提示如何使用這個程式的頁面或者其他,然後才會進入主界面,那麼如果是這樣 這個假引導頁面(我自己給起得名字)該怎麼設定呢  通過我自己寫得小demo來展示一下  

iOS啟動時如何添加引導頁面 (更新)

   思路: 像上面的頁面 我們都知道隻有應用在第一次打開的時候才會出現,是以我利用的是在本地沙盒裡建立一個檔案,第一次進入的時候,沙盒裡是沒有這個檔案的,是以程式進入出現了這個假引導頁面,然後進入主程式,緊接着建立這個檔案,等我第二次在啟動這個程式的時候我就判斷沙盒裡面有沒有這個檔案,如果有那麼我就直接進入首頁面,這樣就達到了 我想要的效果了 

//這是直接在AppDelegate裡寫的
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
    // Override point for customization after application launch.
    self.window.backgroundColor = [UIColor whiteColor];
   
    isOut =NO;
    //在沙盒做一個檔案,判斷沙盒有沒有這個檔案
    
    NSFileManager *manager=[NSFileManager defaultManager];
    
    BOOL isHasFile=[manager fileExistsAtPath:[NSHomeDirectory() stringByAppendingString:@"aa.txt"]];
    
    if (isHasFile) {
        [self gotoMain]; //為真表示已有檔案 曾經進入過首頁
    }else{
        [self makeLaunchView];//為假表示沒有檔案,沒有進入過首頁
    }
    [self.window makeKeyAndVisible];
    
    return YES;
}
           
//假引導頁面
-(void)makeLaunchView{
    NSArray *arr=[NSArray arrayWithObjects:@"helpphoto_one.png",@"helpphoto_two.png",@"helpphoto_three.png",@"helpphoto_four.png",@"helpphoto_five.png", nil];//數組記憶體放的是我要顯示的假引導頁面圖檔
    //通過scrollView 将這些圖檔添加在上面,進而達到滾動這些圖檔
    UIScrollView *scr=[[UIScrollView alloc] initWithFrame:self.window.bounds];
    scr.contentSize=CGSizeMake(320*arr.count, self.window.frame.size.height);
    scr.pagingEnabled=YES;
    scr.tag=7000;
    scr.delegate=self;
    [self.window addSubview:scr];
    for (int i=0; i<arr.count; i++) {
        UIImageView *img=[[UIImageView alloc] initWithFrame:CGRectMake(i*320, 0, 320, self.window.frame.size.height)];
        img.image=[UIImage imageNamed:arr[i]];
        [scr addSubview:img];
        [img release];
    }
}
#pragma mark scrollView的代理
-(void)scrollViewDidScroll:(UIScrollView *)scrollView{
    //這裡是在滾動的時候判斷 我滾動到哪張圖檔了,如果滾動到了最後一張圖檔,那麼
    //如果在往下面滑動的話就該進入到主界面了,我這裡利用的是偏移量來判斷的,當
    //一共五張圖檔,是以當圖檔全部滑完後 又像後多滑了30 的時候就做下一個動作
    if (scrollView.contentOffset.x>4*320+30) {
        
        isOut=YES;//這是我聲明的一個全局變量Bool 類型的,初始值為no,當達到我需求的條件時将值改為yes
        
    }
}
//停止滑動
-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{
   //判斷isout為真 就要進入主界面了
    if (isOut) {
        //這裡添加了一個動畫,(可根據個人喜好)
      [UIView animateWithDuration:1.5 animations:^{
          scrollView.alpha=0;//讓scrollview 漸變消失
         
      }completion:^(BOOL finished) {
          [scrollView  removeFromSuperview];//将scrollView移除
          [self gotoMain];//進入主界面

      } ];
    }
  
}

//去首頁
-(void)gotoMain{
    //如果第一次進入沒有檔案,我們就建立這個檔案
    NSFileManager *manager=[NSFileManager defaultManager];
   //判斷 我是否建立了檔案,如果沒建立 就建立這個檔案(這種情況就運作一次,也就是第一次啟動程式的時候)
    if (![manager fileExistsAtPath:[NSHomeDirectory() stringByAppendingString:@"aa.txt"]]) {
        [manager createFileAtPath:[NSHomeDirectory() stringByAppendingString:@"aa.txt"] contents:nil attributes:nil];
   }
    
}
           

   這裡 首頁裡

-(void)gotoMain裡的方法 我僅寫了如何去建立這個檔案,至于其他的就要根據你的應用程式情況來寫了,
           
按照這個步驟 就可以簡單的實作添加假引導頁面了 
           
iOS啟動時如何添加引導頁面 (更新)

如上得圖檔 就是我的假引導頁面的第一張圖檔