利用UICollectionView封装APP启动页

对于一个APP应用，为了更好的给用户最贴切、最温馨的使用体验，每一个APP都少不了自己独有的启动页，这也是今天为啥要讲解启动页的一些简单的封装，那么对于一个程序员来说，做一个APP的启动页也不是那么简单的，那么今天就介绍大众化的启动页的封装，利用UI控件UICollectionView进行一个简单启动页封装。

在iOS的UI控件中，我们以前用到过UIScrollView控件进行App启动页的封装，当然这是大部分iOS工程师都会这样选择，因为UIScrollView可以滚动，里面自带一个内容视图，所以这是开发者选择非常方便的。

那么用UICollectionView怎么样做APP启动页啊？首先大家要明确一点，UICollectionView是继承于UIScrollView的，但是UICollectionView有一个优势就是，UIColltectionViewCell是可以复用的，也就是说这一点在UIScrollView没法办到，这样复用的话就会对我们的应用的内存大大的节约了，这样的话会对性能方面会更好。

利用单例来创建一个类，然后在这个类里进行UICollectionView的创建，并实现相应的协议方法

    guiDance.h
    #import <Foundation/Foundation.h>

#import <UIKit/UIKit.h>

@interface guiDance : NSObject
/*声明一个根试图作为系统自带的window的交接桥良*/

@property (nonatomic, strong)UIWindow *window;
/*利用单例创建该类，目的就是使其唯一*/

+(instancetype)sharedGuiDanceInstance;

/**
 *  引导页图片
 *
 *  @param images      引导页图片
 *  @param title       按钮文字
 *  @param titleColor  文字颜色
 *  @param backGroundColor     按钮背景颜色
 *  @param borderColor 按钮边框颜色
 */

- (void)showGuiDanceViewWithImages:(NSArray *)images
          andExperienceButtonTitle:(NSString *)title
     andExperienceButtonTitleColor:(UIColor *)titleColor
andExpersienceButtonBackGroundColor:(UIColor *)backGroundColor
    andExperienceButtonBorderColor:(UIColor *)borderColor;


@end

guiDance.m
#import "guiDance.h"
#import "guiDanceCollectionViewCell.h"
#define GUIDANCEBOUNDS ([UIScreen mainScreen].bounds)

/*复用标识符*/
static NSString *indentifier_GuiDanceCell = @"cell";


@interface guiDance()<UIScrollViewDelegate,UICollectionViewDelegate,UICollectionViewDataSource>

/*申明一个UICollectionView*/
@property (nonatomic, strong) UICollectionView *collectionView;
/*申明一个存储图片的数组*/
@property (nonatomic, strong) NSArray *imageArray;
/*申明一个pageContrl*/
@property (nonatomic, strong) UIPageControl *pageControl;
/*申明按钮的标题，默认是立即体验*/
@property (nonatomic, strong) NSString *title;
/*申明按钮的背景颜色*/
@property (nonatomic, strong) UIColor *backGroundColor;
/*申明按钮标题文字的颜色*/
@property (nonatomic, strong) UIColor *titleColor;
/*申明按钮边框的颜色*/
@property (nonatomic, strong) UIColor *borderColor;

@end

@implementation guiDance


//- (NSMutableArray *)imageArray{
//    if (!_imageArray) {
//        _imageArray = [NSMutableArray array];
//    }
//    return _imageArray;
//}

#pragma mark -- 创建单例
+(instancetype)sharedGuiDanceInstance{
    static guiDance *instance = nil;
    static dispatch_once_t onceToken;
    dispatch_once(&onceToken, ^{
        if (!instance) {
             instance = [guiDance new];
        }
       
    });
    return instance;
}

#pragma mark -- 懒加载创建collectionView
-(UICollectionView *)collectionView{
    
    if (!_collectionView) {
        
        UICollectionViewFlowLayout *flowLayout = [UICollectionViewFlowLayout new];
        flowLayout.minimumLineSpacing = 0;
        flowLayout.minimumInteritemSpacing = 0;
        flowLayout.itemSize = GUIDANCEBOUNDS.size;
        flowLayout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
        _collectionView = [[UICollectionView alloc]initWithFrame:GUIDANCEBOUNDS collectionViewLayout:flowLayout];
        
        _collectionView.bounces = NO;
        _collectionView.backgroundColor = [UIColor whiteColor];
        _collectionView.showsHorizontalScrollIndicator = NO;
        _collectionView.pagingEnabled = YES;
        _collectionView.showsVerticalScrollIndicator = NO;
        _collectionView.dataSource = self;
        _collectionView.delegate = self;
        
        [_collectionView registerClass:[guiDanceCollectionViewCell class] forCellWithReuseIdentifier:indentifier_GuiDanceCell];
       
           }
    return _collectionView;
}

#pragma mark -- 初始化pageControl
-(UIPageControl *)pageControl{
    
    if (_pageControl == nil) {
        _pageControl = [[UIPageControl alloc]init];
        _pageControl.frame = CGRectMake(0, 0, GUIDANCEBOUNDS.size.width, 44.0f);
        _pageControl.center = CGPointMake(GUIDANCEBOUNDS.size.width / 2.0f, GUIDANCEBOUNDS.size.height - 60);
    }
    return _pageControl;
}

#pragma mark --实现方法
- (void)showGuiDanceViewWithImages:(NSArray *)images andExperienceButtonTitle:(NSString *)title andExperienceButtonTitleColor:(UIColor *)titleColor andExpersienceButtonBackGroundColor:(UIColor *)backGroundColor andExperienceButtonBorderColor:(UIColor *)borderColor{
    
    
    NSLog(@"%@", images);
    
    NSUserDefaults *userDefaults = [NSUserDefaults standardUserDefaults];
    NSString *version = [[NSBundle mainBundle].infoDictionary objectForKey:@"CFBundleShortVersionString"];
    //根据版本号来判断是否加载引导页
    BOOL show = [userDefaults boolForKey:[NSString stringWithFormat:@"version_%@", version]];
    if (!show) {
        self.imageArray = images;
        
        NSLog(@"%@", self.imageArray);
        self.backGroundColor = backGroundColor;
        self.title = title;
        self.titleColor = titleColor;
        self.borderColor = borderColor;
        self.pageControl.numberOfPages = images.count;
        //这里千万不要写这句话，因为这样会有两个window出现，而展示的时候就是展示的系统默认的，你可以结合UI结构图看。
//        self.window = [[UIApplication sharedApplication].windows objectAtIndex:0];
        
        if (nil == self.window) {
            self.window = [UIApplication sharedApplication].keyWindow;
        }
        [self.window addSubview:self.collectionView];
        [self.window addSubview:self.pageControl];
        [userDefaults setBool:YES forKey:[NSString stringWithFormat:@"version_%@",version]];
        [userDefaults synchronize];
    }
}

#pragma mark -- 实现协议方法

- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{
    return 1;
}

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
    
    return self.imageArray.count;
    
    
}
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
    
    guiDanceCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:indentifier_GuiDanceCell forIndexPath:indexPath];
    UIImage *image = [self.imageArray objectAtIndex:indexPath.row];
    CGSize size = [self adapterSizeImageSize:image.size compareSize:GUIDANCEBOUNDS.size];
    
    cell.GuiDanceImageView.frame = CGRectMake(0, 0, size.width, size.height);
    cell.GuiDanceImageView.image = image;
    cell.GuiDanceImageView.center = CGPointMake(GUIDANCEBOUNDS.size.width /2, GUIDANCEBOUNDS.size.height / 2);
    if (indexPath.row == self.imageArray.count - 1) {
        
        [cell.experienceButton setHidden:NO];
        [cell.experienceButton addTarget:self action:@selector(nextVControllerHandler:) forControlEvents:UIControlEventTouchUpInside];
        [cell.experienceButton setBackgroundColor:self.backGroundColor];
        [cell.experienceButton setTitle:self.title forState:UIControlStateNormal];
        [cell.experienceButton setTitleColor:self.titleColor forState:UIControlStateNormal];
        cell.experienceButton.layer.borderColor = [self.borderColor CGColor];
    }else{
        [cell.experienceButton setHidden:YES];
    }
    
    return cell;
}
#pragma mark - 计算自适图片
/**
 *  计算自适应的图片
 *
 *  @param is 需要适应的尺寸
 *  @param cs 适应到的尺寸
 *
 *  @return 适应后的尺寸
 */
- (CGSize)adapterSizeImageSize:(CGSize)is compareSize:(CGSize)cs
{
    CGFloat w = cs.width;
    CGFloat h = cs.width / is.width * is.height;
    
    if (h < cs.height) {
        w = cs.height / h * w;
        h = cs.height;
    }
    return CGSizeMake(w, h);
}

#pragma mark -- 实现UIScrollViewDelegate方法
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{
    self.pageControl.currentPage = (scrollView.contentOffset.x / GUIDANCEBOUNDS.size.width);
}

#pragma mark -- 立即体验按钮响应事件
- (void)nextVControllerHandler:(UIButton *)button{
    
    [self.pageControl removeFromSuperview];
    [self.collectionView removeFromSuperview];
    [self setWindow:nil];
    [self setCollectionView:nil];
    [self setPageControl:nil];
    
}

@end

创建UICollectionViewCell类

guiDanceCollectionViewCell.h
#import <UIKit/UIKit.h>

@interface guiDanceCollectionViewCell : UICollectionViewCell

/*申明一个图片属性*/
@property (nonatomic, strong)UIImageView *GuiDanceImageView;

/*申明一个体验按钮*/
@property (nonatomic, strong)UIButton *experienceButton;


@end

guiDanceCollectionViewCell.m
#import "guiDanceCollectionViewCell.h"

#define GUIDANCEBOUNDS ([UIScreen mainScreen].bounds)


@implementation guiDanceCollectionViewCell


#pragma mark -- init初始化
- (instancetype)init{
    if (self = [super init]) {
        [self createUI];
    }
    return self;
}

#pragma mark --坐标初始化
- (instancetype)initWithFrame:(CGRect)frame{
    
    if (self = [super initWithFrame:frame]) {
        [self createUI];
    }
    return self;
}

- (void)createUI{
    
    self.layer.masksToBounds = YES;
    self.GuiDanceImageView = [[UIImageView alloc]initWithFrame:GUIDANCEBOUNDS];
    self.GuiDanceImageView.center = CGPointMake(GUIDANCEBOUNDS.size.width / 2, GUIDANCEBOUNDS.size.height / 2);
    UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
    
    button.hidden = YES;
    [button setFrame:CGRectMake(0, 0, 200, 44)];
    [button setTitle:@"立即体验" forState:UIControlStateNormal];
    [button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
    [button.layer setCornerRadius:5];
    [button.layer setBorderColor:[UIColor grayColor].CGColor];
    [button.layer setBorderWidth:1.0f];
    [button setBackgroundColor:[UIColor whiteColor]];
    self.experienceButton = button;
    [self.contentView addSubview:self.GuiDanceImageView];
    [self.contentView addSubview:self.experienceButton];
    
    self.experienceButton.center = CGPointMake(GUIDANCEBOUNDS.size.width / 2.0f, GUIDANCEBOUNDS.size.height - 100);
    
 

}
@end


那么到这里的时候，我们的封装其实就已经做好了，那么怎么使用呢？其实很简单，因为我们创建的是单例模式，那么我们就可以用单例进行运用

来到AppDelegate.m文件的- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { 
    return 0;
}方法中实现以下相关代码，那么我们的启动页就成功了。
self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
    
    [self.window setRootViewController:[[ViewController alloc] init]];
    self.window.backgroundColor = [UIColor whiteColor];
    [self.window makeKeyAndVisible];
    
    NSMutableArray *images = [NSMutableArray new];
    
    [images addObject:[UIImage imageNamed:@"1"]];
    [images addObject:[UIImage imageNamed:@"2"]];
    [images addObject:[UIImage imageNamed:@"3"]];
    
    guiDance *gui = [guiDance sharedGuiDanceInstance];
    gui.window = self.window;
    
    [gui showGuiDanceViewWithImages:images andExperienceButtonTitle:@"用户体验" andExperienceButtonTitleColor:[UIColor blackColor] andExpersienceButtonBackGroundColor:[UIColor redColor] andExperienceButtonBorderColor:[UIColor purpleColor]];

那么，这里讲解的是原生的封装，后面文章我讲用框架进行封装。感谢大家，希望对大家有帮助。

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 202,723评论 5赞 476
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,080评论 2赞 379
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 149,604评论 0赞 335
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,440评论 1赞 273
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,431评论 5赞 364
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,499评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,893评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,541评论 0赞 256
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,751评论 1赞 296
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,547评论 2赞 319
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,619评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,320评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,890评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,896评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,137评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,796评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,335评论 2赞 342

推荐阅读更多精彩内容