gridview con imagen y texto android
Creé con éxito un gridview poblado con imágenes. Ahora, lo que quiero hacer es poner un texto debajo de la imagen.
Esta es la captura de pantalla de mi aplicación hasta ahora.
- GridView no actualiza sus vistas secundarias después de que el adaptador obtiene nuevos elementos
- Android: vista de cuadrícula con elementos de cuadrícula que se pueden hacer clic y vistas anidadas (botones, casillas de verificación)
- Android Hexagon Grid
- Cómo cargar imágenes de Internet en gridview de manera eficiente?
- Utilizar ListView o GridView dinámicamente en función del diseño utilizado por dispositivo
http://i203.photobucket.com/albums/aa266/paulocarabuena_bucket/screen-2.png
Aquí está mi método getView en mi clase imageadapter.
public View getView(int position, View convertView, ViewGroup parent) { ImageView imageView; if (convertView == null) { imageView = new ImageView(this.context); imageView.setLayoutParams(new GridView.LayoutParams(85, 85)); imageView.setScaleType(ImageView.ScaleType.CENTER_CROP); imageView.setPadding(8, 8, 8, 8); } else { imageView = (ImageView) convertView; } imageView.setImageResource(this.thumbs[position]); return imageView; } Aquí está el método onCreate de mi actividad principal
public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); this.launchFullScreen(); this.setContentView(R.layout.main); this.grids = (GridView) this.findViewById(R.id.elements); ImageAdapter adapter = new ImageAdapter(this); this.grids.setAdapter(adapter); this.grids.setOnItemClickListener(new OnItemClickListener() { public void onItemClick(AdapterView<?> parent, View v, int position, long id) { } }); }
Gracias por adelantado. 🙂
- Número de filas de una vista de cuadrícula en android
- Android: Deshabilitar resaltado en GridView
- Android gridview se estrella en Galaxy 3
- Gridview - Haga clic en la imagen para ver la imagen en Viewpager
- Pasar de una vista de lista a una vista de cuadrícula
- Cómo obtener la posición de desplazamiento de GridView?
- OnClickListener del primer elemento de GridView no funciona
- Ejemplo simple de red de Android con RecyclerView con GridLayoutManager (como el GridView antiguo)
Puede hacerlo utilizando un XML, que define la celda GridView :
Image.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" android:orientation="vertical" android:gravity="center_horizontal" > <ImageView android:id="@+id/image" android:layout_marginBottom = "10dp" android:src="@drawable/cell_sfondo" android:layout_width="wrap_content" android:layout_height="wrap_content"> </ImageView> <TextView android:id="@+id/title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal"/> </LinearLayout>
Entonces en su getView() :
if(convertView == null) { view = inflater.inflate(R.layout.image, null); } else view = convertView; ImageView image = (ImageView)view.findViewById(R.id.image); image.setImageResource(this.thumbs[position]);
En lugar de utilizar directamente la vista de imagen, debe inflar una vista como se muestra a continuación:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/widget44"android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical" android:layout_x="201px" android:layout_y="165px" android:gravity="center_horizontal"> <ImageView android:id="@+id/icon_image" android:layout_width="wrap_content" android:layout_height="wrap_content"> </ImageView> <TextView android:id="@+id/icon_text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="TextView" android:gravity="center_horizontal" android:textColorHighlight="#656565"> </TextView> </LinearLayout>
Y su adaptador debe ser como este:
public class ImageAdapter extends BaseAdapter{ Context mContext; public static final int ACTIVITY_CREATE = 10; public ImageAdapter(Context c){ mContext = c; } @Override public int getCount() { // TODO Auto-generated method stub return 5; } @Override public View getView(int position, View convertView, ViewGroup parent) { // TODO Auto-generated method stub View v; if(convertView==null){ LayoutInflater li = getLayoutInflater(); v = li.inflate(R.layout.icon, null); TextView tv = (TextView)v.findViewById(R.id.icon_text); tv.setText("Profile "+position); ImageView iv = (ImageView)v.findViewById(R.id.icon_image); iv.setImageResource(R.drawable.icon); } else { v = convertView; } return v; } }
Para más información consulte este post Custom Grid View
Paresh Mayani tiene un ejemplo muy bueno y sencillo. Esto me ayudó mucho.
Puede crear un diseño para su imagen y texto en cada celda del diseño de cuadrícula. Y sugiero inflar el diseño de un xml. Puedes intentar hacer algo como esto:
//Use a viewHolder to optimize the list ViewHolder holder = null; if (convertView == null) { //Create a new view holder to optimize the loading of elements in list holder = new ViewHolder(); convertView = LayoutInflater.from(this.context).inflate(R.layout.my_custom_xml,null) ; holder.imageView = (ImageView)convertView.findViewByID(R.id.my_image_view); holder.textView = (TextView)convertView.findViewByID(R.id.my_text_view); convertView.setTag(holder); } else { holder = (ViewHolder)convertView.getTag(); } //Bind data to the row //Set the position in holder holder.position = position; //Set the image for each row holder.imageView ... //Set the text for each row holder.textView.setText()... //And the viewholder looks like this private class ViewHolder{ //The position of this row in list private int position; //The image view for each row private ImageView imageView; //The textView for each row private TextView textView; }
Y ahora usted puede simplemente crear my_custom_xml que contienen la vista de texto y de imagen:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width= "fill_parent" android:layout_height = "wrap_content" android:orientation= "vertical"> <ImageView android:id = "@+id/my_image_view" android:layout_width = .... android:layout_height = ... /> <TextView android:id = "@+id/my_text_view" android:layout_width = .... android:layout_height = .... /> </LinearLayout>
En lugar de tomar la imagen dinámica, puede inflate layout teniendo textview bajo imageview en adaptador como:
if(convertView==null){ inflater=(LayoutInflater) mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE); holder=new Holder(); convertView=inflater.inflate(R.layout.gridinflater, null); holder.imageView=(ImageView) convertView.findViewById(R.id.img); holder.textView=(TextView) convertView.findViewById(R.id.txt); convertView.setTag(holder); } else { holder = (Holder) convertView.getTag(); }
donde gridInflater es layout teniendo textview bajo imageview en Relative Layout como padre.
public static class Holder { public ImageViewProgress imageView; public TextView textView; }