App 欢迎页面制作

本贴最后更新于 2817 天前,其中的信息可能已经物是人非

简介

本 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;
}
  • iOS

    iOS 是由苹果公司开发的移动操作系统,最早于 2007 年 1 月 9 日的 Macworld 大会上公布这个系统,最初是设计给 iPhone 使用的,后来陆续套用到 iPod touch、iPad 以及 Apple TV 等产品上。iOS 与苹果的 Mac OS X 操作系统一样,属于类 Unix 的商业操作系统。

    84 引用 • 139 回帖
  • 欢迎页面
    1 引用 • 1 回帖

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • selector

    你在代码里面艾特我了 [button addTarget:self action:@selector(enterApp) forControlEvents:UIControlEventTouchUpInside]; 醉了