Como crear listas horizontales con fragments

Hace algún tiempo escribí el post sobre como crear un listview horizontal, muchas apis han llovido y algunos de vosotros me habéis preguntado como ponerlo dentro de fragments o cambiar las imágenes.

Por ese motivo he actualizado el código del post con algunas novedades que os serán de utilidad.

HorizontalListView

La base de todo es usar el HorizontalListView que modificará el gravity del ListView a una vertical en lugar de horizontal. Es solo una clase y lo puedes añadir directamente en tu package, mejor en una subcarpeta como ui. Puedes ver el fichero original aquí

Layout XML

Creamos el layout para nuestro fragment fragment_main.xml y añadimos la vista horizontal.

<androidconnect.org.horizontallistview.ui.HorizontalListView         
 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:paddingLeft="@dimen/activity_horizontal_margin" 
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin" 
    android:paddingBottom="@dimen/activity_vertical_margin" 
    tools:context=".MainActivity$PlaceholderFragment" 
    android:id="@+id/listview" android:background="#ddd"    
 />

Una vez tenemos el layout del fragment con nuestro HorizontalListView creamos el view de los items. Siguiendo con la idea de mejorar la versión anterior, también pondremos texto y imágenes, pero esta vez las imágenes serán modificables a partir del adapter.

<LinearLayout     xmlns:android="http://schemas.android.com/apk/res/android" 
    android:orientation="vertical" 
    android:layout_width="wrap_content"     
    android:layout_height="wrap_content"
    android:background="#fff" >
        <ImageView  android:id="@+id/image"
            android:layout_width="150dip"         
            android:layout_height="150dip"
            android:scaleType="centerCrop" />
        <TextView android:id="@+id/title"         
            android:layout_width="fill_parent"         
            android:layout_height="wrap_content"         
            android:textColor="#000" 
            android:gravity="center_horizontal"/>
</LinearLayout>

Adapter

Como cualquier otro ListView necesitamos el adapter que injecte los items. Tenemos un modelo de clase muy básico y creamos el constructor del adapter con:

private List<ViewModel> dataObjects;
private Context ctx;

public HorizontalAdapter(Context context, List<ViewModel> dataObjects) {
this.dataObjects = dataObjects;
ctx = context;
}

Guardamos la lista de objetos que inflaremos en el getView. Como puedes ver es un adapter muy genérico. Lo único un poco diferente es que en lugar de ser un ArrayAdapter heredamos de BaseAdapter.

public View getView(int position, View convertView, ViewGroup parent) {
ViewModel model = dataObjects.get(position);
final View horizontal_view = LayoutInflater.from(ctx).inflate(R.layout.view_item, parent, false);
final TextView title = (TextView) horizontal_view.findViewById(R.id.title);
final ImageView image = (ImageView) horizontal_view.findViewById(R.id.image);

title.setText(model.getText());
image.setImageResource(model.getImage());

return horizontal_view;
}

Nada realmente especial y ya tenemos nuestro adapter.

Activity

Vamos ajuntar todas las partes anteriores.

MainActivity es un contenedor del fragment PlaceHolderFragment y este inflará la vista fragment_main y iniciamos el adapter.

//Generate data
listModels = new ArrayList<ViewModel>();
listModels.add( build() );
listModels.add( build() );

adapter = new HorizontalAdapter(getActivity() .getApplicationContext(), listModels);

rootView.setAdapter( adapter);
rootView.setOnItemClickListener( this );

Y ya tendremos nuestra vista horizontal con dos imágenes de gatos :).
Como punto final decir que el listener de la lista se implementa en el mismo fragment. Al pulsarlo genera aleatoriamente el tipo de gato y lo añade a la lista.

listModels.add( build() );
adapter.setDataObjects(listModels);
adapter.notifyDataSetChanged();

Toast.makeText(getActivity().getApplicationContext(), "Mas gatos", Toast.LENGTH_SHORT).show();

Todo el código del proyecto lo podéis encontrar en github: HorizontalListView
Puedes ver el post anterior aquí.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *