用户引导页 - crow coffin

一般的APP在用户第一次下载，或是版本更新之后，都会有一个用户引导页来告诉用户这次更细或者这个app的主要功能以及用法。虽然是一个很低频的页面，但是又必不可少。

要做这个用户引导页，首先要判断出用户是第一次打开app，或者版本更新。要做到这个其实挺简单的，思路就是在UserDefault中去设置一个BOOL类型的值，记录app是否是第一次启动，然后在app启动的生命周期函数中去读取这个值，判断如果为True则去用户引导页，不是就正常启动。对于app的更新，由于会清空UserDefault，所以效果是一样的。

具体来说，就是在AppDelegate.m文件中的 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions 方法中，加上一下判断逻辑：

if (![[NSUserDefaults standardUserDefaults] boolForKey:@"firstLaunch"]) {
        [[NSUserDefaults standardUserDefaults] setBool:YES forKey:@"firstLaunch"];
        TTUserGuideController *userGuide = [[TTUserGuideController alloc] init];
        self.window.rootViewController = userGuide;
}

然后具体的用户引导页就在TTUserGuideController中去实现。

最简单的做法就是用UIScrollView来实现滚动，初始化N个UIImageView（或者其他的UIView）每一个View的宽高都是撑满整个屏幕，x的位置则是屏幕宽度的0到N-1倍。UIScrollView的contentSize则为屏幕宽度的N倍。

初始化一个UIScrollView：

UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT)];
[scrollView setContentSize:CGSizeMake(SCREEN_WIDTH * 3, 0)];
wdssdasd[scrollView setPagingEnabled:YES];
scrollView.showsHorizontalScrollIndicator = NO;
scrollView.delegate = self;

这里需要注意的是一定要 setPagingEnabled:YES ，不要就是连续滑动，而不是按页滑动。

生成3个UIImageView：

UIImageView *imageview2 = [[UIImageView alloc] initWithFrame:CGRectMake(SCREEN_WIDTH * 2, 0, SCREEN_WIDTH, SCREEN_HEIGHT)];
[imageview2 setImage:[UIImage imageNamed:@"img-welcome-2.png"]];
[imageview2 setContentMode:UIViewContentModeScaleAspectFit];
imageview2.userInteractionEnabled = YES;
[scrollView addSubview:imageview2];

注意要把imageView的contentMode设置成 UIViewContentModeScaleAspectFit ，这样如果在ipad或者大屏设备中，只需要把父类view的背景色设置成和图片背景色一致，这样图片不会被拉伸，效果比较好。

屏幕下方那种点点点的效果，用UIPageControl来实现：

pageControl = [[UIPageControl alloc] initWithFrame:CGRectMake(SCREEN_WIDTH / 2 - 50, SCREEN_HEIGHT - 50, 100, 50)];
pageControl.numberOfPages = 3;
pageControl.currentPage = 0;
pageControl.pageIndicatorTintColor = TTCOLOR_DEFAULT_GRAY;
pageControl.currentPageIndicatorTintColor = TTCOLOR_DARK_BLACK;

选中点和没有被选中点的颜色都可以自己定，这里pageControl是一个属性，方便在后面的delegate方法中使用。

然后在最后一个view上面加一个button，点进会进入主程序。并未这个button做一些简单的渐入动画。

在scrollView的delegate方法scrollViewDidScroll中判断位移，设置pageControl应该点亮哪一个点，并在适当的时候启动button的渐入动画：

- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    int lastPage = (int)pageControl.currentPage;
    CGFloat pageWidth = scrollView.frame.size.width;
    float fractionalPage = scrollView.contentOffset.x / pageWidth;
    NSInteger page = lround(fractionalPage);
    pageControl.currentPage = page;
    int newPage = (int)page;

    if (newPage == 2 && lastPage == 1) {
        [self fadeIn];
    }
    else if (newPage == 1 && lastPage == 2) {
        [self fadeOut];
    }
}

以上就是简单的用户引导页需要的东西了，如果想做3D效果，可以尝试使用iCarousel。