iOS*项目--第四天，新特性界面搭建，UICollectionViewController的初次使用

一、新特性界面搭建的思路：

• 在AppDelegate加载主窗体的时候进行判断程序版本号，直接进入程序或者进入新特性展示界面
• 取出当前的版本号，与旧的版本号相比较（旧的版本号在进入程序的时候存起来 =》建议偏好设置存储）
• 版本号不一样，说明当前版本是新版本需要进入新特性介绍，并将版本号存下来

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    
    // 初始化主窗体
    self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
    
    UIViewController *rootVC = nil;
    
    // 判断版本号，决定是否进入新特性展示页面
    // 取出当前的版本号，与旧的版本号相比较（旧的版本号在真正进入程序的时候存起来 =》建议偏好设置保存）
    // 版本号不一样，说明当前的版本是新版本，进入新特性介绍，并保存版本号
    
    // 当前版本号，通过info获得
    NSDictionary *dictInfo = [NSBundle mainBundle].infoDictionary;
    NSString *curVersion = dictInfo[@"CFBundleShortVersionString"];
    
    // 旧版本号，通过读取偏好设置获得
    NSString *oldVersion = [[NSUserDefaults standardUserDefaults] objectForKey:@"ChaosVersionKey"];
    
    if ([curVersion isEqualToString:oldVersion]) { // 版本号相等，进入程序
        rootVC = [[ChaosTabBarController alloc] init];
        
        rootVC.view.backgroundColor = [UIColor yellowColor];
    } else { // 有新版本，进入新特性,保存版本号
    
        NSUserDefaults *userDefaults = [NSUserDefaults standardUserDefaults];
        [userDefaults setObject:curVersion forKey:@"ChaosVersionKey"];
        
        // 一般使用流式布局--自己用什么布局，最好在内部设置，进行封装
//        UICollectionViewLayout *layout = [[UICollectionViewLayout alloc] init];
    
        rootVC = [[ChaosNewFeatureViewController alloc] init];
        
    }
    
    self.window.rootViewController = rootVC;
    // 显示窗口
    [self.window makeKeyAndVisible];
    return YES;
}

二、UICollectionViewController 的简单使用

• UICollectionViewController 与 UITableViewController 类似，不同之处在于前者一行可以显示多个cell（可以实现快速九宫格布局），或者一行只能显示一个cell
• UICollectionViewController 的 层次结构需要特别注意一下 首先是控制器的view 控制器view上面是collectionView ==》self.view != self.collectionView;人们看到的都是collectionView
• UICollectionViewController 的 cell 的重复利用必须通过注册[self.collectionView registerClass:[ChaosNewFeatureCell class] forCellWithReuseIdentifier:ID];
• 初始化 UICollectionViewController 必须制定一个布局，建议使用流式布局。通常情况下将 UICollectionViewController 的初始化过程进行封装，因为使用什么布局不需要暴露在外面，代码如下：

• 流式布局的常用属性介绍

三、self.collectionView 的常用属性 -- 继承自UIScrollView，拥有scrollView的所有属性，做项目名的时候，scrollView忘干净了，这里再整理一次

四、数据源方法--与tableView类似

五、新特性界面布局的实现，自定义了cell，cell中只有一个UIImageView属性，为了保证UIImageView只有一个对象，懒加载；还需要一个UIImage让外界来赋值

六、布局完成和动画的代码实现，重点是在这两个方法：

- (void)setUpAllChildrenView

// 滚动减速结束的时候调用

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView

#import "ChaosNewFeatureViewController.h"
#import "ChaosNewFeatureCell.h"

@interface ChaosNewFeatureViewController ()
/** lastOffsetX */
@property(nonatomic,assign) CGFloat lastOffsetX;
/** guide */
@property(nonatomic,weak) UIImageView *guideView;
/** guideLargeText */
@property(nonatomic,weak) UIImageView *guideLargeView;
/** guideSmallText */
@property(nonatomic,weak) UIImageView *guideSmallView;
@end

// CollectionViewController的结构层次：首先是控制器的View  上面是collectionView
// self.view != self.collectionView

// 1.初始化的时候必须设置布局参数，通常使用系统提供的流水布局UICollectionViewFlowLayout
// 2.cell必须通过注册
// 3.自定义cell

@implementation ChaosNewFeatureViewController

static NSString * const ID = @"Cell";

- (instancetype)init
{
    // 设置流水布局
    UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];
    
    // 设置布局方向
    layout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
    
    // 设置布局中每个cell的尺寸
    layout.itemSize = ChaosScreenBounds.size;
    // 设置每个cell水平之间的间距
//    layout.minimumInteritemSpacing = 0;
    // 设置每行之间的间距
    layout.minimumLineSpacing = 0;
    // 设置周边的间距
//    layout.sectionInset = UIEdgeInsetsMake(20, 20, 0, 20);
    
    return [super initWithCollectionViewLayout:layout];
}

- (void)viewDidLoad {
    [super viewDidLoad];
    // 这个颜色我们看不见，因为上面还有一个self.collectionView
    self.view.backgroundColor = [UIColor redColor];
    // 看到的颜色是这个
    self.collectionView.backgroundColor = [UIColor greenColor];
    // 水平滚动条是否显示
    self.collectionView.showsHorizontalScrollIndicator = NO;
    // 是否启用分页
    self.collectionView.pagingEnabled = YES;
    // 是否启用弹簧效果
    self.collectionView.bounces = NO;
    
    // 注册cell
    [self.collectionView registerClass:[ChaosNewFeatureCell class] forCellWithReuseIdentifier:ID];
    
    // 添加所有ImageView
    [self setUpAllChildrenView];
}

- (void)setUpAllChildrenView
{
    // 添加guide
    UIImageView *guide = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"guide1"]];
    
    guide.centerX = self.collectionView.centerX;
    guide.centerY = self.collectionView.centerY;
    
    _guideView = guide;
    [self.collectionView addSubview:guide];
    
    // 添加guideLine
    UIImageView *guideLine = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"guideLine"]];
    
    guideLine.x -= 130;
    
    [self.collectionView addSubview:guideLine];
    
    // 添加guideLargeText
    UIImageView *guideLargeText = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"guideLargeText1"]];
    
    guideLargeText.centerX = self.collectionView.centerX;
    guideLargeText.centerY = self.collectionView.height * 0.7;
    
    _guideLargeView = guideLargeText;
    [self.collectionView addSubview:guideLargeText];
    
    // 添加guideSmallText
    UIImageView *guideSmallText = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"guideSmallText1"]];
    
    guideSmallText.centerX = self.collectionView.centerX;
    guideSmallText.centerY = self.collectionView.height * 0.8;
    
    _guideSmallView = guideSmallText;
    [self.collectionView addSubview:guideSmallText];
}

// 滚动减速结束的时候调用
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
    CGFloat curOffsetX = scrollView.contentOffset.x;
    
    // 每次移动的距离就是现在的offsetX 与 上次offsetX 的差值，这样的话左右都可以
    CGFloat delta = curOffsetX - _lastOffsetX;
    
    // 先让图片移动到两倍的间距，然后以动画形式移动过来
    _guideView.x += 2 * delta;
    _guideLargeView.x += 2 * delta;
    _guideSmallView.x += 2 * delta;
    
    // 计算当前页数
    NSInteger pageNO = curOffsetX / self.view.width + 1;
    // 拼接图片名称
    NSString *guideImage = [NSString stringWithFormat:@"guide%ld",pageNO];
    NSString *largeTextImage = [NSString stringWithFormat:@"guideLargeText%ld",pageNO];
    NSString *smallTextImage = [NSString stringWithFormat:@"guideSmallText%ld",pageNO];
    // 修改图片
    _guideView.image = [UIImage imageNamed:guideImage];
    _guideLargeView.image = [UIImage imageNamed:largeTextImage];
    _guideSmallView.image = [UIImage imageNamed:smallTextImage];
    
    // 记录上次的offsetX
    _lastOffsetX = curOffsetX;
    
    // 动画
    [UIView animateWithDuration:0.25 animations:^{
        _guideView.x -= delta;
        _guideLargeView.x -= delta;
        _guideSmallView.x -= delta;
    }];
}

// 告诉collectionView有几个部分
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
    return 1;
}
// 告诉collectionView 的第 Section 部分有几个cell 也就是item
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
    return 4;
}
// 告诉collectionView 中每个cell长什么样
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    
    ChaosNewFeatureCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:ID forIndexPath:indexPath];
    NSString *imageName = [NSString stringWithFormat:@"guide%ldBackground",indexPath.item + 1];
    cell.image = [UIImage imageNamed:imageName];
    
    return cell;
}
@end