美文网首页
Masonry 实现微博简单布局

Masonry 实现微博简单布局

作者: 请叫我小白同学 | 来源:发表于2018-05-11 21:46 被阅读131次

前言:

    最近在做cell自适应,并且高度缓存,我在简书上找了许多学习文章,也请教了简书上大佬们,感谢他们的指导,现在我终于实现了微博的简单布局。

附上学习文章:

文章一

文章二

心里有句mmp一定要说

看效果:

自适应cell

引用了几个框架了解一下:

1.Masonry (布局)

2.FDTemplateLayoutCell     (sunny大大的开源框架 牛逼!)已经有一年多没更新了....

3.PYPhotoBrowser(图片浏览器)就这个新的图片浏览器框架还在维护着,但是不支持最新的SDWebImage.,只支持4.2.



好了,咋们开始学习一下吧.


根据FDTemplateLayoutCell框架要求,把控件都要添加到contentView上,并且自上而下对控件进行约束,要求上左下右至少有一个约束,具体的就去看阳神的源代码.

但是因为我把添加到cell里面的子控件都抽取到一个自定义的view里,所以下面子控件都添加到自定义View上

    UIImageView*icon  = [[UIImageView alloc] init];

    icon.backgroundColor = [UIColor redColor];

    icon.layer.cornerRadius = 25;

    icon.layer.masksToBounds = YES;

    self.icon= icon;

    [self addSubview:self.icon];

    UILabel*name =  [[UILabel alloc] init];

    self.name= name;

    [self addSubview:self.name];

    UILabel*time  = [[UILabel alloc] init];

    time.font = [UIFont systemFontOfSize:14];

    self.time= time;

    [self addSubview:self.time];

    UIImageView *line = [[UIImageView alloc] init];

    line.backgroundColor = [UIColor colorWithRed:0 green:0 blue:0 alpha:0.1];

    [selfaddSubview:line];

    UILabel *conText = [[UILabel alloc] init];

    conText.preferredMaxLayoutWidth = SCREEN_W - 40;;

    conText.numberOfLines=0;

    conText.font = [UIFont systemFontOfSize:16];

    self.ConText= conText;

    [self addSubview:self.ConText];

    PYPhotosView *flowphone = [PYPhotosView photosView];

    self.pyphotosView= flowphone;

    [self addSubview:self.pyphotosView];

#pragma mark -约束

    [self.icon mas_makeConstraints:^(MASConstraintMaker *make) {

        make.left.equalTo(self).offset(15);

        make.top.equalTo(self).offset(10);

        make.height.and.width.mas_equalTo(50);

    }];

    [self.name mas_makeConstraints:^(MASConstraintMaker *make) {

        make.top.equalTo(self).offset(15);

        make.left.equalTo(self.icon.mas_right).offset(13);

    }];

    [self.time mas_makeConstraints:^(MASConstraintMaker *make) {

        make.top.equalTo(self.name.mas_bottom).offset(10);

        make.left.equalTo(self.icon.mas_right).offset(10);

    }];

    [linemas_makeConstraints:^(MASConstraintMaker *make) {

        make.top.equalTo(self.icon.mas_bottom).offset(10);

        make.left.equalTo(self.icon).priority(900);

        make.right.equalTo(self).offset(-15).priority(900);

        make.height.mas_equalTo(0.5);

    }];

    [self.ConText mas_makeConstraints:^(MASConstraintMaker *make) {

        make.top.equalTo(line.mas_bottom).offset(5);

        make.right.equalTo(line);

        make.left.equalTo(line);

    }];

   [self.pyphotosView mas_updateConstraints:^(MASConstraintMaker *make) {

        make.top.equalTo(self.ConText.mas_bottom).offset(5);

        make.left.equalTo(self.ConText);

        make.right.equalTo(self.ConText);

        make.height.mas_equalTo(0).priorityLow();

        make.bottom.equalTo(self).offset(-5).priorityLow();

    }];

自定义View上模型数据:


#pragma mark 数据接收

-(void)setModel:(Model*)model{

        self.icon.image= [UIImageimageNamed:model.icon];

        self.name.text= model.Name;

        self.time.text= model.Time;

        self.ConText.text= model.context;

        self.pyphotosView.thumbnailUrls= model.arrys;

    //判断图片数量

    if (self.pyphotosView.thumbnailUrls.count == 0) {

        [self.pyphotosView mas_updateConstraints:^(MASConstraintMaker *make) {

            make.height.mas_equalTo(0).priorityMedium();

            make.bottom.equalTo(self).offset(-5).priorityMedium();

        }];

    }

    else if (self.pyphotosView.thumbnailUrls.count>0){

        //图片的宽高

        self.pyphotosView.photoHeight=kscreenH*0.15;

        self.pyphotosView.photoWidth=SCREEN_W*0.26;

        //间距

        self.pyphotosView.photoMargin=SCREEN_W*0.035;

        //临时图片控件高度

        CGFloath =0.0;

        if(self.pyphotosView.thumbnailUrls.count == 1){

//            self.pyphotosView.photoHeight = [UIScreen mainScreen].bounds.size.height * 1;

            self.pyphotosView.photoWidth=SCREEN_W*0.93;

            self.pyphotosView.photoHeight=kscreenH*0.45;

            self.pyphotosView.oneImageFullFrame=NO;

            h =self.pyphotosView.photoHeight;

        }else{

            h =kscreenH*0.15;

        }

        //判断几行高度

        CGFloat  height = (((self.pyphotosView.thumbnailUrls.count-1) /3+1) * (h+        self.pyphotosView.photoMargin)+self.pyphotosView.photoMargin);

        [self.pyphotosView mas_updateConstraints:^(MASConstraintMaker *make) {

            make.height.mas_equalTo(height).priorityMedium();

           // make.height.mas_equalTo(height);

        }];

    }

}


cell里面添加自定义的View:

        [self.dynamicView mas_makeConstraints:^(MASConstraintMaker *make) {            make.edges.equalTo(self.contentView);     

  }];


cell里面的模型:


#pragma mark -数据接口

-(void)configureCellWithData:(Model*)model{

    self.dynamicView.model = model;

}


控制器上:

1.tableView上一定要注册registerClass

2.//自适应高度

-(CGFloat)tableView:(UITableView*)tableView heightForRowAtIndexPath:(NSIndexPath*)indexPath{

    return [_tableView fd_heightForCellWithIdentifier:TaID cacheByIndexPath:indexPath configuration:^(id cell) {

        [cellconfigureCellWithData:self.arrys[indexPath.row]];

    }];

}

这就样可以自动适应cell了


提示一下:

由于FDTemplateLayoutCell一年多没更新,导致会出现以下bug(不知道是不是我约束问题还是什么,百度谷歌了很多,很多人都有这种问题):

translatesAutoresizingMaskIntoConstraints property of the contentView of a UITableViewCell is not supported and will result in undefined behavior, as this property is managed by the owning UITableViewCell. Cell:>



emmm,恳请各位有解决办法请告诉我这个小菜鸟.

相关文章

网友评论

      本文标题:Masonry 实现微博简单布局

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