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

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。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,259评论 4 61
  • 春天,对于金城来说,讲雨有点矫情,因为雨真的太少了,所以就说说风吧。 今年,可能是环境治理的原因,“你是风儿我是沙...
    小鱼儿_2dbc阅读 230评论 0 1
  • Tty,TT5e41221cytytattered r2551*175**5
    pang400阅读 156评论 0 0
  • 函数可以返回多个值吗?答案是肯定的。 比如在游戏中经常需要从一个点移动到另一个点,给出坐标、位移和角度,就可以计算...
    mingminy阅读 95评论 0 0
  • 毕业两年,从事服务类行业,微薄的工资和苦逼的生活,让我筋疲力尽。朋友说:你一个姑娘家,为何要努力工作,找一...
    我吃西兰花阅读 439评论 16 6