具有每行动态列数的 Android GridLayout

Posted

技术标签:

【中文标题】具有每行动态列数的 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 的回复适合我的需要。感谢您的帮助,顺便说一句,这是一个有趣的解决方案。

以上是关于具有每行动态列数的 Android GridLayout的主要内容,如果未能解决你的问题,请参考以下文章

具有动态列数的 QML TableView

如何在 NativeScript 中创建具有动态行数和列数的表?

如何在工作表中动态创建具有列数的数组,以删除多列中的重复项

构建具有不同列数的html表

具有不同列数的数据表

React/Gatsby:使用每行交替列数的 CSS 网格