App欢迎界面的制作（UIScrollView实现）

关于App欢迎界面的制作，欢迎大家指正，共同进步~

---

首先，看一下效果：

---

本Demo最终实现：滑动图片，到最后一张，点击屏幕任意位置，进入App,详细设计见下文。

---

实现原理：
UIScrollView实现图片的滚动，属性：
.frame 设置scrollView用多大的窗口来显示内容
.contentSize设置了可滚动的区域的大小
.contentOffset设置frame定点与内容的左顶点的
偏移坐标
.contentInset设置内容与边界之间的上、左、
下、右的距离
其他属性：
.bounces 是否可以弹跳
.showsHorizontalScrollIndicator
.showsVerticalScrollIndicator
.indicatorStyle

---

代码讲解：

---

声明一个数组，用于存储图片；
声明一个pageControl控件。

#import "ViewController.h"
#import "MyMusicTableViewController.h"
@interface ViewController ()<UIScrollViewDelegate>

@property(nonatomic,strong)NSArray *imageNames;

@property(nonatomic,strong)UIPageControl *pageControl;

@end

---

重写图片的getter方法：

- (NSArray *)imageNames{
    if (!_imageNames) {
        _imageNames = @[@"Welcome_3.0_1.png",@"Welcome_3.0_2.png",@"Welcome_3.0_3.png",@"Welcome_3.0_4.png",@"Welcome_3.0_5.png"];
    }
    return _imageNames;
}

---

创建一个scrollView的实例，设置contentSize，并将图片以子视图的方式加入其视图中。

UIScrollView *scrollView = [[UIScrollView alloc]initWithFrame:self.view.frame];
    //设置contentSize
    scrollView.contentSize = CGSizeMake(scrollView.frame.size.width*self.imageNames.count, scrollView.frame.size.height);
    //将所有图片以子视图的方式添加到scrollView中
    for (NSInteger i=0; i<self.imageNames.count; i++) {
        UIImageView *imageView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:self.imageNames[i]]];
        //创建一个frame变量，并赋值
        CGRect imageFrame = CGRectZero;
        imageFrame.size = scrollView.frame.size;
        imageFrame.origin.y = 0;
        imageFrame.origin.x = i*scrollView.frame.size.width;
        imageView.frame = imageFrame; //将设置到好的frame变量给image
        [scrollView addSubview:imageView];
    }

---

配置scrollView

scrollView.pagingEnabled = YES;//配置scrollView//设置整页滚动
    scrollView.bounces = NO;//设置边缘不弹跳
    //设置水平滚动条不显示
    scrollView.showsHorizontalScrollIndicator =NO;
    scrollView.delegate = self;//设置scrollView的代理
    [self.view addSubview:scrollView];

---

创建pageControl的实例，设置frame,并配置一些必要的属性。

//创建pageControl
    UIPageControl *pageControl = [[UIPageControl alloc]init];
    self.pageControl = pageControl;
    pageControl.frame = CGRectMake(0, self.view.frame.size.height-20-30, self.view.frame.size.width, 30);
    pageControl.numberOfPages = self.imageNames.count;
    //设置圆点的颜色
    pageControl.pageIndicatorTintColor = [UIColor whiteColor];
    //设置被选中的圆点的颜色
    pageControl.currentPageIndicatorTintColor = [UIColor redColor];
    //关闭用户交互功能
    pageControl.userInteractionEnabled = NO;
    [self.view addSubview:pageControl];

---

当用户滑动到最后一屏的时候，添加一个点击事件，当用户点击当前视图后，跳转到其他页面。

//为最后一屏添加按钮
    UIButton *button = [UIButton buttonWithType:UIButtonTypeSystem];
   button.frame = CGRectMake(scrollView.frame.size.width*(self.imageNames.count-1), 0, scrollView.frame.size.width, scrollView.frame.size.height);
    //为按钮添加点击事件
    [button addTarget:self action:@selector(enterApp) forControlEvents:UIControlEventTouchUpInside];
    [scrollView addSubview:button];

---

跳转方法（我这里是用故事版写的其他视图）：

- (void)enterApp{
    //找到故事板创建的vc实例
    ViewController *someVC = [self.storyboard instantiateViewControllerWithIdentifier:@"tvc"];
    [self presentViewController:someVC animated:YES completion:nil];
}

---

差点忘了，还有一个重要的方法：

- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
    // 获取移动的偏移定点坐标
    CGPoint offSet = scrollView.contentOffset;
    //根据坐标算出滚动到第几屏的位置下标
    NSInteger index = offSet.x/scrollView.frame.size.width;
    self.pageControl.currentPage=index;
}

---

欢迎指正，共同进步~