仿网页新闻首页分层，视觉错误效果

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。

仿网页新闻首页分层，视觉错误效果

推荐阅读更多精彩内容