Создание ListView со скругленными углами в Android: подробное руководство

В этом уроке мы рассмотрим несколько методов создания ListView с закругленными углами в Android. Мы рассмотрим различные подходы с использованием макетов XML, пользовательских адаптеров и программного изменения внешнего вида ListView. Итак, давайте углубимся и придадим пользовательскому интерфейсу вашего приложения элегантный и современный вид!

Метод 1: макет XML (с использованием фонового рисования)
Чтобы создать ListView с закругленными углами с использованием XML, выполните следующие действия:

  1. Создайте новый XML-файл ресурсов для рисования в папке res/drawable вашего проекта (например, rounded_corners.xml).
  2. Откройте файл и определите фигуру как прямоугольник с закругленными углами, добавив следующий код:
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#FFFFFF" />
    <corners android:radius="8dp" />
</shape>
  1. В XML-файле макета оберните ListView родительским макетом (например, RelativeLayout) и установите фон родительского макета в рисуемый объект rounded_corners:
<RelativeLayout
    ...
    android:background="@drawable/rounded_corners">
    <ListView
        ...
        />
</RelativeLayout>

Метод 2: макет XML (с использованием CardView)
Другой метод — обернуть ListView элементом CardView, который автоматически обеспечивает закругленные углы и эффекты тени. Выполните следующие действия:

  1. Убедитесь, что в зависимости вашего проекта добавлена ​​библиотека CardView.
  2. В XML-файле макета оберните ListView с помощью CardView:
<androidx.cardview.widget.CardView
    ...
    app:cardCornerRadius="8dp">
    <ListView
        ...
        />
</androidx.cardview.widget.CardView>

Метод 3: пользовательский адаптер (с использованием ViewHolder)
Если вы используете пользовательский адаптер для ListView, вы можете изменить макет элемента списка, чтобы у него были закругленные углы. Выполните следующие действия:

  1. Создайте новый файл макета XML для элемента списка (например, list_item.xml) и примените рисуемый объект rounded_corners или CardView, как описано в методах 1 и 2.
  2. В методе getView()вашего пользовательского адаптера разверните макет элемента списка и заполните его представления.
  3. Реализовать шаблон ViewHolder, чтобы повысить производительность за счет повторного использования представлений:
class CustomAdapter(context: Context, data: List<Item>) : ArrayAdapter<Item>(context, 0, data) {
    private class ViewHolder {
        val listItem: View
        val title: TextView
        constructor(view: View) {
            listItem = view
            title = view.findViewById(R.id.title)
        }
    }
    override fun getView(position: Int, convertView: View?, parent: ViewGroup): View {
        var view = convertView
        val viewHolder: ViewHolder
        if (view == null) {
            view = LayoutInflater.from(context).inflate(R.layout.list_item, parent, false)
            viewHolder = ViewHolder(view)
            view.tag = viewHolder
        } else {
            viewHolder = view.tag as ViewHolder
        }
// Populate views with data
        val item = getItem(position)
        viewHolder.title.text = item.title
        return view
    }
}

Метод 4: программный подход (с использованием View Outline)
Если вы предпочитаете программный подход, вы можете использовать класс ViewOutlineProvider, чтобы задать закругленные углы в ListView. Выполните следующие действия:

  1. Внутри действия или фрагмента найдите ListView по его идентификатору.
  2. Установите ViewOutlineProviderв ListView и переопределите его метод getOutline(), чтобы определить форму:
val listView = findViewById<ListView>(R.id.listView)
listView.outlineProvider = object : ViewOutlineProvider() {
    override fun getOutline(view: View, outline: Outline) {
        outline.setRoundRect(0, 0, view.width, view.height, 8.dpToPx())
    }
}
listView.clipToOutline = true

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

Не забывайте экспериментировать с разными радиусами углов и цветами, чтобы добиться желаемой эстетики. Приятного кодирования!