TextInputLayout의 Tips 5선.

17557 단어 Android

Text InputLayout


TextInputLayoutAndroid 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 이후에는 이동하지 마십시오.
보통 수평 배열LinearLayoutEditText에서는 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에서는 오른쪽 정렬이다.사용할 때 주의해야 할 점이 있을 수 있습니다.

참고 자료

  • Working with the EditText · codepath/android_guides Wiki
  • v23.1.1
  • TextInputLayout | Android Developers
  • 좋은 웹페이지 즐겨찾기