IOS控件之ScrollView,PageControl---APP首次打开引导页面效果实现~

最新推荐文章于 2020-07-13 07:42:37 发布

原创最新推荐文章于 2020-07-13 07:42:37 发布 · 2.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ios #uiscrollview #imageview #图片 #控件

iOS 专栏收录该内容

16 篇文章

订阅专栏

本文详细介绍了如何利用UIScrollView和PageControl创建一个常见的iOS APP首次打开的引导页面效果，包括背景图片展示、滑动页面、‘立即体验’按钮以及小圆点指示器的实现方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言：

最近学了下UIScrollView的用法，然后自己实现了一个常见的APP首次打开的引导页面效果，效果图如下：
这里写图片描述

主要就是一个滑动页面的效果，在最后一页上有一个立即体验的按钮，点击按钮会跳转到APP主页面。
主要用到的就是ScrollView,PageControl这两种控件。

实现思路:

把主页面的根视图设置成一个ImageView,用来显示背景图片,然后再在背景图片上面放置一个ScrollView,用来显示滑动的前景图片,因为一共有4张图片,所以向ScrollView中添加4个ImageView，依次放置这4张图片,最后在最后一个ImageView上放置一个“立即体验”按钮。

这些都做完了之后，发现少了一个我们经常会见到的页面正下方的小圆点，显示总页数和当前为第几页。这就是PageControl,我们最后在根视图上创建一个pageControl，显示页面滑动到哪一页了,这里需要注意的是，PageControl要添加到根视图上,而不是ScrollView上，因为如果添加到ScrollView要设置相对位置,当页面滑动时候,显示的是不同的相对位置里面的内容,所以如果要每一页显示不同的内容,就把父视图设置为ScrollView，如果是每一页都要显示的内容,比如PageControl，就不要设置父视图为ScrollView,其实想想很简单,ScrollView是要滑动的嘛。不是固定的。

OK,添加完了所有控件之后，就要添加事件响应了,同ActionSheet一样,ScrollView也无法添加消息响应,只能设置代理,所以只要实现一个代理方法让ScrollView页面翻动时下面的小圆点PageControl也跟着动~~

主要代码如下：

我把步骤简简单单分为4步~很容易就搞定！

Step1:》》》设置根视图为一个显示背景的ImageView:

-(void)loadView{
    [super loadView];
//    要设置背景图片,创建一个rootImageView作为父视图
    [self createRootImageView];
}
#pragma mark 创建rootImageView
-(void)createRootImageView{
    UIImageView *rootImageView=[[UIImageView alloc] initWithFrame:self.view.bounds];
    [rootImageView setImage:[UIImage imageNamed:@"new_feature_background.png"]];
    [self.view addSubview:rootImageView];
//    因为父视图是一个imageView,要开启互动,否则无法做任何操作
//    默认是NO
    [self.view setUserInteractionEnabled:YES];
}

Step2》》》创建显示滑动页面的ScrollView和最后一页的“立即体验”按钮，并添加按钮消息响应

#pragma mark 创建第二层视图scrollView
-(void)createScrollView{
    UIScrollView *scrollView=[[UIScrollView alloc]initWithFrame:self.view.bounds];
//    设置scrollView内容大小--可滑动范围
    [scrollView setContentSize:CGSizeMake(self.view.bounds.size.width*kImageCount, 0)];
//    向其中添加pageImageView
    CGFloat width=self.view.bounds.size.width;
    CGFloat height=self.view.bounds.size.height;
    for (NSInteger i=0; i<kImageCount; i++) {
//        相对于scrollView内容的位置
        UIImageView *pageImageView=[[UIImageView alloc] initWithFrame:CGRectMake(i*width, 0, width, height)];
        [pageImageView setImage:[UIImage imageNamed:[NSString stringWithFormat:@"new_feature_%ld.png",i + 1]]];
        if (i==kImageCount - 1) {
            [self createIntoButton:pageImageView];
        }
        [scrollView addSubview:pageImageView];
    }
//    设置分页,否则滚动效果很糟糕
    [scrollView setPagingEnabled:YES];
//    去掉弹性
    [scrollView setBounces:NO];
//    去掉滚动条
    [scrollView setShowsHorizontalScrollIndicator:NO];
    [scrollView setShowsVerticalScrollIndicator:NO];
//    scrollView目前为第二层视图
    [self.view addSubview:scrollView];
}
#pragma mark 创建最后一页的“立即体验”按钮
-(void)createIntoButton:(UIImageView*)pageImageView{
//    开启父视图交互
    [pageImageView setUserInteractionEnabled:YES];
    UIButton *intoButton=[[UIButton alloc] init];
//    设置背景图片
    UIImage *backImage=[UIImage imageNamed:@"new_feature_finish_button.png"];
    UIImage *backImageHL=[UIImage imageNamed:@"new_feature_finish_button_highlighted.png"];
    [intoButton setBackgroundImage:backImage forState:UIControlStateNormal];
    [intoButton setBackgroundImage:backImageHL forState:UIControlStateHighlighted];
//    设置中心点和大小,大小根据背景
    CGFloat centerX=pageImageView.bounds.size.width/2;
    CGFloat centerY=pageImageView.bounds.size.height * kIntoButtonRatio;
    CGFloat width=backImage.size.width;
    CGFloat height=backImage.size.height;
    [intoButton setBounds:CGRectMake(0, 0, width, height)];
    [intoButton setCenter:CGPointMake(centerX, centerY)];
//    消息响应
    [intoButton addTarget:self action:@selector(intoButtonClick) forControlEvents:UIControlEventTouchUpInside];
//    添加到pageImageView
    [pageImageView addSubview:intoButton];

}
#pragma mark "立即体验"按钮消息响应
-(void)intoButtonClick{
    SubViewController *subView=[[SubViewController alloc] init];
    [self presentViewController:subView animated:YES completion:nil];
}

Step3》》》创建PageControl并添加到父视图

#pragma mark 创建和scrollView同为第二层视图的pageControl
-(void)createPageControl{

    _pageControl=[[UIPageControl alloc] init];
//    设置位置
    [_pageControl setCenter:CGPointMake(self.view.bounds.size.width/2, self.view.bounds.size.height * kPageControlRatio)];
    [_pageControl setBounds:CGRectMake(0, 0, 150, 44)];
//    设置页数
    [_pageControl setNumberOfPages:kImageCount];
//    设置页面轨道颜色
    [_pageControl setPageIndicatorTintColor:[UIColor grayColor]];
    [_pageControl setCurrentPageIndicatorTintColor:[UIColor orangeColor]];
//    注意，父视图不是ScrollView!
    [self.view addSubview:_pageControl];
}

Step4: 运行！

Oh,No!发现不论到哪一页，PageControl那个小圆点都不变化：这里写图片描述
什么原因？因为没有为ScrollView设置代理，没有实现代理方法。所以ScrollView变化无法影响到PageControl的变化。
所以现在我们在createScrollView方法里面加一行代码：

//    设置代理,以便于滑动时改变pageControl
    [scrollView setDelegate:self];

然后再实现代理方法：

#pragma mark scrollView的代理方法
-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{
    NSInteger index=scrollView.contentOffset.x/scrollView.bounds.size.width;
    [_pageControl setCurrentPage:index];
}

一些最后的废话~：

好啦，到目前为止，我们就学会了如何做一个看起来很diao的APP引导页面~
源代码？当然要提供啦！所以我会上传到csdn上，大家免费下载来学习了~
PS:发现一个很让我伤心的事情，就是我坚持写了这么久的博客，可是却没有人评论。。。。没有一点关注度。。。但是。。。尽管如此，我还是会坚持写，练好文笔，相信有一天会成为一个关注度很高的技术博客！
下一篇的内容是：如何实现一个循环显示的ScrollView,我们会使用一个假循环来显示~
代码链接：
http://download.youkuaiyun.com/detail/u012320459/9230433