瀑布流布局是一种在网页或移动端页面中流行的布局方式，由于其独特的视觉效果和空间利用率，深受用户喜爱。在 Material Design 中，通过 RecyclerView 的灵活性和自定义功能，可以轻松实现瀑布流布局的效果。
实现原理
RecyclerView 是 Android 中常用的可复用列表控件，它将 ItemDecoration，LayoutManager 和 Adapter 三个组件分离开来，方便开发者自定义各种列表效果。在实现瀑布流布局时，我们需要自定义一个 GridLayoutManager，并在其中实现瀑布流的布局。
GridLayoutManager 的作用是将 RecyclerView 中的数据按照网格布局进行排列。默认情况下，每一列中所有的 item 的高度相同，每一行中所有的 item 的宽度相同。而实现瀑布流效果，则需要使得每一列的高度都不相同，这个通过重写 GridLayoutManager 的 onMeasure 方法，可以获取到所有 ItemView 的高度，在每一次测量时根据每一列已有 item 的高度和当前 item 的高度进行计算，从而得到比较均衡的瀑布流布局效果。
实现步骤
在项目的 build.gradle 文件下的 dependencies 中添加以下引用：
implementation 'com.android.support:recyclerview-v7:23.0.+'
自定义一个 SpanSizeLookup，实现每一个 item 的跨度大小，计算方式如下：
class MySpanSizeLookup(private val list: List<Int>) : GridLayoutManager.SpanSizeLookup() { override fun getSpanSize(position: Int): Int { return list[position] } }自定义 GridLayoutManager，通过重写他的 onMeasure 方法，计算每一个 ItemView 的大小和位置，代码如下：
-- -------------------- ---- ------- ----- --------------------------- --- -------- -------- ---------- ---- - -------------------------- ---------- - -------- --- ------------------- ---------------------- ------ ------------------- ---------- ---- ----------- ---- - --- --------- - --------------- -- ---------- -- -- - ------------------------- ------ ---------- ----------- ------ - --- ---- - ------------------------------ ------------------ ---------- ----------- --- --------- - ------------------ --- ---------- - ------------------- --- ----------------- - ----------------------------------- --- ----------- - --------- --- -------- - --------- - ----------- - -- ---------- - ----------- -- -- - ---- - --- ----- - - --- ------ - - --- -- -- - ----- --------- ---- ------------ - --- -------------- - - --- -- -- - ----- ----- - ------------ ----------- - --- ------------ - ------------------------------------------- -- ------------------------- --- ---------- - ----------------------- --- --------- - ---------------------- --- ----------- - ------------------------ --- ------------ - ------------------------- --- ---------- - --------- - ---------- - ----------- --- ----------- - ---------- - --------- - ------------ --- - - ----- - ---------- --- - - ------ - --------- ----------------------------------------------- -- -- - - ---------- - - ----------- -------------- - ------------------- -------------------------------- - ------------------- ------ -- ----------- - ----- -- --------- ------ - -------------- - ---------- - --------------------------------------- ------- - -在主程序中做以下操作：
recyclerView.layoutManager = MyGridLayoutManager(this, 3) recyclerView.adapter = MyAdapter(this, dataList) (recyclerView.layoutManager as MyGridLayoutManager).spanSizeLookup = MySpanSizeLookup(getSpanList(dataList))
实际应用中，我们还可以对 ItemDecoration、Adapter、ViewHolder 等做出更多的自定义操作，来达到更好的瀑布流布局效果。
示例代码
下面是一个简单完整的实例，可以参考其中的实现。
MainActivity.kt
-- -------------------- ---- -------
----- ------------ - ------------------- -
------- -------- --- ------------- ------------
------- -------- --- --------- -----------------
-------- --- ---------------------------- -------- -
----------------------------------
--------------------------------------
-- -------
-------- - -------------
--- -- -- - ----- ---- -
------------------ ----
-
------------ - --------------------------------
-------------------------- - ------------------------- --
------------------------------------------------
-------------------- - --------------- ---------
--------------------------- -- ----------------------------------- - ---------------------------------------
-
------- --- ----------------- -------------- --------- -
--- -------- - ------------------
--- -- -- ------------- -
-- -- - - -- -- -
---------------
---------------
- ---- -
---------------
-
-
------ --------
-
-MyGridLayoutManager.kt
-- -------------------- ---- -------
----- --------------------------- --- -------- -------- ---------- ---- - -------------------------- ---------- -
-------- --- ------------------- ---------------------- ------ ------------------- ---------- ---- ----------- ---- -
--- --------- - ---------------
-- ---------- -- -- -
------------------------- ------ ---------- -----------
------
-
--- ---- - ------------------------------
------------------ ---------- -----------
--- --------- - ------------------
--- ---------- - -------------------
--- ----------------- - -----------------------------------
--- ----------- - ---------
--- -------- - --------- - ----------- - -- ---------- - ----------- -- -- - ---- -
--- ----- - -
--- ------ - -
--- -- -- - ----- --------- ---- ------------ -
--- -------------- - -
--- -- -- - ----- ----- - ------------ ----------- -
--- ------------ - ------------------------------------------- -- -------------------------
--- ---------- - -----------------------
--- --------- - ----------------------
--- ----------- - ------------------------
--- ------------ - -------------------------
--- ---------- - --------- - ---------- - -----------
--- ----------- - ---------- - --------- - ------------
--- - - ----- - ----------
--- - - ------ - ---------
----------------------------------------------- -- -- - - ---------- - - -----------
-------------- - ------------------- -------------------------------- - -------------------
------ -- -----------
-
----- -- ---------
------ - -------------- - ----------
-
--------------------------------------- -------
-
-MySpanSizeLookup.kt
class MySpanSizeLookup(private val list: List<Int>) : GridLayoutManager.SpanSizeLookup() {
override fun getSpanSize(position: Int): Int {
return list[position]
}
}ItemDecoration.kt
-- -------------------- ---- -------
----- -------------- - ----------------------------- -
--------- ------ -
------- ----- --- ------- - --
-
-------- --- ----------------------- ----- ----- ----- ------- ------------- ------ ------------------- -
----------------------------- ----- ------- ------
------------ - -------
------------- - -------
-------------- - -------
-- ------------------------------------- - - -- -- -
------------- - ------- - -
- ---- -
------------ - ------- - -
-
-
-MyAdapter.kt
-- -------------------- ---- -------
----- ----------------- --- -------- -------- ------- --- ----- ------------- - ------------------------------------ -
-------- --- -------------------------- ---------- --------- ----- ------------ -
--- ---- - -------------------------------------------------------- ------- ------
------ ------------------
-
-------- --- --------------- --- -
------ ---------
-
-------- --- ------------------------ ------------- --------- ---- -
---------------------------
-
-
----- ---------------------- ----- - --------------------------------- -
--- ------- ------- -
---------------------------------------------------- - -
-
-activity_main.xml
-- -------------------- ---- -------
----- ------------- ------------------
--------------------------------------------------
----------------------------------------------------------
---------------------------------------------------
----------------------------------------------
-----------------------------------
------------------------------------
------------------------------
------------------------------------------
-------------------------------
--------------------------
---------------------------
------------------------------
-----------------------------------------------
-----------------------------------------
---------------------------------------------
----------------------------------------- --
----------------------------------------------------item_view.xml
-- -------------------- ---- -------
----- ------------- ------------------
-------------
----------------------------------------------------------
-----------------------------------
------------------------------------
----------------------------
---------------------------------------------------
------------------------------------
---------
---------------------------
-----------------------------------
------------------------------------
----------------------
----------------------------------------
----------------------- --
---------------总结
通过以上方法，我们可以轻松实现 RecyclerView 中的瀑布流布局。在实际使用时，还需根据实际情况调整参数，使其适应各种不同的需求。使用 RecyclerView 的好处就是，它不仅提供了一个灵活的列表控件，还为我们提供了自定义能力，使得我们能够更好地实现更为个性化的布局效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647af08a968c7c53b0689442