CardView — пример использования

| 26.01.2015

Оформление пунктов списка ListView можно значительно улучшить, если использовать виджет CardView. Конечно же, он применим не во всех ситуациях, но отлично подходит при отображении какого-то пункта, состоящего из картинки, заголовка и небольшой вводной информации. Многие популярные приложения уже активно используют CardView.

CardView - пример использования

Мы создадим небольшое приложение с отображение списка (будем использовать RecyclerView), где отдельный пункт списка будет состоять из изображения и заголовка. Если вы еще не знакомы с RecyclerView, то настоятельно рекомендуется предварительно разобрать данный паттерн.

Создадим верстку экрана res/layout/activity_main.xml

<LinearLayout 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:orientation="vertical"
    tools:context=".MainActivity">

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


</LinearLayout>

Добавим адаптер RecyclerAdapter.java

package ru.androiddocs.recyclerview;

import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import java.util.ArrayList;


public class RecyclerAdapter extends RecyclerView.Adapter<RecyclerAdapter.ViewHolder> {

    private ArrayList<String> mDataset;

    public static class ViewHolder extends RecyclerView.ViewHolder {
        public TextView mTextView;

        public ViewHolder(View v) {
            super(v);
            mTextView = (TextView) v.findViewById(R.id.tv_recycler_item);
        }
    }

    public RecyclerAdapter(ArrayList<String> dataset) {
        mDataset = dataset;        
    }

    @Override
    public RecyclerAdapter.ViewHolder onCreateViewHolder(ViewGroup parent,
                                                   int viewType) {
        View v = LayoutInflater.from(parent.getContext())
                .inflate(R.layout.recycler_item, parent, false);

        ViewHolder vh = new ViewHolder(v);
        return vh;
    }

    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {

        holder.mTextView.setText(mDataset.get(position));

    }

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

}

Добавим верстку для отдельного пункта списка res/layout/recycler_item.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="10dp">

    <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="310dp"
        android:layout_height="220dp"
        android:layout_marginBottom="5dp"
        card_view:cardCornerRadius="5dp"
        card_view:contentPadding="10dp"
        card_view:cardElevation="5dp">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:src="@drawable/card_img"/>

            <TextView
                android:id="@+id/tv_recycler_item"
                android:layout_weight="1"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                />

            </LinearLayout>


    </android.support.v7.widget.CardView>


</LinearLayout>

Здесь мы использовали новый виджет android.support.v7.widget.CardView, внутрь которого поместили другие элементы (ImageView и TextView). В качестве изображения я добавил картинку в папку drawable с именем card_img, т.е. изображение будет одинаковым для всех элементов. На практике, оно должно быть уникальным и задаваться динамически в самом адаптере.

Для CardView мы прописали несколько атрибутов:

card_view:cardCornerRadius — закругление углов
card_view:contentPadding — внутренний отступ от границ элемента
card_view:cardElevation — тень

В общем-то, все просто.

Код для MainActivty.java (если добавляете вручную, не забывайте прописывать активити в файле манифеста):

package ru.androiddocs.recyclerview;

import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;

import java.util.ArrayList;

public class MainActivity extends ActionBarActivity {

    private RecyclerView mRecyclerView;
    
    private RecyclerView.LayoutManager mLayoutManager;
    private RecyclerAdapter mAdapter;

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

        ArrayList<String> myDataset = getDataSet();

        mRecyclerView = (RecyclerView) findViewById(R.id.my_recycler_view);

        mRecyclerView.setHasFixedSize(true);

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

        mAdapter = new RecyclerAdapter(myDataset);
        mRecyclerView.setAdapter(mAdapter);
    }

    private ArrayList<String> getDataSet() {

        ArrayList<String> mDataSet = new ArrayList();

        for (int i = 0; i < 100; i++) {
            mDataSet.add(i, "item" + i);
        }
        mDataSet.add(mDataSet.size(), "пункт" + mDataSet.size() + 1);
        return mDataSet;
    }

}

Для корректной сборки проекта в build.gradle нужно также добавить нужные зависимости (версии в вашем проекте могут отличаться):

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:appcompat-v7:20.+'
    compile 'com.android.support:cardview-v7:21.0.+'
    compile 'com.android.support:recyclerview-v7:21.0.+'
}

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*