您的位置:首页 > 产品设计 > UI/UE

iOS9用UICollectionViewController实现启动引导图

2016-04-29 17:52 344 查看
UICollectionViewController的简介就不一一介绍了,直接说说实现的答题思路就主要代码。
自定义UICollectionViewController(GuidePage_VC)和UICollectionViewCell(GuidePage_Cell),在GuidePage_VC中实现滚动页面的计算和显示图片的赋值等
1,在GuidePage_V.h中定义属性和导入AppDelegate:

{
#import <UIKit/UIKit.h>
#import "AppDelegate.h"

@interface GuidePage_VC : UICollectionViewController

@property(retain, nonatomic) UIImageView *guide;
@property(assign, nonatomic) CGFloat lastOffsetX;

@end
}


2,GuidePage_V.m中实现初始化视图及代理方法:

#import "GuidePage_VC.h"
#import "GuidePage_Cell.h"

#define ScreenW  CGRectGetWidth([UIScreen mainScreen].bounds)
#define ScreenH CGRectGetHeight([UIScreen mainScreen].bounds)
@interface GuidePage_VC ()

@end

@implementation GuidePage_VC
{
NSString *ID;
AppDelegate *appDelegate;
}
static NSString * const reuseIdentifier = @"Cell";
-(instancetype)init
{
UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc]init];
layout.itemSize = [UIScreen mainScreen].bounds.size;
layout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
//行距
layout.minimumLineSpacing = 0;
// 间距
layout.minimumInteritemSpacing = 0;
//    // 组间距
//    layout.sectionInset = UIEdgeInsetsMake(100, 20, 0, 30);
return [super initWithCollectionViewLayout:layout];
}
- (void)viewDidLoad {
[super viewDidLoad];
ID = @"引导";
// 初始化
[self setUp];
//  在UICollectionViewController中self.view != self.collectionView

// 注册cell
[self.collectionView registerClass:[GuidePage_Cell class] forCellWithReuseIdentifier:ID];
// Register cell classes
[self.collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:reuseIdentifier];

// Do any additional setup after loading the view.
}
// Items对应cell
// Items在某种程度上就是模型
// 返回有多少个cell
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
return 4;//假设只显示4张引导图片
}

// 返回每一个cell长什么样
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
// 从缓存池里取
// UICollectionViewCell 没有UIImageView
GuidePage_Cell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:ID forIndexPath:indexPath];
if (!cell)
{
cell = [[GuidePage_Cell alloc]initWithFrame:CGRectMake(0, 0,ScreenW, ScreenH)];
}
// 取出每行的item,对应的背景名
NSString *imageName = [NSString stringWithFormat:@"启动%ld",indexPath.item+1];
// cell赋值
cell.image = [UIImage imageNamed:imageName];
return cell;
}
// 减速完成的时候调用
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{

// 移动子控件的位置,并且做动画
NSLog(@"%f",scrollView.contentOffset.x);

// 获取scrollView滚动的X
CGFloat offsetX = scrollView.contentOffset.x;

// 计算偏移量的差值
CGFloat delta = offsetX - _lastOffsetX;

// 平移子控件
_guide.frame = CGRectMake(2 * delta, _guide.frame.origin.y, _guide.frame.size.width, _guide.frame.size.height) ;

[UIView animateWithDuration:0.25 animations:^{
//        _guide.x -= delta;
_guide.frame = CGRectMake(delta, _guide.frame.origin.y, _guide.frame.size.width, _guide.frame.size.height) ;
}];
// 计算页数
int page = offsetX / scrollView.frame.size.width;
// 切换子控件的显示
NSString *imageName = [NSString stringWithFormat:@"guide%d",page];
_guide.image = [UIImage imageNamed:imageName];

_lastOffsetX = offsetX;
if (page == 3)
{
UIButton *button1 = [UIButton buttonWithType:UIButtonTypeCustom];
[button1 setTitleColor:[UIColor blueColor] forState:UIControlStateNormal];
button1.tag= 100;
button1.showsTouchWhenHighlighted = YES;
button1.frame = CGRectMake((ScreenW-150)/2,ScreenH-100,150, 40);
[button1 setTitle:@"开始体验>>" forState:(UIControlStateNormal)];
button1.titleLabel.adjustsFontSizeToFitWidth = YES;
button1.titleLabel.font = [UIFont systemFontOfSize:15];
[button1 addTarget:self action:@selector(button1Action:) forControlEvents:UIControlEventTouchUpInside];
button1.titleLabel.textColor = [UIColor blueColor];
[self.view addSubview:button1];
}
}
- (void)button1Action:(UIButton *)sender
{
UIApplication *application = [UIApplication sharedApplication];
appDelegate = application.delegate;

[UIView animateWithDuration:1.5 animations:^{
self.view.alpha=0;//让scrollview 渐变消失
}completion:^(BOOL finished) {
[appDelegate getoAppMainPage];//进入主界面
UITabBarController *tab = [[UITabBarController alloc]init];
tab = (UITabBarController *)appDelegate.window.rootViewController;
tab.selectedIndex = 3;
[self.view  removeFromSuperview];//将scrollView移除
self.view = nil;
[self.collectionView removeFromSuperview];
self.collectionView = nil;

} ];
}
-(void)setUp
{
self.collectionView.bounces = NO;
self.collectionView.showsHorizontalScrollIndicator = NO;
self.collectionView.pagingEnabled = YES;
self.collectionView.delegate = self;
}
3,GuidePage_Cell.h中从写初始化方法和定义两个属性:

#import <UIKit/UIKit.h>

@interface GuidePage_Cell : UICollectionViewCell
- (instancetype)initWithFrame:(CGRect)frame;
@property(retain, nonatomic)UIImage *image;
@property(retain, nonatomic) UIImageView *imageView;

@end
4,GuidePage_Cell.m中实现懒加载:

#import "GuidePage_Cell.h"

@implementation GuidePage_Cell
- (instancetype)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self)
{
}
return self;
}
- (void)setImage:(UIImage *)image
{
_image = image;

self.imageView.image = image;
}

- (UIImageView *)imageView
{
if (_imageView == nil) {
UIImageView *imageV = [[UIImageView alloc] initWithFrame:self.bounds];

[self.contentView addSubview:imageV];

_imageView = imageV;
}
return _imageView;
}
@end
5,使用方法:在AppDelegate.h中导入GuidePage_VC.h头文件和方法:

- (void)getoAppMainPage;
AppDelegate.m中需要实现的方法
+ (UIViewController *)initGuidePage
{
GuidePage_VC *guide= [[GuidePage_VC alloc]init];
return guide;
}
需要判断进入引导页的时候调用以上方法 实现如下:

{
self.window.rootViewController = [AppDelegate initGuidePage];
}
注意:需要在[self.windowmakeKeyAndVisible];之前调用方法

不进入引导页时实现:

[ self getoAppMainPage];
gotoAppMainPage方法里面的内容就是不走引导页的实现内容,根据自己的需要些内容,下面的只是我个人的内容

- (void)getoAppMainPage
{
//  初始化菜单栏

UINavigationController *main_NV = [[UINavigationController alloc]initWithRootViewController:[[HomePage_VC alloc]init]];

self.window.rootViewController = main_NV;
}
6,如果自己写的话,需要除了拷贝以上代码和必要方法实现外,还需要把名为:启动1.png,启动2.png,启动3.png,启动4.png的图片导入工程中。也可以直接下载demo调试后根据自己的需求修改。

资料免费下载地址:http://download.csdn.net/download/boyqicheng/9506819
部分资料来自网上,如发现相同的内容请和我联系,谢谢!
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: