对于一个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]];
那么，这里讲解的是原生的封装，后面文章我讲用框架进行封装。感谢大家，希望对大家有帮助。
网友评论