ホームページの複雑なレイアウトの一部のAndroid言葉遣い

ここに画像を挿入説明

長い時間がないの記事を更新していない、これらの日解放しました。ホームのレイアウトだけでなく、プロジェクト内の共有に皆のために実際に遭遇し、自分の実践の一部。= V =!、私はその残りかすにその本質を願っています。

[リンクはAndroidのホーム複雑なレイアウトのいくつかについてのブログの書き込みに対応しました]

レンダリングが-V- !!

レンダリング

あなたが発生した場合は、この一般的な総初心者は確かにこのRecycleViewとNestedScrollViewの最初の巣がかかります。それとも大RecycleView + RecycleViewネスティング。そうすることは不可能ではないが、あまり満足のいく性能より。

思考:最終溶液またはマルチレイアウトRecycleView + + GridLayoutManager SpanSize GETすべてのホームレイアウト、短期で、回避することですネスティングので、

それを行う方法を見てみましょう。

スプリットタイプのレイアウト

以上の結果を参照してください、私たちは、主にいくつかのタイプに分けることができます

ここに画像を挿入説明

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型を返すように求め、その平均値を何?単にあなたが少数の細胞アイテムを取ることを意味し

式は次のようです

列の項目数は= spanCount / getSpanSize戻りint型の値を占領しました

この事で、計画の効果を確認するためにだから、分析
ここに画像を挿入説明

データの平坦化。情報処理

このステップは、データオブジェクトを組み立てた後に知っ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です

レイアウトの間隔

何も言うことは、その後応じspanSizeを調整するために、わずかにオフセットカスタムRecyclerView.ItemDecorationではありません

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

概要

デモ

より一般的に使用される方法は、あなたが何かを知らせるメッセージを残すことをお勧めだと思う場合は、このホームページの独自のレイアウトを作成することです。私たちはあなたを助けたいです!完成

公開された13元の記事 ウォン称賛46 ビュー60000 +

おすすめ

転載: blog.csdn.net/a8688555/article/details/100887063