文档章节

IOS之[UIPageControl:引导页]

言筱羽
 言筱羽
发布于 2015/12/31 15:34
字数 1404
阅读 112
收藏 2

1.UIPageConrol API

@property(nonatomic) NSInteger numberOfPages   //>>页数
@property(nonatomic) NSInteger currentPage     //>>当前页

@property(nonatomic) BOOL hidesForSinglePage   //>>单页是否显示PageControl

@property(nullable, nonatomic,strong) UIColor *pageIndicatorTintColor        //颜色
@property(nullable, nonatomic,strong) UIColor *currentPageIndicatorTintColor //当前页的颜色

2.引导页制作

导航页

动画效果+代码参照:http://code4app.com/ios/ZWIntroductionViewController/54e1cb82933bf0212f8b5fbe

所需控件:UIScrollView + UIPageControl

需要一下几个步骤

1.初始化自定义ViewController

2.添加背景图

3.添加UIScrollView

4.添加PageControl

5.添加前景图

6.实现UIScrollViewDelegate

2.1初始化ViewController
@interface IntroductionViewController : UIViewController

 #pragma mark - Property
@property (nonatomic, strong) NSArray *coverImageNames;      //前景图
@property (nonatomic, strong) NSArray *backgroundImageNames; //背景图

 #pragma mark - init
- (id)initWithCoverImageNames:(NSArray*)coverNames backgroundImageNames:(NSArray*)bgNames;

@end

@implementation IntroductionViewController

- (id)initWithCoverImageNames:(NSArray *)coverNames backgroundImageNames:(NSArray *)bgNames
{
    if (self = [super init]) {
        self.coverImageNames = coverNames;
        self.backgroundImageNames = bgNames;
    }
    return self;
}

@end
2.2添加背景图

背景图是在UIView上叠加起来添加SubView,所以是从下往上叠加

通过设置透明度来显示不同图片

-(void)addBackgroundViews{
    
    //遍历背景图数组
    [[[self.backgroundViews reverseObjectEnumerator] allObjects] enumerateObjectsUsingBlock:^(UIView obj, NSUInteger idx, BOOL *stop) {
        [self.view addSubview:obj];
    }];
}
-(NSArray *)backgroundViews{
    
    if (_backgroundViews) {
        return _backgroundViews;
    }
    
    //遍历图片名来加载图片,将UIImageView存放在属性数组中
    NSMutableArray *tempViews = [NSMutableArray new];
    [_backgroundImageNames enumerateObjectsUsingBlock:^(id obj, NSUInteger idx, BOOL *stop) {
        
        UIImageView *imageView = [self loadImage:obj];
        [tempViews addObject:imageView];
        
    }];
    
    _backgroundViews = tempViews;
    return _backgroundViews;
}
-(UIImageView *)loadImage:(NSString *)imageName{
    
    UIImage *image = [UIImage imageNamed:imageName];
    UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
    imageView.frame = self.view.frame;
    
    return imageView;
}
2.3添加UIScrollView
- (void)addScrollView{

    self.scrollView = [[UIScrollView alloc] initWithFrame:self.view.frame];
    
    self.scrollView.delegate = self;
    self.scrollView.pagingEnabled = YES;  //允许分页
    self.scrollView.showsHorizontalScrollIndicator = NO;
    self.scrollView.showsVerticalScrollIndicator = NO;
    self.scrollView.contentSize = [self contentSizeOfScrollView]; //内容Size
    
    [self.view addSubview:self.scrollView];
}

/**
 内容显示部分的Size
 content.size.with 必须大于 frame.size.width才能滑动
*/
- (CGSize)contentSizeOfScrollView
{
    return CGSizeMake(self.view.frame.size.width * self.numberOfPages, self.view.frame.size.height);
}

/**
 加载图片数
*/
-(NSInteger)numberOfPages{
    return [_coverImageNames count];
}
2.4添加UIPageControl
- (void)addPageControl{

    self.pageControl = [[UIPageControl alloc] initWithFrame:[self frameOfPageControl]];
    
    //pageControl颜色设定
    self.pageControl.pageIndicatorTintColor = [UIColor whiteColor];
    self.pageControl.currentPageIndicatorTintColor = [UIColor blueColor];

    self.pageControl.numberOfPages = self.numberOfPages;
    
    [self.view addSubview:self.pageControl];
}

/**
 PageControl位置及大小
*/
- (CGRect)frameOfPageControl{

    return CGRectMake(0, self.view.frame.size.height - 30, self.view.frame.size.width, 30);
}
2.5添加前景图
-(void)addCoverImageViews{

    //遍历前景图UIImageViews,将图片依次添加到ScrollView中,一个显示在屏幕中,两个显示在屏幕外
    __block CGFloat x = 0;
    [self.coverViews enumerateObjectsUsingBlock:^(UIView *obj, NSUInteger idx, BOOL *stop) {
        
        obj.frame = CGRectOffset(obj.frame, x, 0);
        x = x + obj.frame.size.width;
        
        [self.scrollView addSubview:obj];
    }];
}

/**
 加载前景图片到UIImageView中,并添加到属性数组中
*/
-(NSArray *)coverViews{

    if (_coverViews) {
        return _coverViews;
    }
    
    NSMutableArray *tempViews = [NSMutableArray new];
    [_coverImageNames enumerateObjectsUsingBlock:^(id obj, NSUInteger idx, BOOL *stop) {
       
        UIImageView *imageView = [self loadImage:obj];
        [tempViews addObject:imageView];

    }];
    
    _coverViews = tempViews;
    return _coverViews;
}
2.6实现UIScrollViewDelegate
/**
 scrollView滚动时,就调用该方法。
 任何offset值改变都调用该方法。即滚动过程中,调用多次
 */
-(void)scrollViewDidScroll:(UIScrollView *)scrollView{

    //偏移了几个屏幕的宽度0,1,2
    NSInteger index = scrollView.contentOffset.x/scrollView.frame.size.width;
    
    //透明度:1-(相对偏移量/屏幕宽度)
    CGFloat relativeOffsetX = scrollView.contentOffset.x - index*scrollView.frame.size.width; //相对偏移量
    CGFloat alpha = 1 - (relativeOffsetX/scrollView.frame.size.width);
    
    if ([self.backgroundViews count] > index) {
    
        UIView *view = [_backgroundViews objectAtIndex:index];
        view.alpha = alpha;
    }
    
    //分页控制器设定当前页
    self.pageControl.currentPage = scrollView.contentOffset.x/scrollView.frame.size.width;
}
2.7实现至末尾页继续滑动,显示主画面

.h文件中声明属性

typedef void (^DidSelectedEnter)();

@property (nonatomic, copy) DidSelectedEnter didSelectedEnter;

/**
 代理方法:滑动减速时调用
*/
- (void)scrollViewWillBeginDecelerating:(UIScrollView *)scrollView
{
    if ([scrollView.panGestureRecognizer translationInView:scrollView.superview].x < 0) {
        if (![self hasNext:self.pageControl]) {
            [self enter:nil];
        }
    }
}

- (BOOL)hasNext:(UIPageControl*)pageControl
{
    return pageControl.numberOfPages > pageControl.currentPage + 1;
}

 #pragma mark - Action

- (void)enter:(id)object
{
    if (self.didSelectedEnter) {
        self.didSelectedEnter();
    }
}

/**
 ViewController消失时执行
*/
-(void)dealloc{

    void(^animations)() = ^(){
        self.view.alpha = 0;
    };
    
    __block UIView *view = self.view;
    void(^completion)(BOOL finished) = ^(BOOL finished){
        view = nil; //画面消失必须
    };
    
    [UIView animateWithDuration:0.4
                     animations:animations
                     completion:completion];
}

在AppDelegate中声明didSelectedEnter属性Block方法

//关闭导航页
    __weak AppDelegate *weakSelf = self;
    self.introVC.didSelectedEnter = ^(){
        weakSelf.introVC = nil;
    };

3.所有代码如下:

:fa-location-arrow:AppDelegate.m

@interface AppDelegate ()

@property (nonatomic, strong) IntroductionViewController *introVC;

@end

@implementation AppDelegate


- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {

    self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
    self.window.backgroundColor = [UIColor whiteColor];
    ViewController *vc = [[ViewController alloc] init];
    self.window.rootViewController = vc;
    [_window makeKeyAndVisible];
    
    
    NSArray *coverImageNames = @[@"img_index_01txt", @"img_index_02txt", @"img_index_03txt"];
    NSArray *backgroundImageNames = @[@"img_index_01bg", @"img_index_02bg", @"img_index_03bg"];

    self.introVC = [[IntroductionViewController alloc] initWithCoverImageNames:coverImageNames backgroundImageNames:backgroundImageNames];
    
    [self.window addSubview:self.introVC.view];
    
    //关闭导航页
    __weak AppDelegate *weakSelf = self;
    self.introVC.didSelectedEnter = ^(){
        weakSelf.introVC = nil;
    };
    
    return YES;
}

@end

:fa-location-arrow:IntroductionViewController.h

 #import <UIKit/UIKit.h>

typedef void (^DidSelectedEnter)();

@interface IntroductionViewController : UIViewController

//block块(类似于代理)
@property (nonatomic, copy) DidSelectedEnter didSelectedEnter;

 #pragma mark - Property
//前景图
@property (nonatomic, strong) NSArray *coverImageNames;

//背景图
@property (nonatomic, strong) NSArray *backgroundImageNames;

 #pragma mark - init
- (id)initWithCoverImageNames:(NSArray*)coverNames backgroundImageNames:(NSArray*)bgNames;

@end

:fa-location-arrow:IntroductionViewController.m

 #import "IntroductionViewController.h"

@interface IntroductionViewController ()<UIScrollViewDelegate>

@property (nonatomic, strong) NSArray *backgroundViews; //背景UIImageViews
@property (nonatomic, strong) NSArray *coverViews; //前景UIImageViews

@property (nonatomic, strong) UIScrollView *scrollView;
@property (nonatomic, strong) UIPageControl *pageControl;

@property (nonatomic, assign) NSInteger numberOfPages;

@end

@implementation IntroductionViewController

 #pragma mark - init
- (id)initWithCoverImageNames:(NSArray *)coverNames backgroundImageNames:(NSArray *)bgNames
{
    if (self = [super init]) {
        self.coverImageNames = coverNames;
        self.backgroundImageNames = bgNames;
    }
    return self;
}

 #pragma mark - life Style
-(void)dealloc{

    void(^animations)() = ^(){
        self.view.alpha = 0;
    };
    
    __block UIView *view = self.view;
    void(^completion)(BOOL finished) = ^(BOOL finished){
        view = nil;
    };
    
    [UIView animateWithDuration:0.4
                     animations:animations
                     completion:completion];
}

- (void)viewDidLoad {
    [super viewDidLoad];
    
    [self addBackgroundViews];
    [self addScrollView];
    [self addPageControl];
    
    [self reloadPage];
}

-(void)reloadPage{
    
    [self addCoverImageViews];
    
    if (self.scrollView.contentSize.width == self.scrollView.frame.size.width) {
        self.scrollView.contentSize = CGSizeMake(self.scrollView.contentSize.width + 1, self.scrollView.contentSize.height);
    }
}

 #pragma mark - AddScrollView
- (void)addScrollView{

    self.scrollView = [[UIScrollView alloc] initWithFrame:self.view.frame];
    
    self.scrollView.delegate = self;
    self.scrollView.pagingEnabled = YES;  //允许分页
    self.scrollView.showsHorizontalScrollIndicator = NO;
    self.scrollView.showsVerticalScrollIndicator = NO;
    self.scrollView.contentSize = [self contentSizeOfScrollView]; //内容Size
    
    [self.view addSubview:self.scrollView];
}

- (CGSize)contentSizeOfScrollView
{
    
    return CGSizeMake(self.view.frame.size.width * self.numberOfPages, self.view.frame.size.height);
}

-(NSInteger)numberOfPages{
    return [_coverImageNames count];
}


 #pragma mark - AddPageControl
- (void)addPageControl{

    self.pageControl = [[UIPageControl alloc] initWithFrame:[self frameOfPageControl]];
    
    //pageControl颜色设定
    self.pageControl.pageIndicatorTintColor = [UIColor whiteColor];
    self.pageControl.currentPageIndicatorTintColor = [UIColor blueColor];

    self.pageControl.numberOfPages = self.numberOfPages;
    
    [self.view addSubview:self.pageControl];
}

- (CGRect)frameOfPageControl{

    return CGRectMake(0, self.view.frame.size.height - 30, self.view.frame.size.width, 30);
}

 #pragma mark - 添加前景,背景图
/**
  加载前景图
 */
-(void)addCoverImageViews{

    __block CGFloat x = 0;
    [self.coverViews enumerateObjectsUsingBlock:^(UIView *obj, NSUInteger idx, BOOL *stop) {
        
        obj.frame = CGRectOffset(obj.frame, x, 0);
        x = x + obj.frame.size.width;
        
        [self.scrollView addSubview:obj];
    }];
}
-(NSArray *)coverViews{

    if (_coverViews) {
        return _coverViews;
    }
    
    NSMutableArray *tempViews = [NSMutableArray new];
    [_coverImageNames enumerateObjectsUsingBlock:^(id obj, NSUInteger idx, BOOL *stop) {
       
        UIImageView *imageView = [self loadImage:obj];
        [tempViews addObject:imageView];

    }];
    
    _coverViews = tempViews;
    return _coverViews;
}

-(UIImageView *)loadImage:(NSString *)imageName{
    
    UIImage *image = [UIImage imageNamed:imageName];
    UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
    imageView.frame = self.view.frame;
    
    return imageView;
}

-(void)addBackgroundViews{
    
    [[[self.backgroundViews reverseObjectEnumerator] allObjects] enumerateObjectsUsingBlock:^(id  _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {
        [self.view addSubview:obj];
    }];
}
-(NSArray *)backgroundViews{
    
    if (_backgroundViews) {
        return _backgroundViews;
    }
    
    NSMutableArray *tempViews = [NSMutableArray new];
    [_backgroundImageNames enumerateObjectsUsingBlock:^(id obj, NSUInteger idx, BOOL *stop) {
        
        UIImageView *imageView = [self loadImage:obj];
        [tempViews addObject:imageView];
        
    }];
    
    _backgroundViews = tempViews;
    return _backgroundViews;
}



 #pragma mark - ScrollViewDelegate
/**
 scrollView滚动时,就调用该方法。
 任何offset值改变都调用该方法。即滚动过程中,调用多次
 */
-(void)scrollViewDidScroll:(UIScrollView *)scrollView{

    //偏移了几个屏幕的宽度0,1,2
    NSInteger index = scrollView.contentOffset.x/scrollView.frame.size.width;
    
    //透明度:1-(相对偏移量/屏幕宽度)
    CGFloat relativeOffsetX = scrollView.contentOffset.x - index*scrollView.frame.size.width; //相对偏移量
    CGFloat alpha = 1 - (relativeOffsetX/scrollView.frame.size.width);
    
    if ([self.backgroundViews count] > index) {
    
        UIView *view = [_backgroundViews objectAtIndex:index];
        view.alpha = alpha;
    }
    
    //分页控制器
    self.pageControl.currentPage = scrollView.contentOffset.x/scrollView.frame.size.width;
}

- (void)scrollViewWillBeginDecelerating:(UIScrollView *)scrollView
{
    if ([scrollView.panGestureRecognizer translationInView:scrollView.superview].x < 0) {
        if (![self hasNext:self.pageControl]) {
            [self enter:nil];
        }
    }
}

 #pragma mark - UIScrollView & UIPageControl DataSource

- (BOOL)hasNext:(UIPageControl*)pageControl
{
    return pageControl.numberOfPages > pageControl.currentPage + 1;
}

 #pragma mark - Action

- (void)enter:(id)object
{
    if (self.didSelectedEnter) {
        self.didSelectedEnter();
    }
}

@end

© 著作权归作者所有

言筱羽
粉丝 3
博文 38
码字总数 24969
作品 0
西安
程序员
私信 提问
iOS新手引导--GuideImageView(一)

github:https://github.com/woaiyouxi0803/GuideImageView 好用欢迎点🌟Star~ iOS新手引导--GuideImageView(一) iOS新手引导--GuideImageView(二) iOS新手引导--GuideImageView(三)......

woaiyouxi
2018/07/18
0
0
Android-微信浏览器/qq浏览器内如何实现调用并打开手机第三方应用?

背景: 公司app有个需求,分享的新闻链接能用自己的app打开浏览,未安装时引导用户安装; 平台:android/ios; 分享SDK:友盟社会化分享SDK 目前方案: android客户端使用intent-filter过滤设...

清风烈酒-
2015/05/13
12.8K
2
Xamarin iOS教程之页面控件

Xamarin iOS教程之页面控件 Xamarin iOS 页面控件 在iPhone手机的主界面中,经常会看到一排小白点,那就是页面控件,如图2.44所示。它是由小白点和滚动视图组成,可以用来控制翻页。在滚动滚...

大学霸
2015/06/23
362
0
iOS精美过度动画、视频会议、朋友圈、联系人检索、自定义聊天界面等源码

iOS精选源码 iOS 精美过度动画源码(http://www.code4app.com/thread-14827-1-1.html) iOS简易聊天页面以及容联云IM自定义聊天页面的实现思路(http://www.code4app.com/thread-30348-1-1.htm...

sunnyaigd
2018/07/11
45
0
IOS下box-shadow的诡异bug的修复

先说环境,我测试了两台IOS手机, 和 ,都存在这个诡异的bug。 这几天老大告诉我要做一个用户的引导页,引导页大致的效果像是这样子: 我也用过很多APP,很多APP其实这个引导页可视区域都是用...

灰风GreyWind
2018/08/15
0
0

没有更多内容

加载失败,请刷新页面

加载更多

怎样在磁盘上查找MySQL表的大小?这里有答案

导读 我想知道 MySQL 表在磁盘上占用多少空间,但看起来很琐碎。不应该在 INFORMATION_SCHEMA.TABLES 中提供这些信息吗?没那么简单! 我想知道 MySQL 表在磁盘上占用多少空间,但看起来很琐碎...

问题终结者
32分钟前
6
0
jQuery load() 方法实现加载远程数据

jQuery load() 方法是简单但强大的 AJAX 方法。load() 方法从服务器加载数据,并把返回的数据放入被选元素中。 语法: $(selector).load(URL,data,callback);必需的 URL 参数规定您希望加载的...

前端老手
33分钟前
5
0
Spring Boot缓存实战 Redis 设置有效时间和自动刷新缓存-2

问题 上一篇Spring Boot Cache + redis 设置有效时间和自动刷新缓存,时间支持在配置文件中配置,说了一种时间方式,直接扩展注解的Value值,如: @Override@Cacheable(value = "people#${s...

xiaolyuh
41分钟前
9
0
怎样在磁盘上查找MySQL表的大小?这里有答案

我想知道 MySQL 表在磁盘上占用多少空间,但看起来很琐碎。不应该在 INFORMATION_SCHEMA.TABLES 中提供这些信息吗?没那么简单! 我想知道 MySQL 表在磁盘上占用多少空间,但看起来很琐碎。不应...

Linux就该这么学
今天
5
0
Redis

一、Redis支持的几种数据类型:字符串、List、SET、HASH、ZSET 二、Redis的缓存技术主要是为了降低关系数据库的负载并减少网站成本 三、在Redis里面,被MULTI命令和EXEC命令包围的所有命令会...

BobwithB
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部