具有多个行和列的Recycler视图 - AutoFit,如Flow Layout [Android]

时间:2015-08-20 04:38:52

标签: android layout-manager android-recyclerview flowlayout gridlayoutmanager

我正在构建这样的布局:

enter image description here

我的第一个见解是使用带有适配器的RecyclerView,该适配器可以处理每个项目并使其布局膨胀。

到目前为止,还不太好。

到目前为止,我有这个布局:

enter image description here

我可以感觉到我几乎在那里,但是真的......我花了一个星期的时间考虑如何让它变得更好,或者就像用户界面建议一样。

我的一些尝试是

  1. 使用网格布局并根据列表中的项目数更改最大列数
  2. StaggeredGridLayoutManager听起来像是一个强大的候选者来修复它并让我开心,但不幸的是当我尝试使用它时我意识到我们需要在构造函数上传递一些spanCount(列)并且我找到了一些方法来解决这个问题限制改变每行的列数,但我不喜欢最终的结果,不像我在Foursquare等其他应用程序中看到的那样设置您的兴趣。
  3. 我检查了这个库Flow Layout,但我甚至没有开始使用它,因为我不想失去整个回收站的视图功能,我相信有一种方法可以使它工作! .....即使知道图书馆完全符合我的需要。
  4. 伙计们,我不是在这里寻找一些已经完成的代码安静或有人来完成我的工作。实际上我正在寻找隧道尽头的灯光。

3 个答案:

答案 0 :(得分:5)

您好,如果您不想使用 recyclerview ,还有另一个使用自定义库的示例,其行为类似于列表GitHubLibrary TagLayout

  • 示例代码

    mFlowLayout.setAdapter(new TagAdapter<String>(mVals)
       {
           @Override
           public View getView(FlowLayout parent, int position, String s)
           {
               TextView tv = (TextView) mInflater.inflate(R.layout.tv,
                       mFlowLayout, false);
               tv.setText(s);
               return tv;
           }
       });
    

使用以下代码,您可以预先设置所需的选择:

mAdapter.setSelectedList(1,3,5,7,8,9);

将显示如下结果: -

enter image description here

答案 1 :(得分:1)

使用新的Google物料设计库即可轻松完成此工作,该库包含一个名为芯片的组件。因此,您不必使用RecyclerView。

  

芯片代表小块中的复杂实体,例如   联系。它是一个圆形标签,由一个标签,一个可选按钮组成   芯片图标和一个可选的关闭图标。可以单击芯片或   如果可以检查则切换。

如何使用该组件:

1。导入库

implementation 'com.google.android.material:material:1.1.0'

2。使用下面的代码

 <com.google.android.material.chip.ChipGroup
      android:layout_width="match_parent"
      android:layout_height="wrap_content">

 <!-- Your items here -->

     <com.google.android.material.chip.Chip
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:text="Item 1"/>

     <com.google.android.material.chip.Chip
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:text="Item 2"/>

     <com.google.android.material.chip.Chip
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:text="Item 3"/>

 <!-- End -->

</com.google.android.material.chip.ChipGroup>

您可以在此处找到更多详细信息:Material components

答案 2 :(得分:0)

现在可能为时已晚,但您也可以使用Google的FlexBoxLayout

Demo