仿网易新闻评论“盖楼”效果实现

前言

各位应该对黄易新闻比较熟悉，其中评论区一般都会出现一些盖楼的神评论，今天的主题就是仿照做一个有盖楼效果的评论列表。

首先上图给大家看下效果：

思路

数据结构设计

首先分析看下评论的结构，仔细观摩下发现，有的评论是简单一条，只有用户头像，昵称，评论内容等；有的评论是回复别人的评论，这样就不只是有用户头像，评论内容等基础信息，还有回复的别人的内容，这就是所谓“盖楼”了。那么怎么设计评论的model可以包含评论的所有数据呢？

首先满足简单评论的model很容易，如下：

public class Comment {
    private int id;
    private String mReplyTime;
    private String mAvaterUrl;
    private String mUsername;
    private String mUserArea;
    private String mCommentContent;
    private int mFavorCount;

    //getter setter
    ...
    }

以上包括了一条简单评论需要展示项的所有信息,可是如果是回复其他评论的评论，这种存在“盖楼”的评论项，这种结构就无法满足了。吃根辣条冷静一下，再分析盖楼中的内容，发现盖楼中的一项内容其实是被回复的评论，其中包括了用户昵称，评论内容。
总结来说，一条评论中可能包括了另一条评论，那么在Comment中添加一个字段：

private Comment replyTo;

这个字段保存了其回复的评论，这样就能形成一个类似单向链表的结构了，一条评论项中能够与它回复的评论关联起来，并且能够依次链接，那么所有回复的评论内容都能在链表中找到，结构清晰明了，那么model就已经设计好了。

界面设计

很明显这是一个列表结构，最外层咱们可以使用Recyclerview来实现，每个评论项可以使用一个自定义View封装起来，这个自定义View来处理数据和UI的适配。我们来分析下这个View的构成：
1. 用户头像，昵称，回复内容等都是基础内容，每个评论项都会展示出这些信息。
2. 有的回复其他评论的评论项中间会多出一个评论“楼层”。

这样简单一分析，我们就有了思路了，这个自定义的View可以分解成两个部分，一个部分就是基础信息展示，另个就是评论“楼层”展示。布局文件如下：

<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <io.geek.myapplication.view.CircleView2
            android:id="@+id/iv_avater"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"/>

        <TextView
            android:id="@+id/tv_username"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dp"
            android:layout_toRightOf="@+id/iv_avater"
            android:text="Geek"/>

        <TextView
            android:id="@+id/tv_user_area"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/tv_username"
            android:layout_toEndOf="@+id/iv_avater"
            android:layout_toRightOf="@+id/iv_avater"