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

  1 #import "ChaosNewFeatureViewController.h"
  2 #import "ChaosNewFeatureCell.h"
  3 
  4 @interface ChaosNewFeatureViewController ()
  5 /** lastOffsetX */
  6 @property(nonatomic,assign) CGFloat lastOffsetX;
  7 /** guide */
  8 @property(nonatomic,weak) UIImageView *guideView;
  9 /** guideLargeText */
 10 @property(nonatomic,weak) UIImageView *guideLargeView;
 11 /** guideSmallText */
 12 @property(nonatomic,weak) UIImageView *guideSmallView;
 13 @end
 14 
 15 // CollectionViewController的结构层次：首先是控制器的View  上面是collectionView
 16 // self.view != self.collectionView
 17 
 18 // 1.初始化的时候必须设置布局参数，通常使用系统提供的流水布局UICollectionViewFlowLayout
 19 // 2.cell必须通过注册
 20 // 3.自定义cell
 21 
 22 @implementation ChaosNewFeatureViewController
 23 
 24 static NSString * const ID = @"Cell";
 25 
 26 - (instancetype)init
 27 {
 28     // 设置流水布局
 29     UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];
 30     
 31     // 设置布局方向
 32     layout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
 33     
 34     // 设置布局中每个cell的尺寸
 35     layout.itemSize = ChaosScreenBounds.size;
 36     // 设置每个cell水平之间的间距
 37 //    layout.minimumInteritemSpacing = 0;
 38     // 设置每行之间的间距
 39     layout.minimumLineSpacing = 0;
 40     // 设置周边的间距
 41 //    layout.sectionInset = UIEdgeInsetsMake(20, 20, 0, 20);
 42     
 43     return [super initWithCollectionViewLayout:layout];
 44 }
 45 
 46 - (void)viewDidLoad {
 47     [super viewDidLoad];
 48     // 这个颜色我们看不见，因为上面还有一个self.collectionView
 49     self.view.backgroundColor = [UIColor redColor];
 50     // 看到的颜色是这个
 51     self.collectionView.backgroundColor = [UIColor greenColor];
 52     // 水平滚动条是否显示
 53     self.collectionView.showsHorizontalScrollIndicator = NO;
 54     // 是否启用分页
 55     self.collectionView.pagingEnabled = YES;
 56     // 是否启用弹簧效果
 57     self.collectionView.bounces = NO;
 58     
 59     // 注册cell
 60     [self.collectionView registerClass:[ChaosNewFeatureCell class] forCellWithReuseIdentifier:ID];
 61     
 62     // 添加所有ImageView
 63     [self setUpAllChildrenView];
 64 }
 65 
 66 - (void)setUpAllChildrenView
 67 {
 68     // 添加guide
 69     UIImageView *guide = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"guide1"]];
 70     
 71     guide.centerX = self.collectionView.centerX;
 72     guide.centerY = self.collectionView.centerY;
 73     
 74     _guideView = guide;
 75     [self.collectionView addSubview:guide];
 76     
 77     // 添加guideLine
 78     UIImageView *guideLine = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"guideLine"]];
 79     
 80     guideLine.x -= 130;
 81     
 82     [self.collectionView addSubview:guideLine];
 83     
 84     // 添加guideLargeText
 85     UIImageView *guideLargeText = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"guideLargeText1"]];
 86     
 87     guideLargeText.centerX = self.collectionView.centerX;
 88     guideLargeText.centerY = self.collectionView.height * 0.7;
 89     
 90     _guideLargeView = guideLargeText;
 91     [self.collectionView addSubview:guideLargeText];
 92     
 93     // 添加guideSmallText
 94     UIImageView *guideSmallText = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"guideSmallText1"]];
 95     
 96     guideSmallText.centerX = self.collectionView.centerX;
 97     guideSmallText.centerY = self.collectionView.height * 0.8;
 98     
 99     _guideSmallView = guideSmallText;
100     [self.collectionView addSubview:guideSmallText];
101 }
102 
103 // 滚动减速结束的时候调用
104 - (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
105 {
106     CGFloat curOffsetX = scrollView.contentOffset.x;
107     
108     // 每次移动的距离就是现在的offsetX 与 上次offsetX 的差值，这样的话左右都可以
109     CGFloat delta = curOffsetX - _lastOffsetX;
110     
111     // 先让图片移动到两倍的间距，然后以动画形式移动过来
112     _guideView.x += 2 * delta;
113     _guideLargeView.x += 2 * delta;
114     _guideSmallView.x += 2 * delta;
115     
116     // 计算当前页数
117     NSInteger pageNO = curOffsetX / self.view.width + 1;
118     // 拼接图片名称
119     NSString *guideImage = [NSString stringWithFormat:@"guide%ld",pageNO];
120     NSString *largeTextImage = [NSString stringWithFormat:@"guideLargeText%ld",pageNO];
121     NSString *smallTextImage = [NSString stringWithFormat:@"guideSmallText%ld",pageNO];
122     // 修改图片
123     _guideView.image = [UIImage imageNamed:guideImage];
124     _guideLargeView.image = [UIImage imageNamed:largeTextImage];
125     _guideSmallView.image = [UIImage imageNamed:smallTextImage];
126     
127     // 记录上次的offsetX
128     _lastOffsetX = curOffsetX;
129     
130     // 动画
131     [UIView animateWithDuration:0.25 animations:^{
132         _guideView.x -= delta;
133         _guideLargeView.x -= delta;
134         _guideSmallView.x -= delta;
135     }];
136 }
137 
138 // 告诉collectionView有几个部分
139 - (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
140 {
141     return 1;
142 }
143 // 告诉collectionView 的第 Section 部分有几个cell 也就是item
144 - (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
145 {
146     return 4;
147 }
148 // 告诉collectionView 中每个cell长什么样
149 - (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
150 {
151     
152     ChaosNewFeatureCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:ID forIndexPath:indexPath];
153     NSString *imageName = [NSString stringWithFormat:@"guide%ldBackground",indexPath.item + 1];
154     cell.image = [UIImage imageNamed:imageName];
155     
156     return cell;
157 }
158 @end