[kivy (python)]  [Python] 파이썬 키비(kivy) 앱 개발 - 머티리얼 디자인, KivyMD

파이썬 키비 앱 만들기

- 머티리얼 디자인 -


참고 사이트

키비 공식 문서 :

- 메인 페이지, https://kivy.org/doc/stable/

- 가이드 문서, https://kivy.org/doc/stable/guide/basic.html

- 키비MD API 문서, https://pypi.org/project/kivymd/

- 키비MD 위젯 컴포넌트 문서, https://kivymd.readthedocs.io/en/latest/components/index.html

키비 이미지 불러오기

키비에서 제공하는 기본 이미지 위젯은 Image로 png, jpg 파일을 앱에 넣을 대 사용하는 위젯이다. config.png 파일을 넣어 불러온다.

Image로 불러오고 source에 이미지 파일명을 넣고 size로 크기 조절이 가능하다.

from kivy.app import App from kivy.uix.gridlayout import GridLayout from kivy.uix.image import Image class Npc(GridLayout): def __init__(self, **kwargs): super().__init__(**kwargs) self.img = Image(source="config.png", size=(400,300)) self.add_widget(self.img) class MyApp(App): def build(self): return Npc() MyApp().run()

키비 머티리얼 디자인, klivyMD

머티리얼 디자인(Material Design)을 알아야 한다. 머티리얼 디자인은 복잡한 그래픽 효과를 배제하고 직관적인 인식이 가능하도록 구성하는 2차원 디자인 방식인 플랫 디자인의 장점을 살리면서 그림자 효과를 이용해 입체감을 살리는 디자인 방식이다. 2014년 구글이 안드로이드 스마트 폰에 적용하며 널리 퍼졌다. 머티리얼 컴포넌트 위젯은 이러한 머티리얼 디자인 가이드라인에 따라 시각적이고 동작이 풍부한 위젯을 의미한다.

다음은 키비 머티리얼 디자인 라이브러리의 공식 문서 페이지다.

- https://kivymd.readthedocs.io/en/latest/getting-started.html#installation

 

설치는 간단히 pip로 설치하자.

pip install kivymd

kivyMD에서 제공하는 MBLabel 위젯은 기존에 비해 머티리얼 디자인을 사용해 시각적인 디자인 기능을 제공한다.

경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다.
어린이용이며, 설치가 필요없는 브라우저 게임입니다.
https://s1004games.com

from kivymd.app import MDApp from kivymd.uix.label import MDLabel class MainApp(MDApp): def build(self): return MDLabel(text="Hello, World", halign="center") MainApp().run()

머티리얼 디자인을 사용한 버튼도 기존 kivy와 비교해 살펴보자. 머티리얼 디자인은 반응형 디자인을 제공해 시각적인 효과를 띈다.

from kivy.uix.screenmanager import Screen from kivymd.app import MDApp from kivymd.uix.button import MDRectangleFlatButton class MainApp(MDApp): def build(self): screen = Screen() screen.add_widget( MDRectangleFlatButton( text="Hello, World", pos_hint={"center_x": 0.5, "center_y": 0.5}, ) ) return screen MainApp().run()
 

기타 공식 문서에서 필요한 위젯을 가져다 사용하자. 시각적인 아이콘과 폰트도 제공해 유용하다.

머티리얼 앱, 색상, 아이콘, 폰트 메뉴

다음은 예제로 가져온 파이썬 아이콘이다.

from kivy.lang import Builder from kivymd.app import MDApp KV = ''' Screen: MDIconButton: icon: "language-python" pos_hint: {"center_x": .5, "center_y": .5} ''' class Example(MDApp): def build(self): return Builder.load_string(KV) Example().run()

기타 다양한 머티리얼 아이콘을 제공한다.

Components 를 클릭하면 전체 컴포넌트 문서로 이동해 기타 위젯을 포함한 전체 머티리얼 컴포넌트 위젯을 볼 수 있다.

드롭다운으로 보이는 메뉴는 자주 쓰이는 머티리얼 컴포넌트 위젯이다.

다음은 전체 머티리얼 컴포넌트 위젯 문서 페이지다.

[출처] https://m.blog.naver.com/PostView.naver?blogId=dsz08082&logNo=222056452304&navType=by

 

 

본 웹사이트는 광고를 포함하고 있습니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
대표 김성준 주소 : 경기 용인 분당수지 U타워 등록번호 : 142-07-27414
통신판매업 신고 : 제2012-용인수지-0185호 출판업 신고 : 수지구청 제 123호 개인정보보호최고책임자 : 김성준 sjkim70@stechstar.com
대표전화 : 010-4589-2193 [fax] 02-6280-1294 COPYRIGHT(C) stechstar.com ALL RIGHTS RESERVED