TextInputLayout의 Tips 5선.
17557 단어 Android
Text InputLayout
TextInputLayout는 Android Design Support Library에 포함된 텍스트 입력 기능을 제공하는 View입니다.잘 따라주기 때문에소재 디자인의 Text Fields 소재 디자인을 구현할 때 편리합니다.
Text fields - Components - Google design guidelines
하지만 최신v23.1.1에는 모르는 부분도 있다.
이 글에서는 Text InputLayout을 사용할 때 주의해야 할 부분에 대해 설명한다.
Tips
1. 아이의 EditText에도 id를 넣는 것이 좋다
TextInputLayout
는 다음과 같이 EditText
를 끼워서 사용한다.
activity_main.xml <android.support.design.widget.TextInputLayout
android:id="@+id/text_input_message"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="@+id/message"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/some_hints"
android:inputType="text"
android:minHeight="@dimen/text_caption"
android:textSize="@dimen/text_caption" />
</android.support.design.widget.TextInputLayout>
이때 TextInputLayout#getEditText()에서 아이EditText
를 얻을 수 있기 때문에 일부러 EditText
에게 id를 흔들 필요가 없을 것 같다.그리고 실제로는 없어도 움직이는 것처럼 보인다.
하지만 화면을 돌려봅시다.입력하는 도중의 문자는 사라질 것이다.
왜냐면 안드로이드 SDK가 뷰의 상태를 자동으로 저장/복원할 때 뷰의 ID가 있는지 여부가 판단의 기준이기 때문이다.Android Developers에도 다음과 같은 내용이 있다.
참고: Android 시스템이 활성 뷰의 상태를 복원하려면 각 뷰에 고유한 ID가 있어야 합니다.이것은 android:id에 제공되었다.
리메이크 이벤트.
따라서 사용하지 않더라도 내부EditText
에서 지정android:id
해야 한다.
이 ID에 코드가 있는지 확인하십시오. https://github.com/android/platform_frameworks_base/blob/android-6.0.0_r7/core/java/android/view/View.java#L14740필자는 디버깅을 실시하여 가까스로 여기까지 왔는데 마침내 상술한 방법이 생각났다.
2. 힌트를 애니메이션화하고 싶지 않을 때
TextInputLayout
소재 디자인을 충실히 구현하기 위해 텍스트 상자를 입력하기 시작하면 설명에 따라 힌트가 이동하는 것은 안드로이드에 있어 드문 깜찍한 기능이다.
floating labels
하지만 가끔 폐를 끼칠 수도 있어요.
이 애니메이션을 닫는 방법은 제공되지 않았지만 다음 프로그래머에게 알림을 지정하면 가능하다.그나저나 이것에 관해서.
MainActivity.java final TextInputLayout til = (TextInputLayout) findViewById(R.id.text2);
final CharSequence hint = til.getHint();
til.setHint(null);
til.getEditText().setHint(hint);
AOSP에서도 이슈가 열렸습니다.
3. EditText와 baseline 연결하기
주의사항!Support Library 24.2.0 부터 TextInputLayout
계승되지 않기 때문에 TextInputLayout
여기에 적힌 Tip을 사용할 수 없을 것 같습니다 (참조:
https://code.google.com/p/android/issues/detail?id=223772)。선생님, 감사합니다.
다음 내용은 참조용으로만 제공되므로 24.20Support Library 이후에는 이동하지 마십시오.
보통 수평 배열LinearLayout
과 EditText
에서는 TextView
의 @litmon 속성 등을 사용하여 텍스트의 기선을 맞춘다.
하지만 RelativeLayout
에 연루되면 쉽지 않다.부모의TextInputLayout
에서 지정TextInputLayout
속성이 있어도 아이의android:layout_alignBaseline
기선에 작용하지 않기 때문
그럴 때는 아래와 같이 지정한다.EditText
계승TextInputLayout
이기 때문에 이메시지 속성을 사용할 수 있습니다.
activity_main.xml <TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:text="パイント" />
<android.support.design.widget.TextInputLayout
android:id="@+id/text1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:baselineAlignedChildIndex="0"
android:layout_alignBaseline="@id/label"
android:layout_toLeftOf="@id/label">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="飲んだビールの量" />
</android.support.design.widget.TextInputLayout>
4. 카운터와 오류 정보의 외관 변경
카운터나 오류 메시지의 스타일은 다음과 같이 변경할 수 있습니다.
activity_main.xml <android.support.design.widget.TextInputLayout
android:id="@+id/text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:counterEnabled="true"
app:counterMaxLength="10"
app:counterTextAppearance="@style/counterText"
app:counterOverflowTextAppearance="@style/counterOverflowText"
app:errorTextAppearance="@style/errorText">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.TextInputLayout>
values/styles.xml <style name="counterText">
<item name="android:textColor">@android:color/holo_green_dark</item>
</style>
<style name="counterOverflowText">
<item name="android:textStyle">bold</item>
</style>
<style name="errorText">
<item name="android:textColor">@android:color/holo_red_dark</item>
<item name="android:textStyle">bold</item>
</style>
또한 android:layout_alignBaseline의 실시 방식을 읽었는데 오류 텍스트와 계수기는 아래LinearLayout
로 표시된LinearLayout
의 하위 요소가 동적으로 추가된 것 같다(주: 생성된View가 어떤 것인지를 나타내는 개념의 XML로 실제로는 XML을 사용하지 않는다). <LinearLayout
android:id="@+id/indicatorArea"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="@+id/errorView"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Space
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="1"/>
<TextView
android:id="@+id/counterView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxLines="1"/>
</LinearLayout>
표시되든 숨겨지든 오류 정보는 왼쪽 정렬이고 계수기는 오른쪽 정렬임을 알 수 있다.
5. 오류 메시지를 숨길 때 View 높이를 복구할 수 없는 문제
여러 줄 오류 정보mIndicatorArea
를 표시한 다음setError(CharSequence)
라고 부르면 오류 정보의 View의visibility는setError(null)
로 바뀌지만 View 자체는 삭제되지 않기 때문에 아래에 여분의 공간이 남는다.
이것을 취소하려면 View.INVISIBLE
라고 부르세요.이로써 오류 정보의view의visibility는setErrorEnabled(false)
로 바뀌었다.
MainActivity.java final TextInputLayout til = (TextInputLayout) findViewById(R.id.text2);
til.getEditText().addTextChangedListener(new TextWatcher() {
@Override
public void afterTextChanged(Editable s) {
if (s.toString().contains("error")) {
til.setError("WRYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY!");
} else {
til.setErrorEnabled(false);
}
}
끝말
Design Support Library에서 제공하는 android:baselineAlignedChildIndex를 사용할 때 주의해야 할 부분과 tips에 대해 설명합니다.
지원 라이브러리에 따라 버전 행동이 다르다는 것을 알 수 있다.예를 들어 TextInputLayout 계수기의 표시는 왼쪽 정렬이지만 최신TextInputLayout에서는 오른쪽 정렬이다.사용할 때 주의해야 할 점이 있을 수 있습니다.
참고 자료
1. 아이의 EditText에도 id를 넣는 것이 좋다
TextInputLayout
는 다음과 같이 EditText
를 끼워서 사용한다.activity_main.xml
<android.support.design.widget.TextInputLayout
android:id="@+id/text_input_message"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="@+id/message"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/some_hints"
android:inputType="text"
android:minHeight="@dimen/text_caption"
android:textSize="@dimen/text_caption" />
</android.support.design.widget.TextInputLayout>
이때 TextInputLayout#getEditText()에서 아이EditText
를 얻을 수 있기 때문에 일부러 EditText
에게 id를 흔들 필요가 없을 것 같다.그리고 실제로는 없어도 움직이는 것처럼 보인다.하지만 화면을 돌려봅시다.입력하는 도중의 문자는 사라질 것이다.
왜냐면 안드로이드 SDK가 뷰의 상태를 자동으로 저장/복원할 때 뷰의 ID가 있는지 여부가 판단의 기준이기 때문이다.Android Developers에도 다음과 같은 내용이 있다.
참고: Android 시스템이 활성 뷰의 상태를 복원하려면 각 뷰에 고유한 ID가 있어야 합니다.이것은 android:id에 제공되었다.
리메이크 이벤트.
따라서 사용하지 않더라도 내부
EditText
에서 지정android:id
해야 한다.이 ID에 코드가 있는지 확인하십시오. https://github.com/android/platform_frameworks_base/blob/android-6.0.0_r7/core/java/android/view/View.java#L14740필자는 디버깅을 실시하여 가까스로 여기까지 왔는데 마침내 상술한 방법이 생각났다.
2. 힌트를 애니메이션화하고 싶지 않을 때
TextInputLayout
소재 디자인을 충실히 구현하기 위해 텍스트 상자를 입력하기 시작하면 설명에 따라 힌트가 이동하는 것은 안드로이드에 있어 드문 깜찍한 기능이다.floating labels
하지만 가끔 폐를 끼칠 수도 있어요.
이 애니메이션을 닫는 방법은 제공되지 않았지만 다음 프로그래머에게 알림을 지정하면 가능하다.그나저나 이것에 관해서.
MainActivity.java
final TextInputLayout til = (TextInputLayout) findViewById(R.id.text2);
final CharSequence hint = til.getHint();
til.setHint(null);
til.getEditText().setHint(hint);
AOSP에서도 이슈가 열렸습니다. 3. EditText와 baseline 연결하기
주의사항!Support Library 24.2.0 부터
TextInputLayout
계승되지 않기 때문에 TextInputLayout
여기에 적힌 Tip을 사용할 수 없을 것 같습니다 (참조: https://code.google.com/p/android/issues/detail?id=223772)。선생님, 감사합니다.
다음 내용은 참조용으로만 제공되므로 24.20Support Library 이후에는 이동하지 마십시오.
보통 수평 배열
LinearLayout
과 EditText
에서는 TextView
의 @litmon 속성 등을 사용하여 텍스트의 기선을 맞춘다.하지만
RelativeLayout
에 연루되면 쉽지 않다.부모의TextInputLayout
에서 지정TextInputLayout
속성이 있어도 아이의android:layout_alignBaseline
기선에 작용하지 않기 때문그럴 때는 아래와 같이 지정한다.
EditText
계승TextInputLayout
이기 때문에 이메시지 속성을 사용할 수 있습니다.activity_main.xml
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:text="パイント" />
<android.support.design.widget.TextInputLayout
android:id="@+id/text1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:baselineAlignedChildIndex="0"
android:layout_alignBaseline="@id/label"
android:layout_toLeftOf="@id/label">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="飲んだビールの量" />
</android.support.design.widget.TextInputLayout>
4. 카운터와 오류 정보의 외관 변경
카운터나 오류 메시지의 스타일은 다음과 같이 변경할 수 있습니다.
activity_main.xml
<android.support.design.widget.TextInputLayout
android:id="@+id/text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:counterEnabled="true"
app:counterMaxLength="10"
app:counterTextAppearance="@style/counterText"
app:counterOverflowTextAppearance="@style/counterOverflowText"
app:errorTextAppearance="@style/errorText">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.TextInputLayout>
values/styles.xml <style name="counterText">
<item name="android:textColor">@android:color/holo_green_dark</item>
</style>
<style name="counterOverflowText">
<item name="android:textStyle">bold</item>
</style>
<style name="errorText">
<item name="android:textColor">@android:color/holo_red_dark</item>
<item name="android:textStyle">bold</item>
</style>
또한 android:layout_alignBaseline의 실시 방식을 읽었는데 오류 텍스트와 계수기는 아래LinearLayout
로 표시된LinearLayout
의 하위 요소가 동적으로 추가된 것 같다(주: 생성된View가 어떤 것인지를 나타내는 개념의 XML로 실제로는 XML을 사용하지 않는다). <LinearLayout
android:id="@+id/indicatorArea"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="@+id/errorView"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Space
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="1"/>
<TextView
android:id="@+id/counterView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxLines="1"/>
</LinearLayout>
표시되든 숨겨지든 오류 정보는 왼쪽 정렬이고 계수기는 오른쪽 정렬임을 알 수 있다.5. 오류 메시지를 숨길 때 View 높이를 복구할 수 없는 문제
여러 줄 오류 정보
mIndicatorArea
를 표시한 다음setError(CharSequence)
라고 부르면 오류 정보의 View의visibility는setError(null)
로 바뀌지만 View 자체는 삭제되지 않기 때문에 아래에 여분의 공간이 남는다.이것을 취소하려면
View.INVISIBLE
라고 부르세요.이로써 오류 정보의view의visibility는setErrorEnabled(false)
로 바뀌었다.MainActivity.java
final TextInputLayout til = (TextInputLayout) findViewById(R.id.text2);
til.getEditText().addTextChangedListener(new TextWatcher() {
@Override
public void afterTextChanged(Editable s) {
if (s.toString().contains("error")) {
til.setError("WRYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY!");
} else {
til.setErrorEnabled(false);
}
}
끝말
Design Support Library에서 제공하는 android:baselineAlignedChildIndex를 사용할 때 주의해야 할 부분과 tips에 대해 설명합니다.
지원 라이브러리에 따라 버전 행동이 다르다는 것을 알 수 있다.예를 들어 TextInputLayout 계수기의 표시는 왼쪽 정렬이지만 최신TextInputLayout에서는 오른쪽 정렬이다.사용할 때 주의해야 할 점이 있을 수 있습니다.
참고 자료
Reference
이 문제에 관하여(TextInputLayout의 Tips 5선.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/hkurokawa/items/baf0dca930a32a5a7f92텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)