[파이썬/Python] Kivy Kv Design Language 구역 나누기 #Layout 설정하기 #색상 변경하기

 

[파이썬/Python] Kivy를 사용해서 Python GUI 프로그래밍을 시작해보자 3

#Kivy Python

#색상 변경하기

#Python GUI Programming

#Kv Design Language 구역 나누기

#Layout 설정하기

 

Kivy를 사용해서 파이썬으로 GUI 프로그래밍을 본격적으로 하기에 앞서,

먼저 Kv Design Language에 대해서 조금은 익숙해질 필요가 있는 것 같다.

(나 또한 익숙치 않으므로..;)

 

그래서 먼저 간단하게 전체적인 화면의 Layout을 나눠보면서, Kv Design Language의 동작 방식이 어떻게 되는지 알아보도록 하자.

먼저, 저번에 사용한 샘플 코드를 조금 수정해보자.

이전에 사용한 샘플 코드가 궁금하신 분들은 아래 링크를 통해 확인하고 오면 도움이 될 것 같다.

[파이썬/Python] Kivy 디자인 언어를 이용한 Python GUI 프로그래밍 (feat. Kivy Design Language)

 

먼저 우리는 화면을 2개의 구역으로 나눠볼 예정이다.

따라서, 먼저 sample.kv 파일을 아래와 같이 구성해보겠다.

UpArea / DownArea로 세로로 나눠볼 예정이고, BoxLayout이라는 놈을 사용하겠다.

 

sample.kv

BoxLayout:
    orientation: 'vertical'

    UpArea:
        Label:
            text: 'Up'

    DownArea:
        Label:
            text: 'Down'

 

세로로 구성할 것이기에 'vertical' 속성을 넣어준 것이고,

아래는 구역의 이름을 임의로 정했다.

 

여기서는 UpArea와 DownArea로 정했고, 그 내부 속성으로 라벨을 각각 추가했다고 생각하면 될 것 같다.

그럼, 지금 만들어본 sample.kv 파일을 Python에서 잘 로드될 수 있도록 main.py를 구성해보겠다.

 

main.py 내용은 앞서 사용한 포스팅 글의 샘플 코드를 약간 수정해서 사용한다.

 

main.py

from os.path import dirname
from os.path import join
from kivy.app import App
from kivy.lang import Builder
from kivy.uix.boxlayout import BoxLayout


class UpArea(BoxLayout):
    pass


class DownArea(BoxLayout):
    pass


class MainApp(App):
    kv_file = 'sample.kv'

    def build(self):
        return Builder.load_file(join(dirname(__file__), self.kv_file))


def main():
    MainApp().run()


if __name__ == "__main__":
    main()

 

많은 것이 변한 것 같지만, 간단하다.

일단 UpArea / DownArea Class를 추가해서 앞에서 작성한 sample.kv내의 이름과 매칭 될 수 있게 구성했다.

그리고 MainApp Class는 이전과 비슷하게 sample.kv 파일을 로드할 수 있도록 했고, Kivy App을 로드할 수 있는 Main Class라고 생각하면 되겠다.

 

아래는 일반적인 Python 코드의 구성으로 main 함수에서 Kivy Main Class를 호출 하도록 구성했다.

그렇다면, 실행결과가 어떨지 한 번 실행해보자.

구분된 Layout

 

Up / Down 문자열이 위 아래로 반반 나눠진 형태로 구성된 것을 볼 수 있다.

하지만, 구역의 어떻게 나눠진 것인지 정확히 눈에 들어오지 않으므로, 색깔과 크기를 조절해봐야 겠다.

일단 색깔부터 해보자.

 

sample.kv

BoxLayout:
    orientation: 'vertical'

    UpArea:
        canvas.before:
            Color:
                rgba: (0, 200, 255, 0.5)
            Rectangle:
                pos: self.pos
                size: self.size
        Label:
            text: 'Up'

    DownArea:
        Label:
            text: 'Down'

 

 

sample.kv 내용을 위 처럼 바꿔봤다.

자세한 건 잘 모르겠지만, 일단 눈에 띄는 것이 Color와 Rectangle이다.

색깔의 속성을 rgb값으로 설정할 수 있다. 그리고 마지막에 하나 더 붙은 값은 투명도를 나타낸다.

rgba의 마지막 a 값은 0.0 ~ 1.0 까지의 값으로 1.0에 가까울 수록 불투명도가 올라간다고 보면 된다.

 

Rectangle 아마도 cavas.before라는 크기와 모양이 될 것 같다.

일단은 위치와 사이즈는 기본으로 지정해본다.

 

실행해보자.

색상변경

 

오, UpArea 구역이 지정된 색깔로 변경된 것을 확인할 수 있다.

그럼 내친김에 사이즈를 조절해보자.

size_hint 속성을 추가했다. (1, 0.1)로 설정했는데, 아마도 x, y값을 나타내는 것 같다.

 

sample.kv

BoxLayout:
    orientation: 'vertical'

    UpArea:
        size_hint: (1, 0.1)
        canvas.before:
            Color:
                rgba: (0, 200, 255, 0.5)
            Rectangle:
                pos: self.pos
                size: self.size
        Label:
            text: 'Up'

    DownArea:
        Label:
            text: 'Down'

 

그리고 다시 실행해본다.

크기변경

 

UpArea 구역이 줄어든 것을 볼 수 있다.

그럼 사이즈 값을 조절해본다.

size_hint: (1, 0.5)

 

그리곤 실행.

사이즈 조절

 

UpArea 구역이 조금 더 커졌다.

하지만 제일 처음의 크기보다는 반 정도 작은 것 같다.

굳이 설명하지 않아도, 원하는 크기를 위해서 앞으로 어떻게 값을 설정해야 할지는 대충 감이 올 것이라 생각한다.

 

그렇다면, 다음 포스팅에는 버튼을 추가해서, 버튼을 눌렀을 때 어떤 동작을 한다든지(Event Handling)에 대한 내용을 공부해보겠다!

 

이런 글은 어때요?

• Kivy Python GUI 프로그래밍의 첫걸음, Kivy 설치
• Kivy 디자인 언어를 이용한 Python GUI 프로그래밍 (feat. Kivy Design Language)
• Kivy 버튼 만들기 #Button Event Handling #버튼 이벤트 핸들링 #버튼 클릭 시 함수 호출
• Kivy 로또 번호 생성하는 프로그램 만들기 #로또 번호 생성기 #로또 번호 생성기 만..