美文网首页其他
Masonry流水线布局

Masonry流水线布局

作者: 咩咩咩哦 | 来源:发表于2019-12-12 18:30 被阅读0次

在UI开发过程中,经常出现view显示与隐藏的逻辑,也就是说当上面的view隐藏时,需要下面的view顶上来,如:

正常情况 2隐藏 2,4隐藏
view1 view1 view1
view2 view3 view3
view3 view4 view5
view4 view5
view5

我们在用Masonry布局的时候,实现上面的需求,同时需要view自适应高度,往往需要根据data属性设置view的高度或者隐藏,导致里面判断极其繁琐,现在突然想到一个牛逼闪闪的点子,特意记录一下:(如果你有更好的方式,留言,但是不要嘲笑😝)

1:初始化view:这里面把所有的view都初始化,管他后面会不会有用
2:获取数据后刷新view:这里设置对应view的hidden属性,不过不显示就设置为NO
3:layoutSubviews中布局:
3-1: 定义一个零时的view = nil
3-2: 判断view1是否要显示,如果显示,对view 布局,同时将view = view1
3-3: 如果不显示,就用2方法判断view2 依此类推 ,同时view2的top布局相对于view的底部
3-4:在最后一个view布局的时候不要添加对底部了依赖
3-5:最后添加零时view地底部相对于底部的依赖即可

-(instancetype)initWithFrame:(CGRect)frame{
    if (self == [super initWithFrame:frame]) {
        [self confitUI];
    }
    return self;
}

-(void)confitUI{
    self.view1 = [UIView new];
    [self addSubview:_view1];

    self.view2 = [UIView new];
    [self addSubview:_view1];

    self.view3 = [UIView new];
    [self addSubview:_view1];

    self.view4 = [UIView new];
    [self addSubview:_view1];

    self.view5 = [UIView new];
    [self addSubview:_view1];
}
-(void)reload:(TestData*)data{
      if(data.one){
            view1.hidden = YES;
      }
      if(data.tow){
           view2.hidden = YES;
      }
      if(data.thir){
           view3.hidden = YES;
      }
      if(data.foun){
            view4.hidden = YES;
      }
  if(data.five){
            view5.hidden = YES;
      }
}

-(void)layoutSubviews{
    [super layoutSubviews];
    UIView *temView = nil;
    if(! _view1.hidden){
       [_view1 mas_makeConstraints:^(MASConstraintMaker *make) {
          if(temView){
              make.top.mas_equalTo(temView.mas_bottom);
          }else{
            make.top.mas_equalTo(self);
          }
          make.left.mas_equalTo(self);
          make.width.mas_equalTo(300);
      }];
     temView = view1;
    }

    if(! _view2.hidden){
       [_view1 mas_makeConstraints:^(MASConstraintMaker *make) {
          if(temView){
              make.top.mas_equalTo(temView.mas_bottom);
          }else{
            make.top.mas_equalTo(self);
          }
          make.left.mas_equalTo(self);
          make.width.mas_equalTo(300);
      }];
      temView = view2;
    }

    if(! _view3.hidden){
       [_view3 mas_makeConstraints:^(MASConstraintMaker *make) {
          if(temView){
              make.top.mas_equalTo(temView.mas_bottom);
          }else{
            make.top.mas_equalTo(self);
          }
          make.left.mas_equalTo(self);
          make.width.mas_equalTo(300);
        }];
    temView = view3;
    }
...
    [temview mas_updateConstraints:^(MASConstraintMaker *make) {
        make.bottom.mas_equalTo(self.contView).mas_offset(-Panding_DEF);
    }];
}

相关文章

  • Masonry流水线布局

    在UI开发过程中,经常出现view显示与隐藏的逻辑,也就是说当上面的view隐藏时,需要下面的view顶上来,如:...

  • iOS局部圆角

    注意 Masonry布局时,要在Masonry布局后调用

  • 适配

    Masonry iOS自动布局框架-Masonry详解

  • oc 的画面布局

    画面布局:SDAutoLayout、Masonry Masonry : 简单例子: self.viewTwo= ...

  • 使用Masonry代码进行屏幕适配的详细介绍

    Masonry自动布局使用 Masonry是一个轻量级的布局框架,采用更好的语法封装自动布局,它有自己的布局DSL...

  • Masonry简单用法 (一)

    Masonry是一个布局框架。 下载地址:https://github.com/Masonry/Masonry 安...

  • App架构方方面面

    布局 揭秘 iOS 布局 Masonry源码解析 自动布局&绝对布局autolayoutautolayout 动画...

  • Third Party

    A:推荐使用 B:修改使用 C:参考使用 自动布局Masonry(A)iOS自动布局框架-Masonry详解SDA...

  • iOS 常用布局方式之Masonry

    级别: ★☆☆☆☆标签:「iOS Masonry」「iOS 自动布局」「Masonry」作者: Xs·H审校: ...

  • 源码解读——Masonry

    原文链接 Masonry 概述 Masonry 是基于 Apple 的自动布局封装的一个轻量级布局框架。Mason...

网友评论

    本文标题:Masonry流水线布局

    本文链接:https://www.haomeiwen.com/subject/akitnctx.html