前面

首先,对各位说抱歉,很长时间没有更新东西了.最近自己在研究数据库相关的内容,并且也写了相关的项目作为练习.数据库相关的文章也会在最近更新.大家记得加关注和点赞.
进入正题.最近在看朋友圈,感觉朋友圈的UI设计确实很赞,毕竟腾讯!于是虎哥也是花费大量的时间来研究的朋友圈的结构实现.

效果图

首先看下我最终实现的效果图.(ps:数据是自己写的json数据,图片是远程地址)

效果图.gif
数据代码如下:

NSDictionary * dic = @{
                           @"name":@"49王东辉",
                           @"headerImg":@"http://img2.woyaogexing.com/2017/08/17/8d601cd1bba9d6df!400x400_big.jpg",
                           @"postTitle":@"爱情是个什么东西!爱情是个什么东西!爱情是个什么东西!爱情是个什么东西!爱情是个什么东西!爱情是个什么东西!爱情是个什么东西!爱情是个什么东西!爱情是个什么东西!爱情是个什么东西!爱情是个什么东西!",
                           @"postImgs":@[@"http://img18.3lian.com/d/file/201706/13/168a8d48c42b643b981096f076f918e6.jpg"],
                           @"postThumImgs":@[@"http://img18.3lian.com/d/file/201706/13/168a8d48c42b643b981096f076f918e6.jpg"],
                           @"postTime":@"15个小时前",
                           @"likeNames":@[@"小明",@"虎哥",@"囧哥"],
                           @"comments":
  @[@{@"name":@"女王",@"commment":@"浪费烟"},
  @{@"name":@"小明",@"commment":@"爱情是个什么东西爱情是个什么东西爱情是个什么东西爱情是个什么东西爱情是个什么东西爱情是个什么东西"}],
                           };
    NSDictionary * dic1 = @{
                           @"name":@"0601向阳",
                           @"headerImg":@"http://img2.woyaogexing.com/2017/08/17/9a3da279feca508a!400x400_big.jpg",
                           @"postTitle":@"一个白眼狼",
                           @"postImgs":@[@"http://img18.3lian.com/d/file/201706/13/ff9d289740ab471a19cd6804b7fff5c5.jpg",@"http://img18.3lian.com/d/file/201706/13/3d6cb18c9cb0cb0174d799513addcb26.jpg"],
                           @"postThumImgs":@[@"http://img18.3lian.com/d/file/201706/13/ff9d289740ab471a19cd6804b7fff5c5.jpg",@"http://img18.3lian.com/d/file/201706/13/3d6cb18c9cb0cb0174d799513addcb26.jpg"],
                           @"postTime":@"15个小时前",
                           @"likeNames":@[@"小明",@"虎哥",@"囧哥"],
                           @"comments":
                               @[@{@"name":@"王松",@"commment":@"浪费烟"},
                                 @{@"name":@"小米",@"commment":@"达克宁,我感觉你吃点达克宁就可以差不多了,药千万不要停,坚持吃,会有效果的!"},
                                 @{@"name":@"繁花落地",@"commment":@"达克宁,我感觉你吃点达克宁就可以差不多了,药千万不要停,坚持吃,会有效果的!"},
                                 @{@"name":@"gay",@"commment":@"达克宁,我感觉你吃点达克宁就可以差不多了,药千万不要停,坚持吃,会有效果的!"}],
                           };

结构分析

朋友圈的难点,无非是数据的动态性,滑动时存在的卡顿感,如果结构设计的好,就可以避开这种问题,结构如下图所示:

结构.png

也就说:每个人的朋友圈状态为一个分区.朋友的评论为当前tableview的cell.朋友的发布的状态和配图以及点赞为当前分区的区头.

约束的实现

结构分析后,我们需要解决的问题有2条:
1.评论cell也就是评论的自适应高.
2.当前分区的区头自适应高.
这里我使用的是约束配合代码来实现的自适应高.

评论cell的约束实现

评论cell的约束.png

评论cell的自适应核心代码:

 self.momentsTableView.separatorStyle = UITableViewCellSeparatorStyleNone;
 self.momentsTableView.estimatedRowHeight = 20;
 self.momentsTableView.rowHeight =  UITableViewAutomaticDimension;

区头问题

1.朋友圈发布的文字自适应高
2.朋友圈照片的九宫格实现
3.朋友圈点赞自适应高
4.区头的高度自适应

区头自适应高的实现

首先,说到区头,我们都会想到tableview的一个代理方法:

- (nullable UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section

很多开发人员对这个代理方法的实现一般会创建一个view然后直接返回,实际上这种做法是错误的做法.不建议大家使用:

- (nullable UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
    UIView * view = [[UIView alloc] init];
    return view;
}

上面的做法是错误的做法,不建议大家使用,如果出现多个分区,就会出现重用的问题.实际上区头和cell的做法是一样的,也是有重用机制的.
正确的实现

- (nullable UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
    StateHeaderFooterView * headerView = [tableView dequeueReusableHeaderFooterViewWithIdentifier:@"header"];
    CommentsModel * mod = [self.dataArr objectAtIndex:section];
    [headerView showData:mod];
    return headerView;
}

并且这个区头的父类也不是UIView.他本身是继承于UITableViewHeaderFooterView的.

@interface StateHeaderFooterView : UITableViewHeaderFooterView

这样的他的自适应高其实就和我们的cell是一个原理了.

区头自适应高的核心代码

[self.momentsTableView registerNib:[UINib nibWithNibName:@"StateHeaderFooterView" bundle:nil] forHeaderFooterViewReuseIdentifier:@"header"];    

self.momentsTableView.estimatedSectionHeaderHeight = 100;

self.momentsTableView.sectionHeaderHeight = UITableViewAutomaticDimension;

区头的结构

区头结构.png

区头的约束实现

整体结构

** 状态文字的自适应约束**

文字状态自适应高

这里的九宫格我默认的约束高度为0.等有数据的时候,再修改约束的高,就可以实现自适应高了.

区头的赋值代码实现

-(void)showData:(CommentsModel *)mod
{
    [self.headerImageView sd_setImageWithURL:[NSURL URLWithString:[NSString stringWithFormat:@"%@",mod.headerImg]]];
    self.nameLable.text = mod.name;
    self.timeLable.text = mod.postTime;
    self.postDetailLable.text = mod.postTitle;
    NSString * likeName = [mod.likeNames componentsJoinedByString:@","];
    NSString * ti = @": ";
    likeName = [ti stringByAppendingString:likeName];
    NSMutableAttributedString * atr = [[NSMutableAttributedString alloc]initWithString:likeName];
    
    [atr addAttribute:NSForegroundColorAttributeName
                value:[UIColor colorWithRed:68/255.0 green:156 /255.0 blue:249/255.0 alpha:1.0]
                range:NSMakeRange(0, likeName.length)];
    self.likeLable.attributedText = atr;
    
    self.dataArr = [NSArray arrayWithArray:mod.postThumImgs];
    [self.collectionView reloadData];
}

具体的实现,大家可以参考我的demo.demo的下载地址会在评论区发给大家.

没了.记得打赏和点赞.要不然关注下也可以啊.