Kivy как подключить kv файл

Обновлено: 30.06.2024

Основные элементы kivy:

RecycleView

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

Модель: модель формируется данными, которые вы передаете через список словарей
Представление: представление разделено на макеты (layers) и представлениям (Views) и реализовано с помощью адаптеров
Контроллер: контроллер определяет логическое взаимодействие и реализуется поведением Recyclerview

При создании экземпляра Recyclerview он автоматически создает представления и классы данных. Однако необходимо вручную создать классы компоновки и добавить их в Recyclerview.

Менеджер макетов автоматически создается как layout_manager при добавлении в качестве дочернего объекта Recyclerview. Аналогично при удалении. Требование заключается в том, что менеджер макетов должен содержаться как дочерний элемент где-то в дереве виджетов Recyclerview, чтобы можно было найти порт представления.

Минимальный пример может выглядеть примерно так:

Для поддержки выбора в представлении можно добавить необходимые режимы следующим образом:

Пожалуйста, смотрите examples/widgets/recycleview/basic_data.py файл для более полного примера.

Внимание: When views are re-used they may not trigger if the data remains the same.

class kivy.uix.recycleview. RecycleViewBehavior ( **kwargs )

Основан на `builtins.object`

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

data_model Модель данных, ответственная за поддержание набора данных. layout_manager Менеджер макетов, ответственный за размещение (позиционирование) видов в Recyclerview. refresh_from_data Это должно вызываться при изменении данных. Изменения данных обычно указывают на то, что все должно быть пересчитано с момента изменения исходных данных.

Этот метод автоматически привязывается к методу on_data_changed класса поведения модели данных Recycle и поэтому отвечает и принимает аргументы ключевого слова этого события.

Его можно вызвать вручную для запуска обновления. refresh_from_layout Это должно быть вызвано, когда макет изменяется или нуждается в изменении. Он обычно вызывается, когда параметр макета изменился,и поэтому макет должен быть пересчитан. refresh_from_viewport Это должно быть вызвано, когда видовой экран изменяется и отображаемые данные должны быть обновлены. Ни данные, ни макет не будут пересчитаны. view_adapter Адаптер, ответственный за предоставление представлений, представляющих элементы в наборе данных.

class kivy.uix.recycleview. RecycleView ( **kwargs )

add_widget Добавляет новый виджет в качестве дочернего элемента data Данные, используемые текущим адаптером представления. Это список dict, ключи которого сопоставляются с соответствующими именами свойств класса представления. key_viewclass key_viewclass is an AliasProperty that gets and sets the key viewclass for the current layout_manager. viewclass Класс представления, используемый текущим layout_manager. Возвращает и задает класс, используемый для создания отдельных элементов, представленных в представлении.

Carousel Kivy

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

Он же на kv-lang:

Changed in version 1.5.0: The carousel now supports active children, like the ScrollView. It will detect a swipe gesture according to the Carousel.scroll_timeout and Carousel.scroll_distance properties.

Кроме того, контейнер слайдов больше не предоставляется API. См. свойства Carousel.slides , Carousel.current_slide , Carousel.previous_slide and Carousel.next_slide .

PageLayout

Класс PageLayout используется для создания простого многостраничного макета, позволяющего легко переключаться с одной страницы на другую с помощью границ.

PageLayout в настоящее время не honor атрибуты size_hint, size_hint_min, size_hint_max или pos_hint.

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

Action Bar

Виджет ActionBar похож на панель действий Android, где элементы расположены горизонтально. Когда область становится маленькой, виджеты перемещаются в область переполнения действия. ActionBar содержит ActionView с различными ContextualActionViews. ActionView будет содержать ActionPrevious, имеющее свойства title, app_icon и previous_icon.

ActionView будет содержать подклассы ActionItems. Некоторые предопределенные из них включают ActionButton, ActionToggleButton, ActionCheck, ActionSeparator и ActionGroup.ActionGroup используется для отображения ActionItems в группе.

class kivy.uix.actionbar. ActionItem

Класс ActionItem, абстрактный класс для всех виджетов ActionBar. Чтобы создать пользовательский виджет для панели действий, наследуйте от этого класса. Его свойства:

class kivy.uix.actionbar. ActionButton ( **kwargs )

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

У вас нет большого контроля над этими свойствами, поэтому, если вы хотите настроить его внешний вид, мы предлагаем вам создать собственное представление кнопки. Вы можете сделать это, создав класс, который подклассы существующего виджета и элемента ActionItem:

Затем вы можете создать свой собственный стиль, используя язык Kv. Свойства:

Есть так же много других классов, например:

class kivy.uix.actionbar. ActionToggleButton ( **kwargs )

Но они не отличаются составом свойств.

Canvas

Графическое представление виджетов отображается с помощью холста, который вы можете видеть как неограниченную чертежную доску, так и набор инструкций по рисованию. Существует множество инструкций, которые вы можете применить (добавить) к своему холсту, но есть два основных варианта:

Контекстные инструкции ничего не рисуют, но они изменяют результаты вершинных инструкций

Canvasses могут содержать два подмножества инструкций. Это canvas.before и canvas.after группы инструкций. Инструкции в этих группах будут выполняться до и после группы canvas соответственно. Это означает, что они появятся под (будут выполнены до) и выше (будут выполнены после) их. Эти группы не создаются, пока пользователь не обращается к ним.

Контекстные инструкции управляют контекстом opengl. Вы можете вращать, переводить и масштабировать холст. Вы также можете прикрепить текстуру или изменить цвет рисунка. Это один из наиболее часто используемых, но другие действительно полезны тоже:

Либо то же самое без использования with :

Иногда требуется обновить или удалить инструкции, добавленные на холст. Это может быть сделано различными способами в зависимости от ваших потребностей:

Вы можете сохранить ссылку на ваши инструкции и обновить их:

Или вы можете очистить свой холст и начать все заново:

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

Что еще полезно знать?

Drawing after the children with canvas.after

Что произойдет, если мы хотим выполнить инструкции после добавления дочерних элементов. В этом случае у нас есть еще один холст (называется canvas.after ), что выполняется после прохождения всех дочерних элементов. Например:

В примере выше canvas будет выполняться в следующей последовательности:
(1) The Widget canvas
(2) All the Button canvas ( canvas.before , canvas , canvas.after )
(3) The Widget canvas.after

Замечу, что все холсты Button будут выполнены между canvas и canvas.before

Что насчет canvas.before ?

Вы, наверное, заметили, что есть и третий холст (canvas.before) Он выполняется непосредственно перед canvas. Я нашел canvas.before особенно полезно, когда (1) мне нужно манипулировать цветом экземпляра и (2) мне нужно манипулировать наследованием. Допустим, у меня есть виджет, который рисует прямоугольник внутри.

Поэтому я могу изменить цвет конкретного экземпляра, делая что-то вроде этого:

If I use canvas instead of canvas.before in RedWidget, the instruction is going to be executed after the Rectangle, so it won’t apply to the Rectangle.

Если я использую canvas вместо canvas.before в RedWidget, инструкция будет выполнена после Rectangle, и не будет применена к нему.

(2) точно так же, когда мне нужно манипулировать наследованием. Допустим, у меня есть виджет, который рисует прямоугольник внутри. Я могу сделать следующее, чтобы изменить цвет прямоугольника базового класса:

RedWidget наследует от моего MyWidget, и у меня будет такая же проблема, если я просто использую canvas. Поэтому следует использовать canvas.before.

Какие бывают виджеты в kivy

Виджеты -это элементы графического пользовательского интерфейса, которые являются частью пользовательского интерфейса. В kivy все они хранятся в модуле kivy.uix. Виджеты kivy могут быть распределены на несколько категорий:

UX widgets: классические виджеты пользовательского интерфейса, готовые к сборке для создания более сложных виджетов: Label, Button, CheckBox, Image, Slider, Progress Bar, Text Input, Toggle button, Switch, Video
Layouts: виджет макета не выполняет рендеринга, а просто действует как триггер, который упорядочивает свои дочерние элементы определенным образом: Anchor Layout, Box Layout, Float Layout, Grid Layout, PageLayout, Relative Layout, Scatter Layout, Stack Layout
Complex UX widgets: сложные виджеты, которые являются результатом объединения нескольких классических виджетов. Мы называем их сложными, потому что их сборка и использование не так универсальны, как классические виджеты:
Bubble, Drop-Down List, FileChooser, Popup, Spinner, RecycleView, TabbedPanel, Video player, VKeyboard
Behaviors widgets (виджеты поведения): эти виджеты не выполняют рендеринга, но действуют на графические инструкции или поведение взаимодействия (касания) своих детей: Scatter, Stencil View
Screen manager: управляет экранами и переходами при переключении с одного на другой: ScreenManager

Англоязычный источник тут (может не открыться без vpn)

kivy.core.window.Window

Авторы фреймворка советуют описаться на базовый класс:
Продолжить чтение →

Screen Manager

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

kivy.app.App

class kivy.app.App(**kwargs)

Класс приложения. События:

Примечание: добавлен в версии 1.7.0 параметр kv_file .

Методы и атрибуты:

По умолчанию он построит панель настроек в соответствии с settings_cls , вызовет build_settings() , добавит панель Kivy, если use_kivy_settings имеет значение True , и свяжет с on_close / on_config_change .

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

Вы должны вернуть True, если отображение успешно, в противном случае False. Аргумент settings вы можете изменить для отображения.

на iOS: < app dir>/Documents/.<appname>.ini
на Android: <user_data_dir>/.< app name>.ini
на других: < app dir>/<appname>.ini

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

Рекомендуется не меньше, чем 256х256 либо 1024х1024

Создание экземпляра ConfigParser
Загрузка конфигурации по умолчанию путем вызова build_config() , затем
Если он существует, он загружает файл конфигурации приложения, в противном случае он создает его.

Возвращает: экземпляр ConfigParser

Например, скажем, у вас есть файл с именем main.py что содержит:

Вы можете определить правила и корневой виджет в своем файле kv:

Должен быть только один корневой виджет. Для получения дополнительной информации читайте документацию по языку kivy. Если ваш файл kv содержит корневой виджет, он будет использоваться как self.корень, корневой виджет для приложения.

settings_cls является ObjectProperty и по умолчанию настройки с Spinner, который отображает панели настроек с spinner для переключения между ними. Если вы зададите строку, фабрика будет использоваться для разрешения класса.

Различные платформы имеют различные соглашения в отношении того, где пользователь может хранить данные, такие как предпочтения, сохраненные игры и настройки. Эта функция реализует эти соглашения. Каталог <имя_приложения > создается при вызове свойства, если оно еще не существует.

/Documents / <app_name> (который находится внутри песочницы приложения).

В Windows возвращается %APPDATA% / <имя_приложения>.

В OS X возвращается

/Library/Application Support / <app_name>.

В Linux возвращается $XDG_CONFIG_HOME/<app_name>.

На Android, Контекст.Возвращается GetFilesDir.

В наши дни каждый разработчик может столкнуться с необходимостью работы над мобильным или веб-приложением на Python. В Python нет встроенных инструментов для мобильных устройств, тем не менее существуют пакеты, которые можно использовать для создания мобильных приложений. Это Kivy, PyQt и даже библиотека Toga от Beeware.

Содержание

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

В руководстве будут разобраны следующие темы:

Работа с виджетами Kivy;
Планировка UI и лейауты;
Добавление событий;
Использование языка KV;
Создание приложения-калькулятора;
Упаковка приложения для iOS, Android, Windows и macOS.

Разбор данного руководства предполагает, что читатель знаком с объектно-ориентированным программированием. Для введения в курс дела можете просмотреть статью об Объектно-ориентированном программировании (ООП) в Python 3.

Принципы работы фреймворка Kivy Python

Kivy был создан в 2011 году. Данный кросс-платформенный фреймворк Python работает на Windows, Mac, Linux и Raspberry Pi. В дополнение к стандартному вводу через клавиатуру и мышь он поддерживает мультитач. Kivy даже поддерживает ускорение GPU своей графики, что во многом является следствием использования OpenGL ES2. У проекта есть лицензия MIT, поэтому библиотеку можно использовать бесплатно и вкупе с коммерческим программным обеспечением.

Во время разработки приложения через Kivy создается интуитивно понятный интерфейс (Natural user Interface), или NUI. Его главная идея в том, чтобы пользователь мог легко и быстро приспособиться к программному обеспечению без чтения инструкций.

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

Установка Kivy

У Kivy есть множество зависимостей, поэтому лучше устанавливать его в виртуальную среду Python. Можно использовать встроенную библиотеку Python venv или же пакет virtualenv.

Приветствую всех любителей и знатоков языка программирования Python!

В этой статье я покажу, как работать с анимациями в кроссплатформенном фреймворке Kivy в связке с библиотекой компонентов Google Material Design — KivyMD. Мы рассмотрим структуру Kivy проекта, использование material компонентов для создания тестового мобильного приложения с некоторым количеством анимаций. Статья будет не маленькая с большим количеством GIF анимаций поэтому наливайте кофе и погнали!

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

Итак, для работы нам понадобится фреймворк Kivy:

И библиотека KivyMD, которая предоставляет виджеты в стиле Material Design для фреймворка Kivy:

Все готово к работе! Откроем PyCharm и создадим новый проект CallScreen со следующей структурой катологов:

Структура может быть любая. Ни фреймворк Kivy, ни библиотека KivyMD не требует никаких обязательных директорий, кроме стандартного требования — в корне проекта должен быть файл с именем main.py. Это точка входа в приложение:

В каталоге data/images я разместил графические ресурсы, которые требуются приложению:

В директории uix/screens/baseclass у нас будет размещаться файл callscreen.py с одноименным Python классом, в котором мы будем реализовывать логику работы экрана приложения:

А в директории uix/screens/kv мы создадим файл callscreen.kv (пока оставим пустым) — с описанием UI на специальном DSL языке Kivy Language:

Когда проект создан, мы можем открыть файл callscreen.py и реализовать класс экрана нашего тестового приложения.

callscreen.py:

Класс CallScreen унаследован от виджета MDScreen библиотеки KivyMD (почти все компоненты этой библиотеки имеют префикс MD — Material Design). MDScreen — это аналог виджета Screen фреймворка Kivy из модуля kivy.uix.screenmanager, но с дополнительными свойствами. Также MDScreen позволяет размещать в себе виджеты и контроллы один над другим следующим образом:

Именно это позиционирование мы будем использовать, размещая «плавающие» элементы на экране.

В точке входа в приложение — файл main.py создадим класс TestCallScreen, унаследованный от класса MDApp с обязательным методом build, который должен возвращать виджет или лайоут, для отображения его на экране. В нашем случае это будет созданный ранее класс экрана CallScreen.

Это уже готовое приложение, которое отображает пустой экран. Если запустить файл main.py, увидим:

Теперь приступим к разметке UI экрана в файле callscreen.kv. Для этого нужно создать одноименное с базовым классом правило, в котором мы будем описывать виджеты и их свойства. Например, если у нас есть Python класс c именем CallScreen, то и правило в KV файле должно иметь точно такое же имя. Хотя вы можете создавать все элементы интерфейса прямо в коде, но это, мягко говоря, не правильно. Сравните:

И аналог на Python:

Совершенно очевидно, что дерево виджетов намного читабельнее в Kv Language, чем в Python коде. К тому же, когда появятся аргументы у виджетов, ваш Python код станет просто сплошной кашей и уже через день вы не сможете разобраться в нем. Поэтому кто бы что ни говорил, но если фреймворк позволяет описывать элементы UI посредством декларативного языка, это плюс. Ну, а в Kivy это двойной плюс, потому что в Kv Language еще можно выполнять инструкции Python.

Итак, начнем, пожалуй, с титульного изображения:

callscreen.kv:

Виджет FitImage автоматически растягивается на все выделенное ему пространство с сохранением пропорций изображения:

Можем запустить файл main.py и посмотреть результат:

Пока все просто и самое время приступить к анимированию виджетов. Добавим кнопку в экран по нажатию которой будут вызываться методы анимации из Python класса CallScreen:

callscreen.kv:

Импорты модулей в Kv Language:

Будут аналогичны следующим импортам в Python коде:

После запуска и нажатия на зеленую кнопку получим — AttributeError: 'CallScreen' object has no attribute 'animation_title_image'. Поэтому вернемся к базовому классу CallScreen в файле callscreen.py и создадим в нем метод animation_title_image, в котором будем анимировать титульное изображение.

callscreen.py:

Как вы уже поняли, класс Animation, наверное, как и в других фреймворках, просто анимирует свойство виджета. В нашем случае мы анимируем свойство size_hint_y — подсказка высоты, задавая интервал выполнения анимации в параметре d — duration и тип анимации в параметре t — type. Мы можем анимировать сразу несколько свойств одного виджета, комбинировать анимации с помощью операторов +, +=… На изображении ниже показан результат нашей работы. Для сравнения для правой гифки я использовал типы анимаций in_elastic и out_elastic:

Следующий наш шаг — добавить blur эффект к титульному изображению. Для этих целей в Kivy существует EffectWidget. Нам нужно установить нужные свойства для эффекта и поместить виджет титульного изображения в EffectWidget.

callscreen.kv:

Теперь нужно добавить атрибут blur_value в базовый класс Python CallScreen и создать метод animation_blur_value, который будет анимировать значение эффекта размытия.

callscreen.py:

Обратите внимание, что методы анимирования будут выполнятся асинхронно! Давайте анимируем зеленую кнопку вызова, чтобы она не мозолила нам глаза.

callscreen.py:

Добавим два пункта типа TwoLineAvatarListItem на главный экран.

callscreen.kv:

Мы создали два пункта ItemList и разместили их в вертикальном боксе. Можем создать новый метод animation_list_box в классе CallScreen для анимации этого бокса.

callscreen.py:

Добавим панель инструментов в экран.

callscreen.kv:

Аватар и имя пользователя.

callscreen.kv:

Типичное анимирование позиций X и Y аватара и имени пользователя.

callscreen.py:

Нам осталось создать бокс с кнопками:

На момент написания статьи я столкнулся с тем, что в библиотеке KivyMD не обнаружилось нужной кнопки. Пришлось по-быстрому смастерить её самому. Я просто добавил в существующий класс MDIconButton инструкции canvas, в которых определил окружность вокруг кнопки, и поместил ее вместе с меткой в вертикальный бокс.

callscreen.kv:

Далее мы создаем бокс для размещения кастомных кнопок.

callscreen.kv:

Теперь созданный CallBox размещаем в правиле CallScreen и устанавливаем его положение по оси Y за нижней границей экрана.

callscreen.kv:

Остается только анимировать положение созданного бокса с кнопками.

Ищете быстрый ускоренный курс по Киви? Этот пост охватывает основы приложений на Kivy.

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

Предпосылки

Чтобы работать с Kivy, вы должны быть знакомы с Python.

Содержание

В этом посте будут рассмотрены очень простые приложения (абсолютные новички в Kivy), в которых вы просто добавляете (+1) или вычитаете (-1) с помощью 2 кнопок и обновляете новое значение до метки. К концу этого урока у вас будут (я надеюсь) некоторые хорошие знания и понимание того, как работать с Kivy. Вот некоторые из вещей, которые мы рассмотрим в этом посте:

Приступая к работе
Метод App( ) и макет сетки в деталях
Что такое метод build и что он делает?
Структурирование вашего приложения
Что такое on_release и id?
Свойство объекта

Приступая к работе.

Хорошо, тогда давайте начнем с черного окна, которое ничего не делает.

Создать main.py файл.

и создайте файл main.kv

Текущая структура файла :

и вот оно у вас есть.

Метод App( ) и макет сетки в деталях

Давайте остановимся на секунду и посмотрим, что мы там сделали.

Одна из вещей, которую я люблю в Kivy, заключается в том, что она очень хорошо документирована, и документы очень легко понять. Посещение kivy/app.py для получения дополнительной информации. Вернемся к вопросу: зачем мы это сделали?

давайте перейдем к следующей строке:

Вы можете найти все вышесказанное по адресу: kivy/uix/gridlayout.py

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

Здесь говорится, что строки и cols представляют количество строк и столбцов соответственно в сетке, что приводит нас к причине, по которой мы сделали это в файле main.kv :

Все в порядке? Давайте продолжим.

Что такое метод сборки и что он делает?

Сначала давайте пройдемся по kivy/app.py файл еще раз и посмотрите, что говорится в документации:

Давайте сделаем то же самое для метода build :

Теперь мы знаем причину этого:

Надеюсь, к этому времени все немного прояснится. Однако у нас все еще есть проблема — где кнопки и ярлык? Что ж, давайте их построим.

Структурирование Вашего Приложения

Давайте создадим новую папку и файл buttons.kv в следующей структуре:

Мы только что создали две кнопки (т. е. Добавить кнопку и Вычесть кнопку ), но мы не рассматривали их стили. Мы можем играть с их стилем через Python, но я предпочитаю делать стиль с .kv и логику с Python.

Давайте добавим что-нибудь в наш файл buttons.kv .

Прежде чем мы добавим что-то в класс контейнера (макет сетки), нам сначала нужно сказать Kivy, чтобы он читал из файла buttons.kv в папке kv.

Вот тут-то и появляется builder .

Простой, но неэффективный способ работы с большими проектами-загрузить каждый файл .kv по отдельности.

Мы можем автоматизировать это:

Добавьте как можно больше файлов .kv в папку kv, и они будут автоматически загружены построителем

Итак, мы здесь — мы определили кнопки и контейнер; однако на экране по-прежнему ничего нет. Давайте перейдем к добавлению кнопок (наконец)

Отредактируйте файл main.kv .

Что такое on_release и id?

on_release и on_press являются специальными методами, которые являются частью поведения кнопки (см. kivy | uix| behaviors/button//), тогда как id является свойством каждого виджета (см. kivy/uix/widget.py ).

Свойство объекта

Следующий id будет использоваться для ObjectProperty для связи со стороной Python.

Теперь у нас должно быть наше окончательное рабочее приложение.

Вы можете загрузить окончательное рабочее приложение с github .

Вы можете загрузить окончательное рабочее приложение с || github || .

Вывод

Kivy - кросcплатформенный графический фреймворк на Python, направленный на создание новейших пользовательских интерфейсов даже для приложений, работающих с сенсорными экранами. Приложения, написанные на Kivy, могут работать не только на таких традиционных платформах как Linux, OS X и Windows, но также на Android, iOS и Rapberry Pi.

Это означает, что в разработке можно использовать различные библиотеки, как Requests, SQLAlchemy или даже NumPy. Допускается даже доступ к нативным мобильным API посредством дочерних проектов Kivy. Еще одна отличительная черта Cython - оптимизированный конвейерный обработчик OpenGL. При его помощи можно легко добиться сложных GPU эффектов, не прибегая к сложным конструкциям в коде.

По сути Kivy это набор модулей Python/Cython, которые можно легко установить при помощи pip. Но существует ряд зависимостей. Вам понадобится Pygame, он используется в качестве рендера, Cython для компиляции скоростных составляющих графических элементов и GStreamer для работы с мультимедиа. Как правило, все это легко установить при помощи стандартного менеджера пакетов или pip.

После установки всех зависимостей, можно установить и сам Kivy. Текущая версия - 1.8.0, которая работает как с Python2, так и с Python3. Код, использованный в этой статье должен успешно работать под версиями Python 2.7 и 3.3.

Если у вас возникли проблемы с установкой через pip, то всегда можно воспользоваться easy_install. Существует несколько специальных репозиториев и готовых сборок для популярных дистрибутивов OS. На официальном сайте Kivy вы найдете более подробную информацию по теме.

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

Уже это приложение можно запустить, вы увидите пустое черное окно. Впечатляет, не так ли? Мы можем строить GUI при помощи виджетов Kivy. Каждый из них представляет собой простой графический элемент со своим функционалом от стандартного - кнопки, лейблы, текстовые поля ввода, или вспомогательные элементы для позиционирования дочерних, до более абстрактных - диалоги выбора файлов, камера или видео проигрыватель. Большинство основных виджетов Kivy легко сочетаются друг с другом, тем самым образуя новые варианты GUI, то есть, нет необходимости изобретать велосипед. В этой статье я приведу несколько примеров подобного использования виджетов.

Так как "Hello, world!" уже стало практически неизбежным примером, давайте поскорее его рассмотрим и перейдем к более интересным примерам. Воспользуемся обычным лейблом для отображения текста:

Используем лейбл в качестве корневого виджета. У каждого приложения должен быть корневой виджет, он играет роль верхушки дерева элементов и автоматически принимает размер окна. Позднее мы рассмотрим как строить полноценные GUI при помощи большего количества виджетов, но на данном этапе нам достаточно, при помощи нового метода, вернуть корневой виджет:

Метод build исполняется при запуске приложения, и виджет, который он возвращает, автоматически занимает корневое положение. В нашем случае это лейбл, которому мы задали несколько параметров - text , font_size и color . Для каждого виджета существует свой набор параметров, контролирующих его поведение. Все их можно изменять динамически, но мы установим их лишь один раз при инициализации.

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

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

Собственный виджет: крестики-нолики

Конечно, Kivy не имеет в своем составе виджета для игры в крестики-нолики, поэтому нам придется создать свой. Мы создадим новый класс виджета и опишем в нем необходимое нам поведение:

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

Настало время рассмотреть язык Kivy (kv) - специальный язык для описания дерева виджетов Kivy. Он одновременно очень прост и позволяет избежать большого объема монотонного кода Python. Python предоставляет нам возможность динамически манипулировать GUI элементами, но иногда нам надо просто описать базовую структуру GUI. В принципе, kv можно легко заменить python кодом, но в дальнейших примерах мы используем kv, как и большинство программистов.

Kivy изначально содержит в себе все необходимое для работы с kv. Проще всего создать новый файл с таким же именем как и App класс и описывать весь GUI в нем. То есть создадим файл tictactoe.kv и напишем в нем следующее:

В этом весь синтаксис kv, для каждого виджета мы создаем свое правило, описывающее его поведение, настройки и дочерние виджеты. В примере демонстрируется правило для виджета tictactoe , которое указывает, что каждый объект класса TicTacToeGrid уже при создании получает значение 3 для свойства cols .

Мы еще вернемся к kv, но сейчас давайте создадим несколько кнопок для начала игры.

Мы наследуем свойства и методы виджета Button для взаимодействия с мышью или касаниями тач скрина и запуска соответствующих событий. То есть мы можем выполнять собственные функции, когда пользователь нажал на кнопку, и можем устанавливать свойство text кнопки в X или О. Мы также создали новое свойство для нашего виджета - coords - координаты, они очень нам помогут в дальнейшем. Создание новых свойств практически идентично созданию нового атрибута класса в Python - достаточно добавить self.coords = [0, 0] в GridEntry.__init__ .

Также как и для TicTacToeGrid создадим ряд правил для нового виджета:

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

Теперь заполним TicTacToeGrid виджетами GridEntry . Мы столкнемся с новыми элементами Kivy: при создании виджетов GridEntry мы сразу задаем им координаты, передав соответствующие параметры. Этот функционал полностью поддерживается Kivy.

Мы использовали метод bind для привязки обработчика button_pressed к событию on_release виджета GridEntry , так метод button_pressed будет выполнен каждый раз после того, как пользователь отпустил кнопку. Мы также могли использовать событие on_press , то есть событие при первом нажатии на кнопку. Таким образом, можно привязать свой обработчик к любому событию Kivy.

Мы добавили каждый виджет GridEntry при помощи метода add_widget . То есть каждый является дочерним элементом TicTacToeGrid и будет расположен в сетке в соответствии с заданными ранее нами параметрами.

Теперь нам осталось только вернуть этот виджет в качестве корневого и мы сможем посмотреть на наше приложение.

Запустив главное Python приложение вы увидите только что созданный интерфейс игры. Все отлично, надпись текста была заменена на сетку из девяти кнопок, на каждую из которых можно нажать (она автоматически изменит цвет) и отпустить (в консоли вы увидите текст из обработчика). Конечно, можно и дальше изменять внешний вид кнопок, но пока мы оставим их как есть.

Так, а кто победил?

Нам понадобится следить за состоянием поля, чтобы определить победителя. Для этого изменим несколько свойств Kivy:

Таким образом, мы добавили способ отслеживания состояния поля и очередность хода (1 - О, -1 - Х). Разместив эти числа в списке мы сможем определить победителя, сумма столбца, строки или диагонали должна быть равна +-3. Теперь мы сможем обновить игровое поле после хода.

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

Теперь уже можно играть в крестики-нолики, но один важный элемент все же пока отсутствует - громадное окно во весь экран, оповещающее что мы выиграли! Но сначала необходимо добавить немного кода для определения окончания игры.

Здесь мы воспользуемся еще одним удобным элементов Kivy. Каждый раз при изменении свойства Kivy запускается метод on_propertyname и срабатывает соответствующее событие. Таким образом, мы запросто можем создать метод, который будет отрабатывать при каждом изменении свойства кнопки, как на Python, так и на kv. В нашем случае мы будем проверять список состояний каждый раз при его обновлении и выполнять определенный метод, если игра закончилась.

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

Теперь мы можем изменить метод on_status , чтобы сбросить состоянии игры в начальное и показать победителя при помощи виджета ModalView .

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

По сути ничего нового здесь нет, мы добавили текстовый лейбл к ModalView и при помощи методов виджета ModalView показали само окно. Также мы воспользовались событием on_dismiss , которое срабатывает при закрытии окна. Наконец, мы установили общее для всех виджетов свойство size_hint , которое в нашем случае задает размер модального окна относительно основного окна. Пока открыто модальное окно, вы можете изменять размер главного окна и вы увидите, что модальное окно будет также изменяться в размерах. В данном случае мы воспользовались привязкой свойства hint_size , а обработку полностью взял на себя Kivy.

Пора поэкспериментировать

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

Читайте также: