[Android] Gridview con dos columnas e imágenes con cambio de tamaño automático



Answers

Otro enfoque simple con elementos incorporados modernos como PercentRelativeLayout ahora está disponible para los nuevos usuarios que tengan este problema. Gracias al equipo de Android por lanzar este artículo.

<android.support.percent.PercentRelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clickable="true"
app:layout_widthPercent="50%">

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/picture"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop" />

    <TextView
        android:id="@+id/text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:background="#55000000"
        android:paddingBottom="15dp"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:paddingTop="15dp"
        android:textColor="@android:color/white" />

</FrameLayout>

y para un mejor rendimiento puedes usar algunas cosas como el cargador de imágenes picasso que te ayuda a llenar el ancho completo de cada imagen de los padres. por ejemplo, en su adaptador debe usar esto:

int width= context.getResources().getDisplayMetrics().widthPixels;
    com.squareup.picasso.Picasso
            .with(context)
            .load("some url")
            .centerCrop().resize(width/2,width/2)
            .error(R.drawable.placeholder)
            .placeholder(R.drawable.placeholder)
            .into(item.drawableId);

ahora ya no necesitas clases CustomImageView.

PD: recomiendo usar ImageView en lugar de Type Int en la clase Item.

espero que esto ayude..

Question

Estoy tratando de hacer una vista de cuadrícula con dos columnas. Me refiero a dos fotos por fila, una al lado de la otra, al igual que esta imagen.

Pero mis imágenes tienen espacios entre ellas, debido a que no tienen el mismo tamaño. Esto es lo que obtendré.

como puede ver, la primera imagen oculta la leyenda que muestra el nombre del contacto y el número de teléfono. y las otras imágenes no se estiran correctamente.

Aquí está mi archivo GridView xml. Como puede ver, el columnWidth está establecido en 200dp . Me gustaría que fuera automático , por lo que las imágenes cambiarán de tamaño automáticamente para cada tamaño de pantalla.

<?xml version="1.0" encoding="utf-8"?>
<GridView 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/gridViewContacts"
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent"
    android:numColumns="2"
    android:columnWidth="200dp"
    android:stretchMode="columnWidth"    
    android:gravity="center" />

y aquí está el archivo xml del elemento, que representa cada elemento en sí.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <ImageView
        android:id="@+id/imageViewContactIcon"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitXY" />

    <LinearLayout
        android:id="@+id/linearlayoutContactName"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:paddingLeft="5dp"
        android:paddingTop="5dp"
        android:paddingBottom="5dp"
        android:background="#99000000"
        android:layout_alignBottom="@+id/imageViewContactIcon">

        <TextView
            android:id="@+id/textViewContactName"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#FFFFFF"
            android:textStyle="bold"
            android:textSize="15sp"
            android:text="Lorem Ipsum" />       

        <TextView
            android:id="@+id/textViewContactNumber"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#FFFFFF"
            android:layout_marginLeft="5dp"
            android:focusable="true"
            android:ellipsize="marquee"
            android:marqueeRepeatLimit="marquee_forever"
            android:textSize="10sp"
            android:text="123456789" />

    </LinearLayout>

</RelativeLayout>

Entonces, lo que quiero es mostrar dos imágenes por fila, y las imágenes cambian de tamaño automáticamente, sin importar el tamaño de la pantalla. ¿Qué estoy haciendo mal en mi diseño?

Gracias.




Links