Android 머티리얼 텍스트 필드
이 튜토리얼에서는 새로운 머티리얼 디자인 구성 요소 라이브러리를 사용하여 텍스트 필드를 구현합니다. 우리는 이미 여기에 TextInputLayout을 구현했습니다.
재료 TextFields
TextInputLayout은 Material 텍스트 필드에 대한 구현을 제공합니다. TextInputEditText만 사용하면 됩니다! 무엇보다도 새로운 재료 구성 요소 종속성을 가져옵니다. 또한 활동에서 MaterialComponent 테마를 설정하십시오.
implementation 'com.google.android.material:material:1.1.0-alpha09'
기본적으로 입력 텍스트 필드에는 사용자의 주의를 끌기 위해 채워진 배경이 있습니다. 이제 기본 텍스트 필드를 만들어 보겠습니다.
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="12dp"
android:hint="Filled box(default)">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</com.google.android.material.textfield.TextInputLayout>
다음 몇 섹션에서는 다양한 방식으로 텍스트 필드를 사용자 정의합니다.
표준 및 조밀한 텍스트 필드
텍스트 필드에는 두 가지 유형의 높이 변형이 있습니다.
- 표준 - 아무 것도 없는 경우 기본적으로 사용됩니다.
- 밀도 -
@style/Widget.MaterialComponents.TextInputLayout.FilledBox.Dense
조밀한 텍스트 필드는 높이가 약간 더 짧습니다.
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="12dp"
android:hint="Filled box(default)">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox.Dense"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="12dp"
android:hint="Filled box dense"
app:boxBackgroundColor="#20D81B60">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</com.google.android.material.textfield.TextInputLayout>
기본적으로 FilledBox.Standard
스타일이 사용됩니다. app:boxBackgroundColor
는 채워진 상자 색상을 설정하는 데 사용됩니다. 화면에 표시되는 방식은 다음과 같습니다.
개요 상자 텍스트 필드
TextInputLayout에 다음 스타일을 적용하여 윤곽선 모양의 텍스트 필드를 가져옵니다.
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
FilledBox와 유사하게 여기에는 Standard와 Dense의 두 가지 높이 변형이 있습니다. 코너 반경을 설정하기 위해 다음 속성이 사용됩니다.
- boxCornerRadiusTopStart
- boxCornerRadiusTopEnd
- boxCornerRadiusBottomStart
- boxCornerRadiusBottomEnd
boxStrokeColor
는 외곽선의 획 색상을 설정하는 데 사용됩니다. 다음과 같이 표시됩니다.
종료 아이콘 모드
앞으로 이동하여 이제 종료 아이콘 모드를 설정하겠습니다. 이들은 기본적으로 텍스트 필드의 오른쪽에 설정된 아이콘입니다. 현재 기본 제공되는 세 가지 유형의 아이콘은 다음과 같습니다.
password_toggle
clear_text
맞춤형
위의 속성은 자명합니다. endIconTint
속성을 사용하여 이러한 아이콘에 고유한 아이콘 색조를 설정할 수 있습니다. 맞춤 아이콘의 경우 endIconDrawable
속성을 사용합니다.
<com.google.android.material.textfield.TextInputLayout
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="12dp"
android:hint="Enter password"
app:endIconMode="password_toggle">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="12dp"
android:hint="Enter password"
app:endIconMode="password_toggle"
app:endIconTint="@color/colorAccent">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="12dp"
android:hint="Clear text"
app:endIconMode="clear_text"
app:endIconTint="@color/colorPrimaryDark">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="12dp"
android:hint="Custom end icon"
app:endIconCheckable="true"
android:id="@+id/custom_end_icon"
app:endIconDrawable="@android:drawable/ic_input_add"
app:endIconMode="custom"
app:endIconTint="@color/colorPrimaryDark">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</com.google.android.material.textfield.TextInputLayout>
화면에 표시되는 방식은 다음과 같습니다.
사용자 지정 아이콘의 경우 setEndIconOnClickListener
콜백을 사용하여 클릭을 듣고 작업을 수행할 수 있습니다.
모양이 지정된 텍스트 필드
ShapeAppearance는 강력한 스타일입니다. 텍스트 필드의 모양을 사용자 정의할 수 있습니다. 컷과 라운드의 두 가지 기본 제공 모양이 있습니다.
<style name="Cut" parent="ShapeAppearance.MaterialComponents.MediumComponent">
<item name="cornerFamily">cut</item>
<item name="cornerSize">12dp</item>
</style>
<style name="Rounded" parent="ShapeAppearance.MaterialComponents.SmallComponent">
<item name="cornerFamily">rounded</item>
<item name="cornerSize">16dp</item>
</style>
shapeAppearance
속성에서 위의 스타일을 설정하면 다음과 같은 결과가 나타납니다.
현재 머티리얼 구성요소 텍스트 필드가 요약되어 있습니다. 아래 소스 코드에서 위의 모든 개념을 찾을 수 있습니다.
AndroidMaterialTextFields
Github 프로젝트 링크