Android实现社交应用中的评论和回复功能

在Android的日常开发中，评论与回复功能是我们经常遇到的需求之一，其中评论与回复列表的展示一般在功能模块中占比较大。对于需求改动和迭代较频繁的公司来说，如何快速开发一个二级界面来适应我们的功能需求无疑优先级更高一些。首先我们来看看其他社交类app的评论与回复列表如何展示的：

Twitter不用说了，全球知名社交平台，上亿用户量，他们的评论回复都只展示一级数据(评论数据)，其他更多内容（回复内容），是需要页面跳转去查看，知乎也类似。第一张图是我们设计给我找的，他说要按照这个风格来，尽量将评论和回复内容在一个页面展示。好吧，没办法，毕竟我们做前端的，UI要看设计脸色，数据要看后台脸色?。看到设计图，我们脑海肯定第一时间联想一下解决方案：用recyclerview？listview？不对，分析一下它的层级发现，评论是一个列表，里面的回复又是一个列表，难道用recyclerview或者listview的嵌套？抱着不确定的态度，立马去网上查一下，果不其然，搜到的实现方式大多都是用嵌套实现的，来公司之前，其中一个项目里的评论回复功能就是用的嵌套listview，虽然处理了滑动冲突问题，但效果不佳，而且时常卡顿，所以，这里我肯定要换个思路。

网上还有说用自定义view实现的，但我发现大多没有处理view的复用，而且开发成本大，暂时不予考虑。那怎么办？无意中看到expandable这个关键词，我突然想到谷歌很早之前出过一个扩展列表的控件 - ExpandableListView，但听说比较老，存在一些问题。算了，试试再说，顺便熟悉一下以前基础控件的用法。

先来看一下最终的效果图吧：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8O91OfAh-1586328195855)(http://ovl7kcyr4.bkt.clouddn.com/18-4-24/18985123.jpg)]

这只是一个简单的效果图，你可以在此基础上来完善它。好了，废话不多说，下面让我们来看看效果具体如何实现的吧。大家应该不难看出来，页面整体采用了CoordinatorLayout来实现详情页的顶部视差效。同时，这里我采用ExpandableListView来实现多级列表，然后再解决它们的嵌套滑动问题。OK，我们先从ExpandableListView开始动手。

ExpandableListView

官方对于ExpandableListView给出这样的解释：A view that shows items in a vertically scrolling two-level list. This differs from the ListView by allowing two levels: groups which can individually be expanded to show its children. The items come from the ExpandableListAdapter associated with this view.

简单来说，ExpandableListView是一个用于垂直方向滚动的二级列表视图，ExpandableListView与listview不同之处在于，它可以实现二级分组，并通过ExpandableListAdapter来绑定数据和视图。下面我们来一起实现上图的效果。

布局中定义

首先，我们需要在xml的布局文件中声明ExpandableListView：

<ExpandableListView
    android:id="@+id/detail_page_lv_comment"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:divider="@null"
    android:layout_marginBottom="64dp"
    android:listSelector="@android:color/transparent"
    android:scrollbars="none"/>

这里需要说明两个问题：

1. ExpandableListView默认为它的item加上了点击效果，由于item里面还包含了childItem，所以，点击后，整个item里面的内容都会有点击效果。我们可以取消其点击特效，避免其影响用户体验，只需要设置如上代码中的listSelector即可。
2. ExpandableListView具有默认的分割线，可以通过divider属性将其隐藏。

设置Adapter

正如使用listView那样，我们需要为ExpandableListView设置一个适配器Adapter，为其绑定数据和视图。ExpandableListView的adapter需要继承自ExpandableListAdapter，具体代码如下：

/**
 * Author: Moos
 * E-mail: moosphon@gmail.com
 * Date:  18/4/20.
 * Desc: 评论与回复列表的适配器
 */

public class CommentExpandAdapter extends BaseExpandableListAdapter {
    private static final String TAG = "CommentExpandAdapter";
    private List<CommentDetailBean> commentBeanList;
    private Context context;

    public CommentExpandAdapter(Context context, List<CommentDetailBean> commentBeanList)               {
        this.context = context;
        this.commentBeanList = commentBeanList;
    }

    @Override
    public int getGroupCount() {
        return commentBeanList.size();
    }

    @Override
    public int getChildrenCount(int i) {
        if(commentBeanList.get(i).getReplyList() == null){
            return 0;
        }else {
            return commentBeanList.get(i).getReplyList().size()>0 ? commentBeanList.get(i).getReplyList().size():0;
        }

    }

    @Override
    public Object getGroup(int i) {
        return commentBeanList.get(i);
    }

    @Override
    public Object getChild(int i, int i1) {
        return commentBeanList.get(i).getReplyList().get(i1);
    }

    @Override
    public long getGroupId(int