Android 多视图布局设计 android 首页多布局

好久没有更新文章了，呈这几天有空把。关于自己在实际项目中遇到的首页布局，以及一些自己的做法分享给大家把。=v=!,望大家取其精华去其糟粕。

文章目录

• 效果图-v-!!
• 布局拆分类型
• GridLayoutManager SpanSize（核心）
• 数据平整化。处理数据
• 布局间距
• 总结

效果图-v-!!

大家如果遇到这总一般新手肯定会先采取这个RecycleView与NestedScrollView的嵌套。或者是一个大的RecycleView+RecycleView进行嵌套。这样做也不是不可以，只是性能方面不尽人意。

思路：所以最终的方案还是一个RecycleView+多布局+GridLayoutManager SpanSize 搞定所有首页布局，总之就是避免嵌套

先看看怎么做吧。

布局拆分类型

看到上面的效果，我们主要可以划分为几个类型

companion object {
        const val TITLE_TYPE = 1
        const val CONTENT_STYLE_1 = 2
        const val CONTENT_STYLE_2 = 3
        const val BANNER_TYPE = 4
        const val LIST_SQUARE_TYPE = 5
        const val LIST_RECTANGLE_TYPE = 6
        const val HEARD_TYPE = 7
    }

布局划分完后，我们来看看大概的实现思路

GridLayoutManager SpanSize（核心）

这里面就是用到一个小技巧，就是GridLayoutManager里面的setSpanSizeLookup方法

final GridLayoutManager gridManager = (GridLayoutManager)manager;
            gridManager.setSpanSizeLookup(new androidx.recyclerview.widget.GridLayoutManager.SpanSizeLookup() {
                public int getSpanSize(int position) {
                   return 1
                    }
                }
            });

要求返回一个int类型，什么意思呢？简单的说就是你一个item占用几格

公式是这样子的

item占用的列数 = spanCount / getSpanSize返回的int值

所以有了这个东西，看效果图，分析一下把

数据平整化。处理数据

知道了每个类型Item所需分配的SpanSize之后，这一步的目的在于拼装数据。组合成你想要的布局集合。

就拿下面的布局来说，服务器大概会返回一些与我们预期不一样的一段数据

要做的就是把gridVideos 拆分为标题类型和内容类型数据。

it.data.gridVideos.forEach {
       //构建标题
        val titleInfo = HomeListInfo()
        titleInfo.currType = HomeListInfo.TITLE_TYPE
        titleInfo.title = title
        list.add(titleInfo)
            for (index in it.videoTemplates!!.indices) {
                 val videoTemplatesBean = it.videoTemplates[index]
                 //构建内容模块
                 val contentInfo = HomeListInfo()
                 contentInfo.currType = HomeListInfo.CONTENT_STYLE_2
                 //当前在list位置
                 contentInfo.listIndex = index
                 contentInfo.videoTemplatesBean = videoTemplatesBean
                 list.add(contentInfo)
              }
       }

这样的话在配合SpanSize分配每个类型占用的列数。就ok

布局间距

没啥好说的，就是自定义RecyclerView.ItemDecoration 然后根据spanSize去调整偏移量咯

GridLayoutManager layoutManager = (GridLayoutManager) parent.getLayoutManager();
        int itemPosition = parent.getChildAdapterPosition(view);
        if (layoutManager != null) {
            int spanSize = layoutManager.getSpanSizeLookup().getSpanSize(itemPosition);
            //一列的时候
            if (spanSize == layoutManager.getSpanCount()) {
                if (layoutManager.getItemViewType(view) != HomeListInfo.HEARD_TYPE &&
                        layoutManager.getItemViewType(view) != HomeListInfo.LIST_SQUARE_TYPE &&
                        layoutManager.getItemViewType(view) != HomeListInfo.LIST_RECTANGLE_TYPE) {
                    outRect.left = headSpace;
                    outRect.right = footSpace;
                }
            }
            //三列的时候
            else if (spanSize == 2) {
                int infoListIndex = getListPosition(parent, view);
                //如果是在左边
                if (isFirstColumn(3, infoListIndex)) {
                    outRect.left = headSpace;
                    outRect.right = space;
                    //如果是在右边
                } else if (isLastColumn(parent, infoListIndex, 3)) {
                    outRect.left = space;
                    outRect.right = footSpace;
                } else {
                    //在中间
                    outRect.left = space;
                    outRect.right = space;
                }
            }
            //二列的时候怎么
            else if (spanSize == 3) {
                int infoListIndex = getListPosition(parent, view);
                //如果在左边
                if (isFirstColumn(2, infoListIndex)) {
                    outRect.left = headSpace;
                    outRect.right = space;
                } else {
                    //右边
                    outRect.left = space;
                    outRect.right = footSpace;
                }
            }
        }

总结

以上就是自己写这种首页布局的常用的方法，希望能够帮到大家！！完