Creando RecyclerView con CardView

En esta entrada vamos a ver el uso de los Recyclerview junto a cardview. Actualmente muy usados para cualquier programa que queramos hacer para dispositivos android.

Lo primero que tenemos que hacer, es dar soporte para poder utilizar dichos recuros, para ello, en el archivo build.gradle, tenemos que añadir las siguientes líneas:

dependencies {
...
compile 'com.android.support:cardview-v7:21.0.+'
compile 'com.android.support:recyclerview-v7:21.0.+'
}

Una vez que sincronizamos nuestro proyecto, en el layout del activity, tenemos que añadir el Recyclerview.

<android.support.v7.widget.RecyclerView
    android:id="@+id/my_recycler_view"
    android:scrollbars="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    />

Una vez agregado en tu layout, obtén un identificador para el objeto, conéctalo a un administrador y adjunta un adaptador para los datos que se van a mostrar:

public class MyActivity extends Activity {
    private RecyclerView mRecyclerView;
    private RecyclerView.Adapter mAdapter;
    private RecyclerView.LayoutManager mLayoutManager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.my_activity);
        mRecyclerView = (RecyclerView) findViewById(R.id.my_recycler_view);

        mRecyclerView.setHasFixedSize(true);
        mLayoutManager = new LinearLayoutManager(this);
        mRecyclerView.setLayoutManager(mLayoutManager);

        // Adaptador
        mAdapter = new MyAdapter(myDataset);
        mRecyclerView.setAdapter(mAdapter);
    }
    ...
}

Antes de crear el adaptador, vamos a crear la tarjeta que vamos a mostrar tantas veces haga falta en el recyclerview. Para ello creamos un nuevo layout, con el contenido que queremos mostrar, en nuestro caso, un solo TextView:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    ... >

    <android.support.v7.widget.CardView
        xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:id="@+id/card_view"
        android:layout_gravity="center"
        android:layout_width="200dp"
        android:layout_height="200dp"
        card_view:cardCornerRadius="4dp">

        <TextView
            android:id="@+id/info_text"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </android.support.v7.widget.CardView>
</LinearLayout>

Por último, creamos el adaptador, el cuál se encarga del manejo de los datos representados, para ello creamos una nueva clase con el contenido:

public class MyAdapter extends RecyclerView.Adapter<MyAdapter.ViewHolder> {
    private String[] mDataset;


    public static class ViewHolder extends RecyclerView.ViewHolder {
        // each data item is just a string in this case
        public TextView mTextView;

        public ViewHolder(TextView v) {
            super(v);

            mTextView = (TextView) v.findViewById(R.id.info_text);
        }
    }

    // Constructor, puedes crear varios según el tipo de contenido.
    public MyAdapter(String[] myDataset) {
        mDataset = myDataset;
    }

    @Override
    public MyAdapter.ViewHolder onCreateViewHolder(ViewGroup parent,
                                                   int viewType) {

        View v = LayoutInflater.from(parent.getContext())
                               .inflate(R.layout.my_text_view, parent, false);
        ViewHolder vh = new ViewHolder(v);
        return vh;
    }

    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        // - Se recupera el elemento del vector con position.
        holder.mTextView.setText(mDataset[position]);

    }

    @Override
    public int getItemCount() {
        return mDataset.length;
    }
}

Con esto ya tenemos nuestra app con un RecyclerView y CardView al estilo de Google Now.

Deja un comentario

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

A %d blogueros les gusta esto: