KivyMD 2.0.0 — путеводитель по Material Design для Kivy

Вступление

Всем доброго дня! В предыдущей статье Kawai.Focus - приложение для фокусировки внимания (часть 10) было сделано:

Реализован экран «Таймеры»;
Созданы кнопки: «Назад», «Удалить», «Новый таймер» и подключенен функционал к ним.

Сегодня я расскажу про библиотеку KivyMD 2.0.0 и установлю её в систему. Также я покажу, какие виджеты предлагает KivyMD 2.0.0, и запущу UI-примеры из папки examples.

Всё это нужно для того, чтобы сделать дизайн моего приложения красивым, удобным для пользователя и конкурентоспособным. Кроме того, он будет основан на концепции Material Design (MD).

Material Design (MD) — это концепция дизайна, разработанная Google, которая задаёт единый визуальный язык для приложений на разных платформах. Используя KivyMD 2.0.0, приложение по стилю будет напоминать интерфейсы приложений от Google.

Данная статья связана с циклом материалов про приложение Kawai.Focus, однако, поскольку она является путеводителем по UI-виджетам форка KivyMD 2.0.0, было решено опубликовать её в категории «База знаний».

Заваривайте чай, доставайте вкусняшки — “сегодня мы удобряем грядку Material Design”! 🍅

Библиотека KivyMD 2.0.0

Дизайн текущего прототипа подходит разве что для демонстрации функционала и не годится для полноценного приложения, которое могло бы быть конкурентным на рынке среди множества других. Одного лишь функционала недостаточно, чтобы привлечь пользователя или покупателя. Приложению нужен красивый внешний вид, а его интерфейс должен быть понятным и удобным.

Как я писал в предыдущей статье Kawai.Focus - приложение для фокусировки внимания (часть 10), стандартные возможности Kivy в плане дизайна слишком скудны. Кроме того, сам процесс вёрстки выглядит весьма неудобным и сложным по сравнению с HTML-вёрсткой, которую я, как бэкенд-разработчик, не очень люблю.

В стандартной веб-разработке вы можете работать в паре с веб-дизайнером и пользоваться удобным макетом в Figma, опираясь на его внешний вид и копируя CSS-стили. Если вы используете готовые блоки Bootstrap, то сразу видно, как они выглядят, и их легко встроить в веб-приложение или сайт.

Что же касается стандартных примеров элементов UI Kivy, то они выглядят слишком топорно. Например, серые прямоугольники-кнопки с синей подсветкой при нажатии. Это явно не те образцы дизайна, на которые я бы хотел опираться при разработке приложения. Лично на мой вкус даже готовые блоки Bootstrap выглядят гораздо лучше. Вёрстка в Kivy — это отдельный вид изощрений: в итоге выйдет интерфейс чуть менее угловатый, но всё равно далёкий от того, что хотелось бы показать

Я не хотел оставлять своё приложение в папке незавершённых прототипов, и поэтому мне нужно было создать ему красивый и удобный дизайн, соответствующий современным концепциям. Для этих целей была создана библиотека KivyMD, реализующая подходы Material Design (MD), разработанного компанией Google. Приложение, написанное на Python, будет выглядеть внешне как Android-приложение или очень близко к этому.

Однако библиотека KivyMD оказалась устаревшей и не обновлялась уже несколько лет. Я прекрасно понимал, что выбор библиотеки, код которой последний раз обновлялся 8 лет назад, — не лучший вариант для современного проекта. Мало того, что можно получить устаревший внешний вид, так ещё и столкнуться с несовместимостью библиотеки или её зависимостей с новыми версиями Python.

Я решил поискать современное решение для UI на Kivy. И мне повезло: я нашёл на GitHub форк KivyMD 2.0.0. Форк — это когда берут исходный код проекта и развивают его независимо от основной ветки. Этот форк развивается и по сей день. Библиотека предоставляет коллекцию виджетов, совместимых с Material Design. Это спасло моё приложение от переписывания под другой фреймворк (например, Flet), ведь у приложения с «топорным» дизайном будущего быть не может.

Теперь мне нужно установить саму библиотеку. Перед установкой я обновил строку для рекомендованной версии Python.

project.toml

requires-python = ">=3.12,<3.15"

Запись <3.15 означает, что проект будет работать на версиях Python начиная с 3.12 и до 3.14 (не включая 3.15). Poetry контролирует совместимость библиотек и их зависимостей с указанным диапазоном версий Python. Во время установки возникла ошибка, поэтому мне пришлось обновить параметр requires-python.

Установка:

poetry add https://github.com/kivymd/KivyMD/archive/master.zip

Я устанавливаю библиотеку напрямую из ветки репозитория, так как стандартная установка через Poetry с указанием версии не сработала. Первоначально я подумал, что дело в отсутствии поддержки Python 3.12, ведь в setup.cfg на GitHub указаны версии Python 3.7–3.10.

Однако позже выяснилось, что причина другая: новый форк ещё не опубликован на PyPI. В PyPI доступна только старая версия, которая ссылается на оригинальный репозиторий, поэтому установка через Poetry завершается ошибкой. У форка пока нет собственных сборок — в релизах и тегах доступны только старые версии. Именно поэтому единственный рабочий способ установки сейчас — напрямую из GitHub.

Библиотека действительно установилась на Python 3.12, и в project.toml появилась запись "kivymd @ https://github.com/kivymd/KivyMD/archive/master.zip". Но это не гарантирует стабильной работы: проверить совместимость можно только, запустив стандартные примеры из папки examples. Если появятся проблемы, я переведу проект на Python 3.10.

Проверка работы библиотеки

Тема совместимости в принципе понятна. У нас есть версии Python, а разработчики указывают, на каких версиях Python работает их проект. В файле pyproject.toml тоже прописываются версии, с которыми может работать проект. Проблем с совместимостью не возникает, если использовать ту версию Python, которую разработчики указали как поддерживаемую.

Моя версия Python в данном случае не указана в setup.cfg и не проверялась, а также разработчики не могут дать гарантий, что не возникнет проблем с совместимостью или багов на версиях новее 3.10. Теоретически более новая версия Python может быть совместима с кодом для старых версий, но на практике всё может быть не так однозначно. Для разработчиков, которым важна стабильность, однозначно проще откатиться на версию 3.10 и тем самым избежать потенциальных проблем.

Однако как любителю экспериментов и проверок на прочность мне стало интересно: сможет ли данная библиотека работать на версии 3.12? Если она будет корректно функционировать на моей версии, то можно будет связаться с разработчиками и сообщить им о результатах запуска. Если не будет работать или будет работать некорректно, то хотя бы удастся выяснить причины и некоторые критические отличия версии 3.10 от 3.12, которые привели к багам.

Для поверхностной или первичной проверки работы библиотеки мне нужно скачать примеры, а точнее папку examples вместе со всем содержимым. Для этого я скачиваю ZIP-архив с веткой master и копирую его в проект. Эти примеры я буду запускать и проверять их работоспособность. Кроме того, они наглядно покажут, что в плане UI предлагает библиотека.

`appbar.py`

AppBar (application bar) в языке UI — это панель в верхней части экрана приложения, которая обычно содержит:

Заголовок (название экрана или раздела);
Навигацию (кнопку "назад", меню-бургер, вкладки);
Действия (иконки поиска, уведомлений, профиля и т.п.).

По сути, это верхняя панель навигации и управления.

Для запуска примера я просто перехожу в examples/appbar.py и нажимаю на кнопку Run Python File в IDE (VS Code).

Образец appbar:

Ура, окно приложения запустилось на версии 3.12, и я этому очень рад! Согласитесь, данный UI «из коробки» выглядит гораздо привлекательнее, чем стандартный UI Kivy. При этом мне, как разработчику, будет достаточно лишь настроить внешний вид под свои нужды, а не заниматься полноценной вёрсткой и дизайном с нуля.

Выпадающее меню настроек:

Тут даже работает настройка цветов и тем внешнего вида.

`badge.py`

Badge (бейдж) в интерфейсах — это маленький индикатор поверх иконки или кнопки. Обычно:

Показывает количество (например, непрочитанных сообщений, уведомлений);
Может быть точкой/маркером (например, красный кружочек на иконке);
Иногда несёт состояние (онлайн/офлайн).

Образец bage:

В данном случае у нас иконка с количеством сообщений.

`bottomappbar.py`

BottomAppBar — это нижняя панель приложения (application bar), которая располагается у нижнего края экрана.

Она выполняет примерно те же функции, что и классический AppBar сверху, но:

Находится снизу, ближе к большому пальцу (удобно на мобильных устройствах);
Часто содержит Floating Action Button (FAB) — "плавающую кнопку" (например, «+» для добавления);
Может включать навигацию (иконки разделов, кнопки действий, меню).
В Material Design поддерживает вырез под FAB и анимации.

Применяется в UI, где:

Основной акцент делается на доступ к ключевым действиям;
Когда нужно заменить верхнюю панель, чтобы освободить место для контента.

Образец bottombar:

В данном случае bottombar содержит иконку лупы для поиска, корзину для удаления и иконку скачивания.

После того как приложение попыталось загрузить картинку на экране, возникла ошибка HTTP Error 521:

[ERROR  ] [Loader      ] Failed to load image <https://placekitten.com/166/640>
...
    raise HTTPError(req.full_url, code, msg, hdrs, fp)
urllib.error.HTTPError: HTTP Error 521: <none>
Ошибка сегментирования (образ памяти сброшен на диск)

Эта ошибка возникла из-за того, что не удалось получить доступ к серверу, с которого должна была скачаться картинка.

Также для данного примера понадобился пакет Faker для генерации тестовых данных, поэтому я добавил его в своё виртуальное окружение с помощью команды:

poetry add faker

`bottomsheet.py`

BottomSheet в UI — это панель, которая выезжает снизу экрана поверх основного контента.

Standard Sheet (стандартный лист):

Это немодальный вариант: панель отображается поверх контента, но не блокирует взаимодействие с остальным экраном;
Обычно закрепляется снизу и может оставаться видимой при скролле;
Пример: в Google Maps карточка места снизу — это persistent standard bottom sheet, её можно тянуть вверх/вниз, но в то же время взаимодействовать с картой.

Modal Sheet (модальный лист):

Это модальное окно в виде панели, которое блокирует взаимодействие с остальной частью интерфейса, пока его не закроют;
Может быть bottom modal sheet (выезжает снизу) или center modal sheet (появляется посередине);
Пример: в приложении доставки еды снизу выезжает окно с деталями блюда и кнопкой «Добавить в корзину» → пока не закроешь, нельзя взаимодействовать с остальной частью экрана.

`button.py`

В файле button.py как можно догадаться по названию находятся примеры кнопок:

Прокручиваю экран вниз:

Есть кнопки на любой вкус: круглые, со скруглёнными краями, с прозрачным фоном, с контуром.

`card.py`

Cards (карточки) в UI — это контейнеры с информацией или действиями, оформленные как отдельные блоки.

Что такое Card:

Это визуально выделенный прямоугольный элемент с закруглёнными углами и тенью;
Используется для группировки информации в удобочитаемом виде;
Может содержать:
- заголовок;
- картинку;
- текст;
- кнопки действий (например, «Купить», «Подробнее»).

Образец card:

Где применяются:

Карточки товаров — фото + название + цена + кнопка «в корзину»;
Профили пользователей — аватар + имя + кнопка «добавить»;
Новости и статьи — заголовок + краткий текст + превью изображения;
Дашборды — карточки с метриками (например, «Продажи сегодня: 350»).

`checkbox.py`

Checkbox (флажок, чекбокс) в UI — это элемент интерфейса, представляющий собой маленький квадрат, в который пользователь может поставить или убрать галочку.

Основные особенности:

Имеет двоичное состояние:
- ☑️ выбран (checked / true);
- ⬜ не выбран (unchecked / false).
Может быть в некоторых системах ещё в третьем состоянии — indeterminate (неопределённое, «частично выбрано»);
Позволяет выбирать несколько пунктов одновременно (в отличие от RadioButton, где можно выбрать только один вариант).

Образец checkbox (не выбран):

Образец checkbox (выбран):

Где используется:

Формы и анкеты — «Согласен с условиями», «Подписаться на рассылку»;
Списки выбора — например, список товаров с возможностью отметить несколько для сравнения;
Настройки — включение/отключение отдельных опций (звук, уведомления, автосохранение);
Таблицы — выделение строк (например, выбрать несколько писем в почте).

`chip.py`

Chip (чип) в UI — это маленький, компактный элемент интерфейса, который отображает фрагмент информации (метку, тег, выбранный элемент, действие) в удобном визуальном виде.

Основные свойства:

Обычно имеет скруглённую форму (похож на «пилюлю»);
Может содержать:
- Текст (например, «Python»);
- Иконку (например, «x» для удаления);
- Аватар (например, фото контакта).
Может быть кликабельным (вызывает действие) или просто отображать статус.

Образец chip:

Виды чипов (по Material Design):

Input chips — отображают введённые пользователем данные (например, в поле «Email получателей» → каждый адрес становится чипом);
Choice chips — позволяют выбрать один вариант из набора (альтернатива RadioButton);
Filter chips — позволяют выбрать несколько вариантов (альтернатива Checkbox);
Action chips — запускают действие (например, «Поделиться» или «Открыть карту»).

`datepicker.py`

DatePicker (выбор даты) в UI — это элемент интерфейса, который позволяет пользователю выбрать дату из календаря или через список.

Основные особенности:

Обычно отображается в виде календаря (месяц/год с днями);
Поддерживает навигацию по месяцам и годам;
Может ограничиваться диапазоном (например, «не раньше сегодняшнего дня»);
Часто дополняется TimePicker → для выбора даты и времени.

Образец datepicker Modal (выбор даты в календаре):

Образец datepicker Docked (выбор диапазона дат):

Образец datepicker Docked (вписать дату текстом):

Где используется:

Формы регистрации: «Дата рождения»;
Бронирование: выбор даты заезда/вылета;
Фильтры: «Показать за период»;
Планировщики и календари: выбор конкретного дня для события.

`dialog.py`

Dialog (диалоговое окно) в UI — это всплывающее окно поверх основного интерфейса, которое требует внимания пользователя и часто останавливает взаимодействие с остальным приложением, пока не будет закрыто.

Основные характеристики:

Появляется поверх контента;
Обычно модальное (нельзя работать с остальным интерфейсом, пока не закроешь);
Содержит текст (заголовок + описание) и действия (кнопки).

Образец datepicker dialog:

Виды диалогов:

Alert dialog (предупреждение):
- Показывает важное сообщение или вопрос;
- Пример: «Удалить этот файл?»;
- Кнопки: «OK / Cancel».
Confirmation dialog (подтверждение действия):
- Запрашивает у пользователя согласие;
- Пример: «Вы уверены, что хотите выйти?».
Input dialog (с вводом данных):
- Содержит поле ввода;
- Пример: «Введите имя нового проекта».
Custom dialog (пользовательский):
- Можно вставить любые UI-элементы: чекбоксы, список, картинки.

`dropdownitem.py`

DropdownItem (элемент выпадающего списка) в UI — это элемент интерфейса, который открывает выпадающее меню (dropdown) при нажатии.

Основные особенности:

Обычно выглядит как кнопка или поле с текстом и стрелкой вниз ⌄;
При нажатии открывает список опций;
Пользователь выбирает один (или несколько, если поддерживается) вариант;
После выбора текст кнопки/поля меняется на выбранное значение.

Образец кнопки dropdownitem:

Образец списка dropdownitem:

Где используется:

Формы — выбор страны, языка, города;
Фильтры — сортировка по дате, цене, рейтингу;
Настройки — выбор темы, единиц измерения;
Меню действий — «Поделиться», «Скопировать ссылку», «Удалить».

`dynamic_color_image.py`

DynamicColorImage в UI — это изображение, которое автоматически подстраивает свой цвет под текущую тему или контекст приложения. Используется для иконок и декоративных элементов, чтобы интерфейс оставался гармоничным при смене темы.

Основные характеристики:

Цвет изображения динамически меняется в зависимости от темы (Light / Dark) или настроек theme_cls;
Позволяет использовать один ресурс изображения для разных цветовых схем;
Часто применяется для иконок, кнопок и декоративных элементов.

Где используется:

Иконки и кнопки — панели инструментов, навигация, действия пользователя;
Декоративные элементы — карточки, баннеры, визуальные акценты;
Темная и светлая тема — автоматическая адаптация цвета изображений;
Статусы и индикаторы — уведомления, состояния объектов, прогресс.

Возникла ошибка при запуске:

     for name_color in self.theme_cls.current_schemes_color_data:
                       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 AttributeError: 'ThemeManager' object has no attribute 'current_schemes_color_data'

ThemeManager — это часть KivyMD, а в обычном Kivy он отсутствует. Судя по всему, интерфейс ThemeManager изменился в более новой версии KivyMD, а образец разработчики ещё не обновили под эти изменения.

Я как раз ждал такого повода: хотел связаться с разработчиками, а теперь смогу ещё и передать им bug report =)

`dynamic_color_schemas.py`

Dynamic_color_schemas в UI — это механизм или набор палитр, позволяющий автоматически применять цвета в зависимости от темы приложения (Light / Dark) или контекста интерфейса. Обычно используется в KivyMD и других UI-фреймворках, где важно, чтобы визуальные элементы оставались гармоничными при смене темы.

Основные характеристики:

Представляет собой набор схем цветов: primary, accent, background и т.д.;
Каждая схема содержит несколько оттенков для разных элементов UI (например, кнопок, текста, карточек);
Позволяет элементам интерфейса динамически подстраивать цвет под текущую тему или пользовательские настройки;
Используется вместе с ThemeManager (KivyMD) или аналогичными менеджерами тем.

Образец dynamic_color_schemas:

Образец dynamic_color_schemas другой темой:

Преимущества:

Согласованность UI — все элементы соответствуют цветовой теме;
Экономия ресурсов — один набор цветов подходит для всех тем;
Простота изменения темы — достаточно сменить схему в ThemeManager.

Где используется:

Кнопки и иконки — подстраиваются под тему;
Карточки и панели — фон меняется автоматически;
Текст и подписи — цвета текста подстраиваются под фон;
Статусы и индикаторы — разные состояния отображаются цветом из схемы.

`expansionpanel.py`

ExpansionPanel в UI — это сворачиваемая/разворачиваемая панель, которая позволяет пользователю скрывать или показывать дополнительный контент по клику. Часто используется для экономии места на экране и организации информации.

Основные характеристики:

Имеет заголовок (header) и контент (body);
Контент скрыт по умолчанию и показывается при разворачивании;
Может поддерживать анимацию разворачивания/сворачивания;
В KivyMD реализован как виджет MDExpansionPanel.

Образец expansionpanel:

Преимущества:

Экономия места на экране — скрывает второстепенный контент;
Организация информации — позволяет группировать элементы;
Интерактивность — пользователь сам решает, что просматривать;
Гибкость — можно вставлять любые виджеты внутрь панели.

Где используется:

Списки с деталями — например, список заказов с подробной информацией;
Настройки приложения — скрытые параметры, которые можно развернуть;
FAQ и инструкции — разворачивающиеся ответы на вопросы;
Меню или панели инструментов — дополнительные опции по клику.

`hero.py`

Hero в UI — это визуальный элемент или компонент интерфейса, который привлекает внимание пользователя и часто используется для представления ключевого контента или навигации между экранами с анимацией перехода.

Основные характеристики:

Обычно крупный и заметный элемент на экране (картинка, карточка, текст);
Используется для выделения важной информации или фокуса пользователя;
В некоторых UI-фреймворках (например, Flutter, KivyMD) поддерживает анимированные переходы между экранами — эффект "Hero transition";
Может сочетать изображение и текст, быть интерактивным или декоративным.

Образец hero:

При переходе на экран товара картинка плавно увеличивается и занимает центр экрана — это эффект Hero.

Образец hero после увеличения:

Преимущества:

Фокус на важном контенте — привлекает внимание пользователя;
Плавные анимации переходов — улучшает восприятие интерфейса;
Эстетика и современный UX — делает приложение визуально привлекательным;
Поддержка интерактивности — можно сочетать с кликами, свайпами и навигацией.

Где используется:

Списки и галереи — плавный переход к деталям элемента;
Карточки товаров — акцент на выбранный товар;
Главные баннеры и заголовки — привлечение внимания к ключевому контенту;
Навигация между экранами — Hero-переходы при смене экрана.

`imagelist.py`

ImageList в UI — это компонент или виджет для отображения коллекции изображений в виде сетки или списка, с возможностью прокрутки и взаимодействия с отдельными элементами.

Основные характеристики:

Представляет собой список или сетку изображений (thumbnails);
Может поддерживать горизонтальную или вертикальную прокрутку;
Обычно позволяет выбирать, кликать или взаимодействовать с отдельными изображениями;
В KivyMD и других UI-фреймворках может быть реализован через RecycleView или кастомные виджеты.

Образец imagelist:

Преимущества:

Удобная навигация — легко просматривать большое количество изображений;
Экономия места на экране — компактная сетка;
Интерактивность — можно добавлять клики, выделение, анимации;
Гибкость — легко адаптировать под разные размеры экранов и ориентации.

Где используется:

Галереи изображений — фотоальбомы, портфолио;
Списки товаров — карточки товаров с изображениями;
Элементы UI с визуальным контентом — например, аватары пользователей;
Превью файлов — отображение картинок перед открытием или загрузкой.

`label.py`

Label в UI — это визуальный элемент для отображения текста в приложении. Он используется для показа заголовков, описаний, инструкций и любой другой информации, которую нужно отобразить пользователю.

Основные характеристики:

Отображает статический или динамический текст;
Может иметь настройку цвета, шрифта, размера, выравнивания и стиля;
Часто поддерживает адаптивную высоту и ширину под размер текста;
В Kivy/KivyMD есть несколько видов: простой Label, MDLabel (поддерживает Material Design).

Образец label:

Преимущества:

Простота использования — легко отображать текст;
Гибкость — можно настраивать шрифты, цвета, выравнивание;
Динамический контент — текст можно менять программно;
Интеграция с темой — в KivyMD автоматически подстраивается под цвета темы.

Где используется:

Заголовки и подзаголовки — в экранах приложения;
Описание элементов — подписи к кнопкам, иконкам, картинкам;
Инструкции и уведомления — сообщения для пользователя;
Статистика и показатели — динамически обновляемые данные на экране.

Всё запустилось нормально, но появилось следующее критическое предупреждение:

[CRITICAL] [Clock       ] Warning, too much iteration done before the next frame. Check your code, or increase the Clock.max_iteration attribute. Remaining events:

Kivy использует Clock для планирования событий и обновления интерфейса. Это предупреждение появляется когда слишком много событий выполняются за один кадр. В Kivy кадр (frame) — это одна итерация основного цикла рендеринга.

Пример с frame:

В типичном приложении Kivy работает 60 кадров в секунду (fps):
- Каждый кадр длится ~16.6 мс (1000 ms / 60 fps);
- В этот промежуток Kivy успевает обработать события и перерисовать экран.
Если в одном кадре событий слишком много или обработка занимает много времени, Kivy не успевает их все обработать до следующей отрисовки, и появляется предупреждение.

`list.py`

List в UI — это компонент интерфейса для отображения набора элементов в виде вертикального или горизонтального списка, который позволяет пользователю просматривать, выбирать и взаимодействовать с ними.

Основные характеристики:

Представляет собой структурированный набор элементов (items);
Поддерживает прокрутку (scrolling), если элементов больше, чем помещается на экране;
Каждый элемент списка может содержать текст, иконку, изображение, чекбокс и другие виджеты;
В Kivy/KivyMD реализуется через виджеты типа RecycleView или специализированные MDList, OneLineListItem, TwoLineListItem и т.д.

Образец list:

Преимущества:

Удобная навигация по множеству элементов;
Легко адаптируется под разные данные (текст, картинки, интерактивные виджеты);
Поддержка динамических данных — можно добавлять/удалять элементы программно;
Интеграция с Material Design в KivyMD — единый стиль и анимации.

Где используется:

Списки контактов или пользователей;
Меню и навигационные панели;
Галереи и каталоги товаров;
Списки уведомлений или задач;
Настройки приложения — скрытые или развертываемые элементы через ExpansionPanel.

`material_scroll.py`

MaterialScroll в UI — это компонент прокрутки, выполненный по принципам Material Design, который позволяет пользователю плавно прокручивать содержимое (списки, карточки, изображения) с визуальной отдачей и адаптацией под тему приложения.

Основные характеристики:

Поддерживает вертикальную и горизонтальную прокрутку;
Обеспечивает плавное движение и инерцию (momentum scrolling);
Часто включает визуальные индикаторы прокрутки (scrollbar), которые соответствуют Material Design;
Может быть использован с любыми виджетами, которые превышают видимую область экрана (например, List, Grid, BoxLayout).

Образец material_scroll:

Судя по всему он подтянул информацию о моей операционной системе.

Преимущества:

Плавная и естественная прокрутка для пользователя;
Согласованность с Material Design — эстетика и UX;
Гибкость — работает с любыми виджетами, не только списками;
Поддержка тем — цвета скроллбара и элементов подстраиваются под Light/Dark.

Где используется:

Списки элементов и галереи — когда контента больше, чем экран;
Карточки и панели с деталями — прокрутка длинных описаний;
Настройки и формы — чтобы скрыть второстепенные элементы, сохранив доступ;
Интерфейс мобильных приложений — плавная прокрутка для UX на сенсорных экранах.

`md_axis_transition.py`

MDAxisTransition в UI — это анимация перехода между экранами или виджетами по определённой оси, реализованная по принципам Material Design. Она позволяет плавно и визуально понятно менять содержимое интерфейса, создавая эффект «движения» элементов.

Основные характеристики:

Переход происходит вдоль оси X или Y (горизонтально или вертикально);
Поддерживает плавные анимации, соответствующие Material Design;
Используется вместе с ScreenManager или другими контейнерами для смены экранов;
Часто применяется для навигации между страницами приложения, карточками или панелями.

Образец md_axis_transition:

Образец md_axis_transition (после перехода на другой экран):

Преимущества:

Плавные и понятные переходы между экранами;
Соответствие Material Design — UX выглядит современно;
Гибкость — можно использовать для разных контейнеров и элементов;
Визуальная обратная связь — пользователь видит, куда переместился интерфейс.

Где используется:

Навигация между экранами приложения — например, страницы настроек;
Карточки и панели с контентом — плавное перемещение элементов;
Слайдеры и галереи — смена изображений или секций;
Диалоги и всплывающие панели — анимация появления/исчезновения контента.

`md_transitions.py`

MDTransitions в UI — это набор готовых анимаций перехода между экранами или виджетами, реализованных по принципам Material Design. Они делают смену экранов плавной, визуально понятной и эстетически привлекательной.

Основные характеристики:

Предоставляют разные типы переходов: сдвиг, ось X/Y, масштабирование, затухание;
Используются вместе с ScreenManager или другими контейнерами;
Позволяют устанавливать направление анимации (left, right, up, down);
Все анимации соответствуют Material Design guidelines, создавая современный UX.

Образец md_transitions:

Картинка этого не передаёт, но эти квадраты двигались туда сюда по горизонтали.

В KivyMD можно использовать несколько видов переходов:

MDSlideTransition — сдвиг по оси X/Y;
MDFadeTransition — плавное затухание;
MDScaleTransition — масштабирование;
MDAxisTransition — перемещение по выбранной оси с анимацией;
Все они наследуются от общего класса MDTransitions и легко настраиваются через direction, duration и другие параметры.

Преимущества:

Плавные визуальные эффекты — улучшает UX;
Соответствие Material Design — современный и гармоничный интерфейс;
Лёгкость интеграции — просто подключить к ScreenManager;
Гибкость — можно менять тип, направление и длительность анимации.

Где используется:

Навигация между экранами приложения — страницы настроек, профиля, каталога;
Карточки и панели — плавные переходы между секциями;
Галереи и слайдеры — смена изображений с анимацией;
Диалоги и всплывающие панели — анимация появления/исчезновения контента.

`navigation_bar.py`

NavigationBar в UI — это панель навигации, которая позволяет пользователю переключаться между основными разделами приложения. В KivyMD и других Material Design фреймворках она соответствует принципам Bottom Navigation или Top Navigation, обеспечивая быстрый доступ к ключевым функциям.

Основные характеристики:

Обычно располагается внизу или вверху экрана;
Содержит иконки и/или текстовые подписи для каждого раздела;
Поддерживает выделение активного раздела, часто с анимацией;
Может содержать от 3 до 5 элементов для удобства UX (рекомендации Material Design);
Позволяет легко переключаться между главными экранами приложения.

Образец navigation_bar:

Преимущества:

Удобная навигация — быстрый доступ к основным разделам приложения;
Согласованность с Material Design — интерфейс выглядит современно;
Выделение активного раздела — пользователь всегда понимает, где находится;
Лёгкая интеграция с экранами — каждый элемент панели можно связать с отдельным Screen или View.

Где используется:

Главные меню мобильных приложений — домашний экран, профиль, поиск, уведомления;
Мессенджеры и социальные сети — быстрый доступ к чатам, контактам, настройкам;
Каталоги и магазины — главная, категории, корзина, профиль;
Приложения с несколькими ключевыми разделами — упрощает переключение между ними.

`navigation_rail.py`

NavigationRail в UI — это вертикальная панель навигации, которая служит альтернативой нижней панели (NavigationBar) и позволяет пользователю переключаться между основными разделами приложения. Она особенно полезна на широких экранах, планшетах и десктопах, где есть место для вертикальной структуры.

Основные характеристики:

Располагается слева или справа экрана;
Содержит иконки и/или текстовые подписи для каждого раздела;
Активный элемент подсвечивается и может сопровождаться анимацией или индикатором;
Часто применяется вместе с ScreenManager для переключения между экранами;
Поддерживает компактный режим (только иконки) и расширенный (иконки + текст).

Образец navigation_rail:

Преимущества:

Экономит горизонтальное пространство на широких экранах;
Чёткая визуальная структура — пользователю проще ориентироваться;
Гибкость — можно использовать только иконки или добавить текст;
Интеграция с экранами — легко связывать элементы с ScreenManager.

Где используется:

Десктопные приложения — панели слева для основных разделов;
Планшеты и широкие мобильные экраны — альтернативная навигация;
Панели админки или рабочего пространства — быстрый доступ к разделам;
Приложения с множеством разделов — помогает структурировать интерфейс вертикально.

`navigationdrawer.py`

NavigationDrawer в UI — это выдвижная боковая панель навигации, которая позволяет пользователю переключаться между основными разделами приложения или получать доступ к дополнительным функциям. Она широко используется в мобильных приложениях и десктопных интерфейсах по стандартам Material Design.

Основные характеристики:

Выдвигается слева (чаще всего) или справа экрана;
Содержит список элементов навигации, иконки, заголовки и разделители;
Может быть полностью скрыта и появляться по свайпу или нажатию на кнопку меню (гамбургер);
Часто интегрируется с ScreenManager для переключения между экранами;
Поддерживает плавающий режим (overlay) или фиксированное положение на больших экранах.

Образец navigationdrawer:

Преимущества:

Экономия места на экране — скрытая навигация, доступная по запросу;
Удобная структура — легко группировать разделы и функции;
Гибкость дизайна — можно использовать иконки, подписи, подменю;
Соответствие Material Design — привычный и интуитивный UX.

Где используется:

Мобильные приложения — основной способ навигации через кнопку гамбургер;
Админки и рабочие панели — быстрый доступ к разделам и инструментам;
Приложения с множеством разделов — скрытая боковая навигация для удобства;
Настройки и меню действий — доступ к редким или второстепенным функциям.

`progressindicator.py`

ProgressIndicator в UI — это визуальный элемент для отображения прогресса выполнения операции, например загрузки данных, обработки файла или выполнения задачи. Он помогает пользователю понять, что процесс идёт, и оценивает его завершённость.

Основные характеристики:

Может быть линейным (LinearProgress) или круговым (CircularProgress);
Показывает процент или относительный прогресс выполнения задачи;
Может работать определённое время (progress value известен) или быть индетерминированным (неизвестная длительность);
В KivyMD реализован через MDProgressBar и MDSpinner.

Образец progressindicator:

Образец progressindicator (заполнение):

Преимущества:

Визуальная обратная связь — пользователь видит, что процесс идёт;
Поддержка разных форм — линейный или круговой;
Интерфейс дружелюбен — уменьшает неопределённость при ожидании;
Гибкость — можно изменять цвет, размер, скорость анимации.

Где используется:

Загрузка файлов — прогресс загрузки или выгрузки данных;
Обработка данных — индикатор выполнения долгих операций;
Стриминг и медиа — загрузка контента или буферизация;
Интерфейс приложений — ожидание ответа от сервера или API.

`segmented_button.py`

SegmentedButton в UI — это группа взаимосвязанных кнопок, где можно выбрать один или несколько вариантов, обычно расположенных горизонтально. Он позволяет пользователю быстро переключаться между режимами, фильтрами или категориями, сохраняя компактный вид интерфейса.

Основные характеристики:

Представляет собой набор кнопок в одной группе;
Можно настроить одиночный выбор (single selection) или множественный (multiple selection);
Часто поддерживает подсветку активного элемента, что улучшает визуальную обратную связь;
В KivyMD реализован через MDSegmentedButton.

Образец segmented_button:

Преимущества:

Компактная форма выбора — экономит место на экране;
Интуитивно понятный интерфейс — пользователь видит все варианты сразу;
Поддержка одиночного и множественного выбора;
Лёгкая интеграция с фильтрами и переключателями — удобно для меню, графиков и настроек.

Где используется:

Фильтры и сортировка — например, «По дате», «По популярности»;
Переключение между режимами — день/неделя/месяц;
Настройки приложения — выбор темы, единиц измерения, режима отображения;
Интерактивные панели — быстрый доступ к нескольким связанным действиям.

`slider.py`

Slider в UI — это интерактивный элемент управления, позволяющий пользователю выбирать значение из диапазона путём перемещения ползунка вдоль линии. Он часто используется для настройки параметров, которые имеют числовое значение, например громкость, яркость или масштаб.

Основные характеристики:

Имеет минимальное и максимальное значение (min, max);
Поддерживает текущее значение (value), которое изменяется при движении ползунка;
Может быть горизонтальным или вертикальным;
Часто отображает шкалу, метки и подсказки для удобства пользователя;
В KivyMD реализуется через MDSlider.

Образец slider:

Преимущества:

Простота выбора значений — удобно регулировать параметры;
Визуальная обратная связь — пользователь сразу видит выбранное значение;
Гибкость — можно использовать для числовых, процентных или других диапазонов;
Интеграция с Material Design — красивый и современный вид.

Где используется:

Настройка громкости и яркости;
Регулировка масштаба или размера объектов;
Выбор диапазонов и фильтров — например, цен, времени или рейтинга
Игровые элементы управления — настройка скорости, мощности или интенсивности.

`snackbar.py`

Snackbar в UI — это временное всплывающее уведомление, которое информирует пользователя о каком-либо событии или действии, не прерывая его работу с приложением. Оно соответствует принципам Material Design и обычно появляется внизу экрана.

Основные характеристики:

Показывается короткое время (по умолчанию 2–4 секунды);
Содержит текстовое сообщение и опциональную кнопку действия;
Не блокирует интерфейс — пользователь может продолжать взаимодействие с приложением;
В KivyMD реализован через MDSnackbar.

Образец snackbar:

Преимущества:

Информативность без прерывания — пользователь видит уведомление, но продолжает работу;
Простота и лаконичность — не перегружает интерфейс;
Поддержка действий — можно добавить кнопку, чтобы быстро исправить или подтвердить действие;
Соответствие Material Design — привычный UX для мобильных и веб-приложений.

Где используется:

Подтверждение действий — «Сообщение отправлено», «Файл сохранён»;
Ошибки и предупреждения — «Не удалось подключиться к серверу»;
Интерактивные уведомления — кнопка «Отменить» после удаления элемента;
Временные подсказки — советы или рекомендации пользователю.

`switch.py`

Switch в UI — это интерактивный элемент управления, позволяющий включать или выключать функцию или настройку. Он соответствует принципам Material Design и часто используется для управления бинарными состояниями (вкл/выкл, да/нет).

Основные характеристики:

Имеет два состояния: включено (on) и выключено (off);
Обычно представлен ползунком на линии;
Может сопровождаться подписью или иконкой, чтобы объяснить назначение;
В KivyMD реализован через MDSwitch.

Образец switch:

Преимущества:

Простота и понятность — пользователю сразу ясно, включено или выключено;
Бинарное управление — идеально для опций типа «Да/Нет»;
Интуитивный интерфейс — привычный вид для мобильных и десктопных приложений;
Интеграция с темой — цвета подстраиваются под Light/Dark режим.

Где используется:

Настройки приложения — включение уведомлений, темной темы, автозагрузки;
Формы и анкеты — бинарные вопросы («Подписаться на рассылку»);
Интерактивные панели управления — включение/выключение функций;
Контроль устройств — например, включение света, звука или других функций в IoT-приложениях.

`tab.py`

Tab в UI — это элемент интерфейса для организации содержимого на несколько вкладок, позволяющий пользователю быстро переключаться между разными разделами или категориями без смены экрана. Он соответствует принципам Material Design и улучшает навигацию внутри одного окна или экрана.

Основные характеристики:

Визуально представлен как горизонтальная полоса с несколькими кнопками;
Каждый Tab связан с отдельным содержимым (экраном, панелью или виджетом);
Активная вкладка выделяется цветом или индикатором;
В KivyMD реализован через MDTabs и MDTab.

Преимущества:

Структурирование контента — пользователь видит всё в одном месте;
Экономия пространства на экране — несколько разделов в одной области;
Удобство навигации — легко переключаться между разделами;
Гибкость дизайна — можно использовать текст, иконки или комбинацию.

Где используется:

Настройки и панели управления — разделение по категориям;
Профили и аккаунты — вкладки «Информация», «Друзья», «Настройки»
Контентные приложения — новости, галереи, списки;
Мобильные и веб-приложения — экономия пространства и упрощение навигации.

`textfield.py`

TextField в UI — это интерактивное поле для ввода текста пользователем. Оно используется для сбора данных, поиска, ввода логина/пароля и других текстовых значений. В KivyMD и Material Design TextField реализует все привычные паттерны UX, включая подсказки, ошибки и иконки.

Основные характеристики:

Позволяет вводить строки текста;
Может быть однострочным (single-line) или многострочным (multi-line);
Поддерживает подсказку (hint text), которая исчезает при вводе;
Поддерживает валидацию и отображение ошибок;
В KivyMD реализуется через MDTextField и MDTextFieldRect.

Образец textfield:

Преимущества:

Удобный ввод данных — пользователь сразу понимает, что вводить;
Подсказки и ошибки — повышают UX и предотвращают ошибки;
Гибкость — поддержка разных форматов, масок и иконок;
Интеграция с темой — цвет и стиль подстраиваются под Light/Dark режим.

Где используется:

Формы регистрации и логина — имя, email, пароль;
Поиск и фильтры — быстрый ввод текста;
Комментарии и отзывы — многострочный ввод;
Настройки приложения — текстовые параметры, URL, ключи API.

`timepicker.py`

TimePicker в UI — это виджет для выбора времени пользователем, реализованный по принципам Material Design. Он позволяет пользователю быстро и удобно установить часы и минуты, избегая ручного ввода, что снижает ошибки и ускоряет взаимодействие.

Основные характеристики:

Может быть аналоговым (с круговой шкалой) или цифровым (с полями ввода);
Поддерживает 12-часовой и 24-часовой формат;
Часто сопровождается кнопками подтверждения и отмены;
Может интегрироваться с MDDialog для всплывающего окна выбора времени;
В KivyMD реализован через MDTimePicker.

Образец timepicker (horizontal):

Образец timepicker (vertical):

Образец timepicker (input):

Преимущества:

Удобный выбор времени — быстрее и точнее, чем ручной ввод;
Снижение ошибок — форматирование и валидация встроены;
Современный интерфейс — соответствует Material Design;
Гибкость формата — поддержка 12- и 24-часового формата.

Где используется:

Календарь и планирование событий — выбор времени встречи или напоминания;
Будильники и таймеры — установка времени срабатывания;
Фильтры по времени — поиск данных по определённому часу;
Приложения транспорта — выбор времени отправления или прибытия.

`tooltip.py`

Tooltip в UI — это всплывающая подсказка, которая появляется при наведении курсора мыши или долгом удержании элемента на экране. Он используется для объяснения функции кнопки, иконки или любого интерактивного элемента без перегрузки интерфейса текстом.

Основные характеристики:

Показывается всплывающим текстом рядом с элементом;
Обычно содержит короткое пояснение или инструкцию;
В KivyMD реализован через MDTooltip;
Может быть привязан к кнопкам, иконкам, изображениям или другим виджетам;
Исчезает автоматически после определённого времени или при уходе курсора.

Образец tooltip:

Преимущества:

Объясняет функции элементов интерфейса без захламления UI;
Улучшает UX — пользователи быстрее понимают назначение кнопок;
Автоматическое скрытие — не мешает взаимодействию;
Гибкость — можно менять текст, позицию и стиль подсказки.

Где используется:

Кнопки и иконки — пояснение действия кнопки;
Формы и поля ввода — подсказка о формате или ограничениях;
Интерактивные панели и меню — краткие инструкции для новых пользователей;
Дашборды и аналитика — пояснение графиков или значков.

Анонс на следующие статьи

Моя следующая статья выйдет 02.10.2025. В ней я начну переделывать UI своего приложения, используя библиотеку KivyMD 2.0.0 и опираясь на те примеры, которые показал сегодня. Благо я написал целый путеводитель по UI, поэтому мне будет на что опереться =)

P.S. Разработчикам я всё-таки написал и теперь буду ждать ответа. Очень надеюсь, что они хоть что-то ответят.

Если у вас есть мысли о том, как можно улучшить проект, пишите в комментариях — с удовольствием ознакомлюсь с вашими предложениями!

Читайте продолжение — не пропустите!

Заключение

Рассказал про библиотеку KivyMD 2.0.0 и установил её;
Сделал обзор виджетов UI из папки examples.

Ссылки к статье

Мои статьи Arduinum628 на Код на салфетке;
Репозиторий проекта Kawai.Focus.

Вступление

Библиотека KivyMD 2.0.0

Проверка работы библиотеки

appbar.py

badge.py

bottomappbar.py

bottomsheet.py

button.py

card.py

checkbox.py

chip.py

datepicker.py

dialog.py

dropdownitem.py

dynamic_color_image.py

dynamic_color_schemas.py

expansionpanel.py

hero.py

imagelist.py

label.py

list.py

material_scroll.py

md_axis_transition.py

md_transitions.py

navigation_bar.py

navigation_rail.py

navigationdrawer.py

progressindicator.py

segmented_button.py

slider.py

snackbar.py

switch.py

tab.py

textfield.py

timepicker.py

tooltip.py

Анонс на следующие статьи

Заключение

Ссылки к статье

Автор

Eugene Kaddo

Комментарии

`appbar.py`

`badge.py`

`bottomappbar.py`

`bottomsheet.py`

`button.py`

`card.py`

`checkbox.py`

`chip.py`

`datepicker.py`

`dialog.py`

`dropdownitem.py`

`dynamic_color_image.py`

`dynamic_color_schemas.py`

`expansionpanel.py`

`hero.py`

`imagelist.py`

`label.py`

`list.py`

`material_scroll.py`

`md_axis_transition.py`

`md_transitions.py`

`navigation_bar.py`

`navigation_rail.py`

`navigationdrawer.py`

`progressindicator.py`

`segmented_button.py`

`slider.py`

`snackbar.py`

`switch.py`

`tab.py`

`textfield.py`

`timepicker.py`

`tooltip.py`