[Python] KivyMD - MDTextField

이번에는 사용자의 입력을 받을 수 있는 MDTextField widget에 대해 살펴보겠습니다.

MDTextField

가장 기본적인 형태를 먼저 만들어 보겠습니다.

from kivymd.app import MDApp
from kivymd.uix.screen import MDScreen
from kivymd.uix.textfield import MDTextField


class MainApp(MDApp):
    def build(self):
        self.theme_cls.theme_style = "Dark"
        self.theme_cls.primary_palette = "Orange"

        screen = MDScreen()

        tf1 = MDTextField()
        screen.add_widget(tf1)

        return screen


MainApp().run()

Box layout을 만들어 세로로 정렬을 시키고, MDTextField widget을 하나 넣었습니다.

처음엔 회색으로 보이고, 클릭을 하면 설정한 primary 색상으로 입력 가능한 상태가 됩니다.

MDTextField with Position and Size

기본 형태는 위치와 크기가 별로였죠? 이것을 한 번 조절해 보겠습니다.

screen = MDScreen()

tf1 = MDTextField(
    pos_hint={"center_x": 0.5, "center_y": 0.55}, size_hint=(0.5, 1)
)
screen.add_widget(tf1)

tf2 = MDTextField(
    pos_hint={"center_x": 0.5, "center_y": 0.45}, size_hint_x=None, width=300
)
screen.add_widget(tf2)

위치의 경우, pos_hint property를 사용하여 object 형태로 화면에서의 위치를 소수점으로 표현합니다.

크기의 경우, size_hint property를 사용하여 tuple 형태로 원래 크기대비 비율을 소수점으로 표현합니다.

예제에서 보시는 것처럼 x혹은 y의 값을 None과 함께, width 혹은 height를 절대 값으로 지정해줄 수 있습니다.

보시는 것처럼 화면의 크기를 변경했을 때 차이가 확실하게 드러나는 데 비율로 지정하면 화면의 크기 변화에 맞춰 비율적으로 변하는데, 절대값으로 지정을 하면 화면과 상관없이 항상 동일한 크기를 갖는 것을 볼 수 있습니다.

MDTextField with Hint Text

유저가 무엇을 입력해야할 지 도와줄 수 있는 property가 있습니다.

tf1 = MDTextField(
    hint_text="Enter ID",
    pos_hint={"center_x": 0.5, "center_y": 0.55},
    size_hint=(0.5, 1),
)
screen.add_widget(tf1)

tf2 = MDTextField(
    hint_text="Enter Password",
    pos_hint={"center_x": 0.5, "center_y": 0.45},
    size_hint=(0.5, 1),
)
screen.add_widget(tf2)

바로, hint_text property 입니다.

예제 화면처럼 입력한 text가 힌트로 제공되고, focusing을 하면 작게 위로 표시가 됩니다.

MDTextField with Helper Text

힌트와 유사한 헬퍼 문자열 기능이 제공됩니다.

힌트는 입력창에 나타나는 반면, 헬퍼는 하단부에 나타나게 됩니다.

tf1 = MDTextField(
    hint_text="Enter ID",
    helper_text="Enter user ID",
    helper_text_mode="persistent",
    pos_hint={"center_x": 0.5, "center_y": 0.55},
    size_hint=(0.5, 1),
)
screen.add_widget(tf1)

tf2 = MDTextField(
    hint_text="Enter Password",
    helper_text="Enter user password",
    helper_text_mode="on_focus",
    pos_hint={"center_x": 0.5, "center_y": 0.45},
    size_hint=(0.5, 1),
)

helper_text property를 사용하여 표시할 문자열을 지정할 수 있고, helper_text_mode property를 사용하여 모드를 지정할 수 있습니다.

persistent mode는 항상 표시가 되며, on_focus mode는 focusing이 될 경우에만 보입니다. 단, focus를 잃어도 자동으로 사라지진 않아요. 생략 시, on_focus가 기본 모드입니다.

on_error mode도 지정할 수 있으며 error가 발생할 경우에 표시가 됩니다.

MDTextField with Validate

입력에 제한을 두는 property들이 있습니다.

tf1 = MDTextField(
    hint_text="Enter ID",
    helper_text="ID is required",
    pos_hint={"center_x": 0.5, "center_y": 0.55},
    size_hint=(0.5, 1),
    required=True,
)
screen.add_widget(tf1)

tf2 = MDTextField(
    hint_text="Enter Password",
    helper_text="password should be less than 8 characters",
    pos_hint={"center_x": 0.5, "center_y": 0.45},
    size_hint=(0.5, 1),
    max_text_length=8,
)
screen.add_widget(tf2)

required property는 해당 field에 입력을 하지 않으면 에러가 발생되고, max_text_length property는 입력 문자의 개수에 제한을 둡니다.

MDTextField with Appearance

입력창의 모양을 바꿀 수 있다.

tf1 = MDTextField(
    hint_text="Enter ID",
    mode="rectangle",
    pos_hint={"center_x": 0.5, "center_y": 0.55},
    size_hint=(0.5, 1),
)
screen.add_widget(tf1)

tf2 = MDTextField(
    hint_text="Enter Password",
    mode="fill",
    pos_hint={"center_x": 0.5, "center_y": 0.45},
    size_hint=(0.5, 1),
)
screen.add_widget(tf2)

tf3 = MDTextField(
    hint_text="Enter Nickname",
    mode="round",
    pos_hint={"center_x": 0.5, "center_y": 0.35},
    size_hint=(0.5, 1),
)
screen.add_widget(tf3)

mode property를 사용하여 설정할 수 있고, rectangle, fill, round, line이 가능합니다.

눈치채셨겠지만 지금까지 예제로 봤던 line이 기본 모드입니다.

각각 스샷처럼 보이며, round의 경우 입력을 하게되면 hint_text가 사라지게 됩니다.

MDTextField with Icon

마지막으로 아이콘과 함께 사용하는 방법에 대해서 살펴보겠습니다.

tf1 = MDTextField(
    hint_text="Enter ID",
    mode="rectangle",
    pos_hint={"center_x": 0.5, "center_y": 0.55},
    size_hint=(0.5, 1),
    icon_right="git",
)
screen.add_widget(tf1)

tf2 = MDTextField(
    hint_text="Enter Password",
    mode="rectangle",
    pos_hint={"center_x": 0.5, "center_y": 0.45},
    size_hint=(0.5, 1),
    icon_left="key-variant",
)
screen.add_widget(tf2)

icon_left와 icon_right property를 사용하여 원하는 위치에 아이콘을 표시할 수 있습니다.

예쁘게 잘 표시가 됩니다.

Conclusion

사용자로부터 입력을 받을 때, 가장 흔하게 사용되는 TextField widget에 대해 기본적인 기능을 살펴보았습니다.

도움이 되었으면 좋겠네요. ^^