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

2.5.7. Виджет TextInput – поле для ввода текста

Виджет TextInpu (текстовое поле) используется для ввода и редактирования текста. Покажем на простом примере, как можно использовать виджет TextInput в приложении. Для этого создадим файл с именем K_TextInput_1.py и напишем в нем следующий код (листинг 2.31).

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

# модуль K_TextInput_1.py

from kivy. app import App

from kivy. uix. textinput import TextInput

class MainApp (App):

…… def build (self):

…… … … my_text = TextInput (font_size=30)

…… … … return my_text

MainApp().run ()

В этом модуле мы создали объект my_text – поле для ввода текста на основе базового класса TextInput. В свойстве font_size=30 задан размер шрифта. После запуска данного приложения получим следующий результат (рис.2.24).

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

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

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

# модуль K_TextInput_2.py

from kivy. app import App

from kivy.lang import Builder

KV = «»»

…… TextInput:

…… font_size: 30

«»»

class MainApp (App):

…… def build (self):

…… …… return Builder. load_string (KV)

MainApp().run ()

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

Виджет TextInput имеет ряд свойств, которые позволяют задать вводимому тексту параметры шрифта:

– text – текст (текстовое содержимое поля ввода.);

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

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

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

– password – скрывать вводимые символы (при значении свойства True);

– password_mask – маска символа (символ, который скрывает вводимый текст).

2.5.8. Виджет ToggleButton – кнопка «с залипанием»

Виджет ToggleButton действует как кнопка с эффектом залипания. Когда пользователь касается кнопки, она нажимается и остается в нажатом состоянии, после второго касания кнопка возвращается в исходное состояние. Покажем на простом примере, как можно использовать виджет ToggleButton в приложении. Для этого создадим файл с именем K_ToggleButton_1.py и напишем в нем следующий код (листинг 2.33).

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

# модуль K_ToggleButton_1.py

from kivy. app import App

from kivy.uix.togglebutton import ToggleButton

class MainApp (App):

…… def build (self):

…… …… t_but = ToggleButton (text=«Кнопка»,

…… …… font_size=50)

…… …… return t_but

MainApp().run ()

В этом модуле мы создали объект t_but – кнопка с эффектом залипания на основе базового класса ToggleButton. Свойству text присвоили значение «Кнопка» и задали размер шрифта font_size=50. После запуска данного приложения получим следующий результат (рис.2.25).

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

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

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

# модуль K_ToggleButton_2.py

from kivy. app import App

from kivy.lang import Builder

KV = «»»

ToggleButton:

…… text: «Кнопка»

…… font_size: 50

«»»

class MainApp (App):

…… def build (self):

…… …… return Builder. load_string (KV)

MainApp().run ()

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

Кнопки ToggleButton могут быть сгруппированы для создания группы переключателей. В этом случае только одна кнопка в группе может находиться в «нажатом» состоянии. Имя группы может быть строкой с произвольным содержанием. Для примера создадим файл с именем K_ToggleButton_3.py и напишем в нем следующий код (листинг 2.35).

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

# модуль K_ToggleButton_3.py

from kivy. app import App

from kivy.lang import Builder

KV = «»»

BoxLayout:

…… orientation: «vertical»

…… ToggleButton:

…… …… text: «Москва»

…… …… group:’city’

…… …… state: ’down’

…… ToggleButton:

…… …… text: «Воронеж»

…… …… group: ’city’

…… ToggleButton:

…… …… text: «Сочи»

…… …… group: ’city’

«»»

class MainApp (App):

…… def build (self):

…… …… return Builder. load_string (KV)

MainApp().run ()

В этом модуле создано 3 кнопки, которые собраны в одну группу city. Первая кнопка переведена в нажатое состояние – state: ’down’. После запуска приложения получим следующий результат (рис.2.26).

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

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

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

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

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

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

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

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

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

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

– group – задание имени группы (текстовая строка, например ’city’);

– state – задание состояние кнопки (’down’ – нажата).

2.5.9. Виджет Switch – выключатель

Виджет Switch действует как кнопка – выключатель. При этом имитируется механический выключатель, который либо включается, либо выключается. Виджет Switch имеет два положения включено (on) – выключено (off). Когда пользователь касается кнопки, она переходит из одного положения в другое. Покажем на простом примере, как можно использовать виджет Switch в приложении. Для этого создадим файл с именем K_Switch1.py и напишем в нем следующий код (листинг 2.36).

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

# модуль K_Switch1.py

from kivy. app import App

from kivy. uix. switch import Switch

class MainApp (App):

…… def build (self):

…… …… sw = Switch (active=True)

…… …… return sw

MainApp().run ()

В этом модуле мы создали объект sw (кнопка выключатель) на основе базового класса Switch. Свойству active (состояние) присвоили значение True (включено). После запуска данного приложения получим следующий результат (рис.2.27).

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

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

Листинг 2.36_1. Пример использования виджета Switch (модуль K_Switch_1.py)

# модуль K_Switch2.py

from kivy. app import App

from kivy.lang import Builder

KV = «»»

Switch:

…… active: True

«»»

class MainApp (App):

…… def build (self):

…… … … return Builder. load_string (KV)

MainApp().run ()

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

По умолчанию виджет является статичным с минимальным размером 83x32 пикселя. Выключатель Switch имеет ряд свойств, которые позволяют задать и получить некоторые параметры:

– active – состояние выключателя (по умолчанию имеет значение False)

– on_touch_down – событие (касание выключателя);

– on_touch_up – событие (выключатель отпущен);

– on_touch_move – событие (касание выключателя с перемещением).

К сожалению, данный элемент не имеет свойства text, поэтому для размещения поясняющих надписей нужно в паре использовать метку Label.

2.5.10. Виджет Video – окно для демонстрации видео

Виджет Video создает окно для демонстрации видео из видео файла и видео потока. Виджет Video имеет свойство play (проигрывать), которое может принимать два значения: True – начать проигрывание, False – остановить проигрывание.

Примечание.

В зависимости от вашей платформы и установленных плагинов вы сможете воспроизводить видео разных форматов. Например, поставщик видео pygame поддерживает только формат MPEG1 в Linux и OSX, GStreamer более универсален и может читать многие кодеки, такие как MKV, OGV, AVI, MOV, FLV (если установлены правильные плагины gstreamer).

Покажем на простом примере, как можно использовать виджет Video в приложении. Для этого создадим файл с именем K_Video1.py и напишем в нем следующий код (листинг 2.37).

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

# модуль K_Video1.py

from kivy. app import App

from kivy.uix.video import Video

class MainApp (App):

…… def build (self):

…… … … video = Video(source="./Video/My_video.mp4», play=True)

…… … … return video

MainApp().run ()

В этом модуле мы создали объект video (окно для показа кадров) на основе базового класса Video. Свойству play (проигрывать) присвоили значение True (включено). После запуска данного приложения получим следующий результат (рис.2.28).

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

Примечание.

Если на вашем компьютере не воспроизводится видео, то, скорее всего это происходит из-за отсутствия нужных кодеков. Для воспроизведения видеофайлов разных форматов нужно в инструментальную среду дополнительно установить модуль ffpyplayer. Для этого необходимо в терминале Pycharm выполнить команду: pip install ffpyplayer

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

Листинг 2.37_1. Пример использования виджета Video (модуль K_Video_2.py)

# модуль K_Video2.py

from kivy. app import App

from kivy.lang import Builder

KV = «»»

Video:

…… source: "./Video/My_video.mp4»

…… … … play: True

«»»

class MainApp (App):

…… def build (self):

…… … … return Builder. load_string (KV)

MainApp().run ()

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

Объект Video имеет ряд свойств, которые позволяют задать и получить некоторые параметры:

– source – источник (путь к файлу и имя видео файла)

– play – проигрывать (по умолчанию False, для запуска проигрывания установить -True);

– state – состояние (имеет три значения: play – проигрывать, pause – поставить на паузу, stop – остановить);

– volume – громкость звука, значение в диапазоне 0—1 (1 – полная громкость, 0 – отключение звука).

2.5.11. Виджет Widget – базовый класс (пустая поверхность)

Класс Widget является своеобразным базовым классом, необходимым для создания пустой поверхности, которая по умолчанию имеет черный цвет. Это некая основа, или базовый строительный блок интерфейсов GUI в Kivy. Кроме того, эта поверхность может использоваться как холст для рисования.

Покажем на простом примере, как можно использовать виджет Widget в приложении. Для этого создадим файл с именем K_Widget_1.py и напишем в нем следующий код (листинг 2.38).

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

# модуль K_Widget_1.py

from kivy. app import App

from kivy. uix. widget import Widget

class MainApp (App):

…… def build (self):

…… … … wid = Widget ()

…… … … return wid

MainApp().run ()

В этом модуле мы создали объект wid (пустая поверхность) на основе базового класса Widget. После запуска данного приложения получим следующий результат (рис.2.29).

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

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

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

# модуль K_Widget_2.py

from kivy. app import App

from kivy.lang import Builder

KV = «»»

Widget:

«»»

class MainApp (App):

…… def build (self):

…… … … return Builder. load_string (KV)

MainApp().run ()

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

У данного класса есть встроенный объект canvas, который можно использовать для рисования на экране. Данный объект может принимать события и реагировать на них. Кроме того, у данного встроенного объекта есть две важные инструкции: Color (цвет) и Rectangle (прямоугольник, рамка). С использованием данных инструкций для созданной поверхности можно задать цвет, или поместить на нее изображение.

Для демонстрации этой возможности создадим файл с именем K_Widget_3.py и напишем в нем следующий код (листинг 2.40).

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

# модуль K_Widget_3.py

from kivy. app import App

from kivy.lang import Builder

KV = «»»

Widget:

…… canvas:

…… … … Color:

…… … … … … rgba: 0, 1, 0, 1

…… … … Rectangle:

…… … … … … pos: self. pos

…… … … … … size: self.size

«»»

class MainApp (App):

…… def build (self):

…… … … return Builder. load_string (KV)

MainApp().run ()

В этом модуле мы создали объект Widget, а для объекта canvas в инструкциях задали следующие параметры:

– Color (цвет) – зеленый (rgba: 0, 1, 0, 1);

– Rectangle (рамка) – принимать позицию и размер такими, как у родительского элемента.

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

Рис. 2.30. Результаты выполнения приложения из модуля K_ Widget _3.py

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

Теперь попробуем вставить в рамку изображение. Для демонстрации этой возможности создадим файл с именем K_Widget_4.py и напишем в нем следующий код (листинг 2.41).

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

# модуль K_Widget_4.py

from kivy. app import App

from kivy.lang import Builder

KV = «»»

Widget:

…… canvas:

…… … … #Color:

…… … … #rgba: 1, 0, 0, 1

…… Rectangle:

…… … … source: './Images/Fon.jpg’

…… … … pos: self. pos

…… … … size: self.size

«»»

class MainApp (App):

…… def build (self):

…… … … return Builder. load_string (KV)

MainApp().run ()

В этом модуле мы создали объект Widget, а для объекта canvas в инструкцию Rectangle (рамка) загрузили изображение из файла './Images/Fon.jpg’. Инструкция Color (цвет) закомментирована, поэтому изображение будет показано в оригинальном цвете. Если снять комментарии с этих строк, то изображение пример красный оттенок. После запуска данного приложения получим следующий результат (рис.2.31).

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

Как видно из данного рисунка, инструкции объекта color распространяется на все изображение.

Объект Widget имеет ряд свойств, которые позволяют задать и получить некоторые параметры:

– canvas – встроенный объект, имеющий инструкции (важно – пишется с маленькой буквы);

– Color – инструкция для задания цвета виджета (важно – пишется с большой буквы);

– rgba – свойство (цвет виджета), задается в формате r, g, b, a;

– Rectangle – инструкция для задания свойств рамки виджета (важно – пишется с большой буквы);

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

– size – размер (указывается – self.size, иметь размер рамки, как у родительского виджета);

– pos – положение (указывается – self. pos, иметь положение рамки, как у родительского виджета).

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

2.6. Правила работы с виджетами в Kivy

2.6.1. Задание размеров и положения виджетов в окне приложения

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

Рассмотрим на примере кнопки Button, как можно задать ей размер и расположить в разных местах главного экрана. Создадим файл с именем Button1.py и напишем в нем следующий код (листинг 2.42).

Листинг 2.42. Задание параметров виджету Button – размер и положение (модуль Button1.py)

# модуль Button1.py

from kivy. app import App

from kivy.lang import Builder

KV = «»»

Button:

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

…… size_hint:.5,.5

…… # – — – — – — – — – —

…… #size_hint:.8,.5

…… #size_hint:.5,.8

…… pos_hint: {’center_x’:.5, ’center_y’:.5}

…… # – — – — – — – — – — – — – — – — – — – — – —

…… #size_hint:.2,.1

…… #pos_hint: {’center_x’:.15, ’center_y’:.5}

…… #pos_hint: {’center_x’:.85, ’center_y’:.5}

…… #pos_hint: {’center_x’:.5, ’center_y’:.15}

…… #pos_hint: {’center_x’:.5, ’center_y’:.85}

«»»

class MainApp (App):

…… def build (self):

…… …… return Builder. load_string (KV)

MainApp().run ()

Здесь в текстовой строке KV создан виджет – Button (кнопка). Для данного виджета заданы следующие свойства:

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

– size_hint – размер кнопки;

– pos_hint – положение кнопки в окне приложения.

Если с надписью на кнопке все понятно (свойству text присваивается значение «Это кнопка»). То какой смысл имею следующие два свойства кнопки и их параметры (size_hint и pos_hint). Разберемся с этим вопросом.

Пока рассмотрим две рабочие строки (на которых нет знака комментария «#»):

– size_hint:.5,.5;

– pos_hint: {’center_x’:.5, ’center_y’:.5}.

Свойство кнопки size_hint определяет ее размер по горизонтали (ширина – x) и вертикали (высота -y). Но это не абсолютный, а относительный размер. Если принять размер окна приложения за единицу – 1 (или за 100%), то размер кнопки в нашем случае будет составлять 0.5 (или 50%) от размера окна по ширине и по высоте.

Свойство кнопки pos_hint определяет ее положение в окне приложения, но так же не в абсолютных, а в относительных единицах. По аналогии, если принять размер окна приложения за единицу – 1 (или за 100%), то в этом примере положение центра кнопки будет расположено в точке, составляющей 0.5 (или 50%) от размера окна по горизонтали (по оси «x»), и 0.5 (или 50%) от размера окна по вертикали (по оси «y»).

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

Рис. 2.32. Окно приложения Button1.py с кнопкой в центре окна

Вместо положения центра элемента, можно указать положение его левого нижнего угла. Для этого вместо параметров {’center_x’:.5, ’center_y’:.5}, нужно указать {’x’:.5, ’y’:.5}.