ListView Animado

En este tutorial veremos que animar las filas de nuestra lista, osea como animar las View de nuestras ListView dinámicamente



Antes de empezar con este tutorial es necesario que vean la explicación de ListView con Imagenes porque voy a pasar muchas cosas de largo, no voy a explicar dos veces lo mismo porque lo que ya me vienen siguiendo en el blog se van a aburrir.

Lo nuevo respecto a ListView con Imagenes  
MainActivity.java
lista.setOnItemLongClickListener(new AdapterView.OnItemLongClickListener() {
      @Override
      public boolean onItemLongClick(AdapterView adapterView, View view, int i, long l) {
          //Toast.makeText(getApplicationContext(), "presiono LARGO " + i, Toast.LENGTH_SHORT).show();
          View container = lista.getChildAt(i);
          container.findViewById(R.id.list_row_nuevo).setVisibility(View.VISIBLE);
          return true;
      }
}); 

list_row.xml
android:animateLayoutChanges="true"

  <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Large Text"
        android:id="@+id/list_row_nuevo"
        android:layout_below="@+id/list_row_title"
        android:layout_toRightOf="@+id/thumbnail"
        android:visibility="gone" />

Hasta acá es todo el código nuevo respecto al tuto ListView con Imagenes



A continuación va el código completo

MainActivity.java
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ListView;
import android.widget.Toast;


public class MainActivity extends ActionBarActivity {

    ListViewAdapter adapter;

    String[] titulo = new String[]{
            "titulo1",
            "titulo2",
            "titulo3",
            "titulo4",
    };

    int[] imagenes = {
            R.drawable.icon01,
            R.drawable.icon02,
            R.drawable.icon01,
            R.drawable.icon02
    };

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

        final ListView lista = (ListView) findViewById(R.id.listView1);
        adapter = new ListViewAdapter(this, titulo, imagenes);
        lista.setAdapter(adapter);

        lista.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView adapterView, View view, int i, long l) {
                Toast.makeText(getApplicationContext(), "presiono " + i, Toast.LENGTH_SHORT).show();
            }
        });

        lista.setOnItemLongClickListener(new AdapterView.OnItemLongClickListener() {
            @Override
            public boolean onItemLongClick(AdapterView adapterView, View view, int i, long l) {
                //Toast.makeText(getApplicationContext(), "presiono LARGO " + i, Toast.LENGTH_SHORT).show();
                View container = lista.getChildAt(i);
                container.findViewById(R.id.list_row_nuevo).setVisibility(View.VISIBLE);
                return true;
            }
        });

    }
}

ListViewAdapter.java
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;

/**
 * Created by user on 30/11/2014.
 */
public class ListViewAdapter extends BaseAdapter { // Declare Variables
    Context context;
    String[] titulos;
    int[] imagenes;
    LayoutInflater inflater;

    public ListViewAdapter(Context context, String[] titulos, int[] imagenes) {
        this.context = context;
        this.titulos = titulos;
        this.imagenes = imagenes;
    }

    @Override
    public int getCount() {
        return titulos.length;
    }

    @Override
    public Object getItem(int position) {
        return null;
    }

    @Override
    public long getItemId(int position) {
        return 0;
    }

    public View getView(int position, View convertView, ViewGroup parent) {

        // Declare Variables
        TextView txtTitle;
        TextView txtNuevo;
        ImageView imgImg;

        //http://developer.android.com/intl/es/reference/android/view/LayoutInflater.html
        inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

        View itemView = inflater.inflate(R.layout.list_row, parent, false);

        // Locate the TextViews in listview_item.xml
        txtTitle = (TextView) itemView.findViewById(R.id.list_row_title);
        txtNuevo = (TextView) itemView.findViewById(R.id.list_row_nuevo);
        imgImg = (ImageView) itemView.findViewById(R.id.list_row_image);

        // Capture position and set to the TextViews
        txtTitle.setText(titulos[position]);
        imgImg.setImageResource(imagenes[position]);
        //txtNuevo.setVisibility(View.VISIBLE);

        return itemView;
    }
}

activity_my.xml
<RelativeLayout 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=".MyActivity">

    <ListView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:id="@+id/listView1"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentTop="true" />

</RelativeLayout>

list_row.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:animateLayoutChanges="true"
    android:padding="5dip" >

    <!--  listrow  -->
    <LinearLayout android:id="@+id/thumbnail"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="3dip"
        android:layout_alignParentLeft="true"
        android:layout_marginRight="5dip">

        <ImageView
            android:id="@+id/list_row_image"
            android:layout_width="30dip"
            android:layout_height="30dip"
            android:src="@drawable/ic_launcher"/>

    </LinearLayout>

    <!-- titulo de la categoria -->
    <TextView
        android:id="@+id/list_row_title"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="title"
        android:textColor="#040404"
        android:typeface="sans"
        android:textSize="18dp"
        android:layout_alignBottom="@+id/thumbnail"
        android:layout_toRightOf="@+id/thumbnail"
        android:layout_toEndOf="@+id/thumbnail" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Large Text"
        android:id="@+id/list_row_nuevo"
        android:layout_below="@+id/list_row_title"
        android:layout_toRightOf="@+id/thumbnail"
        android:visibility="gone" />

</RelativeLayout>


3 comentarios:

  1. Excelente tutorial.

    Aquí una posible solución para ocultar los items previamente desplegados:

    lista.setOnItemLongClickListener(new AdapterView.OnItemLongClickListener() {
    @Override
    public boolean onItemLongClick(AdapterView adapterView, View view, int i, long l) {

    //Se ocultan todos los detalles que esten deplegados
    try {
    for(int j = 0; j<lista.getCount(); j++){
    View containerAux = lista.getChildAt(j);
    if(containerAux != null) {
    lista.getChildAt(j).findViewById(R.id.list_row_nuevo).setVisibility(View.GONE);
    }
    }
    }catch (Exception e){
    Log.e("Error", "Error ocultando detalles del item: " + e.getMessage());
    }

    //Se despliega el detalle del item seleccionado
    view.findViewById(R.id.list_row_nuevo).setVisibility(View.VISIBLE);
    return true;
    }
    });

    ResponderEliminar
  2. Y en el caso de que quiera definir un texto diferente al hacer la animacion como hago

    ResponderEliminar