A story about an amateur making a breakout with python (kivy) ①

Preface 1 kivy until you start

It's been about half a year since I started programming in earnest, but when I was thinking of making something like an app, a pigeon I met on Twitter recommended kivy, so I started with momentum. I hope that the explanation of the production process and contents will make it easier for other people to get started with application development with kivy.

Preface 2 What is kivy in the first place?

kivy is a Python that allows you to develop multi-tap apps. An open source library, apps created with kivy can be run on iOS / Android devices, including PC environments such as macOS, Windows, and Linux. In addition, kivy can also use its own language called KV language together with Python, which is a feature that makes the program multi-layered. It seems that it is difficult to understand this KV language and that it does not support Japanese very well.

First of all, I tried to do a tutorial, but I don't understand at all ...

Well, even if you read only the outline, I'm not sure if you don't try it for the time being! So, let's install kivy immediately and start kivy by creating the tutorial Pong Game. ~~~. I started with a relaxed feeling, but I was able to make something like that with copy and paste, but I have no idea what is going on in the program. I'm an amateur, so I don't really understand what Widget is, and even if I go to the detailed explanation, I can't think of all the words I don't know. Also, because of the KV language mentioned above, the structure of the program feels very difficult to read. It seems that the position and size of what is displayed on the screen is decided.

I'm not sure. Is there any good material ... There is.

So, when I was looking for some good materials, I found [kivy programming book](https: / /www.asakura.co.jp/books/isbn/978-4-254-12896-3/) is out, isn't it? Fortunately, I bought it, but it was very easy to understand and I was finally able to get to the starting point. This time as well, I would like to proceed with the discussion with great reference.

Load-to-breakout-Learn the basic structure (Widget) of GUI programming ……-

Well, it is a story until finally making a breakout with kivy programming. Before we got into the seemingly esoteric KV language, we needed to know the structure of GUI programs and widgets in the first place. [Widget](https://ja.wikipedia.org/wiki/%E3%82%A6%E3%82%A3%E3%82%B8%E3%82%A7%E3%83%83%E3%83 % 88_ (GUI)), a famous word that appears on Wikipedia ... It seems that GUI programs are made by combining widgets, but kivy programs are also made by combining widgets with various functions. It is said that the program is managed by giving each Widget a parent-child relationship (configuring a Widget tree). In other words, it is important for program creation to have a hierarchical relationship with each part (Widget) such as buttons and labels, and to understand where each part is located. In a complicated program, it seems better to draw a diagram so that the relationships are easy to understand.

Load-to-breakout-Let's configure a widget tree with kivy-

Now that we know what to do, let's configure the Widget tree first! So, I tried to make something like the following with the reference in one hand. It is a program that adds Label (character string description) and Button (button) as child widgets by using add_widget () method to Boxlayout that defines the layout.

main.py

#Import the widget to use. This time Label, Button and Box Layout.
from kivy.app import App
from kivy.uix.label import Label
from kivy.uix.button import Button
from kivy.uix.boxlayout import BoxLayout

#A subclass of the App class that describes the content of the app
class testApp(App):
    #Definition of build method to be executed when the main loop is started
	def build(self):
        #Creation of Boxlayout object and Button object
		layout1 = BoxLayout(orientation='vertical')
		button1 = Button(text='children')
		label1 = Label(text='children')
        #Added button1 and label1 as child widgets of layout1
		layout1.add_widget(button1)
		layout1.add_widget(label1)
		return layout1

#Start of main loop
testApp().run()

After executing the above, the following screen will be displayed. Since the parent Widget Boxlayout is instructed to orientation ='vertical', the Buttons and Labels added as child widgets are lined up vertically. It is also possible to change it side by side by changing vertical to horizontal.

You can also create a wide variety of widget trees such as the following. Boxlayout has Button and Boxlayout as child Widget (children1), and Boxlayout of child Widget (children1) has Button and Label as child Widget (children2).

main.py

from kivy.app import App
from kivy.uix.label import Label
from kivy.uix.button import Button
from kivy.uix.boxlayout import BoxLayout

class testApp(App):
	def build(self):
        #Creation of Boxlayout object and Button object
		layout1 = BoxLayout(orientation='vertical')
		button1 = Button(text='children1')
		layout2 = BoxLayout(orientation='horizontal')
		label2 = Label(text='children2')
		button2 = Button(text='children2')
        #Added button2 and label2 as child widgets of layout2
		layout2.add_widget(button2)
		layout2.add_widget(label2)
		#Added button1 and layout2 as child widgets of layout1
		layout1.add_widget(button1)
		layout1.add_widget(layout2)
		return layout1

testApp().run()

The execution result is as follows. I was able to create a slightly complicated structure. I feel like I've finally set up at the entrance to GUI creation.

Summary and future

This time, I made a simple program to understand the basic structure Widget tree for displaying parts on the screen. Next time, I will explain how to make Buttons and Labels placed in the Widget tree related.

References / web

Kazuya Haraguchi (2018) "Practical Python Library Kivy Programming -Multi-tap App Created with Python-" Mikio Kubo, Asakura Shoten 254-12896-3 /) https://kivy.org/#home