Как сделать цвет кнопки в kivy

Добавил пользователь Skiper
Обновлено: 05.10.2024

Мобильная разработка приложений вскоре обгонит компьютерную. Такая тенденция обрела устойчивый характер. Поэтому каждый разработчик рано или поздно столкнется с необходимостью создавать приложение для iOS или Android. К сожалению, встроенных инструментов в стандартную поставку языка для создания мобильных приложений нет. Тем не менее, есть пакеты, которые могут применяться для создания приложений для смартфонов. К таковым относится Kivy. Сегодня сделаем общий обзор базовых возможностей этой среды. Вообще, библиотеки – это главные элементы мира мобильных приложений, создаваемых с использованием Python.

Фреймворк Kivy Python – ключевые особенности

Kivy – это фреймворк, созданный в 2011 году. Его главным преимуществом является мультиплатформенность. Поддерживаются операционные системы Windows, Mac, Linux, Raspberry Pi.

Помимо привычного для разработчика ПО для компьютеров ввода с использованием мыши и клавиатуры, в Kivy поддерживается ввод через сенсорный экран (в том числе, выполненный по технологии Multitouch). Более того, есть поддержка GPU-ускорения графики благодаря интеграции с OpenGL ES2. У библиотеки есть лицензия MIT, что позволяет бесплатно использовать ее. Но платные компоненты этого программного средства также имеются.

В процессе создания программы Kivy генерируется интуитивно понятный пользовательский интерфейс. Главное, чтобы у пользователя не появилось необходимости дополнительно обучаться. Сразу после запуска приложения должно быть понятно, что делать дальше.

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

Как установить Kivy?

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

Виртуальная среда Python создается так:

$ python3 -m venv my_kivy_project

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

Чтобы была возможность использовать виртуальную среду, ее необходимо активировать сначала. На операционных системах с ядром Unix можно это сделать, выполнив следующую команду.

$ source bin/activate

Учтите, что вы в этот момент должны находиться в каталоге my_kivy_project.

В случае с Windows, команда аналогичная, но активация скрипта должна осуществляться в другом месте – используя папку Scripts, а не bin.

После того как активируется среда Python, можно запустить pip, чтобы установить Kivy. На системах Unix для этого выполняется такая инструкция.

На Windows установить немного труднее. В документации необходимо изучить соответствующий пункт .

Пользователи Mac также могут установить Kivy, используя файл dmg .

Что такое виджеты в Kivy?

Понятие виджетов в Kivy несколько отличается от такого в ОС Android и iOS. Под ними подразумеваются элементы управления и интерфейса, которые могут отображаться пользователю или использоваться им.

Примеры виджетов: кнопки, выпадающие списки, вкладки. Фреймворк Kivy содержит большое количество виджетов.

Чтобы понять, как происходит работа с этим фреймворком, обратите внимание на такую программу.

Каждая программа, написанная с помощью Kivy, должна содержать подкласс App. Также разработчик должен переопределить метод build() .

Здесь размещается код пользовательского интерфейса либо осуществляется вызов других функций, определяющих код UI. В этом примере создается виджет Label и передаются такие аргументы, как text, size_hint, pos_hint . Последние два являются опциональными.

size_hint используется для передачи Kivy размеров виджета. Используется два значения:

x . Ширина элемента.

y . Высота элемента.

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

В приведенном выше фрагменте кода передается информация, что виджет должен размещаться в центре осей x и y .

Чтобы запустить программу, необходимо выполнить инициализацию класса MainApp и осуществить вызов метода run() . После того как будут совершены эти действия, на экране отобразится такой текст.

Kivy также выводится большое количество текста в stdout , который может использоваться во время отладки программы.

Теперь давайте добавим виджет Image и проанализируем его отличия от Label .

Что делает виджет Image в Kivy?

Kivy содержит несколько разновидностей, связанных с изображениями виджетов. Чтобы открывать картинки, расположенные на жестком диске, используется Image, а если изображение загружается из интернета, AsyncImage . Мы для примера будем использовать стандартный элемент Image .

Этот код импортирует изображение из подпакета kivy.uix.image . Вообще, у класса Image большое количество различных параметров. Тем не менее нас интересует только source , который указывает на конкретную картинку, которая будет загружаться. Здесь задается полный путь к выбранной картинке. Остальная часть кода не отличается от предыдущего примера.

После того как мы выполним этот код, результат будет следующим.

Таким образом, текст из прошлого примера был заменен на изображение.

Теперь посмотрим, что делать для добавления и правильного расположения нескольких виджетов в программе.

Понятие разметки в Kivy

Каждый фреймворк имеет собственный метод, по которому осуществляется размещение виджетов. Например, wxPython задействует классификаторы, а Tkinter использует менеджер геометрии. В Kivy есть такое понятие, как Лейаут. Оно означает способ размещения виджетов, который используется в Kivy.

Лейаутов бывает несколько видов:

BoxLayout.
FloatLayout.
GridLayout.

Найти полный перечень лейаутов, которые доступны в этом фреймворке, можно в документации .

Приведем такой фрагмент кода в качестве примера для BloxLayout.

Здесь осуществляется импорт модуля BoxLayout , после чего он устанавливается. Затем создается перечень цветов RGB-палитры.

В результате образовывается цикл для range из 5, вследствие чего появляется по кнопке btn для каждой итерации. Давайте теперь сделаем интерфейс интереснее и изменим фон кнопки на случайный цвет.

А потом добавим кнопку в лейаут с использованием layout.add_widget ( btn) .

После того как код запустится, результат будет приблизительно следующим.

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

Нужно учитывать такие аргументы:

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

Список из четырех аргументов: [padding_left, padding_top, padding_right, padding_bottom].
Список из двух аргументов: [padding_horizontal, padding_vertical].
Один аргумент: padding=10 .

2. Spacing . Этот аргумент добавляет расстояние между виджетами, которые относятся к определенному лейауту.

3. Orientation . Изменяет значение orientation для BoxLayout по умолчанию – с горизонтального на вертикальное.

События в Kivy

События – один из центральных элементов Kivy. Они позволяют, например, выполнять определенные действия при нажатии клавиш, кнопок мыши либо тапа по дисплею. А если требуется вызвать функцию в будущем, используется концепт часов ( Clock) .

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

Я узнал, что в Qt у нас есть некоторые способы сделать QpushButton с помощью :

Эффект тени
сделать его плоским, сделав свойства setFlat истинными .
chaning курсор другого типа, если кто-то нависает над ним, как pushButton_18.setCursor(QtGui. QCursor(QtCore.Qt.PointingHandCursor))

Я ищу, чтобы сделать поведение кнопки аналогичны в kivy, а также . Возможно ли это ? Я узнал, что мы можем изменить фоновое изображение, изменив его на изображение с округлой формой Изменение цвета фона Button в Kivy

но это не так уж и приятно, так как button все еще выглядит очень нормально . Нет никакого теневого аффекта . Даже когда мы нажимаем на углы за пределами button, он обрабатывается s, если нажата button .

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

Затенение влияет
Анимационный эффект в фоновом режиме
Закругленные края и т. д.
Можем ли мы поместить анимированные gif-изображения в качестве фона для анимации (я действительно пробовал это сделать, но он больше не был анимированным )

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

2 ответа

Я добавил простую кнопку в свой макет, удалил текст и установил изображение с прозрачностью в качестве фона. но, к сожалению, на моей кнопке есть эффект тени, и я не могу его удалить. Я буду признателен, если у вас есть какой-нибудь опыт работы с ним, помогите мне. Спасибо!

У меня есть вычитание фона, чтобы работать довольно хорошо. Но проблема в том, что он также отмечает тени на переднем плане. Кто-нибудь нашел какую-нибудь технику, чтобы избавиться от теней на заднем плане? Ссылки на методы, статьи, статьи и т. д., которые вы использовали и получили надежными.

Button в kivy начинается с ButtonBehavior , который сочетается с меткой , добавляющей свойства, такие как background_normal/down. for, обрабатывающие текстуры на холсте.

Зная это, вы можете просто объединить ButtonBehavior с любым другим виджетом, который вы выберете. Например.

Здесь мы просто устанавливаем ButtonBehavior в сочетании с AsyncImage , который загружает изображение из Интернета для вашего фона.

вы должны увидеть что-то вроде этого

Эффект анимации в фоновом режиме

Это было бы так же просто, как изменить источник на анимированный gif или список изображений внутри .zip.

Посмотрите на пример изображений последовательности , это было сделано до того, как был введен ButtonBehaviors, поэтому у него даже есть пример класса AnimatedButton, использующего более старый метод, который, по сути, больше не нужен.

Есть много способов сделать это тоже.

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

Или создайте свой собственный класс CustomButtonBehavior, производный от ButtonBehavior, который переопределяет метод collidepoint , возвращая значение True только для пользовательского столкновения. Существует пример использования пользовательских коллизий для виджетов. Вы даже можете установить для свойства keep_data изображения значение True, а затем проверить данные пикселей на наличие альфа-кода, чтобы определить, хотите ли вы вернуть значение true для столкновения.

Просто используйте изображение с закругленными краями kivy поддерживает использование инструкции BorderImage, которая эквивалентна css borderimage с точки зрения функциональности. собственный Kivy button по умолчанию использует это. Попробуйте поэкспериментировать с атрибутом границы BorderImage .

Я думаю, что это более эффективно. Я использую два вида изображений.

Вопрос по круглым кнопкам переключателям (ToggleButton) в Kivy

костыль хотя вроде как в документации написано мол если одна кнопка в группе нажата должно само работать

В наши дни каждый разработчик может столкнуться с необходимостью работы над мобильным или веб-приложением на 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.

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