The Android Developer

ViewHolder - Mejorando la implementación

noreply@blogger.com (Anonymous) — Tue, 15 Sep 2015 17:05:00 -0700

Retomando el tema del ViewHolder, vuelvo a escribir con intenciones de explicar como mejorar la implementación de este patrón. Cuando trabajamos en proyectos de aplicaciones que son grandes, muchas veces se hace necesario el hecho de mostrar ciertos datos, y recaemos directamente en ListViews, además, muchas veces esos datos no son simples y requieren que realicemos nuestros propios Adapters para mostrarlos.

Para explicar la mejora de la implementación decidí utilizar el proyecto que realice en mi primer post.

Me oriento a explicar como facilitar además de la mejora de implementación también los tiempos de desarrollo. En mis proyectos, cuando requiero realizar múltiples Adapters mi estrategia se basa en crear una clase Adapter propia que va a ser la base para mis futuros custom Adapters.

Llegando a quedar de la siguiente forma:

/**
 * Base Adapter class for our projects. 
 * 
 * @author jonatan.salas
 */
public class BaseListAdapter extends BaseAdapter {
    protected Context mContext;
    protected List mItems;

    /**
     * Constructor with parameters. 
     *
     * @param context - the context where this adapter is going to be used. 
     * @param items - the items to be represented. 
     */
    public BaseListAdapter(@NonNull final Context context,
                           @NonNull final List items) {
        this.mContext = context;
        this.mItems = items;
    }

    @Override
    public int getCount() {
        return mItems.size();
    }

    @Override
    public Object getItem(int position) {
        return mItems.get(position);
    }

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

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

        return null;
    }

    /**
     * Class that represents a ViewHolder.
     * 
     * @author jonatan.salas
     */
    public static abstract class ViewHolder {

        /**
         * Constructor with parameters.
         * 
         * @param view - the parent view. 
         */
        protected ViewHolder(@NonNull final View view) {
            findViews(view);
        }

        /**
         * Method that finds the widgets we need in our custom item. 
         * 
         * @param view - the parent view. 
         */
        public abstract void findViews(@NonNull final View view);

        /**
         * Method that binds our widgets with the data. 
         * 
         * @param item - Object that has the data to show.  
         */
        public abstract void bindViews(@NonNull final Object item);
    }
}

Como pueden ver ya defino algunos métodos, y además, genero una clase abstracta que define un ViewHolder del cual todos mis Adapters van a extender.
En el primer post, luego de Aplicar el patrón ViewHolder mi adapter quedaba de la siguiente forma:

/**
 * Custom adapter class
 *
 * @author jonatan.salas
 */
public class MessageAdapter extends BaseAdapter {
    private Context mContext;
    private List mItems;

    /**
     * Constructor with parameters
     *
     * @param context - the context where the adapter is going to be used.
     * @param items - the list of items that the adapter must represent.
     */
    public MessageAdapter(@NonNull final Context context,
                          @NonNull final List items) {
        this.mContext = context;
        this.mItems = items;
    }

    public void setItems(List items) {
        this.mItems = items;
    }

    @Override
    public int getCount() {
        return mItems.size();
    }

    @Override
    public Object getItem(int position) {
        return mItems.get(position);
    }

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

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        final ViewHolder viewHolder;

        if(null != convertView) {
            viewHolder = (ViewHolder) convertView.getTag();
        } else {
            convertView = LayoutInflater
                    .from(mContext)
                    .inflate(R.layout.message_item, parent, false);

            viewHolder = new ViewHolder(convertView);
            convertView.setTag(viewHolder);
        }

        onBindViews(viewHolder, position);

        return convertView;
    }

    /**
     * Method that bind views with the data to be shown.
     *
     * @param viewHolder - the viewHolder used to set the data.
     * @param position - the position where of the data to get.
     */
    private void onBindViews(@NonNull final ViewHolder viewHolder, final int position) {
        final MessageContent content = (MessageContent) getItem(position);

        viewHolder.profile.setImageDrawable(content.getImage());
        viewHolder.name.setText(content.getName());
        viewHolder.message.setText(content.getMessage());
        viewHolder.hour.setText(content.getHour());
    }

    /**
     * ViewHolder class used for caching the views needed by our adapter.
     *
     * @author jonatan.salas
     */
    protected static class ViewHolder {
        private ImageView profile;
        private TextView  name;
        private TextView message;
        private TextView hour;

        /**
         * Constructor with parameters.
         *
         * @param view - The root view that contains all the views needed.
         */
        public ViewHolder(@NonNull final View view) {
            profile = (ImageView) view.findViewById(R.id.profile_picture);
            name = (TextView) view.findViewById(R.id.contact_name);
            message = (TextView) view.findViewById(R.id.message);
            hour = (TextView) view.findViewById(R.id.message_hour);
        }
    }
}

Ahora mi Adapter para mostrar los mensajes queda de la siguiente forma:

/**
 * Custom adapter class
 *
 * @author jonatan.salas
 */
public class MessageAdapter extends BaseListAdapter {

    /**
     * Constructor with parameters
     *
     * @param context - the context where the adapter is going to be used.
     * @param items - the list of items that the adapter must represent.
     */
    public MessageAdapter(@NonNull final Context context,
                          @NonNull final List items) {
        super(context, items);
    }

    @Override
    public View getView(int position, View view, ViewGroup parent) {
        final ViewHolder viewHolder;

        if(null != view) {
            viewHolder = (ViewHolder) view.getTag();
        } else {
            view = LayoutInflater
                    .from(mContext)
                    .inflate(R.layout.message_item, parent, false);

            viewHolder = ViewHolder.newInstance(view);
        }

        viewHolder.bindViews(getItem(position));

        return view;
    }

    /**
     * Implementation of ViewHolder
     *
     * @author jonatan.salas
     */
    protected static class ViewHolder extends BaseListAdapter.ViewHolder {
        private ImageView profile;
        private TextView  name;
        private TextView message;
        private TextView hour;

        /**
         * Constructor with parameters.
         *
         * @param view - the parent view.
         */
        protected ViewHolder(@NonNull final View view) {
            super(view);
        }

        @Override
        public void findViews(@NonNull final View view) {
            profile = (ImageView) view.findViewById(R.id.profile_picture);
            name = (TextView) view.findViewById(R.id.contact_name);
            message = (TextView) view.findViewById(R.id.message);
            hour = (TextView) view.findViewById(R.id.message_hour);
            view.setTag(this);
        }

        @Override
        public void bindViews(@NonNull final Object item) {
            final MessageContent content = (MessageContent) item;

            this.profile.setImageDrawable(content.getImage());
            this.name.setText(content.getName());
            this.message.setText(content.getMessage());
            this.hour.setText(content.getHour());
        }

        /**
         * Method that get instances of our ViewHolder class.
         *
         * @param view - the parent view
         * @return a new instance of ViewHolder
         */
        public static ViewHolder newInstance(@NonNull final View view) {
            return new ViewHolder(view);
        }
    }
}

Ahora la particularidad de este Adapter, es que deje recaer la responsabilidad del binding de las vistas sobre el ViewHolder. Además de haber reducido cierta porción de código que se volvía reiterativa.

Conclusión:

Cuando los proyectos que tenemos son grandes, es necesario generar una clase Base de la cual podamos extender. También está bueno tener una clase abstracta ViewHolder definida dado a que nos permite mantener el código prolijo en distintas implementaciones de un Adapter.

Si deseas aprender un poco más al respecto, he dejado el código del post en un repositorio en Github.

Puedes visualizarlo accediendo a este link.

¿Qué es el ViewHolder Pattern?

noreply@blogger.com (Anonymous) — Fri, 4 Sep 2015 15:46:00 -0700

Supongamos una situación en la que deseamos realizar una aplicación de mensajería, y la primer vista es una lista con los últimos mensajes, que presenta algunos datos como imagen de perfil, nombre, mensaje y hora de recepción.
Tenemos una clase que modela esto de la siguiente forma:

/**
 * POJO class representing a Message.
 */
public class MessageContent {
    private Drawable image;
    private String name;
    private String message;
    private String hour;

    /** Default Constructor **/
    public MessageContent() {}

    /**  Attribute setters && getters **/
}

Y en nuestro Adapter propio tenemos este método definido de la siguiente manera:

@Override
public View getView(int position, View view, ViewGroup parent) {
    final MessageContent content = (MessageContent) getItem(position);   

    if(null == view) {
        view = LayoutInflater
                .from(mContext)
                .inflate(R.layout.message_item, parent, false);
    }

    final ImageView profile = (ImageView) view.findViewById(R.id.profile_picture);
    final TextView name = (TextView) view.findViewById(R.id.contact_name); 
    final TextView message = (TextView) view.findViewById(R.id.message); 
    final TextView hour = (TextView) view.findViewById(R.id.message_hour); 

    profile.setImageDrawable(content.getImage());
    name.setText(content.getName());
    message.setText(content.getMessage());
    hour.setText(content.getHour());

    return view;
}

Aquí tenemos un problema grave que afecta el rendimiento de nuestro ListView. Y el hecho se da en las múltiples veces que el método findViewById va a ser invocado.
Este método de la clase View genera un árbol que se recorre de forma recursiva en búsqueda del id solicitado. Al finalizar la búsqueda nos devuelve una instancia de Object la cual casteamos al tipo de objeto que necesitamos.
En nuestro caso, nuestro item contiene 4 vistas, con lo cual el método findViewById se va a llamar cuatro veces. Además de eso, este método se ejecuta dentro de getView. GetView tiene la particularidad de que se va a llamar tantas veces como items haya en la lista o si hay items que necesitan ser actualizados. Esto hace que si la lista que tenemos sea muy grande, afecte el rendimiento del scroll del ListView, alterando la experiencia de los usuarios de nuestra app.
Para evitar que surja este problema, se ideo el patrón ViewHolder, que consiste básicamente en cachear las vistas que necesita nuestro item en una clase estática dentro de nuestra clase Adapter.
Retomando el ejemplo anterior, la aplicación de ViewHolder sería la siguiente:

/**
* ViewHolder class used for caching the views needed by our adapter.
*/
protected static class ViewHolder {
    private ImageView profile;
    private TextView  name;
    private TextView message;
    private TextView hour;

    /**
    * Constructor with parameters.
    *
    * @param view - The root view that contains all the views needed.
    */
    public ViewHolder(@NonNull final View view) {
        profile = (ImageView) view.findViewById(R.id.profile_picture);
        name = (TextView) view.findViewById(R.id.contact_name);
        message = (TextView) view.findViewById(R.id.message);
        hour = (TextView) view.findViewById(R.id.message_hour);
    }
}

Bien! Ahora que tenemos el ViewHolder definido es hora de utilizarlo, modificando getView para que nos quede de la siguiente forma:

@Override
public View getView(int position, View view, ViewGroup parent) {
    final MessageContent content = (MessageContent) getItem(position);
    final ViewHolder viewHolder;

    if(null != view) {
        viewHolder = (ViewHolder) view.getTag();
    } else {
        view = LayoutInflater
                .from(mContext)
                .inflate(R.layout.message_item, parent, false);

        viewHolder = new ViewHolder(view);
        convertView.setTag(viewHolder);
    }

    viewHolder.profile.setImageDrawable(content.getImage());
    viewHolder.name.setText(content.getName());
    viewHolder.message.setText(content.getMessage());
    viewHolder.hour.setText(content.getHour());

    return convertView;
}

Conclusión:

Como habrán visto el ViewHolder es un patrón bastante sencillo de implementar.

Es altamente recomendable utilizarlo en casos donde el layout de nuestro ítem contenga muchas vistas. Esto nos ayudará a mejorar la performance y la experiencia de nuestros usuarios.

Si deseas aprender un poco más al respecto, he dejado el código del post en un repositorio en Github.

Puedes visualizarlo accediendo a este link.