小视频开发教程:实现短视频程序中二级评论列表折叠功能

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/yun_bao_2144899870/article/details/88739049

在小视频软件开发中,评论功能是必不可少的,分级清晰、适合阅读的评论列表更能引起用户阅读和发言的兴趣。在短视频软件的评论列表中,二级评论数量高于一级评论的情况时有发生,用户可对某条评论进行回复,也可查看某条评论的子评论。在很多小视频程序的设定中,查看子评论需要跳转新页面,这样的用户体验会比较差。
那么如何如何给小视频开发出独特的二级折叠评论列表,使用户在查看子评论时无需跳转页面,直接在原列表查看呢?本篇教程为此而写,希望能给大家带来一些帮助。以下是该功能机制的实现思路:
根据业务逻辑,我们先创建两个实体类,ParentNode(父评论)和ChildNode(子评论),这两个类都继承父类Node。ParentNode持有一个ChildNode的集合。ChildNode持有一个ParentNode的引用。服务端接口返回的评论列表是父评论的集合,而且每个父评论有包含多个子评论,这样就构成了二维的Node列表。
这样的数据结构有很多种方案可以实现,但是考虑到小视频程序的性能,理想的方案是使用RecyclerView进行展示。但是RecyclerView擅长展示一维的列表数据,所以在进行小视频开发时我们需要做一些特殊处理使之适应对二维数据的展示,这恰恰也是实现这个功能的难点所在。
将RecyclerView布局管理器设为LinearLayoutManager,采用线性布局。那么将二维列表展示在一维中,需要一个getItem方法,传入一个position,返回一个Node实体类,即要展示的数据。

private VideoCommentBean getItem(int position) {
    int index = 0;
    for (int i = 0, size = mList.size(); i < size; i++) {
        VideoCommentBean parentNode = mList.get(i);
        if (index == position) {
            return parentNode;
        }
        index++;
        List<VideoCommentBean> childList = mList.get(i).getChildList();
        if (childList != null) {
            for (int j = 0, childSize = childList.size(); j < childSize; j++) {
                if (position == index) {
                    return childList.get(j);
                }
                index++;
            }
        }
    }
    return null;
}

该方法使用双重for循环遍历二维列表,根据position找到了要展示的实体类。实现了二维到一维的转换。
小视频开发需要在Adapter中,需要展示两种ViewHolder,即父评论和子评论,它们加载不同的布局xml。在Adapter的getItemViewType方法中,根据position,调用getItem方法,获取到要展示的数据,判断数据类型,选择相应的ViewHolder。

@Override
public int getItemViewType(int position) {
    VideoCommentBean bean = getItem(position);
    if (bean != null && bean.isParentNode()) {
        return PARENT;
    }
    return CHILD;
}
@NonNull
@Override
public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
    if (viewType == PARENT) {
        return new ParentVh(mInflater.inflate(R.layout.item_video_comment_parent, parent, false));
    }
    return new ChildVh(mInflater.inflate(R.layout.item_video_comment_child, parent, false));
}

当展开子评论的时候,会请求接口,获取父评论下面的子评论,将返回的数据添加到父评论对象ParentNode的ChildList中,然后调用Adapter的notifyItemRangeInserted方法和notifyItemRangeChanged方法刷新列表,这样就可以实现列表的展开。当用户试图收起子评论时,把ParentNode的ChildList中的子评论删除,同样调用Adapter的notifyItemRemoved方法和notifyItemRangeChanged方法刷新列表即可。
以下是最终实现效果。
在这里插入图片描述
自从快手、抖音火了以后,短视频开发行业、小视频程序源码市场竞争激烈,只有不断的对产品进行优化升级,才能立于不败之地。更多与行业相关的资讯和分析会在以后逐渐放出,敬请期待,需要的朋友请关注我。

声明:文章为原创内容,转载请注明CSDN链接及作者

猜你喜欢

转载自blog.csdn.net/yun_bao_2144899870/article/details/88739049