fbpx

Создание ячейки списка для отображения UI

В это уроке мы рассмотрим создание элемента для отображения данных

Создание стиля для ячейки списка

Создайте файл values/styles.xml и опишите стиль для ячейки элемента как показано ниже:

<!-- The default font for RecyclerView items is too small.
The margin is a simple delimiter between the words. -->
<style name="word_title">
   <item name="android:layout_width">match_parent</item>
   <item name="android:layout_marginBottom">8dp</item>
   <item name="android:paddingLeft">8dp</item>
   <item name="android:background">@android:color/holo_orange_light</item>
   <item name="android:textAppearance">@android:style/TextAppearance.Large</item>
</style>

Создание файла верстки для ячейки

Чтобы создать элемент списка, ячейку, добавьте следующий код в layout/recyclerview_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="wrap_content">

    <TextView
        android:id="@+id/textView"
        style="@style/word_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/holo_orange_light" />
</LinearLayout>

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

В файле layout/activity_main.xml, замените TextView списком RecyclerView и добавьте плавающую кнопку (FAB). Теперь вёрстка файла должна выглядеть так:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerview"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@android:color/darker_gray"
        tools:listitem="@layout/recyclerview_item"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp" />

</androidx.constraintlayout.widget.ConstraintLayout>

Добавление иконки в FAB

Давайте добавим иконку, которая будет помогать пользователю понять что она нужна для добавления. Для этого необходимо:

  1.  Выберите File > New > Vector Asset.
  2. Нажмите на иконку Android робот в поле Clip Art:

3. Найдите категорию “add” и выберите иконку ‘+’ . Нажмите OK.

4. После этого нажмите Next

5. Выберите путь main > drawable и нажмите кнопку Finish чтобы добавить изображение

6. Обновите файл layout/activity_main.xml, добавив в FAB только что добавленный в проект ресурс иконки:

<com.google.android.material.floatingactionbutton.FloatingActionButton
      android:id="@+id/fab"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintEnd_toEndOf="parent"
      android:src="@drawable/ic_add_black_24dp"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_margin="16dp" />

 

В следующем уроке мы добавим адаптер для RecyclerView