tutorial - Cómo forzar a GridView para generar celdas cuadradas en Android

tutorial gridview android

Question

¿Cómo puedo obligar a un GridView de Android a generar celdas cuadradas (la altura de la celda es igual al ancho de la celda) GridView tiene 10 * 9 celdas y la aplicación debe admitir varias pantallas?

Utilicé un diseño lineal:

row_grid.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:padding="0dp" >
<ImageView
android:id="@+id/item_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:src="@drawable/ic_launcher" >
</ImageView>
</LinearLayout>

y GridView: activity_main.xml

<RelativeLayout 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:background="@drawable/katy" >
<GridView
android:id="@+id/gridView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:horizontalSpacing="0dp"
android:numColumns="4"
android:stretchMode="columnWidth"
android:verticalSpacing="0dp" >
</GridView>
</RelativeLayout>

Cada celda de GridView contiene una imagen que tiene el mismo ancho y alto. Las imágenes son más grandes que las células y deben estirarse para que quepan en las células.

Answer 1

Funciona muy bien, gracias! Una pequeña mejora que requerí sería siempre elegir el valor más pequeño, para evitar que la pantalla se salga:

@Override
public void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
if(heightMeasureSpec < widthMeasureSpec) {
super.onMeasure(heightMeasureSpec, heightMeasureSpec);
} else if(widthMeasureSpec < heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, widthMeasureSpec);
} else {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
}

Answer 2

Primero, querrá crear una clase de vista personalizada que pueda usar en lugar del LinearLayout predeterminado que está usando. Luego, desea anular la llamada onMeasure de la Vista y forzarla a ser cuadrada:

public class GridViewItem extends ImageView {
public GridViewItem(Context context) {
super(context);
}
public GridViewItem(Context context, AttributeSet attrs) {
super(context, attrs);
}
public GridViewItem(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
@Override
public void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, widthMeasureSpec); // This is the key that will make the height equivalent to its width
}
}

Luego puedes cambiar tu archivo row_grid.xml a:

<path.to.item.GridViewItem xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/item_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="@drawable/ic_launcher" >
</path.to.item.GridViewItem>

Solo asegúrese de cambiar "path.to.item" al paquete donde reside su clase GridViewItem.java.

También quité a tu padre de LinearLayout ya que no estaba haciendo nada por ti allí.

Editar:

También se cambió el tipo de escala de fitXY a centerCrop para que su imagen no se estire y mantenga su relación de aspecto. Y, siempre que sea una imagen cuadrada, nada debe ser recortado, independientemente.

Answer 3

Puedes anular tu diseño lineal

public class MyLinearLayout extends LinearLayout {
public MyLinearLayout(Context context) {
super(context);
}
public MyLinearLayout(Context context, AttributeSet attrs) {
super(context, attrs);
}
public MyLinearLayout(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
@Override
public void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, widthMeasureSpec); // This is the key that will make the height equivalent to its width
}
}

entonces utilízalo en el item_grid.xml

<?xml version="1.0" encoding="utf-8"?>
<com.example.MyLinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/item_grid"
android:layout_margin="2dp"
android:padding="3dp"
android:gravity="center">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Category Name"
android:textStyle="bold"
android:textColor="@color/colorPrimary"
android:id="@+id/tvCategoryName" />
</com.example.MyLinearLayout>

Answer 4

Solo asegúrate de que tus imágenes sean cuadradas. Y hacer el contenedor wrap_content.