Visual illusion.gif
Gif做的有点粗糙，看官请见谅。
大致效果如上，此代码用的是Masonry，不熟悉layout的可以去看看http://www.cocoachina.com/ios/20141219/10702.html
代码地址: https://github.com/SnapKit/Masonry
swift版的还没有写，原因是我并不会swift。现在也正在学习当中，以后可能会在同一文章下更新swift版本。
这是小弟第一次写文章，文采也不是很好，请大家见谅。
大致原理：创建一个View做底层，根据传入的titles数组创建Label加入到Self，把它称为highlightView 。
再创建一个View做为移动背景颜色，把它称为highlightLayerView，它的功能主要是做偏移，把它添加在highlightView上。
再创建一个和底层View一样的View，放的是被选中颜色的Label，把它称为highlightWithLabelView。
创建具体代码如下：
// highlightView主要用来存放highlightLayerView和highlightWithLabelView
UIView *highlightView = [[UIView alloc] init];
highlightView.clipsToBounds = YES; // 这里一定要clipsToBounds，因为highlightWithLabelView加到highlightView后，会把highlightView挡住，颜色会重合导致变色
[self addSubview:highlightView];
UIView *highlightLayerView = [[UIView alloc] init];
highlightLayerView.layer.backgroundColor = [UIColor redColor].CGColor; // 颜色可以自定义
highlightLayerView.layer.cornerRadius = 10;
highlightLayerView.layer.masksToBounds = YES;
[highlightView addSubview:highlightLayerView];
self.highlightView = highlightView;
UIView *highlightWithLabelView = [[UIView alloc] init];
[highlightView addSubview:highlightWithLabelView];
self.highlightWithLabelView = highlightWithLabelView;
for (int index = 0; index < self.titles.count; index++) {
UILabel *bottomLabel = [self labelWithTitle:self.titles[index] textColor:[UIColor blackColor]]; // 颜色可以自定义
UILabel *highlightsLabel = [self labelWithTitle:self.titles[index]textColor:[UIColor whiteColor]]; // 颜色可以自定义
[self addSubview:bottomLabel];
[highlightWithLabelView addSubview:highlightsLabel];
[self.bottoms addObject:bottomLabel];
[self.highLights addObject:highlightsLabel];
}
// 这是Masonry语法，FixedSpacing: 每个item之前的间距，leadSpacing: 第一个item距离父视图的左间距，tailSpacing: 最后一个item距离父视图的右间距
// self.bottoms和self.highLights分别存放的不同颜色的label，只是为了方便进行约束，没有其他作用
[self.bottoms mas_distributeViewsAlongAxis:MASAxisTypeHorizontal withFixedSpacing:0 leadSpacing:0 tailSpacing:0];
[self.highLights mas_distributeViewsAlongAxis:MASAxisTypeHorizontal withFixedSpacing:0 leadSpacing:0 tailSpacing:0];
[self.bottoms mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.and.bottom.equalTo(self);
}];
[self.highLights mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.and.bottom.equalTo(highlightWithLabelView);
}];
[highlightView mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.and.leading.and.bottom.equalTo(self);
make.width.equalTo(self).dividedBy(_titles.count); // dividedBy表示除以 self.titles.count， priority表示乘以x
}];
[highlightLayerView mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.and.bottom.equalTo(highlightView);
make.leading.and.width.equalTo(highlightView);
}];
[highlightWithLabelView mas_makeConstraints:^(MASConstraintMaker *make) {
make.edges.equalTo(self);
}];
在做偏移时，highlightView向右偏移，会带动highlightLayerView一起移动，再让highlightWithLabelView往左偏移就可以造成视觉错觉。又因为highlightView.clipsToBounds为YES，bottomLabel其他的label不会展示出来。
具体代码如下：
[self.highlightView mas_updateConstraints:^(MASConstraintMaker *make) {
make.leading.offset(offset);
}];
// 因为Masonry更新约束，并不会更新约束对象，所以只能调用remake
[self.highlightWithLabelView mas_remakeConstraints:^(MASConstraintMaker *make) {
make.leading.offset(-offset);
make.top.and.bottom.and.trailing.equalTo(self);
}];
[UIView animateWithDuration:0.25 animations:^{
[self layoutIfNeeded];
}];
我写了一个demo: https://github.com/RoshdIng/Visual-illusion，有用或者有帮助的麻烦给个star。
