RecyclerView і CardView. Нові віджети Android L

Як відомо, у червні проходила чергова конференція Google I/O, в ході якої було коротко розказано про двох нових віджети. І оскільки на хабре про ці віджети поки нічого не написано, я вирішив написати цю статтю з простенької демонстрацією.

Демо додаток доступний на гітхабі посилання.

Власне, під катом можна прочитати пару слів про RecyclerView, CardView і про підключення відповідних бібліотек в Gradle. Також, можна подивитися коротеньке відео, яке демонструє стандартну анімацію операцій зі списком у RecyclerView.

RecyclerView

RecyclerView, по суті, є еволюцією одного з найнеобхідніших у Android-розробці віджетів — ListView. Власне, призначення в нього рівно те ж саме — відображати список елементів, але є нюанси:

1. Обов'язкове використання патерну ViewHolder. Якщо при використанні ListView можна було із-за відсутності досвіду використовувати адаптер, створює з нуля окреме view для кожного елемента списку, що при великому розмірі списку могло обернутися меншою чуйністю UI і використанням зайвої пам'яті, то при роботі з RecyclerView розробника насильно призводять до імплементації цього патерну. Подивимося, як це виглядає в коді адаптера для RecyclerView:

/**
* Клас адаптера успадковується від RecyclerView.Adapter із зазначенням класу, який буде зберігати посилання на віджети елемента списку, тобто класу, имплементирующего ViewHolder. У нашому випадку клас оголошено всередині класу адаптера.
*/
public class RecyclerViewAdapter extends RecyclerView.Adapter<RecyclerViewAdapter.ViewHolder> {

private List<Record> records;

public RecyclerViewAdapter(List<Record> records) {
this.records = records;
}

/**
* Створення нових View і ViewHolder елемента списку, які згодом можуть переиспользоваться.
*/
@Override
public ViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) {
View v = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.recyclerview_item, viewGroup, false);
return new ViewHolder(v);
}

/**
* Заповнення віджетів View даними з елемента списку з номером i
*/
@Override
public void onBindViewHolder(ViewHolder viewHolder, int i) {
Record record = records.get(i);
viewHolder.name.setText(record.getName());
}

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

/**
* Реалізація класу ViewHolder, зберігає посилання на віджети.
*/
class ViewHolder extends RecyclerView.ViewHolder {
private TextView name;
private ImageView icon;

public ViewHolder(View itemView) {
super(itemView);
name = (TextView) itemView.findViewById(R.id.recyclerViewItemName);
icon = (ImageView) itemView.findViewById(R.id.recyclerViewItemIcon);
}
}
}


2. LayoutManager. Для використання RecyclerView крім адаптера вам необхідно передати йому з допомогою методу setLayoutManager() об'єкт класу, що реалізує LayoutManager. Цей клас відповідає за роботу з адаптером, саме він вирішує, переиспользовать View або створити новий, і відповідно, саме він смикає методи onCreateViewHolder(), onBindViewHolder() і getItemCount() адаптера. Поки доступна тільки одна реалізація цього класу — LinearLayoutManager, для створення кастомного LayoutManager, необхідно унаследоваться від RecyclerView.LayoutManager.

3. Анімація операцій зі списком. Якщо ви дивилися презентацію дизайну Material, то могли помітити, що однією з основних його особливостей є плавність UI, яка досягається з допомогою повсюдного використання анімації. Напевно, при особливому бажанні можна додати анімацію і в ListView, мені поки не доводилося цим займатися, але в RecyclerView це робиться парою рядків коду:
— для об'єкта RecyclerView вказується клас, имплементирующий анімацію:

RecyclerView.ItemAnimator itemAnimator = new DefaultItemAnimator();
recyclerView.setItemAnimator(itemAnimator);

— при додаванні або видаленні елементу списку викликається метод адаптера notifyItemInserted(int position) або notifyItemRemoved(int position) відповідно.
При бажанні можна написати власну реалізацію анімації, унаследовавшись від RecyclerView.ItemAnimator.

Власне, і все про RecyclerView, на гітхабі я виклав простеньке додаток, яке демонструє, як можна використовувати цей віджет. Запустивши його, можна помилуватися на анімацію додавання/видалення елемента (а можна подивитися відео).





CardView

CardView — це віджет, имплементирующий такий елемент дизайну Material, як картка. По суті це контейнер, у якого можна задавати радіус скругленности кутів, колір картки і висоту по осі z.
Наприклад, ось такий код верстки:
<android.support.v7.widget.CardView
android:layout_width="200dp"
android:layout_height="200dp"
android:id="@+id/cardView"
card_view:cardCornerRadius="6dp"
card_view:cardBackgroundColor="#84ffff">

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">


<TextView
android:id="@+id/info_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Test CardView"
android:layout_centerInParent="true"
android:textSize="18sp"
android:textColor="#fff"/>
</RelativeLayout>
</android.support.v7.widget.CardView>

дасть такий результат:



Складання проекту, що використовує нові віджети
Для складання з допомогою Gradle потрібно додати в dependencies залежності:
compile 'com.android.support:cardview-v7:+'
compile 'com.android.support:recyclerview-v7:+'
Але ці бібліотеки автоматично змінюють minSdk нашої збірки на версію L, тому для нормальної роботи в AndroidManifest слід прописати параметр:

<uses-sdk tools:node="replace" />


Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.