IOS 标签栏滚动 animation：触摸指示器视图时文本更改颜色

Question

I want to make an animation that when you scroll the tabbar, the indicator view follow and when it touch on the text of the tab, that text change color only the part it being touched. Example like in the picture below.

How can I achieve this? I have been racking my brain the whole day and no solution come to mind.

https://i.stack.imgur.com/ZrkZy.png

Answer 1

[PageCollectionViewCell.h]//You can change this cell with your favorite style.

@interface PageCollectionViewCell : UICollectionViewCell

/**
title Label
 */
@property (nonatomic, strong) UILabel *pageLabel;

/**
itemWidth
 */
@property (nonatomic, assign) CGFloat itemWidth;

@end

---

[PageCollectionViewCell.m]

#import "PageCollectionViewCell.h"

@interface PageCollectionViewCell ()

/**
title lab Margin
 */
@property (nonatomic, assign) CGFloat inset;
/**
border color
 */
@property (nonatomic, strong) UIColor *hexColor;

@end

@implementation PageCollectionViewCell

- (instancetype)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
        self.inset = 5;
        self.hexColor = [UIColor orangeColor];
        [self configSubView];
    }
    return self;
}

- (void)configSubView {
    UILabel *pageLabel = [[UILabel alloc] init];
    [pageLabel setTextColor:self.hexColor];
    pageLabel.layer.borderColor = self.hexColor.CGColor;
    pageLabel.layer.borderWidth = 2;
    [pageLabel setTextAlignment:NSTextAlignmentCenter];
    pageLabel.clipsToBounds = YES;
    [self addSubview:pageLabel];
    self.pageLabel = pageLabel;
    [pageLabel mas_makeConstraints:^(MASConstraintMaker *make) {
        make.edges.equalTo(self).insets(UIEdgeInsetsMake(self.inset, self.inset, self.inset, self.inset));
    }];
    self.pageLabel = pageLabel;
}

#pragma mark - set selected status
- (void)setSelected:(BOOL)isSelected {
    [self.pageLabel setTextColor:isSelected ? UIColor.whiteColor : self.hexColor];
    self.pageLabel.backgroundColor = isSelected ? self.hexColor : UIColor.clearColor;
}
- (void)setItemWidth:(CGFloat)itemWidth {
    self.pageLabel.layer.cornerRadius = (itemWidth - 2 * self.inset) / 2;
}
@end

---

[ViewViewController.m]

#import "ViewViewController.h"
#import "PageCollectionViewCell.h"

static NSString *kCellID = @"cellID";

@interface ViewViewController ()<UICollectionViewDelegate, UICollectionViewDataSource>

@property (nonatomic, strong) NSArray *arr;//page color

@property (nonatomic, strong) UICollectionView *pageCollectionView;
@property (nonatomic, assign) CGFloat itemWidth;//itemWidth

@property (nonatomic, strong) UIScrollView *pageScrollView;

@end

@implementation ViewViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    self.view.backgroundColor = UIColor.whiteColor;
    self.itemWidth = 40;
    self.arr = [NSArray arrayWithObjects:[UIColor blueColor],[UIColor redColor],[UIColor yellowColor],[UIColor orangeColor],[UIColor greenColor], nil];

    [self configNavigationBar];
    [self configPageView];
}

- (void)configNavigationBar {
    UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];
    flowLayout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
    flowLayout.itemSize = CGSizeMake(self.itemWidth, self.itemWidth);
    flowLayout.sectionInset = UIEdgeInsetsMake(0, 0, 0, 0);
    flowLayout.minimumLineSpacing = 0;

    UICollectionView *pageCollectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(0, 0, self.itemWidth * self.arr.count, NavigationBar_Height) collectionViewLayout:flowLayout];
    pageCollectionView.dataSource = self;
    pageCollectionView.delegate = self;
    pageCollectionView.backgroundColor = UIColor.clearColor;
    [pageCollectionView registerClass:[PageCollectionViewCell class] forCellWithReuseIdentifier:kCellID];
    self.navigationItem.titleView = pageCollectionView;
    NSIndexPath *firstIndexpath = [NSIndexPath indexPathForItem:0 inSection:0];
    [pageCollectionView selectItemAtIndexPath:firstIndexpath animated:YES scrollPosition:UICollectionViewScrollPositionBottom];
    self.pageCollectionView = pageCollectionView;
}

- (void)configPageView {
    //define in pch file
    CGFloat navigationBar_height = self.navigationController.navigationBar.frame.size.height;
    CGFloat statusBar_height = [UIApplication sharedApplication].statusBarFrame.size.height;
    CGFloat homeIndicator_Height = (statusBar_height > 20.0 ? 34.0 : 0.0);
    CGFloat screen_width = self.view.frame.size.width;

    UIScrollView *pageScrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, navigationBar_height + statusBar_height, screen_width, self.view.frame.size.height - navigationBar_height - statusBar_height - homeIndicator_Height)];
    pageScrollView.pagingEnabled = YES;
    pageScrollView.delegate = self;
    pageScrollView.showsVerticalScrollIndicator = NO;
    pageScrollView.showsHorizontalScrollIndicator = NO;
    pageScrollView.contentSize = CGSizeMake(screen_width * self.arr.count, 0);
    [self.view addSubview:pageScrollView];
    self.pageScrollView = pageScrollView;

    for (NSInteger index = 0; index < self.arr.count; index++) {
        UIView *pageView = [[UIView alloc] initWithFrame:CGRectMake(index * self.pageScrollView.frame.size.width, 0, self.pageScrollView.frame.size.width, self.pageScrollView.frame.size.height)];
        pageView.backgroundColor = self.arr[index];
        [self.pageScrollView addSubview:pageView];
    }
}

#pragma mark - UICollectionViewDelegate, UICollectionViewDataSource
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
    return self.arr.count;
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
    PageCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:kCellID forIndexPath:indexPath];
    cell.pageLabel.text = [NSString stringWithFormat:@"%ld", (long)indexPath.item + 1];
    cell.itemWidth = self.itemWidth;
    return cell;
}

- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath {
    CGFloat screen_width = self.view.frame.size.width;
    [self.pageScrollView setContentOffset:CGPointMake(indexPath.item * screen_width, 0) animated:YES];
}

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    if (!scrollView.isDragging && !scrollView.isDecelerating) {
        return;
    }
    CGFloat screen_width = self.view.frame.size.width;
    NSIndexPath *currentIndexpath = [NSIndexPath indexPathForItem:((scrollView.contentOffset.x - screen_width / 2) / screen_width) + 1 inSection:0];
    [self.pageCollectionView selectItemAtIndexPath:currentIndexpath animated:YES scrollPosition:UICollectionViewScrollPositionBottom];
}

@end