如何在android中使用flexboxlayoutmaanger创建类似instagram explore的布局？

Question

我正在尝试创建一个显示图像的回收视图，例如 instagram 选项卡。我已经检查了这个Implement Asymmetrical Grid Layout Manager Like Instagram Search 问题，但它似乎没有做这项工作。我尝试使用 gridlayoutmanager 但我无法使其工作。如何使用谷歌的 FlexboxLayoutManager 或自定义布局管理器重新创建它？希望你能回答。问候。

Answer 1

您可以使用 Nick Butcher 的 SpannedGridLayoutManager 作为您的 RecyclerView 的布局管理器。

这是实际效果，我用它来创建下面的示例布局。

Answer 2

这对我很有效SpannedGridLayoutManager。

  // Sample usage from your Activity/Fragment
  private fun setupSpannedGridLayout() {
        val manager = SpannedGridLayoutManager(
            object : GridSpanLookup {
                override fun getSpanInfo(position: Int): SpanInfo {
                    // Conditions for 2x2 items
                    return if (position % 6 == 0 || position % 6 == 4) {
                        SpanInfo(2, 2)
                    } else {
                        SpanInfo(1, 1)
                    }
                }
            },
            3,  // number of columns
            1f // how big is default item
        )
        recyclerView.layoutManager = manager
        adapter = GridAdapter(arrayListOf())
        recyclerView.adapter = adapter
    }

PS：我在这里使用 kotlin :)。

Answer 3

根据上述答案使用SpannedGridLayoutManager。 要显示类似于 instagram 的网格，请使用以下代码

var spannedGridLayoutManager = SpannedGridLayoutManager(
        orientation = SpannedGridLayoutManager.Orientation.VERTICAL,
        spans = 3
    )
spannedGridLayoutManager.itemOrderIsStable = true
spannedGridLayoutManager.spanSizeLookup =
        SpannedGridLayoutManager.SpanSizeLookup { position ->

            var x = 0
            if (position % 9 == 0) {
                x = position / 9
            }
            when {
                position == 1 || x % 2 == 1 || (position - 1) % 18 == 0 ->
                    SpanSize(2, 2)
                else ->
                    SpanSize(1, 1)
            }

        }
    recyclerView.layoutManager = spannedGridLayoutManager
    recyclerview.adapter = searchGridAdapter