RecyclerView и CardView в Android

Добавлено: 25/02/2017 23:27 |  Обновлено: 26/02/2017 01:11 |  Добавил: nick |  Просмотры: 695 Комментарии: 0
Вводная часть
В этом материале вы узнаете, как создать прокручиваемый список карточек или элементов списка, путем добавления виджета CardView в списковое представление RecyclerView. Данный функционал появился с приходом концепции материального оформления (Material Design), начиная с API версии 21.
В этом материале вы узнаете, как создать прокручиваемый список карточек или элементов списка, путем добавления виджета CardView в списковое представление RecyclerView. Данный функционал появился с приходом концепции материального оформления (Material Design), начиная с API версии 21.

Готовый проект будет выглядеть следующим образом: Для работы CardView и RecyclerView нужно добавить библиотеки recyclerview-v7 и cardview-v7 как зависимости. Это можно сделать через меню Android Studio (File – Project Structure – app – Dependencies) или вручную, добавив в файл app/build.gradle следующие строки (для API 25):
compile 'com.android.support:cardview-v7:25.0.+'
compile 'com.android.support:recyclerview-v7:25.0.+'
Создадим новый проект в Android Studio. Код для материала был написан в этой IDE, но вы можете воспользоваться любой другой. Для этого примера я выбрал шаблон Scrolling Activity, который хорошо подходит для прокручиваемого содержимого и выполнен в соответствии концепции Material Design. После создания проекта приложение будет выглядеть следующим образом: Сразу скажу, что круглая кнопка в этом материале никак не задействована, но я ее оставил для будущего материала, посвященного работе с JSON, который будет основан на этом материале.

Еще раз о сути проекта. Мы создаем приложение, которое будет отображать прокручиваемый набор карточек. Для примера данные для карточек будут объектами класса Card с полями title и content. Поэтому создадим в папке с java-исходниками новый файл Card.java. Его содержимое будет следующим:
public class Card {
    String title;
    String content;

    Card(String title, String content) {
        this.title = title;
        this.content = content;
    }
}
Далее переходим к файлу ScrollingActivity.java, созданному автоматически, после выбора шаблона. Его содержимое (исключая методы: onCreateOptionsMenu() и onOptionsItemSelected()) будет следующим:
private List cards;
private RecyclerView rv;

@Override
protected void onCreate(Bundle savedInstanceState) {
    /* код по умолчанию */

    rv=(RecyclerView)findViewById(R.id.rv);

    LinearLayoutManager llm = new LinearLayoutManager(this);
    rv.setLayoutManager(llm);

    initializeData();
    initializeAdapter();
}

private void initializeData(){
    cards = new ArrayList<>();
    cards.add(new Card("Card 1", "Content 1"));
    cards.add(new Card("Card 2", "Content 2"));
    cards.add(new Card("Card 3", "Content 3"));
    cards.add(new Card("Card 4", "Content 4"));
    cards.add(new Card("Card 5", "Content 5"));
}

private void initializeAdapter(){
    RVAdapter adapter = new RVAdapter(cards);
    rv.setAdapter(adapter);
}
Переменной rv мы присваиваем ссылку на виджет RecyclerView, который нужно добавить в файл content_scrolling.xml, создаваемый автоматически после выбора шаблона. Разметка виджета следующая:
<android.support.v7.widget.RecyclerView
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    android:id="@+id/rv"
    >

</android.support.v7.widget.RecyclerView> 
Далее в файле идут следующие строки:
LinearLayoutManager llm = new LinearLayoutManager(this);
rv.setLayoutManager(llm);
Они отвечают за способ размещения представлений в RecyclerView. Все представления будут отображаться в виде списка.

В методе initializeAdapter() создаем адаптер RVAdapter и передаем ему набор карточек. Адаптер заполняет данными компоненты TextView (title и content) для всех карточек. Адаптер будет размещен в одноименном файле RVAdapter.java.

Разметку для карточки разместим в файле cardview.xml (в папке layout). Содержимое файла будет следующим:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/cv"
    android:layout_margin="5dp"
    card_view:cardCornerRadius="4dp"
    >

        <LinearLayout
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:padding="16dp">
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:id="@+id/title"
                android:textSize="30sp"
                android:text=" " />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:id="@+id/content"
                android:text=" " />
        </LinearLayout>

</android.support.v7.widget.CardView> 
С разметкой закончили, теперь создадим файл RVAdapter.java. Его содержимое будет следующим:
public class RVAdapter extends RecyclerView.Adapter {

    List cards;

    public static class CardViewHolder extends RecyclerView.ViewHolder {

        CardView cardView;

        CardViewHolder(CardView cv) {
            super(cv);
            cardView = cv;
        }
    }

    RVAdapter(List cards){
        this.cards = cards;
    }

    @Override
    public CardViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        CardView cv = (CardView) LayoutInflater.from(parent.getContext())
                .inflate(R.layout.cardview, parent, false);
        return new CardViewHolder(cv);
    }

    @Override
    public void onBindViewHolder(CardViewHolder cardViewHolder, int position) {
        CardView cardView = cardViewHolder.cardView;
        TextView title = (TextView)cardView.findViewById(R.id.title);
        title.setText(cards.get(position).title);
        TextView content = (TextView)cardView.findViewById(R.id.content);
        content.setText(cards.get(position).content);

    }

    @Override
    public int getItemCount() {
        return cards.size();
    }
}
Несколько слов о коде. В методе onCreateViewHolder() создаем новое представление (карточку). В методе onBindViewHolder() заполняем представление данными.

Комментариев нет

Оставьте свой комментарий