如何在Android中使用FlexboxLayoutManager创建类似Instagram Explore的布局？

Question

我正在尝试创建一个类似Instagram标签的图片展示RecyclerView。我查看了这个实现不对称网格布局管理器，如Instagram搜索问题，但它似乎不能正常工作。我尝试使用GridLayoutManger，但无法使其正常工作。如何使用Google的FlexboxLayoutManager或自定义布局管理器重新创建它？希望你能回答。谢谢。

- WebDiva

---

请检查这个库：https://github.com/felipecsl/AsymmetricGridView - Priyanka

这是另一个链接：https://blog.iamsuleiman.com/pinterest-masonry-layout-staggered-grid/ - Priyanka

谢谢。我会查一下并告诉你是否有效。 - WebDiva

我找不到如何使用第一个库来实现它，而且我认为用第二个库是不可能的。 - WebDiva

@WebDiva的第二个答案来自Priyanka，在2020年3月帮助了我创建这个。所以对我有效！ - SlothCoding

你能帮我一下吗？赏金将在9小时后过期，我不想让它白白浪费。谢谢。 - WebDiva

Answer 1

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

以下是它的实际效果，我在下面的示例布局中使用了它。

- Thracian

---

是的，我用过它，但是里面有很多错误。例如，当只有一个项目时，它不会显示出来。而且当我在清除和添加新项目后调用notifydatasetchanged时，它会抛出数组越界异常。 - WebDiva

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 :).

- Ric17101

---

是的，我已经按照上面的回答尝试过这个方法了。试着将recyclerview中的项目数量设置为1，或者重新加载recyclerview并使用notifydatasetchanged方法。在前一种情况下，它不会显示出来，在后一种情况下会导致崩溃。 - WebDiva

Answer 3

如果你想尝试2022年最新的Instagram布局，可以尝试这个：

layoutManager.spanSizeLookup = IGLayoutManager.SpanSizeLookup { position ->

            // 0  1  2
            // s  s  b
            // 3  4  5  6  7  8  9  10 11
            // s  s  s  s  s  s  s  s  b
            // 12 13 14 15 16 17 18 19 20 21 22 23 24
            // s  s  s  s  s  s  s  s  s  s  s  s  b
            // 25 26 27 28 29 30 31 32 33
            // s  s  s  s  s  s  s  s  b
            // 34 35 36 37 38 39 40 41 42 43 44 45 46
            // s  s  s  s  s  s  s  s  s  s  s  s  b
            // 47 48 49 50 51 52 53 54 55
            // s  s  s  s  s  s  s  s  b
            // 56 57 58 59 60 61 62 63 64 65 66 67 68
            // s  s  s  s  s  s  s  s  s  s  s  s  b
            // 69 70 71 72 73 74 75 76 77
            // s  s  s  s  s  s  s  s  b
            // 78 79 80 81 82 83 84 85 86 87 88 89 90
            // s  s  s  s  s  s  s  s  s  s  s  s  b
            // 91 92 93 94 95 96 97 98 99
            // s  s  s  s  s  s  s  s  b
            // 100 101 102 103 104 105 106 107 108 109 110 111 112
            // s   s   s   s   s   s   s   s   s   s   s   s   b
            // 113 114 115 116 117 118 119 120 121
            // s   s   s   s   s   s   s   s   b

            if (position < 2) {
//                ILog.debug("???", "$position is small")
                bigItemFlag = 0
                SpanSize(1, 1)
            }
            else if (position == 2) {
//                ILog.debug("???", "$position is big")
                bigItemFlag = 11
                SpanSize(1, 2)
            }
            else if (position % 11 == 0 && position == bigItemFlag) {
                bigItemFlag += 13
//                ILog.debug("???", "$position is big, $position mod 11 is ${position % 11}")
                SpanSize(1, 2)
            }
            else if (position % 11 == 2 && position == bigItemFlag) {
                bigItemFlag += 9
//                ILog.debug("???", "$position is big, $position mod 11 is ${position % 11}")
                SpanSize(1, 2)
            }
            else {
//                ILog.debug("???", "$position is small")
                SpanSize(1, 1)
            }
        }

- Ho Seok

Answer 4

根据上面的答案，使用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
    

- AbS