Android wording on some of the complex layout of the home page

Long time no update the article, was to free these days. About Home layout, as well as some of their own practices encountered in practice for everyone to share in the project. = V = !, I hope its essence to its dregs.

[Link corresponding to the blog writing about some of the Android home complex layout]

Renderings -v- !!

If you encounter this general total novice will certainly take the first nest of this RecycleView and NestedScrollView. Or a large RecycleView + RecycleView nesting. Doing so is not impossible, but less than satisfactory performance.

Thinking: So the final solution or a multi-layout RecycleView + + GridLayoutManager SpanSize get all the home layout, in short, is to avoid nesting

Take a look at how to do it.

Split type layout

See the above results, we can mainly be divided into several types

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
    }

After the division of the layout, we take a look at probably the realization of ideas

GridLayoutManager SpanSize（核心）

There is used a trick is GridLayoutManager inside setSpanSizeLookup method

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

He asked to return an int, what does that mean? Simply means that you take up a few cells item

The formula is like this

Item number of columns occupied = spanCount / getSpanSize return int value

So with this thing, to see the effects of plans, analyze the

Data planarization. Data processing

Know SpanSize desired allocation for each Item type after this step assembled data object. Combined into a set of layout you want.
Take the following layout, the server will probably return some of us are not the same piece of data expected

to do it is to split the title gridVideos content type and data type.

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)
              }
       } 

In this case the number of columns allocated for each type occupies with SpanSize. It is ok

Layout spacing

Nothing to say, is custom RecyclerView.ItemDecoration then offset slightly to adjust according 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;
                }
            }
        }

to sum up

Demo

More commonly used method is to write your own layout of this home page, if you think something is good practice to leave a message inform. We want to help you! ! Finish