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

Posted 2023-04-15

【中文标题】如何在android中使用flexboxlayoutmaanger创建类似instagram explore的布局？

【英文标题】：How to create a layout like instagram explore with flexboxlayoutmaanger in android?

【发布时间】：2021-03-31 11:34:14

【问题描述】：

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

【问题讨论】：

检查这个库github.com/felipecsl/AsymmetricGridView

这是另一个blog.iamsuleiman.com/pinterest-masonry-layout-staggered-grid

谢谢。我会检查它并让你知道它是否有效

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

@WebDiva 来自 Priyanka 的第二个回答帮助我在 2020 年 3 月创建了这个。所以它对我有用！

【参考方案1】：

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

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

【讨论】：

是的，我用过，但是里面有很多错误。例如，当只有一项时，它不会显示。当我在清除和添加新项目后调用 notifydatasetchanged 时，它会抛出 arrayoutofbounds 异常。

【参考方案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 :)。

【讨论】：

是的，我已经尝试过上述答案中提到的这个。尝试将 recyclerview 中的项目数设置为 1 或使用 notifydatasetchanged 重新加载 recyclerview。它在前一种情况下不显示，在后一种情况下崩溃。

【参考方案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