IOS标签栏滚动动画：带有指示器视图的触摸时文本改变颜色

Question

我想制作一个动画，当您滚动标签栏时，将跟随指示器视图，并且当触摸标签的文本时，该文本仅会更改其所触摸的部分的颜色。如下图所示的示例。

我该如何实现？我整天都在绞尽脑汁，没有办法解决。

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

Answer 1

[[PageCollectionViewCell.h] //您可以使用自己喜欢的样式更改此单元格。

@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