Для реализации списка согласно в классическом Android-представлении (View-system), нам понадобится настроить RecyclerView с использованием GridLayoutManager, так как элементы будут расположены в две колонки.
Ниже представлен подробный разбор того, как создать эту подсистему «от и до».
Этап 1: Создание модели данных
Сначала определим, из чего состоит каждый элемент нашего списка.
data class ServiceItem(
val id: Int,
val iconRes: Int, // Ресурс иконки
val title: String, //заголовок
val description: String // Серый текст
)
Этап 2: Разметка элемента (item_service.xml)
Для создания карточки с закругленными углами и фоном, лучше всего использовать MaterialCardView.
<!-- Разметка одного элемента списка -->
<com.google.android.material.card.MaterialCardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8.dp"
app:cardCornerRadius="16.dp"
app:cardElevation="2.dp"
app:cardBackgroundColor="#F5F5F5"> <!-- Светло-серый фон карточки -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="16.dp">
<ImageView
android:id="@+id/itemIcon"
android:layout_width="48.dp"
android:layout_height="48.dp"
android:tint="#0056FF" /> <!-- Синий цвет иконок -->
<TextView
android:id="@+id/itemTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#0056FF"
android:textStyle="bold"
android:textSize="18.sp"
android:layout_marginTop="8.dp" />
<TextView
android:id="@+id/itemDescription"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#666666"
android:textSize="12.sp"
android:layout_marginTop="4.dp" />
</LinearLayout>
</com.google.android.material.card.MaterialCardView>
Этап 3: Создание Адаптера
Адаптер связывает данные с разметкой и обрабатывает нажатия.
class ServiceAdapter(
private val items: List<ServiceItem>,
private val onClick: (ServiceItem) -> Unit
) : RecyclerView.Adapter<ServiceAdapter.ServiceViewHolder>() {
class ServiceViewHolder(view: View) : RecyclerView.ViewHolder(view) {
val icon: ImageView = view.findViewById(R.id.itemIcon)
val title: TextView = view.findViewById(R.id.itemTitle)
val desc: TextView = view.findViewById(R.id.itemDescription)
}
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ServiceViewHolder {
val view = LayoutInflater.from(parent.context).inflate(R.layout.item_service, parent, false)
return ServiceViewHolder(view)
}
override fun onBindViewHolder(holder: ServiceViewHolder, position: Int) {
val item = items[position]
holder.title.text = item.title
holder.desc.text = item.description
holder.icon.setImageResource(item.iconRes)
// Обработка короткого нажатия
holder.itemView.setOnClickListener { onClick(item) }
}
override fun getItemCount() = items.size
}
```
Этап 4: Настройка в Activity
Здесь мы инициализируем список, устанавливаем сетку (2 колонки) и настраиваем всплывающее сообщение (Toast).
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
val recyclerView = findViewById<RecyclerView>(R.id.recyclerView)
val data = listOf(
ServiceItem(1, R.drawable.ic_care, "Customer Care", "Our customer care service line is available..."),
ServiceItem(2, R.drawable.ic_package, "Send a package", "Request for a driver to pick up..."),
ServiceItem(3, R.drawable.ic_wallet, "Fund your wallet", "To fund your wallet is as easy as ABC..."),
ServiceItem(4, R.drawable.ic_chats, "Chats", "Search for available rider within your area")
)
val adapter = ServiceAdapter(data) { item ->
// Вывод заголовка во всплывающем сообщении
Toast.makeText(this, item.title, Toast.LENGTH_SHORT).show()
}
recyclerView.layoutManager = GridLayoutManager(this, 2)
recyclerView.adapter = adapter
}
}