TextInputLayout ไม่แสดงคำใบ้ EditText ก่อนที่ผู้ใช้จะโฟกัสที่มัน


97

ฉันใช้Android Design Support Library ที่เพิ่งเปิดตัวเพื่อแสดงป้ายกำกับแบบลอยพร้อม EditTexts แต่ฉันกำลังประสบปัญหาที่คำแนะนำบน EditText ไม่แสดงเมื่อแสดงผล UI แต่ฉันเห็นคำแนะนำหลังจากที่ฉันโฟกัสที่ EditTexts

รูปแบบของฉันมีดังนี้:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    <ScrollView
        android:id="@+id/ScrollView01"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scrollbars="vertical">

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:paddingLeft="@dimen/activity_horizontal_margin"
            android:paddingRight="@dimen/activity_horizontal_margin">

            <android.support.design.widget.TextInputLayout
                android:id="@+id/name_et_textinputlayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="@dimen/activity_vertical_margin">

                <EditText
                    android:id="@+id/FeedBackerNameET"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:hint="@string/feedbackname"
                    android:inputType="textPersonName|textCapWords" />
            </android.support.design.widget.TextInputLayout>

            <android.support.design.widget.TextInputLayout
                android:id="@+id/email_textinputlayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <EditText
                    android:id="@+id/FeedBackerEmailET"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:hint="@string/feedbackemail"
                    android:inputType="textEmailAddress" />

            </android.support.design.widget.TextInputLayout>

            <Spinner
                android:id="@+id/SpinnerFeedbackType"
                android:layout_width="fill_parent"
                android:layout_height="48dp"
                android:layout_marginTop="@dimen/activity_vertical_margin"
                android:entries="@array/feedbacktypelist"
                android:prompt="@string/feedbacktype" />

            <android.support.design.widget.TextInputLayout
                android:id="@+id/body_textinputlayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <EditText
                    android:id="@+id/EditTextFeedbackBody"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:hint="@string/feedbackbody"
                    android:inputType="textMultiLine|textCapSentences"
                    android:lines="5" />

            </android.support.design.widget.TextInputLayout>

            <CheckBox
                android:id="@+id/CheckBoxFeedBackResponse"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="@dimen/activity_vertical_margin"
                android:text="@string/feedbackresponse" />

            <Button
                android:id="@+id/ButtonSendFeedback"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="@dimen/activity_vertical_margin"
                android:text="@string/feedbackbutton" />
        </LinearLayout>
    </ScrollView>

</FrameLayout>

<View
    android:layout_width="match_parent"
    android:layout_height="5dp"
    android:background="@drawable/toolbar_shadow" />
</FrameLayout>

ฉันได้พยายามกำหนดคำใบ้สำหรับTextInputLayoutวิธีการใช้งานsetHintแต่ไม่มีโชค

mNameTextInputLayout = (TextInputLayout) v.findViewById(R.id.name_et_textinputlayout);
mNameTextInputLayout.setErrorEnabled(true);
mNameTextInputLayout.setHint(feedBackerNameET.getHint());

mEmailTextInputLayout = (TextInputLayout) v.findViewById(R.id.email_textinputlayout);
mEmailTextInputLayout.setErrorEnabled(true);
mEmailTextInputLayout.setHint(feedBackerEmail.getHint());

mBodyTextInputLayout = (TextInputLayout) v.findViewById(R.id.body_textinputlayout);
mBodyTextInputLayout.setErrorEnabled(true);
mBodyTextInputLayout.setHint(feedBackBody.getHint());

ผมมีปัญหาเดียวกัน. ด้วยความประหลาดใจของฉันที่เรียกใช้แอปพลิเคชันบนโปรแกรมจำลอง 4.1 ทำงานได้ดี แต่ในการแสดงตัวอย่าง M ของฉันเปิดใช้งาน Nexus TextInputLayout ทำงานผิดปกติและไม่แสดงคำใบ้สำหรับ EditText ที่ฝังไว้
sashomasho

คุณสามารถตรวจสอบสีคำใบ้ของคุณได้หรือลองเปลี่ยนสีพื้นหลังของมุมมองของคุณอาจจะมีอยู่ แต่คุณมองไม่เห็นเพราะสี
Ultimo_m

@Ultimo_m ฉันคิดว่าสีคำใบ้จะต้องไม่มีปัญหา อย่างไรก็ตามฉันจะพยายามดูหลังจากเปลี่ยนสีพื้นหลัง
Shajeel Afzal

1
@Shajeel Afzal ฉันบอกคุณคำแนะนำนี้เพราะฉันมีปัญหาเดียวกับคุณและเมื่อฉันเพิ่มพื้นหลังให้กับมุมมองฉันเห็นคำใบ้ ฉันใช้มันภายในชิ้นส่วน ฉันไม่ได้เพิ่มโค้ดใด ๆ จาก java ทั้งหมดที่ฉันทำคือจาก xml
Ultimo_m

2
ฉันพบปัญหานี้เมื่อเพิ่ม / ลบชิ้นส่วน แต่ถ้าฉันแสดง / ซ่อนส่วนย่อยฉันไม่เห็นปัญหานี้
Dave Jensen

คำตอบ:


84

อัปเดต:

นี่คือข้อบกพร่องที่ได้รับการแก้ไขในไลบรารีเวอร์ชัน 22.2.1

คำตอบเดิม:

ดังที่ @shkschneider กล่าวไว้นี่เป็นข้อบกพร่องที่ทราบ ผู้ใช้ Github @ ljubisa987 เพิ่งโพสต์ Gist สำหรับวิธีแก้ปัญหา:

https://gist.github.com/ljubisa987/e33cd5597da07172c55d

ตามที่ระบุไว้ในความคิดเห็นวิธีแก้ปัญหานี้ใช้ได้เฉพาะกับ Android Lollipop และรุ่นเก่ากว่าเท่านั้น มันไม่ทำงานบน Android M Preview


1
Android MDC เป็นเวอร์ชันตัวอย่าง
Dave Jensen

1
BTW ดูเหมือนว่าสถานะบั๊กตอนนี้จะเป็น "Future Release"
Dave Jensen

2
ความคิดเห็นที่ # 28 ที่นี่: code.google.com/p/android/issues/…ได้ผลค่ะ
J_Sizzle

1
แก้ไขในเวอร์ชัน 22.2.1
Jdruwe

3
เราแน่ใจหรือไม่ว่านี่ได้รับการแก้ไขใน V22.2.1? ฉันกำลังประสบปัญหานี้ในไลบรารีการออกแบบ v22.2.1 ที่ทำงานบน Android เวอร์ชัน 5.1.1 ฉันมี EditText สองรายการในแถบเครื่องมือซึ่งฉันกำลังเปลี่ยนกิจกรรมไปและข้อความคำใบ้จะไม่แสดงจนกว่าจะโฟกัส
StuStirling

13

นั่นเป็นข้อบกพร่องที่ทราบแล้วของไลบรารี Android Design ได้รับการยอมรับและมอบหมายแล้ว

ดังนั้นคุณควรได้รับการแก้ไขในไลบรารี Android Design รุ่นถัดไป

ในระหว่างนี้คุณสามารถดูเครื่องมือติดตามปัญหาสำหรับการแก้ไขแฮ็กที่อาจโพสต์ไว้ที่นั่น แต่ตอนนี้ฉันไม่รู้

และใช่มันมีผลกับ Lollipop ขึ้นไปเท่านั้น


1
ปัญหานี้ได้รับการแก้ไขแล้วในเวอร์ชัน 22.2.1
แซม

11

สิ่งนี้ใช้ได้กับฉันใน Design Library 23.1.1:

ตั้งค่าสีคำใบ้ในแอตทริบิวต์ xml ของ TextInputLayout:

    <android.support.design.widget.TextInputLayout
        ....
        android:layout_margin="15dp"
        android:textColorHint="@color/hintColor"
        android:layout_width="match_parent"
        ...

คุณสมบัติ textColorHint แก้ไขให้ฉันเช่นกัน
JoM


5

คุณควรใช้android.support.v7.widget.AppCompatEditTextเป็นEditTextและตั้งค่าandroid:hintดังนี้

<android.support.design.widget.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
        <android.support.v7.widget.AppCompatEditText
                android:id="@+id/etx_first_name"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"                    
                android:inputType="text"
                android:hint="@string/hint_first_name"/>
    </android.support.design.widget.TextInputLayout>

3
   <android.support.design.widget.TextInputLayout
            android:id="@+id/editText1"
            android:layout_margin="15dp"
            android:layout_centerVertical="true"
            android:layout_width="match_parent"

            android:layout_height="wrap_content">

              <AutoCompleteTextView
                android:id="@+id/editText"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:singleLine="true"
                android:hint="Add City" />

          </android.support.design.widget.TextInputLayout>

ใช้ข้อมูลโค้ดนี้ตรวจสอบให้แน่ใจว่ากิจกรรมของคุณคือ AppCompatActivity และการพึ่งพายังมาพร้อมกับเวอร์ชันล่าสุด

compile 'com.android.support:appcompat-v7:22.2.0'
compile 'com.android.support:design:22.2.0'

อัปเดต Android Studio เป็นเวอร์ชันล่าสุด ดูผลลัพธ์ที่นี่


3

หากคุณกำลังตั้งค่าคำใบ้ EditText โดยใช้โปรแกรมมันจะไม่ทำงาน! คุณต้องตั้งค่าคำใบ้ใน TextInputLayout ด้วยตนเอง

TextInputLayout textInputLayout = (TextInputLayout) findViewById(R.id.usernameTextInputLayout);
textInputLayout.setHint(getString(R.string.username_hint));

นี่คือ XML ในกรณีที่คุณสงสัย:

        <android.support.design.widget.TextInputLayout
            android:id="@+id/usernameTextInputLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <android.support.v7.widget.AppCompatEditText
                android:id="@+id/usernameEt"
                android:layout_width="match_parent"
                android:layout_height="@dimen/default_height"
                android:layout_marginEnd="@dimen/default_margin"
                android:layout_marginStart="@dimen/default_margin"
                android:maxLength="@integer/username"
                tools:hint="Username" />

        </android.support.design.widget.TextInputLayout>

3

ปัญหานี้แก้ไขได้ในv23.0.1ไลบรารีการออกแบบการสนับสนุน ฉันยังมีการปรับปรุงของฉันappcompat-v7ไป23.0.1, compileSdkVersionไป23และbuildToolsVersionไป23.0.1ในbuild.gradle

android {    
compileSdkVersion 23
buildToolsVersion "23.0.1"
}

dependencies {
compile 'com.android.support:appcompat-v7:23.0.1'
compile 'com.android.support:design:23.0.1'
}

จำเป็นหรือไม่ที่จะต้องเปลี่ยน compleSdkVersion เวอร์ชัน buildtools และ appCompatVersion เมื่อคุณเปลี่ยนเวอร์ชันการออกแบบการสนับสนุน
srinivas

เกิดขึ้นเนื่องจาก v23 'สนับสนุนไลบรารี' ต้องการ API23 เพื่อคอมไพล์โครงการ ดังนั้นความสัมพันธ์หลักจึงอยู่ระหว่าง 'support libraries' และ 'compileSdkVersion' คุณควรจับคู่ "compileSdkVersion" เสมอแม้ว่า "targetSdkVersion" หรือ "minSdkVersion" จะต่ำกว่าก็ตาม เหตุผลง่ายๆคือเวอร์ชันของไลบรารีสะท้อนถึงเวอร์ชันของ Android sdk เมื่อเทียบกับที่สร้างขึ้น
Wahib Ul Haq

2

ฉันแก้ปัญหาด้วยรหัสนี้:

new Handler().postDelayed(
        new Runnable() {
            @Override
            public void run() {
                TextInputLayout til = (TextInputLayout) someParentView.findViewById(R.id.til);
                til.setHint("Your Hint Text");
                til.bringToFront();
            }
        }, 10);

ที่สำคัญคือbringToFront. มันบังคับให้ทำซ้ำภาพวาดซึ่งไม่ได้เช่นเดียวกับการทำTextInputLayout invalidate()หากคุณกำลังพยายามที่จะแสดงTextInputLayoutบนviewที่มีanimationsหรือtranistionsคุณต้องเรียกใช้โค้ดด้านบนที่ส่วนท้ายของanimationหรือtransition. ตรวจสอบให้แน่ใจว่าโค้ดด้านบนทำงานบน UIthreadUI



0

ดูเหมือนว่าปัญหานี้จะปรากฏขึ้นเมื่อคุณตั้งค่า onFousListener บน EditText - ลองขยาย EditText และรองรับหลาย ๆ onFocusListeners


0

แก้ไขปัญหา: ไปที่ build.gradle ของแอพ ur และตรวจสอบไลบรารีการออกแบบ คอมไพล์ 'com.android.support:design:22.2.1' ควรเป็น 22.2.1 หรือใหม่กว่า


0

ปัญหาคือสีคำใบ้ มันจะกลายเป็นสีขาวเมื่อพิมพ์บางอย่าง โปรดเปลี่ยนสีคำใบ้หรือเปลี่ยนสีพื้นหลัง คุณจะเห็นคำใบ้ขณะพิมพ์


0

มีวิธีง่ายๆในการดำเนินการนี้เนื่องจากได้ผลสำหรับฉัน

<android.support.design.widget.TextInputLayout
    android:id="@+id/activity_login_til_password"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="27dp"
    android:layout_marginTop="24dp"
    android:padding="10dp"
    app:passwordToggleEnabled="true"
    app:passwordToggleTint="#000000"
    app:passwordToggleDrawable="@drawable/passwordviewtoggleselector"
    android:theme="@style/Base.TextAppearance.AppCompat">
      <!---- add this line and theme as you need ----->
    <android.support.design.widget.TextInputEditText
        android:id="@+id/activity_login_et_password"
        android:layout_width="match_parent"
        android:layout_height="58dp"
        android:hint="Password"
        android:inputType="textPassword"
        android:padding="10dp"
        android:textColor="#f5ab3a"
        android:textColorHint="#e6d2d1cf"
        android:textSize="20dp" />

</android.support.design.widget.TextInputLayout>

เพียงแค่เพิ่มandroid: theme = "@ style / Base.TextAppearance.AppCompat"ไปที่ TextEditLayout และมันจะใช้งานได้และคุณสามารถเปลี่ยนธีมได้ตามต้องการ



0

ฉันพบสิ่งที่แตกต่างออกไป

เมื่อตั้งค่ารูปแบบสำหรับfragment,

f1.setStyle(DialogFragment.STYLE_NO_FRAME,android.R.style.Theme_DeviceDefault_Light);

ข้อบกพร่องหายไปเมื่อฉันลองใช้สไตล์ที่แตกต่างจาก "Theme_DeviceDefault_Dialog"ข้อผิดพลาดก็หายไปเมื่อฉันพยายามสไตล์ที่แตกต่างกว่า

ให้มันลอง.

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.