Приветствую вас, дорогие любители и знатоки Python! Сегодня как всегда будем делать обзор фреймворка для кроссплатформенной разработки Kivy и библиотеки виджетов в стиле Google Material Design для фреймворка Kivy - KivyMD. В этой статье мы рассмотрим как сделать blur эффект отдельных компонентов интерфейса пользователя. Я уже делал похожий обзор в статье Материальный Python. Кастомные карточки с OpenGL-эффектами, но нижеследующий материал несколько сложнее и в прямом смысле динамичнее. Что ж, начнем...
А для тех, кто незнаком ни с Kivy ни с библиотекой KivyMD, вкратце напомню:
Kivy - кроссплатформенный фреймворк с открытым исходным кодом, написанный с использованием Python/Cython. Поддерживает устройства ввода: WM_Touch, WM_Pen, Mac OS X Trackpad Magic Mouse, Mtdev, Linux Kernel HID, TUIO...
KivyMD - сторонняя open source библиотека, написанная на чистом Python, реализующая набор виджетов в стиле Google Material Design, для использования с фреймворком Kivy. Вне экосистемы Kivy библиотека не используется. Текущее состояние - бета. Мастер версия на GitHub - 1.0.0
Два этих проекта развиваются отдельно друг от друга, но поскольку из коробки Kivy имеет стандартный "убогий" дизайн виджетов, а современные приложения не приемлют серости и всем хочется юзать красивые красивости, люди часто путают Kivy и KivyMD, задавая, например, вопросы типа "Как мне скомпилировать для моего приложения KivyMD вместо Kivy?", что, конечно же, некорректно, поскольку KivyMD это всего лишь дополнительные виджеты для фреймворка Kivy, реализованные с помощью него же. Эти виджеты никогда не будут включены в стандартную библиотеку Kivy и не заменят собой страшные дефолтные виджеты Kivy, потому что Kivy хочет быть кроссплатформенным на 100% и не привязывается ни к материальному дизайну ни к какому-либо еще, оставляя все на стороне пользователя: хочется дизайн как у Mac OS - делайте как у Mac OS, хочется дизайн как в Windows - делайте как в Windows, благо все виджеты Kivy кастомизируются легко и быстро.
Ну а наша сегодняшняя задача - сделать нижеследующий концепт экрана:
Основная цель - blur эффект для двух текстовых полей. Анимированный фон я сделал для того, чтобы сделать акцент на динамике. Итак, для работы нам понадобится Python 3.6 - 3.9 (3.10 пока в разработке у Kivy), фреймворк Kivy и библиотека KivyMD. Установим все это дело:
pip install "kivy[base] @ https://github.com/kivy/kivy/archive/master.zip" pip install https://github.com/kivymd/KivyMD/archive/master.zip
Первая команда установит фреймворк Kivy мастер версии, а вторая - библиотеку KivyMD также мастер версии. Все. Можем работать. Откроем консоль и создадим шаблон проекта с помощью инструментов KivyMD:
python3.9 -m kivymd.tools.patterns.create_project \ MVC \ /Users/macbookair \ BlurConcept \ python3.9 \ master \ --name_screen BlurConceptScreen
Будет создан проект с шаблоном MVC в директории /Users/macbookair с именем BlurConcept, виртуальным окружением и всеми необходимыми зависимостями:
Детально об архитектуре проекта, которую предлагает использовать KivyMD вы можете прочитать в статье Python GUI. Библиотека KivyMD. Шаблон MVC, parallax эффект и анимация контента слайдов
Открываем проект, и удаляем, кроме имя правила, все содержимое файла blur_concept_screen.kv - это разметка нашего единственного экрана в приложении:
Посмотрим на готовый экран приложения и прикинем какие элементы UI мы можем переиспользовать:
Я выделил метки и два текстовых поля. В проекте в каждой директории представлений для каждого экрана (View) есть пакет components:
Создадим два пакета в директории components для экрана BlurConceptScreenView - commonlabel и fillfield - метку и текстовое поле с общими параметрами:
commonlabel.py:
from kivymd.uix.label import MDLabel class CommonLabel(MDLabel): """It is just a base class for a label with common parameters.""" def __init__(self, **kwargs): super().__init__(**kwargs) self.color = (1, 1, 1, 1) self.font_style = "H4" self.font_name = "assets/fonts/PlayfairDisplay-Black.otf" self.adaptive_height = True self.markup = True
fillfield.py:
from kivymd.uix.textfield import MDTextField class FillField(MDTextField): """It is just a base class for a text field with common parameters.""" def __init__(self, **kwargs): super().__init__(**kwargs) self.size_hint_x = None self.width = "320dp" self.mode = "fill" self.fill_color_normal = (1, 1, 1, 0.1) self.fill_color_focus = (1, 1, 1, 0.3)
В файле __init__.py сделаем импорт этих классов, чтобы в дальше их можно было импортировать непосредственно из пакета components:
components/__init__.py:
from .fillfield.fill_field import FillField from .commonlabel.common_label import CommonLabel
Теперь откроем в файл с классом представления экрана:
... и объявим необходимые константы и методы:
from kivy.animation import Animation from kivy.metrics import dp from kivy.properties import NumericProperty from View.base_screen import BaseScreenView from View.BlurConceptScreen.components import FillField, CommonLabel class BlurConceptScreenView(BaseScreenView): """Implements the login start screen in the user application.""" OPACITY = NumericProperty(0) SHIFT_Y = NumericProperty(dp(0)) FIELD_WIDTH = NumericProperty(dp(320)) FIELD_HEIGHT = NumericProperty(dp(52)) PADDING = NumericProperty(dp(24)) def on_enter(self, *args): """ Event called when the screen is displayed: the entering animation is complete. """ animation = Animation(SHIFT_Y=dp(140), d=2, t="in_out_quart") animation.bind(on_complete=self.animation_bg_zoom) animation.start(self) Animation(OPACITY=1, d=3).start(self) def animation_bg_zoom(self, *args): Animation(height=self.ids.bg.height + self.SHIFT_Y, d=2, t="in_out_quart").start( self.ids.bg )
Алгоритм прост: в момент появления экрана в методе on_enter с помощью класса Animation мы будет анимировать два поля класса BlurConceptScreen: OPACITY и SHIFT_Y - прозрачность меток экрана и сдвиг меток по оси Y. Ну, а изменения свойств базового класса в одноименном правиле разметки в KV файле применяются автоматически:
blur_concept_screen.kv:
#:import STANDARD_INCREMENT kivymd.material_resources.STANDARD_INCREMENT <BlurConceptScreenView> FitImage: id: bg size_hint_y: None source: "assets/images/bg.jpg" height: root.height + root.SHIFT_Y CommonLabel: x: field_login.x y: root.height - root.SHIFT_Y opacity: root.OPACITY text: "You are\nUp Above the Sky" CommonLabel: x: field_login.x opacity: root.OPACITY font_name: "assets/fonts/PlayfairDisplay-Regular.otf" text: "Get Started Here" y: (field_login.y + root.SHIFT_Y) - (root.PADDING + self.height) FillField: id: field_login opacity: root.OPACITY hint_text: "Login" icon_left: "account" pos: root.center[0] - root.FIELD_WIDTH / 2, \ root.center[1] + root.SHIFT_Y / 4 FillField: id: field_password opacity: root.OPACITY hint_text: "Password" icon_left: "lock" pos: root.center[0] - root.FIELD_WIDTH / 2, \ root.center[1] - root.SHIFT_Y / 4 CommonLabel: id: lbl_forgot_password opacity: root.OPACITY font_style: "Caption" halign: "center" y: field_password.y - root.PADDING * 2 text: "Forgot Password?" MDFillRoundFlatButton: id: sign_in_button text: "Sign In" opacity: root.OPACITY size_hint_x: None -width: field_password.width pos_hint: {"center_x": .5} font_size: "24sp" font_name: "assets/fonts/PlayfairDisplay-Black.otf" md_bg_color: .8, .8, .8, 1 text_color: app.theme_cls.primary_color ripple_color: app.theme_cls.primary_color[:-1] + [.4] y: root.SHIFT_Y CommonLabel: opacity: root.OPACITY font_style: "Caption" font_name: "assets/fonts/PlayfairDisplay-Regular.otf" halign: "center" y: dp(160) - root.SHIFT_Y text: "Don`t have an Account? " \ "[font=assets/fonts/PlayfairDisplay-Black.otf]Sign Up[/font]"
Уже можем запустить наш проект и увидеть следующую картину:
Как видим, blur эффекта нет. Для добавления эффекта воспользуемся виджетом EffectWidget:
#:import STANDARD_INCREMENT kivymd.material_resources.STANDARD_INCREMENT #:import HorizontalBlurEffect kivy.uix.effectwidget.HorizontalBlurEffect #:import VerticalBlurEffect kivy.uix.effectwidget.VerticalBlurEffect #:import effect kivy.uix.effectwidget.EffectWidget <BlurConceptScreenView> FitImage: CommonLabel: CommonLabel: EffectWidget: opacity: root.OPACITY effects: ( \ HorizontalBlurEffect(size=12), \ VerticalBlurEffect(size=12), \ ) canvas.before: StencilPush RoundedRectangle: radius: [10, 10, 0, 0] size: root.FIELD_WIDTH, root.FIELD_HEIGHT pos: root.center[0] - root.FIELD_WIDTH / 2, \ root.center[1] + root.SHIFT_Y / 4 RoundedRectangle: size: root.FIELD_WIDTH, root.FIELD_HEIGHT radius: [10, 10, 0, 0] pos: root.center[0] - root.FIELD_WIDTH / 2, \ root.center[1] - root.SHIFT_Y / 4 StencilUse canvas.after: StencilUnUse RoundedRectangle: size: root.FIELD_WIDTH, root.FIELD_HEIGHT radius: [10, 10, 0, 0] pos: root.center[0] - root.FIELD_WIDTH / 2, \ root.center[1] + root.SHIFT_Y / 4 RoundedRectangle: size: root.FIELD_WIDTH, root.FIELD_HEIGHT radius: [10, 10, 0, 0] pos: root.center[0] - root.FIELD_WIDTH / 2, \ root.center[1] - root.SHIFT_Y / 4 StencilPop FitImage: id: bg_blur size_hint_y: None source: "assets/images/bg.jpg" height: root.height + root.SHIFT_Y FillField: FillField: CommonLabel: MDFillRoundFlatButton: CommonLabel:
EffectWidget способен применять различные графические эффекты к своим потомкам с помощью пользовательских шейдеров и OpenGL. Что мы сделали в нашем конкретном случае, чтобы получить blur эффект? Мы воспользовались инструкциями холста (canvas), определили для них размер и позицию равные размеру и позиции двум текстовым полям, с помощью трафаретов (StencilPush/StencilUse) выделили эти области на холсте и применили blur эффект в свойствах EffectWidget к фоновому изображению:
EffectWidget: effects: ( \ HorizontalBlurEffect(size=12), \ VerticalBlurEffect(size=12), \ ) canvas.before: ... canvas.after: ... FitImage: id: bg_blur size_hint_y: None source: "assets/images/bg.jpg" height: root.height + root.SHIFT_Y
Теперь нам нужно синхронизировать анимации фоновых изображений, добавив в метод animation_bg_zoom в классе представления анимацию для изображения bg_blur:
class BlurConceptScreenView(BaseScreenView): def animation_bg_zoom(self, *args): Animation(height=self.ids.bg_blur.height + self.SHIFT_Y, d=2, t="in_out_quart").start( self.ids.bg_blur )
Если мы в KV разметке в файле blur_concept_screen.kv оставим только EffectWidget с инструкциями холста:
#:import HorizontalBlurEffect kivy.uix.effectwidget.HorizontalBlurEffect #:import VerticalBlurEffect kivy.uix.effectwidget.VerticalBlurEffect #:import effect kivy.uix.effectwidget.EffectWidget <BlurConceptScreenView> EffectWidget: opacity: root.OPACITY effects: ( \ HorizontalBlurEffect(size=12), \ VerticalBlurEffect(size=12), \ ) canvas.before: StencilPush RoundedRectangle: radius: [10, 10, 0, 0] size: root.FIELD_WIDTH, root.FIELD_HEIGHT pos: root.center[0] - root.FIELD_WIDTH / 2, \ root.center[1] + root.SHIFT_Y / 4 RoundedRectangle: size: root.FIELD_WIDTH, root.FIELD_HEIGHT radius: [10, 10, 0, 0] pos: root.center[0] - root.FIELD_WIDTH / 2, \ root.center[1] - root.SHIFT_Y / 4 StencilUse canvas.after: StencilUnUse RoundedRectangle: size: root.FIELD_WIDTH, root.FIELD_HEIGHT radius: [10, 10, 0, 0] pos: root.center[0] - root.FIELD_WIDTH / 2, \ root.center[1] + root.SHIFT_Y / 4 RoundedRectangle: size: root.FIELD_WIDTH, root.FIELD_HEIGHT radius: [10, 10, 0, 0] pos: root.center[0] - root.FIELD_WIDTH / 2, \ root.center[1] - root.SHIFT_Y / 4 StencilPop FitImage: id: bg_blur size_hint_y: None source: "assets/images/bg.jpg" height: root.height + root.SHIFT_Y
... и запустим проект, то сможем наглядно увидеть как это работает:
Далее мы просто добавляем все остальные виджеты на экран. К сожалению, я не смог добавить gif изображения, которые пошагово демонстрируют добавление всех элементов, потому что новый редактор Хабра просто наотрез отказался грузить какие-либо изображения после последней гифки в статье. Обидно, но ладно. Всем спасибо за внимание и до новых встреч!
