1.gif
大家好，我又回来了。哥不是老司机，但是车也开得不错。做过项目的都遇到过这样的界面，反正我是感觉难不难，就是需要的逻辑比较多。（就是墨迹）而且现在这样的界面许多APP都用，也比较火吧！好了，废话不多说，进入正题。开车了，上车的乘客坐稳了！！！！
ViewController.m
#import "ViewController.h"
#import "CellOfFirst.h"// 自定义的cell
#import "CellOfSmall.h"// 自定的cell
#define WIDTH self.view.frame.size.width
@interface ViewController ()<UICollectionViewDelegate,UICollectionViewDataSource>
// 一些需要的属性
@property (nonatomic,strong) UICollectionView *collection;
@property (nonatomic, strong) UICollectionView *smallOfCollection;
@property (nonatomic, assign) NSInteger labelIndex;// 记录是第几个label
@property (nonatomic, strong) NSIndexPath *oldIndexPath;//记录第几个label的indexpath
@property (nonatomic,strong) UIView *redView;//小红条
@property (nonatomic,strong) NSMutableArray *marr ;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
self.marr = [NSMutableArray arrayWithObjects:@"新闻",@"视频",@"音乐",@"兴趣",@"呵呵",@"哈哈",@"嘻嘻",@"嘿嘿", @"司机",@"开车",nil];
[self config];
[self createRedView];
[self createKVOAction];
// Do any additional setup after loading the view, typically from a nib.
}
首先我们在VC中铺两个collectionView,一个大的、一个小的，这个大家一定都会，就不详细说了！
- (void)config {
UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc]init];
layout.itemSize = CGSizeMake(self.view.frame.size.width, self.view.frame.size.height - 55);
layout.minimumLineSpacing = 0;
layout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
self.collection = [[UICollectionView alloc]initWithFrame:CGRectMake(0, 55, self.view.frame.size.width, self.view.frame.size.height - 55) collectionViewLayout:layout];
[self.view addSubview:self.collection];
self.collection.backgroundColor = [UIColor whiteColor];
self.collection.delegate = self;
self.collection.dataSource = self;
self.collection.showsHorizontalScrollIndicator = NO;
self.collection.pagingEnabled = YES;
[self.collection registerClass:[CellOfFirst class] forCellWithReuseIdentifier:@"pool"];
UICollectionViewFlowLayout *layout1 = [[UICollectionViewFlowLayout alloc]init];
layout1.itemSize = CGSizeMake(self.view.frame.size.width / 5, 50);
layout1.scrollDirection = UICollectionViewScrollDirectionHorizontal;
layout1.minimumLineSpacing = 0;
self.smallOfCollection = [[UICollectionView alloc]initWithFrame:CGRectMake(0, 5, self.view.frame.size.width, 50) collectionViewLayout:layout1];
[self.view addSubview:self.smallOfCollection];
self.smallOfCollection.backgroundColor = [UIColor whiteColor];
self.smallOfCollection.delegate = self;
self.smallOfCollection.dataSource = self;
[self.smallOfCollection registerClass:[CellOfSmall class] forCellWithReuseIdentifier:@"smallPool"];
// 关闭横向的指示器 self.smallOfCollection.showsHorizontalScrollIndicator = NO;
}
collectionView 的两个协议方法
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
if (collectionView == self.collection) {
return _marr.count;
}
else {
return _marr.count;
}
}
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
if (collectionView == self.collection) {
CellOfFirst *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"pool" forIndexPath:indexPath];
cell.backgroundColor = [UIColor colorWithRed:arc4random() % 255 / 255.0 green:arc4random() % 255 / 255.0 blue:arc4random() % 255 / 255.0 alpha:1.0];
return cell;
}
else {
CellOfSmall *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"smallPool" forIndexPath:indexPath];
cell.label.text = _marr[indexPath.item];
cell.label.textAlignment = 1;//字体居中
//保证开启程序第一个字是红色的 并且字体为大字
if (indexPath.row == _labelIndex) {
cell.label.textColor = [UIColor redColor];
cell.label.font = [UIFont systemFontOfSize:18];
}else {
cell.label.font = [UIFont systemFontOfSize:15];
cell.label.textColor = [UIColor blackColor];
}
if (indexPath.row == _oldIndexPath.row) {
cell.label.textColor = [UIColor redColor];
cell.label.font = [UIFont systemFontOfSize:18];
}else {
cell.label.font = [UIFont systemFontOfSize:15];
cell.label.textColor = [UIColor blackColor];
}
//cell.backgroundColor = [UIColor redColor];
return cell;
}
}
创建小红条
- (void)createRedView {
self.redView =[[UIView alloc]initWithFrame:CGRectMake(0, 53, self.view.frame.size.width / 5, 2)];
[self.view addSubview:_redView];
_redView.backgroundColor = [UIColor redColor];
}
我们来利用KVO模式 ，让VC来观察大collection的动作。
#pragma mark -------添加观察者
- (void)createKVOAction {
[self.collection addObserver:self forKeyPath:@"contentOffset" options:NSKeyValueObservingOptionOld | NSKeyValueObservingOptionNew context:@"nil"];
}
// 添加观察者之后 自动调用此方法
- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSString *,id> *)change context:(void *)context {
CGFloat x = [[change objectForKey:@"new"] CGPointValue].x;
CGFloat redX = x / 5;
// 小于屏幕宽度时 我们让小红条动
if (x <= WIDTH) {
self.redView.transform = CGAffineTransformMakeTranslation(redX, 0);
}
// 最后几个 我们还让小红条动
else if (x > 6 *WIDTH) {
self.redView.transform = CGAffineTransformMakeTranslation((redX - 6 * WIDTH / 5) + WIDTH / 5, 0);
}
// 大于屏幕的宽度 让小collectionView动 并且我们不能让他一直动 可以看else if
else {
self.smallOfCollection.contentOffset = CGPointMake(redX - WIDTH / 5, 0);
}
}
我们滑动大collectionView 是，调动此方法
// 当滑动已经减速时进行
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
if (scrollView == self.collection) {
// 当前大collectionView 第几个item
NSInteger currentItemCount = scrollView.contentOffset.x / WIDTH;
// 根据第几个item获取indexPath
NSIndexPath *indexPath = [NSIndexPath indexPathForItem:currentItemCount inSection:0];
// 根据indexPath 获取当前的小collectionViewCell
// 进行强转
CellOfSmall *currentCell = (CellOfSmall *)[_smallOfCollection cellForItemAtIndexPath:indexPath];
// 然后将字体变红
currentCell.label.textColor = [UIColor redColor];
currentCell.label.font = [UIFont systemFontOfSize:18];
/** 恢复字体颜色*/
// 根据之前，再取出cell协议的方法中记录的item下标
NSIndexPath *indexPathPast = [NSIndexPath indexPathForItem:_labelIndex inSection:0];
NSLog(@"%ld",self.labelIndex);
/** 加判断防止划一点点就松开, 并没有去到新页面的情况, 则文字不变色 */
if (indexPath != indexPathPast) {
// 根据indexPath获取当前的小collectionViewCell
CellOfSmall *pastCell = (CellOfSmall *)[self.smallOfCollection cellForItemAtIndexPath:indexPathPast];
pastCell.label.textColor = [UIColor blackColor];
pastCell.label.font = [UIFont systemFontOfSize:15];
}
self.labelIndex = currentItemCount;
self.oldIndexPath = indexPath;
}
}
这就实现了 滑动页面的时候上面的小标题 小红条 也跟着动弹了！！！
好了，车不能开的太久，容易翻车。我们下回写一下点击小标题，页面和小滑条也跟着的事件！！大家可以去尝试一下，我感觉这非常常用。我做的这个只是简单的动画，小滑条的宽度是固定的，没有变化的效果。不足，向大家能够受用
有要源代码的小伙伴可以参考：https://git.oschina.net/mayuhan/HuaTiaoPractice
网友评论