iOS 类似网易新闻界面

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