Android ListFragment – Con imágenes y texto

Una de las tareas más importantes y comunes en la creación de aplicaciones móviles es el listado de elementos. Para listar elementos se puede utilizar un RecyclerView, un ListView o un ListFragment. Estas listas suelen contener un par de textos e imágenes. Por ejemplo, una lista de productos que contiene imágenes de productos a la izquierda, luego a la derecha el nombre del producto, la descripción y tal vez el precio.

Este es un tutorial de android ListFragment.Un ListFragment puede mostrar un ListView por defecto.Nuestro ListView va a ser uno personalizado que contenga tanto imágenes como texto.

Sección 1 : Clase MainActivity

• Simplemente establece el diseño principal de la actividad, de lo contrario no tiene nada.

package com.tutorials.listfragmentimagestext;

import android.app.Activity;
import android.os.Bundle;

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }

}

Sección 2 : Clase PlayersFragment

• Esta clase derivará de la clase android.app.ListFragment.
• Contiene nuestro ListView personalizado con imágenes y texto.

package com.tutorials.listfragmentimagestext;

import java.util.ArrayList;
import java.util.HashMap;

import android.app.ListFragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.SimpleAdapter;
import android.widget.Toast;

public class PlayersFragment extends ListFragment{

  String[] players={"Ander Herera","Diego Costa","Juan Mata","David De Gea","Thibaut Courtouis","Van Persie","Oscar"};
  int[] images={R.drawable.herera,R.drawable.costa,R.drawable.mata,R.drawable.degea,R.drawable.thibaut,R.drawable.vanpersie,R.drawable.oscar};

  ArrayList<HashMap<String, String>> data=new ArrayList<HashMap<String,String>>();
  SimpleAdapter adapter;

  @Override
  public View onCreateView(LayoutInflater inflater, ViewGroup container,
      Bundle savedInstanceState) {
    // TODO Auto-generated method stub

     //MAP
    HashMap<String, String> map=new HashMap<String, String>();

    //FILL
    for(int i=0;i<players.length;i++)
    {
      map=new HashMap<String, String>();
      map.put("Player", players[i]);
      map.put("Image", Integer.toString(images[i]));

      data.add(map);
    }

    //KEYS IN MAP
    String[] from={"Player","Image"};

    //IDS OF VIEWS
    int[] to={R.id.nameTxt,R.id.imageView1};

    //ADAPTER
    adapter=new SimpleAdapter(getActivity(), data, R.layout.model, from, to);
    setListAdapter(adapter);

    return super.onCreateView(inflater, container, savedInstanceState);
  }

  @Override
  public void onStart() {
    // TODO Auto-generated method stub
    super.onStart();

    getListView().setOnItemClickListener(new OnItemClickListener() {

      @Override
      public void onItemClick(AdapterView<?> av, View v, int pos,
          long id) {
        // TODO Auto-generated method stub

        Toast.makeText(getActivity(), data.get(pos).get("Player"), Toast.LENGTH_SHORT).show();

      }
    });
  }

}

Sección 3 : Layouts

ActivityMain.xml

• Este es el layout de la actividad que se encargará de alojar nuestro fragmento.
• Añade la etiqueta Fragment en su interior.

<RelativeLayout

    android_layout_width="match_parent"
    android_layout_height="match_parent"
    android_paddingBottom="@dimen/activity_vertical_margin"
    android_paddingLeft="@dimen/activity_horizontal_margin"
    android_paddingRight="@dimen/activity_horizontal_margin"
    android_paddingTop="@dimen/activity_vertical_margin"
    tools_context=".MainActivity" >

    <fragment
        android_id="@+id/fragment1"
        android_name="com.tutorials.listfragmentimagestext.PlayersFragment"
        android_layout_width="wrap_content"
        android_layout_height="wrap_content"
        android_layout_alignParentTop="true"
        android_layout_centerHorizontal="true"
        android_layout_marginTop="81dp" />

    <TextView
        android_id="@+id/textView1"
        android_layout_width="wrap_content"
        android_layout_height="wrap_content"
        android_layout_alignParentTop="true"
        android_layout_centerHorizontal="true"
        android_layout_marginTop="38dp"
        android_text="Fragment Custom ListView"
        android_textAppearance="?android:attr/textAppearanceLarge" />

</RelativeLayout>

Model.xml

• Nuestro layout Fragment.
• Este layout será inflado a nuestro fragment.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    android_layout_width="match_parent"
    android_layout_height="match_parent" >

    <ImageView
        android_id="@+id/imageView1"
        android_layout_width="wrap_content"
        android_layout_height="wrap_content"
        android_layout_alignParentLeft="true"
        android_layout_alignParentTop="true"
        android_layout_marginLeft="30dp"
        android_layout_marginTop="28dp"
        android_src="@drawable/herera" />

    <TextView
        android_id="@+id/nameTxt"
        android_layout_width="wrap_content"
        android_layout_height="wrap_content"
        android_layout_alignParentRight="true"
        android_layout_alignTop="@+id/imageView1"
        android_layout_marginTop="19dp"
        android_padding="10dp"
        android_layout_toRightOf="@+id/imageView1"
        android_text="Name"
        android_textAppearance="?android:attr/textAppearanceMedium" />

</RelativeLayout>

Resultado

Esto es lo que se obtiene: