Python 개발 공부 Kivy편 (02) layout과 widget 소개

 

 

오늘도 파이팅 해봅니당 !!

< 파이썬 어플개발 공부0 >

1. 개발툴 선정 및 설치
  - 언어 : python 3.11
  - os : window 10
  - kivy 2.3.0 

2. kivy 기초 익히기
 - pycharm으로 App실행 
 - kivy docs 의 내용 중 programming guide 공부하기
   1. Layout과 Widget의 의미
   2. kivy 문법

 

 

 

pycharm으로 기본제공된 App 실행해보기

 

• 저번에 가상공간? 으로 지정했던 폴더 mykivy를 열어줍니다. 
• main.py를 만들고, 거기에 kivy에서 기본 제공하는 내용을 복사 붙여넣기 했습니다.
• 그리고 run을 하면 HelloWorld가 나타나는 것을 볼 수 있습니다.

#001 kivy Hello world

import kivy
kivy.require('2.1.0') # replace with your current kivy version !

from kivy.app import App
from kivy.uix.label import Label


class MyApp(App):  # 클래스를 만들어줍니다.

    def build(self):  # 함수입니다
        return Label(text='Hello world') # 반환값


if __name__ == '__main__':
    MyApp().run()

 

 

kivy code cycle

 

https://kivy.org/doc/stable/#

Welcome to Kivy — Kivy 2.3.0 documentation

 

위에서 다룬 app 실행이 바로 이 문서의 첫번째 내용이었습니다. 그리고 이어서  Kivy App Life Cycle 이 있는데 이는 우선 저장해두고 그때그때 코드를 따라하고 분석할때마다 참고하려고 합니다.

 

여기서 run()은 MyApp().run()으로 수행되는 셈

이 문서에서는 kivy를 이용해 앱을 프로그래밍할때 완성을 위해 숙지해야할 전반적인 구조에 대해 설명하고 있는것 같습니다. 아직 초보인 저한테는 정말 어렵더라구요.. 일단 우선으로 이해해야겠다 싶은것 부터 정독해보았습니다. 그래서 문서랑은 다른 순서입니다.

 

kv file

 

CSS 같이 디자인언어로서 기능을 하는 파일이다. 논리기능은 없습니다.

작성할 때 알아두어야하는 것은 LowCase로 작성해야한다는 점이다.

 

아래 내용은 공식문서에서  제공된 코드이다.

#002 kv 파일 이해

from kivy.app import App
from kivy.uix.gridlayout import GridLayout  # 행, 열의 형태로 정렬되는 레이아웃
from kivy.uix.label import Label
from kivy.uix.textinput import TextInput

class LoginScreen(GridLayout):  # 레이아웃

    def __init__(self, **kwargs):
        super(LoginScreen, self).__init__(**kwargs)
        self.cols = 2 # 2열
        #여기까지 기본 기록이고, 나머지는 kv파일로 돌릴 수 있을 것 같다.

        self.add_widget(Label(text='User Name'))
        self.username = TextInput(multiline=False)
        self.add_widget(self.username)

        self.add_widget(Label(text='password'))
        self.password = TextInput(password=True, multiline=False)
        self.add_widget(self.password)

class MyApp(App):  # 실행

    def build(self):
        return LoginScreen()

if __name__ == '__main__':
    MyApp().run()

 

run 하면 이런 앱이 나타난다.

 

약간 변형하여 .kv 파일로 분리해 낸 모습입니다.

 

 

 

레이아웃 layout,  위젯 widget

 

Widget : GUI 블럭을 만드는 기초? 입니다.

Widget tree : widget은 코드작성시 tree의 구조를 가지고 구성되어진다고 합니다. 앞서 본 예제에서도 그 구조를 약간 엿볼 수 있습니다. 아래가 사용하는 메소드인데, tree 구조가 가지는 상위, 하위 개념을 child로 표현하고 활용하는것을 할 수 있습니다.

Layout : 제공되는 라이브러리에 있는 여러가지 유형의 레이아웃 그리고 그안에 Widget으로 기능 형태 등을 넣는것인듯 합니다. 그 코딩하는 플로우의 구조가 tree와 같다 이뜻인듯 합니다.

 

정확한 표현은 좀더 공부하면서 점점 다듬어 가야할듯 합니다.

 

우선 관련한 예제를 문서에서 가져오기전에 Layout, Widget 제공내용을 보겠습니다.

<Layout>

BoxLayout: Arranges widgets in an adjacent manner (either vertically or horizontally) manner, to fill all the space. The size_hint property of children can be used to change proportions allowed to each child, or set fixed size for some of them. 

GridLayout: Arranges widgets in a grid. You must specify at least one dimension of the grid so kivy can compute the size of the elements and how to arrange them. rows, cols

StackLayout: Arranges widgets adjacent to one another, but with a set size in one of the dimensions, without trying to make them fit within the entire space. This is useful to display children of the same predefined size.

AnchorLayout: A simple layout only caring about children positions. It allows putting the children at a position relative to a border of the layout. size_hint is not honored. 위, 아래, 왼쪽, 오른쪽, 중앙 만 본다.
anchor_x, anchor_y

FloatLayout: Allows placing children with arbitrary locations and size, either absolute or relative to the layout size. Default size_hint (1, 1) will make every child the same size as the whole layout, so you probably want to change this value if you have more than one child. You can set size_hint to (None, None) to use absolute size with size. This widget honors pos_hint also, which as a dict setting position relative to layout position.

RelativeLayout: Behaves just like FloatLayout, except children positions are relative to layout position, not the screen.

추가내용
PageLayout:
ScatterLayout:
StackLayout: 왼>오른, 위>아래

layout의 속성에는 다음이 있습니다.
orientation : 'vertical'  // 기본속성은 수평으로 배열되는것인데 이를 수직으로 바꿈
padding, spacing, cols, rows


각 layout 설명에 있는,
size_hint는 위젯의 사이즈를 의미한다. 1을 100%로 생각하여 소숫점으로 표시한다.
pose_hint는 위젯의 위치를 의미한다. 해당 layout에 대한 상대적 위치
이 값들은 none으로 설정가능합니다.

 

<widget 라이브러리>
Layout.add_widget(widget_name) : 해당이름으로 정의된 위젯을 레이아웃에 child로 추가
Layout.remove_widget(widget_name) : 해당이름으로 정의된 위젯을 레이아웃에 children list에서 삭제
Layout.clear_widget() : 모든 children 삭제

예를들어
Label - id, text ...
TextInput - id, multiline ...
Button - text, on_press, pos, size, x, y, width, height ...
canvas - Color(rgb), Rectangle(size, pos) ...
ImageButton - source, on_press ..
등등 그때그때 찾아서 해야할 정도로 많습니당

 

rgb도 사용하게 될것으로 보이니 미리 맘에 드는 표나 검색 사이트를 찾아두면 좋을것 같습니다.