MyTetra Share
Делитесь знаниями!
Создание списков и карточек
22.04.2017
11:24
Раздел: Android - Ресурсы - developer.android.com - API Guides - Создание списков и карточек

Создание списков и карточек

PreviousNext

Содержание этого урока

  1. Создание списков
  2. Создание карточек
  3. Добавление зависимостей

См. также

Для создания в приложениях составных списков и карточек с помощью стилей Material Design можно использовать виджеты RecyclerView и CardView.

Создание списков


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

Класс RecyclerView упрощает отображение и обработку больших наборов данных с помощью следующих возможностей:

  • менеджеров макетов для размещения элементов;
  • стандартных анимаций для операций с общими элементами, таких как удаление или добавление элементов.

Также предоставляются гибкие возможности определения настраиваемых менеджеров макетов и анимации для виджетовRecyclerView.

Рисунок 1. Виджет RecyclerView.

Чтобы воспользоваться виджетом RecyclerView, необходимо определить адаптер и менеджер макетов. Для создания адаптера необходимо наследовать класс RecyclerView.Adapter. Характеристики реализации зависят от особенностей используемого набора данных и типа представлений. Дополнительные сведения представлены в примерах ниже.

Рисунок 2. Список с использованием RecyclerView.

Менеджер макетов размещает представления элемента внутриRecyclerView и определяет порядок повторного использования представлений элемента, которые перестают быть видимыми пользователю. Чтобы повторно использовать (или перезапустить) представление, менеджер макетов может запросить адаптер заменить содержимое представления другим элементом из набора данных. Такой перезапуск представлений позволяет повысить производительность за счет того, что исключается создание ненужных представлений и выполнение ресурсоемких операций поиска findViewById().

Виджет RecyclerView включает следующие встроенные менеджеры макетов:

  • LinearLayoutManager для отображения элементов в виде списка с вертикальной или горизонтальной прокруткой;
  • GridLayoutManager для отображения элементов в виде сетки;
  • StaggeredGridLayoutManager для отображения элементов в виде шахматной сетки.

Для создания менеджера макетов необходимо наследовать классRecyclerView.LayoutManager.

Анимация

По умолчанию анимация для добавления и удаления элементов включается в виджете RecyclerView. Для настройки такой анимации следует наследовать класс RecyclerView.ItemAnimator и воспользоваться методом RecyclerView.setItemAnimator() .

Примеры

В следующем примере демонстрируется, как включить в макет виджет RecyclerView:

<!-- A RecyclerView with some commonly used attributes -->
<android.support.v7.widget.RecyclerView
   
android:id="@+id/my_recycler_view"
   
android:scrollbars="vertical"
   
android:layout_width="match_parent"
   
android:layout_height="match_parent"/>

После добавления виджета RecyclerView подключите дескриптор объекта, подключите его к менеджеру макетов, а затем подключите адаптер к данным, которые будут отображаться:

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);

       
// use this setting to improve performance if you know that changes
       
// in content do not change the layout size of the RecyclerView
        mRecyclerView
.setHasFixedSize(true);

       
// use a linear layout manager
        mLayoutManager
= new LinearLayoutManager(this);
        mRecyclerView
.setLayoutManager(mLayoutManager);

       
// specify an adapter (see also next example)
        mAdapter
= new MyAdapter(myDataset);
        mRecyclerView
.setAdapter(mAdapter);
   
}
   
...
}

Адаптер обеспечивает доступ к элементам в наборе данных, создает представления для элементов и заменяет содержимое некоторых представлений новыми элементами данных, когда исходный элемент уже не отображается. Пример кода ниже является простой реализацией набора данных, который состоит из массива строк, выведенного на экран с помощью виджетовTextView:

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

   
// Provide a reference to the views for each data item
   
// Complex data items may need more than one view per item, and
   
// you provide access to all the views for a data item in a view holder
   
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
= v;
       
}
   
}

   
// Provide a suitable constructor (depends on the kind of dataset)
   
public MyAdapter(String[] myDataset) {
        mDataset
= myDataset;
   
}

   
// Create new views (invoked by the layout manager)
   
@Override
   
public MyAdapter.ViewHolder onCreateViewHolder(ViewGroup parent,
                                                   
int viewType) {
       
// create a new view
       
View v = LayoutInflater.from(parent.getContext())
                               
.inflate(R.layout.my_text_view, parent, false);
       
// set the view's size, margins, paddings and layout parameters
       
...
       
ViewHolder vh = new ViewHolder(v);
       
return vh;
   
}

   
// Replace the contents of a view (invoked by the layout manager)
   
@Override
   
public void onBindViewHolder(ViewHolder holder, int position) {
       
// - get element from your dataset at this position
       
// - replace the contents of the view with that element
        holder
.mTextView.setText(mDataset[position]);

   
}

   
// Return the size of your dataset (invoked by the layout manager)
   
@Override
   
public int getItemCount() {
       
return mDataset.length;
   
}
}

Рисунок 3. Примеры карточек.

Создание карточек


Виджет CardView является расширением класса FrameLayout и позволяет отображать информацию внутри карточек, которые будут выглядеть одинаково в рамках платформы. Виджеты CardView могут отбрасывать тени и иметь закругленные углы.

Чтобы создать карточку, отбрасывающую тень, воспользуйтесь атрибутомcard_view:cardElevation. В Android 5.0 (уровень API 21) и более поздних версий виджетCardView использует реальную высоту и динамические тени, а в более ранних версиях в виджете реализованы программные тени. Дополнительные сведения представлены на странице Обеспечение совместимости.

Для настройки внешнего вида виджета CardView используйте следующие свойства:

  • чтобы задать радиус скругления углов в макете, используйте атрибутcard_view:cardCornerRadius;
  • чтобы задать радиус скругления углов в программном коде, используйте методCardView.setRadius;
  • чтобы задать цвет фона карточки, используйте атрибут card_view:cardBackgroundColor.

В следующем примере показано, как включить виджет CardView в макет:

<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"
    ...
>
   
<!-- A CardView that contains a TextView -->
   
<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>

Дополнительные сведения представлены в справке по API для CardView.

Добавление зависимостей


Виджеты RecyclerView и CardView входят во вспомогательные библиотеки v7. Чтобы использовать эти виджеты в своем проекте, добавьте в модуль приложения следующие зависимости Gradle:

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

Так же в этом разделе:
 
MyTetra Share v.0.52
Яндекс индекс цитирования