Приветствую вас , Земляне ! А это та самая серия статей о которой я говорил . В этой серии статей я расскажу вам про написание приложения с использованием kivy , его языка дизайна и kivyMd . В итоге , смешав это все вместе мы напишем приложение способное работать на Андроид и ios .
Приступим ?))
Перед созданием приложения нужно определиться с его идеей , а затем создать его макет , чтобы лучше понимать , что вообще происходит .
Для начала определюсь с идеей . Включаю на фон 10 часов дождя , перевожу клавиатуру в режим мыслительного потока ( Подсветка мигает ) и начинаю думать ... Долго и усердно ... Кстати , какая погода на улице ?
Фигово на улице ... Зато появилась идея , напишем приложение о погоде . Давайте нарисуем макет приложения , то есть начертим интерфейс и какие виджеты будут там и там использоваться .
За пару минут получилось нечто такое .
Немного поясню :
В BoxLayout находятся FloatLayout и GridLayout .
В FloatLayout , как вы знаете , а может и не знаете можно накладывать виджеты друг на друга . Поэтому он максимально хорошо подходит нам для того , чтобы на заднем плане закрепить картинку с погодой . А на переднем текст с информацией .
Для этого в нем находятся два Label , один для картинки , другой для текста .
Ниже находится GridLayout и ScrollView , они там нужны , чтобы можно было прокручивать накиданные там кнопки .
А кнопки нужны для вывода на Label с текстом информации о погоде и изменения картинки на другом Label , кстати да , на кнопки мы тоже запихнем картинки .
Как то вот так . Давайте попробуем написать интерфейс используя макет ?
Но сначала , мне не нравится перспектива использовать kv файл , ибо , ну что это такое ? : Логика и графика раскиданы по двум файлам .
Поэтому kv будет вместе с логикой .
А теперь уж точно начинаем писать :
Импортируем все что только можно :
from kivy.uix.scatter import Scatter
from kivy.uix.button import *
from kivy.app import App
from kivy.uix.gridlayout import *
from kivy.lang import *
from kivy.metrics import *
А дальше создаем переменную с kv файлом и начинаем писать графику :
Cоздаем kv файл , а в нем boxLayout , который будет самым главным во всей этой суете :
KV = """
BoxLayout:
padding : 35
orientation : 'vertical'
Создаем Floatlayout и помещаем туда два Label :
с картинкой и текстом
FloatLayout:
Label :
Image:
Указываем путь к картинке
source: '/Users/dima/Desktop/apple.png'
размер картинки
size: 550 , 450
Создаем Label для текста
Label:
id : Label_id
text : 'Инфа о погоде'
font_size : 60
Ставим Label с текстом сверху картинки :
pos_hint : {'x':-0.1, 'y':-0.1}
Создаем ScrollView с GridLayout
ScrollView:
GridLayout:
id : grid
cols : 1
size_hint_y : None
height: self.minimum_height
spacing : '5dp'
"""
Это была графика , теперь логика :
class WeatherApp(App):
def build(self):
return Builder.load_string(KV)
def on_start(self):
for i in range(8):
self.root.ids.grid.add_widget(Button(text = str(i) , size_hint_y = None , height = dp(170) ,
on_press = self.btn_press))
def btn_press(self , instance):
self.root.ids.Label_id.text = 'Информация о дне {}'.format(instance.text)
WeatherApp().run()
Тут думаю и объяснять не стоит .
В итоге должно получиться нечто такое :
Только вот берите png картинку с прозрачным фоном , иначе получите вот это :
На этом первая часть кончается , а в следующей мы добавим непосредственно показ погоды , сделаем интерфейс покрасивей и может быть подключим KivyMd.
и , по традиции :
Если вы дошли до этого момента , почему бы вам не подписаться и не поставить класс этой статье ?
Ну , а на этом мои полномочия все .
Пока !
А это весь код :
from kivy.uix.scatter import Scatter
from kivy.uix.button import *
from kivy.app import App
from kivy.uix.gridlayout import *
from kivy.lang import *
from kivy.metrics import *
KV = """
BoxLayout:
padding : 35
orientation : 'vertical'
FloatLayout:
Label :
Image:
source: '/Users/dima/Desktop/pepe.png'
size: 550 , 450
Label:
id : Label_id
text : 'Инфа о погоде'
font_size : 60
pos_hint : {'x':-0.1, 'y':-0.1}
ScrollView:
GridLayout:
id : grid
cols : 1
size_hint_y : None
height: self.minimum_height
spacing : '5dp'
"""
class WeatherApp(App):
def build(self):
return Builder.load_string(KV)
def on_start(self):
for i in range(8):
self.root.ids.grid.add_widget(Button(text = str(i) , size_hint_y = None , height = dp(170) ,
on_press = self.btn_press))
def btn_press(self , instance):
self.root.ids.Label_id.text = 'Информация о дне {}'.format(instance.text)
WeatherApp().run()