Найти в Дзене

№24. Разбираемся что такое темы и стили.

В этой небольшой статье затронем такую сторону годо как стилизация, и создание тем.

Тема — это по сути своей набор свойств для оформления элементов интерфейса. Кнопок, слайдеров, чекбоксов и так далее.

Давайте на примере кнопки разберемся со всем этим по порядку.
По умолчанию кнопка выглядит так:

Если мы заглянем в инспектор, то можно заметить разделы Theme и Custom Style.
Первая — это глобальное применение темы. Т.е. если есть тема, с уже готовыми настройками — мы можем просто применить её на кнопку. Тем самым нам не надо будет на каждой новой кнопке заново всё настраивать.

Вторая — дает возможность настроить стиль локально для конкретной кнопки.

Начнем со второй. Разворачиваем содержимое, ставим галочку возле Normal, и видим четыре разных типа стиля : StyleBoxEmpty, StyleBoxFlat, StyleBoxLine и StyleBoxTexture.
Первый стиль просто удаляет видимость элемента. Второй стиль позволяет настроить вид элемента через набор параметров. Третий это просто линия. Четвертый стиль позволяет использовать текстуру.

Выбираем из выпадающего списка New StyleBoxFlat

-2

нопка сразу поменяла свои цвет и стала плоской.

-3

Посмотрим на свойства стиля :

-4

Нам доступны основные настройки — цвет, бордюры, отступы, тень и прочее.

Теперь давайте вернемся к темам. Удалим кнопку, и создадим новую.
В закладке
Theme выбираем New Theme.
Нажимаем на кноку Theme

-5

После этого в нижней части откроется меню .

-6

Таким нехитрым образом мы можем видеть любой элемент интерфейса наглядно.
Справа вверху нажимаем на
Edit Theme, выбираем Add Class Item. В следующем меню ищем Button, и жмем на Add All.

После этого в инспекторе в закладке темы появится раздел Button.

-7

Теперь, развернув раздел Button мы можем настроить внешний вид кнопки, и сохранить тему как файл.

У меня получилась такая вот кнопка.

-8

Для сохранения темы жмем Theme > Save

-9

Ну а теперь применим нашу тему на новую кнопку.
Создаем кнопку, заходим в
Theme и жмем Load. Выбираем нашу тему которую мы сохранили, и видим как наша кнопка стала такой же как и предыдущая.

-10

В общем-то на этом можно остановиться. На изучение тех или иных настроек у вас не уйдет много времени. Всё достаточно понятно и не вызывает затруднений.

Удачи, и подписывайтесь на канал )