前言
各位应该对黄易新闻比较熟悉,其中评论区一般都会出现一些盖楼的神评论,今天的主题就是仿照做一个有盖楼效果的评论列表。
首先上图给大家看下效果:
思路
数据结构设计
首先分析看下评论的结构,仔细观摩下发现,有的评论是简单一条,只有用户头像,昵称,评论内容等;有的评论是回复别人的评论,这样就不只是有用户头像,评论内容等基础信息,还有回复的别人的内容,这就是所谓“盖楼”了。那么怎么设计评论的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"