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

1.6. Первые приложения на Kivy и KivyMD

Начнем изучение Kivy с написания простейшего приложения, состоящего всего из пяти строчек программного кода. В предыдущем разделе мы создали проект с именем Kivy_Project, теперь в этом проекте создадим новый Python файл с именем First_App. Для этого в созданном нами проекте кликнем правой кнопкой мыши на имени проекта и в появившемся меню выберем опции: New-> Python File (рис.1.37).

Рис. 1.37. Создание Python файла в среде PyCharm

В появившемся окне зададим имя новому файлу – First_App (рис.1.38)

Рис. 1.38. Задание имени Python файлу, создаваемому в среде PyCharm

После того, как будет нажата клавиша Enter, будет создан пустой файл с именем First_App.py (рис.1.39).

Рис. 1.39. Python файл с именем First_App.py, созданный в среде PyCharm

Теперь в открывшемся окне редактора файле First_App.py, наберем следующий программный код (листинг 1.1).

Листинг 1.1. Программный код простейшего приложения на Kivy (модуль First_App.py)

import kivy. app # импорт фрейморка kivy

class TestApp (kivy. app. App): # формирование базового класса

…… …… … …… …… …… … … … … приложения

……pass

app = TestApp () # создание объекта (приложения app) на основе

…… …… …… …… …… базового класса

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

В первой строке был выполнен импорт модулей, обеспечивающих работу приложений на Kivy (import kivy. app). Далее был сформирован базовый класс приложения с именем TestApp. Пока это пустой класс, внутри которого не выполняется никаких действий. В следующей строке на основе базового класса «kivy. app. App» создан объект app – по сути это и есть наше первое приложение. И, наконец, в последней строке с использованием метода run будет осуществлен запуск приложения с именем app. Вот собственно и все.

Примечание.

Одна из особенностей Python заключается в том, что для оформления блоков кода вместо привычных фигурных скобок, как в C, C ++, Java, используются отступы (или табуляция). Отступы – важная концепция языка Python и без правильного их оформления в программе будут возникать ошибки. В IDE PyCharm пробелы (отступы) формируются автоматически, поэтому программистам проще отслеживать правильность расстановки пробелов. Если вы переносите программный код примеров на свой компьютер из листингов данной книги, то внимательно проверяйте правильность расстановки отступов. В листингах программ наличие отступов условно показаны многоточием.

Можно запустить наше первое приложение, для этого кликнем павой кнопкой в окне редактора программного кода и в открывшемся меню выберем опцию Run «First_App’ (рис.1.40).

Рис. 1.40. Запуск первого приложения с именем First_App.py в среде PyCharm

Поле этих действий на экран будет выведено окно созданного приложения (рис.1.41).

Рис. 1.41. Окно первого приложения с именем First_App.py, работающего на персональном компьютере

На экране появится пустое черное окно с титульной строкой в верхней части. В титульной строке будет отображена иконка с логотипом Kivy, имя нашего приложения (Test) и три стандартные кнопки (свернуть приложение, развернуть приложение, закрыть приложение). Поскольку мы для приложения не задавали никаких параметров, то все их значения устанавливаются по умолчанию: размер окна, цвет экрана (черный), имя приложения формируется на основе имени базового класса без символов App, то есть от имени базового класса остаются только символы Test. Поскольку в базовом классе не было задано никаких визуальных элементов, то окно приложения является пустым.

Размеры окна по умолчанию, будут зависеть от устройства, на котором запускается приложение. На вышеприведенном рисунке изображены пропорции окна приложения, запущенного на компьютерах, работающих под операционными системами Windows и Linux. Если это же приложение будет запущено на мобильном устройстве (например, на смартфоне), то пропорции экрана будут иными, то есть соответствовать размеру экрана мобильного устройства.

Вопрос о том, как загрузить данное приложение на смартфоне будет освещен в последней главе, а пока поэкспериментируем с простейшими приложениями на Kivy и KivyMD.

Напишем приложение, в базовом классе которого будут выполняться простейшие действия, например, выведено сообщение – «Привет от Kivy». Создадим новый Python файл и напишем в нем следующий код (листинг 1.2).

Листинг 1.2. Программный код приложения «Привет от Kivy» (модуль First_App_Kivy.py)

# модуль First_App_Kivy.py

import kivy. app # импорт фрейморка kivy

import kivy.uix.label # импорт визуального элемента label (метка)

class MainApp (kivy. app. App): # формирование базового класса

…… …… …… …… …… …… …… …… …… …… …… …… приложения

…… def build (self): # формирование функции в базовом классе

…… … … return kivy.uix.label.Label (text=«Привет от Kivy!»)

app = MainApp (title=«Первое приложение на Kivy») #Задание имени

…… … … … … … … … …… … … … … … … … … … … … … … …приложения

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

В данном приложении импортируются уже два модуля: приложение (import kivy. app), и элемент пользовательского интерфейса label – метка (import kivy.uix.label). Далее в базовом классе приложения (MainApp) определяем функцию, называемую build. В этой функции размещаются виджеты (элементы графического интерфейса), которые появятся на экране при запуске приложения. В нашем примере мы задали виджет – метка на основе модуля kivy.uix.label с использованием класса Label, и свойству метки (text), присвоили значение «Привет от Kivy».

В следующей строке на основе базового класса создан объект app – наше приложение, и этому приложению задали свое имя (title=«Первое приложение на Kivy»). И, наконец, в последней строке с использованием метода run будет осуществлен запуск приложения с именем app.

Создадим точно такое же простейшее приложение с использованием библиотеки KivyMD (листинг 1.3).

Листинг 1.3. Программный код приложения «Привет от KivyMD» (модуль First_App_Kivy_MD.py)

# модуль First_App_Kivy_MD.py

from kivymd. app import MDApp

from kivymd.uix.label import MDLabel

class MainApp (MDApp):

……def build (self):

…… … … return MDLabel (text=«Привет от KivyMD!», halign=«center»)

app = MainApp (title=«Первое приложение на KivyMD»)

app.run ()

Этот программный код по свое структуре практически не отличается от предыдущего кода. Разница лишь в том, что мы импортировали модули от библиотеки KivyMD (первые две строки), и в строке инициализации метки задали ей положение в центре экрана (halign=«center»). В библиотеке KivyMD по умолчанию она была бы прижата к левой части экрана.

Если теперь запустить эти два приложения на выполнение, то мы получим следующие сообщения (рис.1.42).

Рис. 1.42. Окна первого приложения на Kivy и KivyMD с визуальным элементом

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

Следует отметить еще одну особенность, любой визуальный элемент занимает все пространство окна и, если не заданы параметры его размещения, то для Kivy виджет располагается в центре экрана, для KivyMD – прижимается к левому краю экрана. В титульной строке приложения мы видим логотип Kivy. Этот логотип задается по умолчанию и всегда присутствует в приложениях, которые запускаются на настольных компьютерах под Windows, но он будет отсутствовать в приложениях, запускаемых на Linux и на смартфонах. Однако не зависимо от платформы этот логотип будет отображен на значке запуска приложения. При этом разработчик может сопоставить разработанное приложение с любым своим логотипом.

Внесем изменения в приведенные выше программные коды, определив для приложений собственный логотип, и сделав код более привычным для программистов. Модифицированный программный код приложения на Kivy с указанием собственного логотипа в файле pyt. ico, приведен в листинге 1.4.

Листинг 1.4. Модифицированный программный код приложения на Kivy (модуль First_App_Kivy2)

# модуль First_App_Kivy2.py

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

from kivy.uix.label import Label # импорт элемента label (метка)

class MainApp (App): # формирование базового класса приложения

…… def build (self): # формирование функции в базовом классе

…… … … self. title = «Приложение на Kivy’ # Имя приложения

…… … … self. icon =». /pyt. ico’ # иконка (логотип) приложения

…… … … label = Label (text=«Привет от Kivy и Python!») # метка

…… … ….return label # возврат значения метки

if __name__ == '__main__': # условие вызова приложения

…… app = MainApp () # Задание приложения

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

Первые две строчки данного программного кода не изменились – импортируются два модуля: приложение (import kivy. app) и элемент пользовательского интерфейса label – метка (import kivy.uix.label). Далее в базовом классе приложения (MainApp) определяем функцию c именем build. В данной функции мы определяет имя для нашего приложения – self. title (то, что будет отображаться в титульной строке приложения) и задаем собственную иконку. Для данного примера была взята иконка в виде логотипа Python – файл pyt. ico, который поместили в корневой каталог проекта. Задание собственной иконки для приложения выполнили с помощью строки программного кода – self. icon =». /pyt. ico’. В следующей строке программы создали метку и присвоили ей значение «Привет от Kivy и Python», а команда return вернет это значение приложению. Последние три строчки уже знакомы пользователям Python:

– определяем условие вызова приложения (if __name__);

– определяем само приложение с указанием заголовка главного окна (app = MainApp (title=«Первое приложение»);

– запускаем приложение на исполнение – app.run ().

Аналогичные изменения сделаем и для программного кода приложения на KivyMD (листинг 1.5).

Листинг 1.5. Модифицированный программный код приложения на KivyMD (модуль First_App_KivyMD2.py)

# модуль First_App_KivyMD2.py

from kivymd. app import MDApp

from kivymd.uix.label import MDLabel

class MainApp (MDApp):

…….def build (self):

…… … … self. icon = 'icon.png’

…… … … self. title = «Приложение на KivyMD»

…… … …label = MDLabel (text=«Привет от KivyMD и Python»,

…… …… …… …… …… …… halign=«center»)

…… … … return label

if __name__ == '__main__»:

…… app = MainApp ()

…… app.run ()

Здесь в качестве логотипа использовано изображение из файла – icon.png.

После запуска этих двух программ получим следующий результат (рис.1.43).

Рис. 1.43. Окна приложений на Kivy и KivyMD c собственным логотипом

Как видно из данного рисунка, в титульной строке окна приложения появились пользовательские иконки и название приложения.

Краткие итоги

В этой главе мы познакомились с основными инструментальными средствами, с помощью которых можно разрабатывать кроссплатформенные приложения на языке программирования Python, как для настольных компьютеров, так и для мобильных устройств. Это интерпретатор Python, интерактивная среда разработки программного кода PyCharm, фреймворк Kivy и библиотека KivyMD. Установив на свой компьютер эти инструментальные средства уже можно приступать к написанию программного кода, что мы и сделали, написав несколько простейших программ.

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

Глава 2. Фреймоворк Kivy, язык KV и виджеты, как основа пользовательского интерфейса

2.2.1. Классы и объекты

По мере того, как приложение усложняется, становится трудно поддерживать конструкцию дерева виджетов и явное объявление привязок. Чтобы преодолеть эти недостатки, альтернативой является язык KV, также известный как язык Kivy или KVlang. Язык KV позволяет создавать дерево виджетов в декларативной манере, позволяет очень быстро создавать прототипы и оперативно вносить изменения в пользовательский интерфейс. Это также помогает отделить логику приложения от пользовательского интерфейса.

Язык KV, как и Python, является объектно-ориентированным языком. Все элементы интерфейса представляют собой объекты, которые строятся на основе базовых классов. Каждый класс имеет набор свойств, зарезервированных методов и событий, которые могут быть обработаны с помощью функций. В языке KV принято соглашение: имя класса всегда начинается с заглавной буквы (например, Button – кнопка, Label – метка), а имя свойства с маленькой буквы (например, text, text_size, font_size).

Самый простой способ использования классов в KV – это употребление их оригинальных имен. Проверим это на простом примере. Создадим файл с именем K_May_Class1.py и напишем в нем следующий код (листинг 2.1).

Листинг 2.1. Пример использования базового класса (модуль K_My_Class1.py)

# модуль K_May_Class1.py

from kivy. app import App

from kivy.lang import Builder

KV =«»»

BoxLayout: # контейнер (базовый класс BoxLayout)

……Button: # кнопка (класс Button)

…… … … text: «Кнопка 1» # свойство кнопки (надпись)

«»»

class MainApp (App):

…… def build (self):

…… … … return Builder. load_string (KV)

MainApp().run ()

Примечание.

Мы еще не знакомились с виджетами Kivy, а в этом коде используется два виджета: видимый виджет Button (кнопка), и виджет – контейнер BoxLayout (коробка). Более подробно о них будет сказано в последующих разделах. А пока будем использовать их в своих примерах. В листинге присутствуют тройные кавычки – «»», в редакторе программного кода вместо них нужно использовать тройной апостроф – «'''».

В этом коде в текстовой переменной KV создан виджет – контейнер на основе базового класса BoxLayout, в нем размещена кнопка (Button), свойству кнопки text присвоено значение «Кнопка 1» (на языке KV свойство от его значения отделяется знаком двоеточия «:»). При этом нет необходимости явно импортировать базовые классы, они загрузятся автоматически. После запуска приложения получим следующий результат (рис.2.1).

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

В этом примере мы косвенно познакомились с виджетом – контейнером BoxLayout и простейшим деревом виджетов. Здесь в виджет – контейнер была помещена кнопка. Более подробно виджеты – контейнеры будут рассмотрены в последующих разделах.

Разработчик может в коде на Python переопределить имя базового класса, то есть создать собственный пользовательский класс. Например, разработчик хочет использовать класс BoxLayout, но при этом дать ему другое имя, например, MyBox. Проверим это на простом примере. Создадим файл с именем K_May_Class2.py и напишем в нем следующий код (листинг 2.2).

Листинг 2.2. Пример использования пользовательского класса (модуль K_My_Class2.py)

# модуль K_May_Class2.py

from kivy. app import App

from kivy.lang import Builder

from kivy.uix.boxlayout import BoxLayout

KV = «»»

MyBox: # контейнер (пользовательский класс)

……Button: # кнопка (класс Button)

…… … …text: «Кнопка 2» # свойство кнопки (надпись на кнопке)

«»»

# пользовательский класс MyBox

# на основе базового класса BoxLayout

class MyBox (BoxLayout):

…… pass

class MainApp (App):

…… def build (self):

…… … … return Builder. load_string (KV)

MainApp().run ()

В этом программном коде на языке Python создан пользовательский класс MyBox на основе базового класса BoxLayout. При этом нужно явно выполнить импорт базового класса BoxLayout:

from kivy.uix.boxlayout import BoxLayout

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

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

Однако есть более простой способ создания пользовательского класса непосредственно в коде на языке KV. Для этого используется следующая конструкция:

<Имя_пользовательского_класса@Имя_базового_класса>

Проверим это на простом примере. Создадим файл с именем K_May_Class3.py и напишем в нем следующий код (листинг 2.3).

Листинг 2.3. Пример использования пользовательского класса (модуль K_My_Class3.py)

# модуль K_May_Class3.py

from kivy. app import App

from kivy.lang import Builder

KV = «»»

# пользовательский класс MyBox

# на основе базового класса BoxLayout

MyBox: # контейнер (пользовательский класс)

…… Button: # кнопка (класс Button)

…… … … text: «Кнопка 3» # свойство кнопки (надпись на кнопке)

«»»

class MainApp (App):

…… def build (self):

…… … … return Builder. load_string (KV)

MainApp().run ()

В этом программном коде пользовательский класс MyBox на основе базового класса BoxLayout создан непосредственно в коде на KV:

При этом не нужно явно выполнить импорт базового класса BoxLayout, и не нежно объявлять пользовательский класс в разделе программы на Python. При этом сам программный код получается компактным и более понятным.

Примечание.

В этом случае строка, в которой сформирован пользовательский класс, должна находиться между символами <…>.

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

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