#import "ViewController.h"
#import "celloffirst.h "// Custom cell
#import "CellOfSmall. H "// Custom cell
#define WIDTH self.view.frame.size.width@ interface ViewController () < UICollectionViewDelegate UICollectionViewDataSource > / / need some attributes of the @ property (nonatomic,strong) UICollectionView *collection; @property (nonatomic, strong) UICollectionView *smallOfCollection; @property (nonatomic, assign) NSInteger labelIndex; NSIndexPath *oldIndexPath; Indexpath @property (nonatomic,strong) UIView *redView; @property (nonatomic,strong) NSMutableArray *marr; @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; self.marr = [NSMutableArray arrayWithObjects:@"News"The @"Video"The @"Music"The @"Interest"The @"Ha ha"The @"Ha ha"The @"Hee hee"The @"Hey hey"The @"Drivers"The @"Driving",nil];
    [self config];
    [self createRedView];
    [self createKVOAction];
    // Do any additional setup after loading the view, typically from a nib.
}

Copy the code

First of all, we have two collectionViews in the VC, one big and one small, and I don’t want to go into details.

- (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"]; / / close transverse indicator self. SmallOfCollection. ShowsHorizontalScrollIndicator = NO; }Copy the code

Two protocol methods of 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; // Make sure that the first word of the program is red and the font is largeif (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];
        returncell; }}Copy the code

Create the little red bar

- (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];
}

Copy the code

Let’s take advantage of KVO mode and let VC observe the action of large collection.

#pragma mark ------- Add an observer
- (void)createKVOAction {
    [self.collection addObserver:self forKeyPath:@"contentOffset" options:NSKeyValueObservingOptionOld | NSKeyValueObservingOptionNew context:@"nil"]; } // this method is automatically called after adding an observer - (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; // Let the red bar move when it is smaller than the screen widthif(x <= WIDTH) { self.redView.transform = CGAffineTransformMakeTranslation(redX, 0); } // For the last few we also let the little red bar moveelse if(x > 6 *WIDTH) { self.redView.transform = CGAffineTransformMakeTranslation((redX - 6 * WIDTH / 5) + WIDTH / 5, 0); } // Larger than the screen width makes the little collectionView move and we can't make it move all the timeelse if
    else{ self.smallOfCollection.contentOffset = CGPointMake(redX - WIDTH / 5, 0); }}Copy the code

So let’s slide the big collectionView and call this method in

/ / when the slide has been slowed - (void) scrollViewDidEndDecelerating: (scrollView UIScrollView *) {if(scrollView = = self. Collection) {/ / the current large collectionView which one item NSInteger currentItemCount = scrollView. ContentOffset. / x  WIDTH; / / according to which one item for indexPath NSIndexPath * indexPath = [NSIndexPath indexPathForItem: currentItemCountinSection:0]; CellOfSmall *currentCell = (CellOfSmall *)[_smallOfCollection cellForItemAtIndexPath:indexPath]; / / will then turn red font currentCell. Label. TextColor = [UIColor redColor]; currentCell.label.font = [UIFont systemFontOfSize:18]; NSIndexPath *indexPathPast = [NSIndexPath indexPathForItem:_labelIndex] NSIndexPath indexPathForItem:_labelIndexinSection:0];
        NSLog(@"%ld",self.labelIndex); /** add judgment to prevent a little bit of scratch loose, and did not go to the new page, then the text does not change color */if(indexPath ! *pastCell = (CellOfSmall *)[self.smallofCollection  cellForItemAtIndexPath:indexPathPast]; pastCell.label.textColor = [UIColor blackColor]; pastCell.label.font = [UIFont systemFontOfSize:15]; } self.labelIndex = currentItemCount; self.oldIndexPath = indexPath; }}Copy the code

This realized when sliding the page above the small title small red bar also followed to move!! All right, we can’t keep the car on too long, it’ll flip over. Next time we’ll write about clicking on the title, page and slider. You can try it. I feel like it’s very common. This is just a simple animation, the width of the small slider is fixed, there is no change effect. Inadequate, to everyone can benefit

To the source code of a friend can refer to: https://git.oschina.net/mayuhan/HuaTiaoPractice