Android 每行具有动态列数的 GridLayout
Android GridLayout with dynamic number of columns per row
我有不同宽度的卡片,我想创建一个网格布局,其中宽度 = 匹配父级(填充屏幕)和固定高度。
我想在 Grid 布局中设置卡片,以便列数根据适合该行的元素宽度而变化。
所以元素会水平排成一排,直到适合屏幕,然后转到下一行,当超过固定高度时垂直滚动。
我正在尝试使用网格布局,但我不知道它是否是合适的解决方案。
我用原生Android.
这里的图片应该是这样的:
谢谢。
您可以使用 Staggered GridView 库。例如。 https://github.com/etsy/AndroidStaggeredGrid
编辑:
在 build.gradle 中添加依赖项,在您的 xml 中您可以添加:
<com.etsy.android.grid.StaggeredGridView
android:id="@+id/itemgridfragment_gridview"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:column_count="2"
android:background="@color/white"
app:item_margin="@dimen/fragment_landingpage_8" />
</android.support.v4.widget.SwipeRefreshLayout>
您可以使用FlexboxLayoutManager
将以下依赖项添加到您的 build.gradle 文件中:
implementation 'com.google.android:flexbox:1.0.0'
示例代码
LAYOUT.XML
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<android.support.v7.widget.RecyclerView
android:id="@+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="250dp" />
</LinearLayout>
ACTIVTY CODE
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");
}
}
Adapter code
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_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="@+id/nilu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:background="@drawable/test"
android:padding="10dp"
android:textColor="#050505" />
</LinearLayout>
@drawable/test
<?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:width="1dip" android:color="#070fe9" />
</shape>
</item>
</selector>
RESULT
我有不同宽度的卡片,我想创建一个网格布局,其中宽度 = 匹配父级(填充屏幕)和固定高度。 我想在 Grid 布局中设置卡片,以便列数根据适合该行的元素宽度而变化。
所以元素会水平排成一排,直到适合屏幕,然后转到下一行,当超过固定高度时垂直滚动。
我正在尝试使用网格布局,但我不知道它是否是合适的解决方案。 我用原生Android.
这里的图片应该是这样的:
谢谢。
您可以使用 Staggered GridView 库。例如。 https://github.com/etsy/AndroidStaggeredGrid 编辑: 在 build.gradle 中添加依赖项,在您的 xml 中您可以添加:
<com.etsy.android.grid.StaggeredGridView
android:id="@+id/itemgridfragment_gridview"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:column_count="2"
android:background="@color/white"
app:item_margin="@dimen/fragment_landingpage_8" />
</android.support.v4.widget.SwipeRefreshLayout>
您可以使用FlexboxLayoutManager
将以下依赖项添加到您的 build.gradle 文件中:
implementation 'com.google.android:flexbox:1.0.0'
示例代码
LAYOUT.XML
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<android.support.v7.widget.RecyclerView
android:id="@+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="250dp" />
</LinearLayout>
ACTIVTY CODE
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");
}
}
Adapter code
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_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="@+id/nilu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:background="@drawable/test"
android:padding="10dp"
android:textColor="#050505" />
</LinearLayout>
@drawable/test
<?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:width="1dip" android:color="#070fe9" />
</shape>
</item>
</selector>
RESULT