仿网易新闻评论的楼层效果

---

评论在很多app中都会用到，最常见的就是网易新闻中的评论了，所以今天就研究了一下这个，先看看网易的效果图吧。

这么一个评论的列表，想必都会做吧。一个ListView之类的控件，里面的item也是一个较简单的布局。不过当有人回复评论之后，那么效果图就变成了这样：

当有人回复评论之后，就出现了这样的楼层效果，今天主要就做做这个楼层的效果。

界面分析

通过效果图很容易看出，其实每一层楼的布局都是一样的，我们只需要把每一层每一层的布局拼接起来就好了。如果我们知道有多少个楼层，那么可以直接写一个LinearLayout，来包含多个楼层的布局就好了。但是在一开始不知道有多少楼层的情况下，我们只需要自定义一下LinearLayout，然后动态的添加楼层布局就好了。

代码编写

通过刚才的分析可以知道，每一个楼层里的布局是差不多的。所以，我们可以先写楼层的布局。楼层布局分为两种，一种是直接显示出了评论内容的，我这里的楼层只包含了人名，内容，楼层数，我们暂时叫它为ShowFloor；还有一种就是”展开隐藏楼层”，我们叫它为HideFloor。这两种布局都比较简单，所以就不贴出来了。
每一个楼层的布局写出来了，就可以开始自定义LinearLayout了，首先，我们创建一个FloorView类，让他继承LinearLayout，写出它的三个构造函数，然后初始化

this.setOrientation(LinearLayout.VERTICAL);

将它设置为垂直布局，然后就可以对数据进行显示布局了。

public void init() {    // 如果没有数据直接返回    if (null == datas.iterator())        return;    // 如果评论回复数小于7个，则直接显示完    if (datas.getFloorNum() < 7) {        for (Iterator<? extends Commentable> iterator = datas.iterator(); iterator                .hasNext(); ) {            View view = factory.buildSubFloor(iterator.next(), this);            addView(view);        }    } else {    // 如果评论回复数很多，则显示一个“显示隐藏楼层”的按钮        View view;        view = factory.buildSubFloor(datas.get(0), this);        addView(view);        view = factory.buildSubFloor(datas.get(1), this);        addView(view);        // 可以点击显示更多的楼层        view = factory.buildSubHideFloor(datas.get(2), this);        view.setOnClickListener(new OnClickListener() {            @Override            public void onClick(View v) {                TextView hide_text = (TextView) v                        .findViewById(R.id.hide_text);                hide_text.setCompoundDrawablesWithIntrinsicBounds(0, 0, 0,                        0);                v.findViewById(R.id.hide_pb).setVisibility(View.VISIBLE);                removeAllViews();                for (Iterator<? extends Commentable> iterator = datas.iterator(); iterator                        .hasNext(); ) {                    View view = factory.buildSubFloor(iterator.next(),                            FloorView.this);                    addView(view);                }                reLayoutChildren();            }        });        addView(view);        view = factory.buildSubFloor(datas.get(datas.size() - 1), this);        addView(view);    }    reLayoutChildren();}

init()这个方法就是排列出评论楼层的，datas是对评论的再次封装，里面包含了所有的回复内容，以及有多少个回复楼层。我们先对评论里面有多少个楼层进行判断，如果小于9个，那么就显示出全部的楼层，如果大于9个，那么就显示出前两个楼层和最后一个楼层，中间用”显示隐藏楼层”布局来替代。
其中的：

factory.buildSubFloor(datas, this);

是生成ShowFloor用的，和平常的LayoutInflater.inflate生成View没有什么两样。

factory.buildSubHideFloor(datas, this)

是生成HideFloor用的。
这样思路就很清晰了，要直接显示所有楼层的时候，就循环遍历有多少个楼层，然后给每一个楼层(ShowFloor)设置数据，并add到FloorView中。如果楼层太多，就显示部分楼层，中间的用HideFloor替代，再加入到FloorView中，然后给HideFloor设置一个点击监听，点击后先移除FloorView中的所有子View，然后显示所有的楼层

public void reLayoutChildren() {    int count = getChildCount();    for (int i = 0; i < count; i++) {        View view = getChildAt(i);        LayoutParams layout = new LayoutParams(LayoutParams.MATCH_PARENT,                LayoutParams.WRAP_CONTENT);        layout.gravity = Gravity.TOP | Gravity.CENTER_HORIZONTAL;        int margin = Math.min((count - i - 1), 4) * density;        layout.leftMargin = margin;        layout.rightMargin = margin;        if (i == count - 1) {            layout.topMargin = 0;        } else {            layout.topMargin = Math.min((count - i), 4) * density;        }        view.setLayoutParams(layout);    }}

reLayoutChildren()主要是对每一个楼层的位置进行一点小的改变，这样就可以呈现出楼层的效果了，不然就是竖着的一排。

@Overrideprotected void dispatchDraw(Canvas canvas) {    int i = getChildCount();    if (null != drawer && i > 0) {        for (int j = i - 1; j >= 0; j--) {            View view = getChildAt(j);            // drawable将在被绘制在canvas的哪个矩形区域内。            drawer.setBounds(view.getLeft(), view.getLeft(),                    view.getRight(), view.getBottom());            drawer.draw(canvas);        }    }    super.dispatchDraw(canvas);}

这个方法主要是给每一个楼层添加一个背景，就像一个框那样把楼层框起来。
最后再调用一下onLayout()和onMeasure()方法，对布局进行一下排版

点我查看完成代码