miércoles, 30 de diciembre de 2015

Reemplazar su ListView con RecyclerView


Con mi nueva aplicación que he estado desarrollando con los nuevos elementos del material design de google. Va a ser un pequeño juego divertido y es perfecta para experimentar. He implementado una tabla de clasificación en la aplicación utilizando un ListView, pero luego pensé que podría sustituirlo por el RecyclerView . El RecyclerView sirve para manejar grandes conjuntos de datos de manera más eficiente que el ListView y ofrece grandes soluciones de personalización y de animación. Se centra en el reciclaje que hace que la adición y eliminación de productos más eficientes. Si la lista no es dinámica o no está poblada desde la nube entonces no hay razón para reemplazar su ListView existente con RecyclerView .

Me voy a centrar en el código e ignorar el hablar mucho porque yo mismo voy directo al punto en lugar de hacer una entrada del blog larga.

Mi ListView actualmente incluye tres TextViews y un ImageView. Así es como se construye:

Layout


List item layout


    

        

            

        

        
            
            
        

        

    

    



Code

Pon este código cuando termine de llenar sus matrices:
myadapter = new MyAdapter(getActivity(), arr_userid, arr_username, arr_photo, arr_level, arr_date);
lv.setAdapter(myadapter);

Esta es tu clase Adapter:


public class MyAdapter extends BaseAdapter
{
    public String title[];
    public String description[];
    public Activity context;
    ArrayList arr_userid = new ArrayList();
    ArrayList arr_username = new ArrayList();
    ArrayList arr_photo = new ArrayList();
    ArrayList arr_level = new ArrayList();
    ArrayList arr_date = new ArrayList();

    public LayoutInflater inflater;

    public MyAdapter(Context context, ArrayList arr_userid, ArrayList arr_username, ArrayList arr_photo, ArrayList arr_level, ArrayList arr_date) {
        super();
        this.arr_userid = arr_userid;
        this.arr_username = arr_username;
        this.arr_photo = arr_photo;
        this.arr_level = arr_level;
        this.arr_date = arr_date;
        this.inflater = (LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    }

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

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

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

    public class ViewHolder {
        TextView txtName, txtPoints, txtDate;
        ImageView ivUser;
        RelativeLayout row;
    }

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

        final ViewHolder holder;
        if(convertView==null)
        {
            holder = new ViewHolder();
            convertView = inflater.inflate(R.layout.leaderboard_row, null);

            holder.txtName = (TextView) convertView.findViewById(R.id.txtName);
            holder.txtPoints = (TextView) convertView.findViewById(R.id.txtPoints);
            holder.txtDate = (TextView) convertView.findViewById(R.id.txtDate);
            holder.ivUser = (ImageView) convertView.findViewById(R.id.ivUser);
            holder.row = (RelativeLayout) convertView.findViewById(R.id.lineItem);

            convertView.setTag(holder);
        }
        else
            holder=(ViewHolder)convertView.getTag();

        holder.txtName.setText(arr_username.get(position));
        holder.txtPoints.setText(arr_level.get(position) + " Levels");

        String year = arr_date.get(position).substring(0,4);
        String month = arr_date.get(position).substring(5,7);
        String day = arr_date.get(position).substring(8,10);

        holder.txtDate.setText(month + "." + day + "." + year);

        if (!arr_photo.get(position).equals("")) {
            Picasso.with(getActivity())
                    .load(arr_photo.get(position))
                    .into(holder.ivUser);
        } else {
            holder.ivUser.setImageDrawable(null);
        }

        return convertView;
    }
} 
Su aplicación ListView debería ser muy similar a la mía. Rellenar las matrices de alguna manera (en mi caso puedo descargar los datos desde la nube), y obligar a estos a la adaptador.
Aquí viene la parte divertida. Nuestra implementación RecyclerView es de aprox. 20 % diferente :)

Gradle

Agregue esto a su build.gradle:
compile 'com.android.support:recyclerview-v7:+'

Si usted tiene cualquier problema, reconstruir y limpiar el proyecto. No te olvides de descargar la biblioteca de soporte en el Administrador de SDK.

Layout


Definir el RecyclerView
rv = (RecyclerView)view.findViewById(R.id.rv);
rv.setHasFixedSize(true);
LinearLayoutManager llm = new LinearLayoutManager(getActivity());
rv.setLayoutManager(llm);

Utilice setHasFixedSize cuando se sabe que la anchura y la altura de la RecyclerView no cambiarán. Siempre que se insertan artículos, moviendo o eliminado el tamaño (anchura y altura) de RecyclerView podría cambiar. Los elementos de la lista también pueden tener anchura variable o la altura por defecto. Si su aplicación carece de estas operaciones, RecyclerView estará mejor optimizado como sabe el tamaño exacto de antemano sobre la base de su adaptador.
A diferencia de ListView , un RecyclerView necesita un LayoutManager para gestionar el posicionamiento de sus artículos y para detertime cuando es el momento de reciclar las vistas. Hay 3 tipos de la LayoutManager como LinearLayoutManager, GridLayoutManager y StaggeredGridLayoutManager. Ahora quedémonos con LinearLayoutManager.

Pon este código en el que termine de llenar sus matrices :
myadapter = new CustomAdapter(getActivity(), arr_userid, arr_username, arr_photo, arr_level, arr_date);
rv.setAdapter(myadapter);
Codigo
public class CustomAdapter extends RecyclerView.Adapter {

    ArrayList arr_userid = new ArrayList();
    ArrayList arr_username = new ArrayList();
    ArrayList arr_photo = new ArrayList();
    ArrayList arr_level = new ArrayList();
    ArrayList arr_date = new ArrayList();

    public LayoutInflater inflater;

    public CustomAdapter(Context context, ArrayList arr_userid, ArrayList arr_username, ArrayList arr_photo, ArrayList arr_level, ArrayList arr_date) {
        super();
        this.arr_userid = arr_userid;
        this.arr_username = arr_username;
        this.arr_photo = arr_photo;
        this.arr_level = arr_level;
        this.arr_date = arr_date;
        this.inflater = (LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    }

    public class ViewHolder extends RecyclerView.ViewHolder {
        public TextView txtName, txtPoints, txtDate;
        public ImageView ivUser;

        public ViewHolder(View v) {
            super(v);
            txtName = (TextView) v.findViewById(R.id.txtName);
            txtPoints = (TextView) v.findViewById(R.id.txtPoints);
            txtDate = (TextView) v.findViewById(R.id.txtDate);
            ivUser = (ImageView) v.findViewById(R.id.ivUser);
        }
    }

    public void add(int position, String item) {
        arr_userid.add(position, item);
        notifyItemInserted(position);
    }

    public void remove(String item) {
        int position = arr_userid.indexOf(item);
        arr_userid.remove(position);
        notifyItemRemoved(position);
    }

    public CustomAdapter(ArrayList myDataset) {
        arr_userid = myDataset;
    }

    @Override
    public CustomAdapter.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View v = LayoutInflater.from(parent.getContext()).inflate(R.layout.leaderboard_row, parent, false);
        ViewHolder vh = new ViewHolder(v);
        return vh;
    }

    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        final String name = arr_username.get(position);
        holder.txtName.setText(arr_username.get(position));
        holder.txtName.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                remove(name);
            }
        });

        holder.txtPoints.setText(arr_level.get(position) + " Levels");

        String year = arr_date.get(position).substring(0,4);
        String month = arr_date.get(position).substring(5,7);
        String day = arr_date.get(position).substring(8,10);
        holder.txtDate.setText(month + "." + day + "." + year);

        if (!arr_photo.get(position).equals("")) {
            Picasso.with(getActivity())
                    .load(arr_photo.get(position))
                    .into(holder.ivUser);
        } else {
            holder.ivUser.setImageDrawable(null);
        }
        
    }

    @Override
    public int getItemCount() {
        return arr_userid.size();
    }
}

No es gran cosa, Pero espero que puedan encontrar las similitudes en ambos métodos y reemplazar su ListView existente con RecyclerView.
La desventaja de RecyclerView es que la creación de un OnClickListener es complicado y la adición de una cabecera y el pie (especialmente una vista loadmore ) es aún más compleja . Voy a hacer otro tutorial sobre que tan pronto como encuentre la manera de hacer eso.

0 comentarios:

Publicar un comentario