具有每行动态列数的 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的主要内容,如果未能解决你的问题,请参考以下文章