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

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.

enter image description here

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

enter image description here

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.

   

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

         

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.

Aquí hay un método relativamente fácil de hacer esto. Lanza un GridView en tu diseño, configura el modo de estiramiento para estirar el ancho de las columnas, establece el espaciado en 0 (o lo que quieras), y establece el número de columnas en 2:

res / layout / main.xml

     

Cree un ImageView personalizado que mantenga su relación de aspecto:

src / com / example / graphicstest / SquareImageView.java

 public class SquareImageView extends ImageView { public SquareImageView(Context context) { super(context); } public SquareImageView(Context context, AttributeSet attrs) { super(context, attrs); } public SquareImageView(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); setMeasuredDimension(getMeasuredWidth(), getMeasuredWidth()); //Snap to width } } 

Haz un diseño para un elemento de cuadrícula usando este SquareImageView y configura scaleType en centerCrop:

res / layout / grid_item.xml

      

Ahora haz algún tipo de adaptador para tu GridView :

src / com / example / graphicstest / MyAdapter.java

 private final class MyAdapter extends BaseAdapter { private final List mItems = new ArrayList(); private final LayoutInflater mInflater; public MyAdapter(Context context) { mInflater = LayoutInflater.from(context); mItems.add(new Item("Red", R.drawable.red)); mItems.add(new Item("Magenta", R.drawable.magenta)); mItems.add(new Item("Dark Gray", R.drawable.dark_gray)); mItems.add(new Item("Gray", R.drawable.gray)); mItems.add(new Item("Green", R.drawable.green)); mItems.add(new Item("Cyan", R.drawable.cyan)); } @Override public int getCount() { return mItems.size(); } @Override public Item getItem(int i) { return mItems.get(i); } @Override public long getItemId(int i) { return mItems.get(i).drawableId; } @Override public View getView(int i, View view, ViewGroup viewGroup) { View v = view; ImageView picture; TextView name; if (v == null) { v = mInflater.inflate(R.layout.grid_item, viewGroup, false); v.setTag(R.id.picture, v.findViewById(R.id.picture)); v.setTag(R.id.text, v.findViewById(R.id.text)); } picture = (ImageView) v.getTag(R.id.picture); name = (TextView) v.getTag(R.id.text); Item item = getItem(i); picture.setImageResource(item.drawableId); name.setText(item.name); return v; } private static class Item { public final String name; public final int drawableId; Item(String name, int drawableId) { this.name = name; this.drawableId = drawableId; } } } 

Configure ese adaptador a su GridView :

 @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); GridView gridView = (GridView)findViewById(R.id.gridview); gridView.setAdapter(new MyAdapter(this)); } 

Y disfruta los resultados:

Ejemplo GridView

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.

      

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..