一起撸个朋友圈吧 （Step6）- 评论对齐（点击评论对齐）【下】

2019年5月25日 95次阅读 来源: 羽翼君

项目地址：https://github.com/razerdp/FriendCircle
《一起撸个朋友圈吧》 这是本文所处文集，所有更新都会在这个文集里面哦，欢迎关注

上篇链接：http://www.jianshu.com/p/8d24f9b7a63a
下篇链接：http://www.jianshu.com/p/4be8daaef3ca

因为最近忙于弄毕业设计，所以仿朋友圈这个项目暂时听了几天，今天花了一点时间把上一次的坑补充。
ps:因为是在太忙，服务器后台交互还没开始写，所以评论暂时来说是未能实现的哦，现在仅仅是UI上的操作

按照惯例，首先上图（图片大小：7M，为了大小问题，色彩调的比较低，所以看起来略渣）：

《一起撸个朋友圈吧 （Step6）- 评论对齐（点击评论对齐）【下】》 preview.gif

本篇实现的原理跟上篇是一致的，不过也许上一篇写的有点乱，比较难理解，所以本篇将会一边概括上篇的内容一边讲述如何实现本篇的内容。

Step 1：概括

在上一篇中，写了那么多东东，其实核心思想只有一个：计算偏移量。

listview.smoothscrolltopositionfromtop这个方法执行起来其实是分两部的：

  • 到达指定item，使item的顶部对齐listview的顶部
  • 到达后，smoothScroll一定距离，也就是第二个参数

而我们的目标是为了让item的底部对齐输入框的顶部，而smoothscrolltopositionfromtop第一步已经帮我们定位好，使item的顶部对齐listview的顶部，所以我们着手的问题只是如何计算出偏移量。

又因为输入法弹出后，实际上我们看见的内容区域是变小的，所以我们需要计算的是item的底部与输入框顶部的差值，而这个差值就是偏移量了。

同时因为getBottom得到的是相对于父类而言的参数，所以我们只好通过item的height来动态计算（因为smoothscrolltopositionfromtop第一步会使item顶部对齐listview顶部，所以item的底部就相当于它的高度）

以上就是上一篇的概括。

总结起来就是：

  • listview定位到指定的item
  • 得到listview的height，此时的height相当于bottom
  • 得到height与可见部分的差值，这个差值就是偏移量
  • listview偏移上述步骤得到的偏移量

Step 2：评论控件对齐输入框顶部的实现原理

通过上面的概括，其实不难得出，我们只要得到当前点击的评论的底部再计算与可见区域底部的差值就可以了。

实际上也正是如此，但是在实现的时候我们则需要稍微处理一下。

首先看看我们的动态的底部布局：

《一起撸个朋友圈吧 （Step6）- 评论对齐（点击评论对齐）【下】》 底部布局

可以看到，我们的底部布局是RelativeLayout嵌套着LinearLayout，这第一个LinearLayout是存放点赞和评论的。然后这个LinearLayout里面又嵌套着一个LinearLayout，这个LinearLayout则是村发那个评论的。

看起来层次嵌套挺多，过度绘制妥妥的了。

不过打开微信看了看，咱就安心了。

《一起撸个朋友圈吧 （Step6）- 评论对齐（点击评论对齐）【下】》 左：微信朋友圈；右：本项目

毕竟那啥，看起来过度绘制都差不多哈哈。

上面说过，我们最终目的都是得到当前点击的评论的底部距离可视区域的底部，同时由于我们当初的设计是将commentWidget抛了出来，所以理论上来说，我们拿到commentWidget.getBottom()就行了。

但其实不然，getTop/Bottom/Left/Right这几个方法得到的是相对于其父布局的参数，而非在屏幕上的，所以我们需要处理一下：

《一起撸个朋友圈吧 （Step6）- 评论对齐（点击评论对齐）【下】》

比如上图，我们需要拿到四楼相对于整个item的位置，普通的getBottom是不可行的，所以我们需要计算一下。

在布局分析那里，我们可以看到我们嵌套了好几层，在图中我也用不同的颜色标出来了范围。

回到问题，我们要拿到该评论控件相对于item的位置，则需要通过其父布局的top，而父布局又因为嵌套在其他父布局里面，所以我们需要得到最外层的布局的top。在图中表现为蓝色框框的顶部。

所以我们取得当前点击评论控件相对于item的位置方法如下：

  • 取得评论控件父布局（记为parent1）的top（图中绿色布局），记为top1
  • 取得包含着点赞和评论布局（记为parent2）的top（即parent1.getParent()，图中红色布局），记为top2
  • 取得整个bottom相对于item的top，即（parent2.getParent()），记为top3
  • 取得被点击的commentWidget的bottom（该bottom是相对于parent1的bottom）
  • 最后commentWidget的bottom相对于item来说，其y方向的值等于top1+top2+top3+bottom.

然后通过这个值减去可见区域的底部就得到了偏移值了

Step 3：代码实现

代码上十分简单，本次改动仅仅只有计算偏移值的地方：

首先补充上一篇的calculateListViewOffset方法

private int calculateListViewOffset(int currentDynamicPos, CommentWidget commentWidget, int keyBoardHeight) {
        int result;
        if (screenHeight == 0) screenHeight = UIHelper.getScreenPixHeight(this);
        if (statusBarHeight == 0) statusBarHeight = UIHelper.getStatusHeight(this);

        if (commentWidget == null) {
            // 评论控件为空，证明回复的是整个动态
            result = getOffsetOfDynamic(currentDynamicPos, keyBoardHeight);
        }
        else {
            // 评论控件不空，证明回复的是评论
            result = getOffsetOfComment(currentDynamicPos, commentWidget, keyBoardHeight);
        }
        return result;
    }

然后完善我们的getOffsetOfComment方法：

 // 得到评论的偏移量
    private int getOffsetOfComment(int currentDynamicPos, CommentWidget commentWidget, int keyBoardHeight) {
        int result=0;
        int contentHeight;
        contentHeight = screenHeight - keyBoardHeight - mInputLayout.getHeight();
        try {
            //得到评论控件所在父控件（即评论的父控件）
            final LinearLayout parent = (LinearLayout) commentWidget.getParent();
            //得到评论和点赞的父控件
            final LinearLayout praiseAndCommentParent = (LinearLayout) parent.getParent();
            //得到评论和点赞的父控件的父控件
            final RelativeLayout originParent = (RelativeLayout) praiseAndCommentParent.getParent();
            //得到评论和点赞的父控件的父控件的top
            final int originParentTop = originParent.getTop();
            //得到评论和点赞的父控件的top
            final int praiseAndCommentParentTop = praiseAndCommentParent.getTop();
            //得到评论所在父控件的top
            final int parentTop = parent.getTop();
            //得到当前评论控件的底部（相对于LinearLayout）
            final int currentCommentBottom = commentWidget.getBottom();
            //则当前评论控件相对于item来说，其底部=父类LinearLayout.top+当前控件的底部
            final int currentCommentOffset = originParentTop + praiseAndCommentParentTop + parentTop + currentCommentBottom;

            //则偏移量等于offset-contentheight
            result = currentCommentOffset - contentHeight;
        } catch (Exception e) {
            e.printStackTrace();
            Log.e("FriendCircleDemoAct","也许是空指针也许是cast错误哦");
        }
        return -result;
    }

相关代码都写了注释了，因为忽然发现，本项目的注释稍微少了点。

本篇就到此结束了。

到现在为止，我们的朋友圈实现了以下几个功能：

  • 展示数据
  • 点赞/取消点赞（包括点赞的弹窗、点赞时的动画）
  • 评论（点击动态的评论对齐/点击评论控件对齐）

理论上，一个初始的朋友圈功能就差不多了。

接下来我们将会实现朋友圈的图片查看，当然，包括动画-V-。

最后还是那句话，如果您有好的想法或者改进方法或者建议，在下非常欢迎在评论区留下您的脚印，当然如果能提交PR，那是最好不过了，如果您喜欢本项目，可否求个star-V-

ps:评论方面与服务器后台请求部分将不会再写文章了，完成后将会在别的文章一笔带过。
ps2:最近我重新弄了个阿里云，所以以前的服务器地址失效了哟，如果需要服务器地址，依然是简信我或者加我的QQ(164701463)

【END】

    原文作者：羽翼君
    原文地址: https://www.jianshu.com/p/513e2eccd7a8
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞