Разработка кроссплатформенных мобильных и настольных приложений на Python. Практическое пособие

2.3.2. Компоновка приложения из фрагментов с использованием загрузчика Builder

Чтобы использовать загрузчик Builder, сначала необходимо выполнить его импорт с использованием следующего кода:

from kivy.lang import builder

Теперь с помощью Builder можно напрямую загрузить код на языке KV либо из текстового файла проекта с любым именем (но с расширением. kv), либо из текстовой строки базового программного модуля.

Сделать загрузку виджетов из файла. kv можно с использованием следующей команды:

Builder. load_file (». Kv/file/path»)

Сделать загрузку виджетов из текстовой строки программного модуля можно с использованием следующей команды:

Builder. load_string (kv_string)

Рассмотрим это на простых примерах. Напишем программный код для загрузки кода на языке KV из текстового файла проекта, файл Metod_Builder.py (листинг 2.15).

Листинг 2.15. Демонстрация метода Builder (загрузка кода на KV из текстового файла) модуль Metod_Builder.py

# модуль Metod_Builder.py

from kivy. app import App # импорт класса – приложения

from kivy.lang import Builder # импорт метода Builder

kv_file = Builder. load_file (». /basic_class. kv»)

class Basic_Class (App): # определение базового класса

…… def build (self):

…… … … return kv_file

My_App = Basic_Class () # приложение на основе базового класса

My_App.run () # запуск приложения

Здесь мы создали переменную kv_file и, с использованием метода Builder. load_file, загрузили в нее код из файла». /basic_class. kv’, который находится в головной папке проекта. Затем в базовом классе создали функцию def build (self), которая возвращает значение переменной kv_file. Результат работы приложения будет таким же, как приведено на предыдущем рисунке. При использовании данного метода явным образом задается путь к файлу basic_class. kv, поэтому, в отличие от метода соглашения имен, данный файл может находиться в любой папке проекта и иметь любое имя.

Проверим, как это работает. Изменим приведенный выше программный код следующим образом, файл Metod_Builder2.py (листинг 2.16).

Листинг 2.16. Демонстрация метода Builder Metod_Builder2.py (загрузка кода на KV из текстового файла, расположенного в произвольном месте приложения), модуль Metod_Builder2.py

# модуль Metod_Builder2.py

from kivy. app import App # импорт класса – приложения

from kivy.lang import Builder # импорт метода Builder

# загрузка кода из KV файла

kv_file = Builder. load_file (». /KV_file/main_screen. kv’)

class Basic_Class (App): # определение базового класса

…… def build (self):

…… … … return kv_file

My_App = Basic_Class () # приложение на основе базового класса

My_App.run () # запуск приложения

Здесь мы создали переменную kv_file и, с использованием метода Builder. load_file, загрузили в нее код из файла «main_screen. kv’, который находится в папке проекта KV_file. Теперь создадим папку с именем KV_file, в этой папке сформируем файл с именем main_screen. kv и внесем в него следующий программный код (листинг 2.17).

Листинг 2.17. Текстовый файл (модуль main_screen. kv)

# файл main_screen. kv

Label:

…… text: («Метка из файла./KV_file/main_screen. kv’)

…… font_size: ’16pt’

При запуске данной версии приложения получим следующий результат (рис.2.15).

Рис. 2.15. Окно приложения Basic_Class при наличии файла main_screen. kv

Таким образом, в Kivy реализован второй способ отделение кода с логикой работы приложения от кода с описанием интерфейса. Если использовать данный способ, то – файл с кодом на KV (<имя файла>.kv) может иметь любое имя и находиться в любой папке приложения.

Выше было упомянуто, что загрузку виджетов можно сделать и из текстовой строки программного модуля, в котором находится базовый класс. Проверим это, напишем программный код для загрузки кода на языке KV из текстовой строки программного модуля с базовым классом (листинг 2.18).

Листинг 2.18. Демонстрация метода Builder (загрузка кода на KV из текстовой строки) модуль Metod_Builder1.py

# модуль Metod_Builder1.py

from kivy. app import App # импорт класса – приложения

from kivy.lang import Builder # импорт метода Builder

# создание текстовой строки

my_str = «»»

Label:

…… text: («Загрузка метки из текстовой строки»)

…… font_size: ’16pt’

«»»

# загрузка кода из текстовой строки

kv_str = Builder. load_string (my_str)

class Basic_Class (App): # определение базового класса

…… def build (self):

…… … … return kv_str

My_App = Basic_Class () # приложение на основе базового класса

My_App.run () # запуск приложения

Здесь мы создали текстовую строку my_str и поместили в нее программный код на языке KV. Затем в переменную kv_str с использованием метода Builder. load_string, загрузили код из строковой переменной my_str. Затем в базовом классе создали функцию def build (self), которая возвращает значение переменной kv_str. Результат работы этого приложения представлен на рис.2.16.

Рис. 2.16. Окно приложения Basic_Class при загрузки метки из текстовой строки

Таким образом, в Kivy реализована возможность не только отделять код с логикой работы приложения от кода с описанием интерфейса, но и совмещать их в рамках одного программного модуля.

Итак, к данному моменту мы установили, что Kivy позволяет создавать элементы интерфейса приложения (виждеты) на языке KV, и либо разделять, либо совмещать программные коды, описывающие интерфейс и логику работы приложения. Еще выяснили, что по умолчанию виджеты располагаются в центре окна приложения и, при изменении размеров окна, перерисовываются автоматически, сохраняя свои пропорции и положение. Это очень важная особенность Kivy, которая обеспечивает адаптацию приложения под размер экрана того устройства, на котором оно запущено.

2.4. Виджеты в Kivy

Интерфейс пользователя в приложениях на Kivy строится на основе виджетов. Виджеты Kivy можно классифицировать следующим образом.

– UX-виджеты, или видимые виджеты (они отображаются в окне приложения, и пользователь взаимодействует с ними);

– виджеты контейнеры или «макеты» (они не отображаются в окне приложения и служат контейнерами для размещения в них видимых виджетов);

– сложные UX-виджеты (комбинация нескольких виджетов, обеспечивающая совмещение их функций);

– виджеты поведения (контейнеры, которые обеспечивают изменение поведения находящихся в них элементов);

– диспетчер экрана (особый виджет, который управляет сменой экранов приложения).

Видимые виджеты служат для создания элементов пользовательского интерфейса. Типичными представителями таких виджетов являются кнопки, выпадающие списки, вкладки и т. п. Невидимые виджеты используются для позиционирования видимых элементов в окне приложения. Любой инструментарий графического интерфейса пользователя поставляется с набором виджетов. Фреймворк Kivy и библиотека KivyMD имеет множество встроенных виджетов.

Работа со свойствами виджетов в Kivy имеет свои особенности. Например, с параметрами свойств по умолчанию они располагаются в центре элемента, к которому привязаны (например, к главному окну приложения) и занимают всю его площадь. Однако при разработке интерфейса пользователя необходимо размещать виджеты в разных частях экрана, менять их размеры, цвет и ряд других свойств. Для этого каждый виджет имеет набор свойств и методов, которые разработчик может устанавливать по своему усмотрению. Кроме того, разработчик имеет возможность вкладывать один виджет в другой и таким образом строить «дерево виджетов». Теперь можно на простых примерах познакомиться с основными видимыми виджетами Kivy.

2.5. Виджеты пользовательского интерфейса (UX-виджеты)

У фреймворка Kivy имеется небольшой набор видимых виджетов:

– Label – метка или этикетка (текстовая надпись в окне приложения);

– Button – кнопка;

– Checkbox – флажок;

– Image – изображение;

– Slider – слайдер;

– ProgressBar – индикатор;

– TextInput – поле для ввода текста;

– ToggleButton – кнопка «переключатель»;

– Switch – выключатель;

– Video – окно для демонстрации видео из файла;

– Widget – пустая рамка (поле).

Это достаточно скромный, базовый набор визуальных элементов, но мы именно с них начнем знакомство с Kivy.

Примечание.

Более богатый набор визуальных элементов реализован в библиотеке KivyMD. О них будет подробно рассказано в последующих главах.

2.5.1. Виджет Label – метка

Виджет Label используется для отображения текста в окне приложения. Он поддерживает вывод символов как в кодировке ascii, так и в кодировке unicode. Покажем на простом примере, как можно использовать виджет Label в приложении. Для этого создадим файл с именем K_Label_1.py и напишем в нем следующий код (листинг 2.19).

Листинг 2.19. Пример использования виджета Label (модуль K_Label_1.py)

# модуль K_Label_1.py

from kivy. app import App

from kivy.uix.label import Label

class MainApp (App):

…… def build (self):

…… … … L = Label (text=«Это текст», font_size=50)

…… … … return L

MainApp().run ()

В этом модуле мы создали объект-метку L на основе базового класса Label. Для метки в свойстве text задали значение, который нужно вывести на экран – «Это текст», а в свойстве font_size задали размер шрифта -50. После запуска данного приложения получим следующий результат (рис.2.17).

Рис. 2.17. Результаты выполнения приложения из модуля K_Label_1.py

В данном примере объект Label был создан в коде на языке Python. Реализуем тот же пример с использованием языка KV. Для этого создадим файл с именем K_Label_2.py и напишем в нем следующий код (листинг 2.20).

Листинг 2.20. Пример использования виджета Label (модуль K_Label_2.py)

# модуль K_Label_2.py

from kivy. app import App

from kivy.lang import Builder

KV = «»»

Label:

…… text: «Это текст»

…… font_size: 50

«»»

class MainApp (App):

…… def build (self):

…… … … return Builder. load_string (KV)

MainApp().run ()

В данном примере объект Label был создан в коде на языке KV, а результат работы приложения будет таким же, как представлено на предыдущем рисунке.

Метка Label имеет ряд свойств, которые позволяют задать выводимый текст и параметры шрифта:

– text – текст, выводимый в видимую часть виджета (текстовое содержимое метки, надпись на кнопке и т.п.);

– font_size – размер шрифта;

– color – цвет шрифта;

– font_name – имя файла с пользовательским шрифтом (.ttf).

2.5.2. Виджет Button – кнопка

Кнопка Button – это элемент интерфейса, при касании которого будут выполнены запрограммированные действия. Виджет Button имеет те же свойства, что и виджет Label. Покажем на простом примере, как можно использовать виджет Button в приложении. Для этого создадим файл с именем K_Button_1.py и напишем в нем следующий код (листинг 2.21).

Листинг 2.21. Пример использования виджета Button (модуль K_Button_1.py)

# модуль K_Button_1.py

from kivy. app import App

from kivy. uix. button import Button

class MainApp (App):

…… def build (self):

…… … … btn = Button (text=«Это кнопка», font_size=50)

…… … … return btn

MainApp().run ()

В этом модуле мы создали объект-кнопку btn на основе базового класса Button. Для кнопки в свойстве text задали надпись, которую нужно вывести на кнопку – «Это кнопка», а в свойстве font_size задали размер шрифта -50. После запуска данного приложения получим следующий результат (рис.2.18).

Рис. 2.18. Результаты выполнения приложения из модуля K_Button _1.py

В данном примере объект Button был создан в коде на языке Python. Как видно из данного рисунка, в нажатом и отпущенном состоянии кнопка будет иметь разный вид. В данном примере мы не программировали действия, которые будут выполнены при касании кнопки, этот вопрос будет освящен в разделе, касающемся обработки событий. А сейчас реализуем тот же пример с использованием языка KV. Для этого создадим файл с именем K_Button_2.py и напишем в нем следующий код (листинг 2.22).

Листинг 2.22. Пример использования виджета Button (модуль K_Button _2.py)

# модуль K_Button_2.py

from kivy. app import App

from kivy.lang import Builder

KV = «»»

Button:

…… text: «Это кнопка»

…… font_size: 50

«»»

class MainApp (App):

…… def build (self):

…… …… return Builder. load_string (KV)

MainApp().run ()

В данном примере объект Button был создан в коде на языке KV, а результат работы приложения будет таким же, как представлено на предыдущем рисунке.

Кнопка Button имеет ряд свойств, которые позволяют задать надпись на кнопке, параметры шрифта, и запустить реакцию на события или изменение состояния:

– text – надпись на кнопке;

– font_size – размер шрифта;

– color – цвет шрифта;

– font_name – имя файла с пользовательским шрифтом (.ttf).

– on_press – событие, возникает, когда кнопка нажата;

– on_release – событие, возникает, когда кнопка отпущена;

– on_state – состояние (изменяется тогда, когда кнопка нажата или отпущена).

2.5.3. Виджет CheckBox – флажок

Виджет CheckBox (флажок) это элемент в виде мини-кнопки с двумя состояниями. Флажок в данном элементе можно либо поставить, либо снять. Покажем на простом примере, как можно использовать виджет CheckBox в приложении. Для этого создадим файл с именем K_CheckBox_1.py и напишем в нем следующий код (листинг 2.23).

Листинг 2.23. Пример использования виджета CheckBox (модуль K_CheckBox_1.py)

# модуль K_CheckBox_1.py

from kivy. app import App

from kivy.uix.checkbox import CheckBox

class MainApp (App):

…… def build (self):

…… …… checkbox = CheckBox ()

…… …… return checkbox

MainApp().run ()

В этом модуле мы создали объект-флажок checkbox на основе базового класса CheckBox. После запуска данного приложения получим следующий результат (рис.2.19).

Рис. 2.19. Результаты выполнения приложения из модуля K_CheckBox _1.py

В данном примере объект CheckBox был создан в коде на языке Python. Как видно из данного рисунка, при установке и снятии флажка виджет будет иметь разный вид. В данном примере мы не программировали действия, которые будут выполнены при изменении состояния флажка, этот вопрос будет освящен в разделе, касающемся обработки событий. А сейчас реализуем тот же пример с использованием языка KV. Для этого создадим файл с именем K_CheckBox_2.py и напишем в нем следующий код (листинг 2.24).

Листинг 2.24. Пример использования виджета CheckBox (модуль K_CheckBox _2.py)

# модуль K_CheckBox_2.py

from kivy. app import App

from kivy.lang import Builder

KV = «»»

CheckBox:

«»»

class MainApp (App):

…… def build (self):

…… … … return Builder. load_string (KV)

MainApp().run ()

В данном примере объект CheckBox был создан в коде на языке KV, а результат работы приложения будет таким же, как представлено на предыдущем рисунке.

Флажок CheckBox имеет ряд свойств, которые позволяют задать цвет и запустить реакцию на изменение состояния:

– color – цвет флажка (в формате r, g,b,a);

– active – состояние в виде логического значения (True – когда флажок поставлен, False – когда флажок снят).

2.5.4. Виджет Image – рисунок

Виджет Image (рисунок) служит для вывода в окно приложения изображения. Покажем на простом примере, как можно использовать виджет Image в приложении. Для этого создадим файл с именем K_Image_1.py и напишем в нем следующий код (листинг 2.25).

Листинг 2.25. Пример использования виджета Image (модуль K_Image_1.py)

# модуль K_ Image _1.py

from kivy. app import App

from kivy.uix.image import Image

class MainApp (App):

…… def build (self):

…… … … img = Image(source="./Images/Fon2.jpg»)

…… … … return img

MainApp().run ()

В этом модуле мы создали объект-изображение img на основе базового класса Image. Для изображения в свойстве source задали путь к файлу с изображением. После запуска данного приложения получим следующий результат (рис.2.20).

Рис. 2.20. Результаты выполнения приложения из модуля K_Image _1.py

В данном примере объект Image был создан в коде на языке Python. А сейчас реализуем тот же пример с использованием языка KV. Для этого создадим файл с именем K_Image_2.py и напишем в нем следующий код (листинг 2.26).

Листинг 2.26. Пример использования виджета Image (модуль K_ mage_2.py)

# модуль K_Image_2.py

from kivy. app import App

from kivy.lang import Builder

KV = «»»

Image:

…… source: "./Images/Fon2.jpg»

«»»

class MainApp (App):

…… def build (self):

…… …… return Builder. load_string (KV)

MainApp().run ()

В данном примере объект Image был создан в коде на языке KV, а результат работы приложения будет таким же, как представлено на предыдущем рисунке.

Виджет Image имеет свойства, которые позволяют загрузить изображение и придать ему оттенок:

– source – источник (путь к файлу для загрузки изображения);

– color – цвет изображения (в формате r, g, b, a), можно использовать для «подкрашивания» изображения.

Этот виджет имеет подкласс AsyncImage, который позволяет загрузить изображение асинхронно (например, из интернета с веб-сайта). Это может быть полезно, поскольку не блокирует приложение в ожидании загрузки изображения (оно загружается в фоновом потоке).

2.5.5. Виджет Slider – слайдер (бегунок)

Виджет Slider (слайдер) это бегунок, который поддерживает горизонтальную и вертикальную ориентацию и используется в качестве полосы прокрутки. Покажем на простом примере, как можно использовать виджет Slider в приложении. Для этого создадим файл с именем K_Slider_1.py и напишем в нем следующий код (листинг 2.27).

Листинг 2.27. Пример использования виджета Slider (модуль K_Slider_1.py)

# модуль K_Slider_1.py

from kivy. app import App

from kivy.uix.slider import Slider

class MainApp (App):

…… def build (self):

…… … … slide = Slider (orientation=’vertical’,

…… … … value_track=True,

…… … … value_track_color= (1, 0, 0, 1))

…… … … return slide

MainApp().run ()

В этом модуле мы создали объект-бегунок slide на основе базового класса Slider. Для бегунка задали следующие свойства:

– orientation=’vertical’ – вертикальная ориентация;

– value_track=True – показать след бегунка;

– value_track_color= (1, 0, 0, 1) – задан цвет следа бегунка (красный).

После запуска данного приложения получим следующий результат (рис.2.21).

Рис. 2.21. Результаты выполнения приложения из модуля K_Slider_1.py (при вертикальном расположении бегунка)

В данном примере объект Slider был создан в коде на языке Python. А сейчас реализуем тот же пример с использованием языка KV. Для этого создадим файл с именем K_Slider_2.py и напишем в нем следующий код (листинг 2.28).

Листинг 2.28. Пример использования виджета Slider (модуль K_Slider_2.py)

# модуль K_Slider_2.py

from kivy. app import App

from kivy.lang import Builder

KV = «»»

Slider:

…… orientation: ’horizontal’

…… value_track: True

…… value_track_color: 1, 0, 0, 1

«»»

class MainApp (App):

…… def build (self):

…… …… return Builder. load_string (KV)

MainApp().run ()

В данном примере объект Slider был создан в коде на языке KV, и было изменено одно свойство – ориентация. В данном коде задана горизонтальная ориентация бегунка. После запуска данного приложения получим следующий результат (рис.2.22).

Рис. 2.22. Результаты выполнения приложения из модуля K_Slider_2.py (при горизонтальном расположении бегунка)

Бегунок Slider имеет ряд свойств, которые позволяют задать некоторые параметры, запустить реакцию на события или изменение состояния:

– min – минимальное значение (например – 0);

– max – максимальное значение (например – 500);

– value – текущее (начальное) значение (например – 50);

– step – шаг изменения значения (например – 1);

– value_track_color – цвет следа бегунка (в формате r, g, b, a);

– value_track – показывать след бегунка (True – да, False – нет)

– orientation – ориентация бегунка (’vertical’ – вертикальная, ’horizontal’ – горизонтальная);

– on_touch_down – событие (касание бегунка);

– on_touch_up – событие (бегунок отпущен);

– on_touch_move – событие (касание бегунка с перемещением).

2.5.6. Виджет ProgressBar – индикатор

Виджет ProgressBar (индикатор) используется для отслеживания хода выполнения любой задачи. Покажем на простом примере, как можно использовать виджет ProgressBar в приложении. Для этого создадим файл с именем K_ProgressBar_1.py и напишем в нем следующий код (листинг 2.29).

Листинг 2.29. Пример использования виджета ProgressBar (модуль K_ProgressBar_1.py)