Стилі

Ми можемо налаштувати елемент за допомогою різних атрибутів, які задають висоту, ширину, колір фону, тексту тощо. Але якщо у нас кілька елементів використовують одні й ті самі налаштування, то ми можемо об'єднати ці налаштування в стилі.

Наприклад, нехай у нас є кілька елементів TextView:

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
 
    <TextView
        android:id="@+id/textView1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:textSize="28sp"
        android:textColor="#3f51b5"
        android:text="Android Lollipop"
 
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@+id/textView2"
        />
    <TextView
        android:id="@+id/textView2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:textSize="28sp"
        android:textColor="#3f51b5"
        android:text="Android Marshmallow"
 
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toTopOf="@+id/textView3"
        app:layout_constraintTop_toBottomOf="@+id/textView1"
        />
    <TextView
        android:id="@+id/textView3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:textSize="28sp"
        android:textColor="#3f51b5"
        android:text="Android Nougat"
 
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView2"
        />
 
</androidx.constraintlayout.widget.ConstraintLayout>

Усі ці TextView мають однаковий набір властивостей, і, наприклад, якщо ми захочемо змінити колір тексту, то доведеться змінювати його для кожного з трьох TextView. Цей підхід не є оптимальним. Більш оптимальний підхід — це використання стилів, які визначаються у проєкті в папці res/values.

Отже, додамо до проєкту в папку res/values новий елемент Value Resource File, який назвемо styles.xml:

Визначення стилю в файлі styles.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="TextViewStyle">
        <item name="android:layout_width">0dp</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:textColor">#3f51b5</item>
        <item name="android:textSize">28sp</item>
        <item name="android:gravity">center</item>
    </style>
</resources>

Тут визначено новий стиль TextViewStyle, який за допомогою елементів item задає значення для атрибутів TextView.

Стиль задається за допомогою елемента <style>. Атрибут name вказує на назву стилю, через яку потім можна посилатися на нього. Необов'язковий атрибут parent встановлює для цього стилю батьківський стиль, від якого дочірній стиль буде успадковувати всі свої характеристики.

За допомогою елементів item встановлюються конкретні властивості віджета, який приймає в якості значення атрибута name ім'я встановлюваної властивості.

Застосування стилю

Тепер застосуємо стиль, змінимо файл activity_main.xml:

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
 
    <TextView
        android:id="@+id/textView1"
        style="@style/TextViewStyle"
        android:text="Android Lollipop"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@+id/textView2"
        />
    <TextView
        android:id="@+id/textView2"
        style="@style/TextViewStyle"
        android:text="Android Marshmallow"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toTopOf="@+id/textView3"
        app:layout_constraintTop_toBottomOf="@+id/textView1"
        />
    <TextView
        android:id="@+id/textView3"
        style="@style/TextViewStyle"
        android:text="Android Nougat"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView2"
        />
 
</androidx.constraintlayout.widget.ConstraintLayout>

Використовуючи визначення style="@style/TextViewStyle", текстове поле пов'язується з визначенням стилю. Підсумковий результат буде таким самим, як і раніше, тільки коду стає менше. А якщо ми захочемо змінити якісь характеристики, то достатньо змінити потрібний елемент item

Edit this page on GitHub
Table of Contents