[kivy-008] Kv 디자인 언어(design language)를 이용한 GUI 설계

Kv 디자인 언어(design language)를 이용한 GUI 설계

Kv 디자인 언어(Kv design language)를 이용한 GUI 설계

kivy는 GUI 설계와 애플리케이션 알고리즘을 분리, 개발할 수 있는 기능을 제공하는데, Kv 디자인 언어는 GUI 설계를 위해 사용된다.

 

파이썬 코드로 작성한 애플리케이션

 

예를 들어 위의 이미지와 같이 두 개의 Label "user name :"과 "password :", 두 개의 TextInput 위젯을 화면에 표시하기 위한 파이썬 코드는 다음과 같다.

 

아래의 코드에서 각 위젯을 정렬하기 위해 GridLayout 클래스가 사용된다.

아래의 코드에서 TextInput 위젯의 내용이 한 줄로 만 표시되게 하기 위해 multiline 속성 값은 False로 정의한다.

 

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):
        GridLayout.__init__(self, **kwargs)
        self.cols = 2
        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()

 

위의 코드에서 Kv 디자인 언어를 이용해 GUI 설계를 파이썬 코드와 분리하면, 파이썬 코드는 아래와 같이 간결해질 수 있다.

 

from kivy.app import App
from kivy.uix.gridlayout import GridLayout

class LoginScreen(GridLayout):
    pass

class MyApp(App):
    def build(self):
        return LoginScreen()

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

 

Kv 디자인 언어를 이용해 GUI를 설계한 결과는 *.kv 파일이다.

kv 파일은 보통 파이썬 파일과 같은 경로에 저장하고, 파일 이름은 클래스 App을 상속받는 클래스의 이름으로 지정한다.

예를 들어 위의 코드에서 클래스 App을 상속받는 클래스는 MyApp이기 때문에 kv 파일은 my.kv로 정의한다.

kv 파일 이름에서 대소문자는 서로 구별되지 않는 것으로 보인다. kv 파일 이름을 mY.kv로 정의해도 애플리케이션은 정상적으로 표시된다.

 

#:kivy 2.0.0
<LoginScreen>:
    rows: 2
    cols: 2
    padding: 10
    usr_name: kv_usr_name
    usr_passowrd: kv_usr_password

    Label:
        text: 'user name :'

    TextInput:
        id: kv_usr_name
        multiline: False

    Label:
        text: 'password :'

    TextInput:
        id: kv_usr_password
        password: True
        multiline: False

 

파이참 프로젝트에서 파이썬 파일과 kv 파일을 아래와 같이 동일 경로에 놓고 파이썬 파일을 실행하면,

 

파이참 프로젝트

 

그 결과는 파이썬 파일 만을 사용했을 때와 동일하다.

 

파이썬 코드와 kv 파일을 이용한 애플리케이션