Visual illusion.gif
Gif做的有點粗糙，看官請見諒。
大致效果如上，此代碼用的是Masonry，不熟悉layout的可以去看看http://www.cocoachina.com/ios/20141219/10702.html
代碼地址: https://github.com/SnapKit/Masonry
swift版的還沒有寫，原因是我并不會swift。現(xiàn)在也正在學習當中，以后可能會在同一文章下更新swift版本。
這是小弟第一次寫文章，文采也不是很好，請大家見諒。
大致原理：創(chuàng)建一個View做底層，根據(jù)傳入的titles數(shù)組創(chuàng)建Label加入到Self，把它稱為highlightView 。
再創(chuàng)建一個View做為移動背景顏色，把它稱為highlightLayerView，它的功能主要是做偏移，把它添加在highlightView上。
再創(chuàng)建一個和底層View一樣的View，放的是被選中顏色的Label，把它稱為highlightWithLabelView。
創(chuàng)建具體代碼如下：
// 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語法，F(xiàn)ixedSpacing: 每個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更新約束，并不會更新約束對象，所以只能調(diào)用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。
