具有每行动态列数的 Android GridLayout

Posted 2023-04-19

【中文标题】具有每行动态列数的 Android GridLayout

【英文标题】：Android GridLayout with dynamic number of columns per row

【发布时间】：2018-10-03 00:52:32

【问题描述】：

我有不同宽度的卡片，我想创建一个网格布局，其中宽度 = 匹配父级（填充屏幕）和固定高度。 我想在 Grid 布局中设置卡片，以便列数根据可以适合该行的元素的宽度而相应变化。

所以元素将被设置在水平行中，直到它们适合屏幕，然后转到下一行，当它们超过固定高度时垂直滚动。

我正在尝试使用网格布局，但我不知道它是否适合此解决方案。 我使用原生 Android。

这里的图片应该是这样的：

谢谢。

【问题讨论】：

看这里***.com/questions/35361905/…

【参考方案1】：

您可以使用FlexboxLayoutManager

将以下依赖项添加到您的 build.gradle 文件中：

implementation 'com.google.android:flexbox:1.0.0'

示例代码

布局.XML

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_
    android:layout_
    android:orientation="vertical"
    tools:context=".MainActivity">

    <android.support.v7.widget.RecyclerView
      android:id="@+id/recyclerView"
      android:layout_
      android:layout_ />



</LinearLayout>

活动代码

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.RecyclerView;

import com.google.android.flexbox.FlexDirection;
import com.google.android.flexbox.FlexboxLayoutManager;
import com.google.android.flexbox.JustifyContent;

import java.util.ArrayList;


public class MainActivity extends AppCompatActivity 

    RecyclerView recyclerView;
    ArrayList<String> arrayList = new ArrayList<>();
    DataAdapter adapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) 
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        recyclerView = findViewById(R.id.recyclerView);
        initArray();
        FlexboxLayoutManager layoutManager = new FlexboxLayoutManager(this);
        layoutManager.setFlexDirection(FlexDirection.COLUMN);
        layoutManager.setJustifyContent(JustifyContent.FLEX_END);
        recyclerView.setLayoutManager(layoutManager);
        adapter = new DataAdapter(this, arrayList);
        recyclerView.setAdapter(adapter);

    

    private void initArray() 

        arrayList.add("ioreeoe");
        arrayList.add("fghfgh");
        arrayList.add("ftyjyjhghgh");
        arrayList.add("jfgewrg");
        arrayList.add("rwrewr");
        arrayList.add("ghyjtyfghh");
        arrayList.add("gfhfgh");
        arrayList.add("gfhfht");
        arrayList.add("retretret");
        arrayList.add("retret");
        arrayList.add("ioreeoe");
        arrayList.add("fghfgh");
        arrayList.add("ftyjyjhghgh");
        arrayList.add("jfgewrg");
        arrayList.add("rwrewr");
        arrayList.add("ghyjtyfghh");
        arrayList.add("gfhfgh");
        arrayList.add("gfhfht");
        arrayList.add("retretret");
        arrayList.add("retret");
        arrayList.add("ioreeoe");
        arrayList.add("fghfgh");
        arrayList.add("ftyjyjhghgh");
        arrayList.add("jfgewrg");
        arrayList.add("rwrewr");
        arrayList.add("ghyjtyfghh");
        arrayList.add("gfhfgh");
        arrayList.add("gfhfht");
        arrayList.add("retretret");
        arrayList.add("retret");
    

适配器代码

import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import java.util.ArrayList;

/**
 * Created by nilesh on 3/4/18.
 */

public class DataAdapter extends RecyclerView.Adapter<DataAdapter.ViewHolder> 

    Context context;
    ArrayList<String> arrayList = new ArrayList<>();

    public DataAdapter(Context context, ArrayList<String> arrayList) 
        this.context = context;
        this.arrayList = arrayList;
    

    @Override
    public DataAdapter.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) 
        View view = LayoutInflater.from(context).inflate(R.layout.custom_layout, parent, false);
        return new ViewHolder(view);
    

    @Override
    public void onBindViewHolder(DataAdapter.ViewHolder holder, int position) 

        holder.title.setText(arrayList.get(position));
    

    @Override
    public int getItemCount() 
        return arrayList.size();
    

    public class ViewHolder extends RecyclerView.ViewHolder 
        TextView title;

        public ViewHolder(View itemView) 
            super(itemView);
            title = itemView.findViewById(R.id.nilu);
        
    

custom_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_
    android:layout_>

    <TextView
        android:id="@+id/nilu"
        android:layout_
        android:layout_
        android:layout_margin="5dp"
        android:background="@drawable/test"
        android:padding="10dp"
        android:textColor="#050505" />
</LinearLayout>

@drawable/测试

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle"  >
            <corners android:radius="30dp"/>
            <solid android:color="#d10e0e"/>
            <stroke android: android:color="#070fe9" />
        </shape>
    </item>
</selector>

结果

【讨论】：

谢谢！正是我需要的。我刚刚改了：layoutManager.setFlexDirection(FlexDirection.ROW); layoutManager.setJustifyContent(JustifyContent.FLEX_START);

如果回收站视图中的视图被更新，例如更改按钮颜色或文本字体，则布局会被剪切

与原始问题中的图片不同，这将 FlexDirection 设置为 COLUMN 而不是 ROW。将其设置为FlexDirection.ROW 将使其匹配原始请求。

@AskNilesh 不错。

【参考方案2】：

您可以使用交错的 GridView 库。例如。 https://github.com/etsy/AndroidStaggeredGrid 编辑： 在 build.gradle 和您的 xml 中添加依赖项，您可以添加：

 <com.etsy.android.grid.StaggeredGridView

        android:id="@+id/itemgridfragment_gridview"
        android:layout_
        android:layout_
        app:column_count="2"
        android:background="@color/white"
        app:item_margin="@dimen/fragment_landingpage_8" />

</android.support.v4.widget.SwipeRefreshLayout>

【讨论】：

谢谢。我试过你的解决方案，它很好，但不完全是我需要的。 @Nilesh Rathod 的回复适合我的需要。感谢您的帮助，顺便说一句，这是一个有趣的解决方案。