Kotlin: Вывод товаров в Android Studio (Урок 5)

Создадим страницу для отображения товаров магазина. Начнём с создания новой Activity.

Создание Activity и XML-файла

Клик правой кнопкой мыши -> New -> Activity -> Empty Activity.
Назовём Activity ItemsActivity.
Создадим соответствующий XML-файл.
Нажмём Finish.

Навигация на новую Activity после авторизации

В HouseActivity, после успешной авторизации, добавим переход на ItemsActivity:

val intent = Intent(this, ItemsActivity::class.java)
startActivity(intent)

Страница отображения товаров (ItemsActivity)

Используем LinearLayout с вертикальной ориентацией вместо ConstraintLayout. Добавим жёлтый фон и TextView с текстом «Товары», уменьшив верхний отступ до 40 пикселей. Некоторые элементы дизайна скопируем из (предполагается, что это уже существующий файл с дизайном).

RecyclerView для вывода товаров

Добавим RecyclerView для вывода списка товаров. Он предоставляет больший функционал для настройки дизайна элементов по сравнению с ListView. Укажем ID itemsList, горизонтальные отступы по 20 пикселей и вертикальные по 30 пикселей:

<androidx.recyclerview.widget.RecyclerView
    android_id="@+id/itemsList"
    android_layout_width="match_parent"
    android_layout_height="wrap_content"
    android_layout_marginStart="20dp"
    android_layout_marginEnd="20dp"
    android_layout_marginTop="30dp"
    android_layout_marginBottom="30dp" />

Класс Item

Создадим класс Item для описания каждого товара:

data class Item(
    val id: Int,
    val image: String,
    val title: String,
    val shortDescription: String,
    val fullDescription: String,
    val price: Int
)

Добавление товаров в ItemsActivity

В ItemsActivity создадим список товаров (itemsList) на основе ArrayList<Item> и добавим тестовые данные:

val itemsList = arrayListOf(
    Item(1, "sofa.jpg", "Диван", "Удобный диван", "Описание дивана", 10000),
    Item(2, "light.jpg", "Лампа", "Красивая лампа", "Описание лампы", 2000),
    Item(3, "kitchen.jpg", "Кухня", "Современная кухня", "Описание кухни", 50000)
)

Добавим три изображения (sofa.jpg, light.jpg, kitchen.jpg) в папку drawable.

XML-файл для дизайна элемента списка (item_in_list.xml)

Создадим XML-файл (item_in_list.xml) для дизайна каждого элемента в RecyclerView. Используем LinearLayout с вертикальной ориентацией. Добавим ImageView, три TextView (для названия, краткого описания и цены) и кнопку «Посмотреть». Настроим стили, включая ScaleType="centerCrop" для ImageView с высотой 200 пикселей, отступы и цвета. Укажем ID для каждого элемента:

<LinearLayout ...>
    <ImageView
        android_id="@+id/item_list_image"
        ... />
    <TextView
        android_id="@+id/item_list_title"
        ... />
    <TextView
        android_id="@+id/item_list_description"
        ... />
    <TextView
        android_id="@+id/item_list_price"
        ... />
    <Button
        android_id="@+id/item_list_button"
        ... />
</LinearLayout>

Адаптер (ItemsAdapter)

Создадим класс адаптера ItemsAdapter, наследующий от RecyclerView.Adapter<ItemsAdapter.MyViewHolder>. Внутри создадим вложенный класс MyViewHolder, наследующий от RecyclerView.ViewHolder, для хранения ссылок на элементы дизайна. Реализуем методы onCreateViewHolder, getItemCount и onBindViewHolder. В onBindViewHolder подставляем данные из списка itemsList в элементы дизайна. Для изображения используем setImageResource, предварительно получив ID изображения по его названию.

class ItemsAdapter(private val items: List<Item>, private val context: Context) :
    RecyclerView.Adapter<ItemsAdapter.MyViewHolder>() {

    class MyViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
        val image: ImageView = itemView.findViewById(R.id.item_list_image)
        val title: TextView = itemView.findViewById(R.id.item_list_title)
        val description: TextView = itemView.findViewById(R.id.item_list_description)
        val price: TextView = itemView.findViewById(R.id.item_list_price)
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): MyViewHolder {
        val view = LayoutInflater.from(parent.context).inflate(R.layout.item_in_list, parent, false)
        return MyViewHolder(view)
    }

    override fun getItemCount(): Int = items.size

    override fun onBindViewHolder(holder: MyViewHolder, position: Int) {
        val item = items[position]
        holder.title.text = item.title
        holder.description.text = item.shortDescription
        holder.price.text = item.price.toString()

        val imageId = context.resources.getIdentifier(item.image, "drawable", context.packageName)
        holder.image.setImageResource(imageId)
    }
}

Установка адаптера в ItemsActivity

В ItemsActivity установим созданный адаптер для RecyclerView:

val recyclerView = findViewById<RecyclerView>(R.id.itemsList)
recyclerView.layoutManager = LinearLayoutManager(this)
recyclerView.adapter = ItemsAdapter(itemsList, this)

Добавление отступов между элементами

Добавим отступ снизу для каждого элемента списка в item_in_list.xml:

android:layout_marginBottom="20dp"

Создано приложение, отображающее список товаров из массива. Каждый товар представлен настраиваемым элементом с картинкой, названием, описанием и ценой. В будущем можно расширить функционал, например, реализовав навигацию по кнопке «Посмотреть».