มุมมอง Android EditText คำแนะนำแบบลอยในดีไซน์ Material

API 21 มีวิธีการใช้คุณลักษณะต่อไปนี้หรือไม่:

http://www.google.com/design/spec/components/text-fields.html#text-fields-floating-labels

ฉันพยายามลอยคำใบ้ EditText

ขอบคุณ!

คุณต้องเพิ่มสิ่งต่อไปนี้ในไฟล์ build.gradle ของโมดูลของคุณ:

implementation 'com.google.android.material:material:1.0.0'

และใช้ com.google.android.material.textfield.TextInputLayout ใน XML ของคุณ:

       <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/text_input_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="@string/my_hint">

        <EditText
            android:id="@+id/editText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="UserName"/>
   </com.google.android.material.textfield.TextInputLayout>

คำใบ้แก้ไขข้อความ:

เพิ่มการพึ่งพาด้านล่างใน gradle:

compile 'com.android.support:design:22.2.0'

ในเค้าโครง:

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

        <EditText
            android:id="@+id/editText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="UserName"/>
    </android.support.design.widget.TextInputLayout>

ใช่ ณ วันที่ 29 พฤษภาคม 2015 ฟังก์ชันนี้มีให้ในAndroid Design Support Library แล้ว

ไลบรารีนี้มีการสนับสนุนสำหรับ

• ป้ายลอย
• ปุ่มดำเนินการลอย
• สแน็คบาร์
• ลิ้นชักการนำทาง
• และอื่น ๆ

สามารถนำเข้าไลบรารีการสนับสนุน Android ภายใน gradle ในการอ้างอิง:

    compile 'com.android.support:design:22.2.0'

ควรรวมอยู่ใน GradlePlease! และเป็นตัวอย่างในการใช้งาน:

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

    <AutoCompleteTextView
        android:id="@+id/autoCompleteTextViewTo"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:hint="To"
        android:layout_marginTop="45dp"
        />
</android.support.design.widget.TextInputLayout>

Btw ผู้แก้ไขอาจไม่เข้าใจว่า AutoCompleteTextView ได้รับอนุญาตภายใน TextInputLayout

Android ไม่ได้ให้วิธีการดั้งเดิม หรือ AppCompat

ลองใช้ไลบรารีนี้: https://github.com/rengwuxian/MaterialEditText

นี่อาจเป็นสิ่งที่คุณต้องการ

นำเข้าไลบรารีสนับสนุนในไฟล์ build.gradle ของโปรเจ็กต์ของคุณให้เพิ่มบรรทัดต่อไปนี้ในการอ้างอิงของโปรเจ็กต์:

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])

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

ใช้ TextInputLayout ต่อไปนี้ในเค้าโครง UI ของคุณ:

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

    <EditText
        android:id="@+id/username"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="textEmailAddress"
        android:hint="Username"/>

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

กว่าเรียก setHint บน TextInputLayout หลังจากการเรียก setContentView เนื่องจากในการทำให้ป้ายกำกับลอยเคลื่อนไหวคุณเพียงแค่ต้องตั้งค่าคำใบ้โดยใช้เมธอด setHint

final TextInputLayout usernameWrapper = (TextInputLayout) findViewById(R.id.usernameWrapper);
usernameWrapper.setHint("Username");

ข้อเสนอแนะของ @ andruboy เกี่ยวกับhttps://gist.github.com/chrisbanes/11247418น่าจะเป็นทางออกที่ดีที่สุดของคุณ

https://github.com/thebnich/FloatingHintEditText ใช้งานได้กับ appcompat-v7 v21.0.0 แต่เนื่องจาก v21.0.0 ไม่รองรับสีที่เน้นเสียงกับคลาสย่อยของEditTextการขีดเส้นใต้FloatingHintEditTextจะเป็นสีดำหรือสีขาวเริ่มต้น นอกจากนี้ช่องว่างภายในยังไม่ได้รับการปรับให้เหมาะกับรูปแบบวัสดุEditTextดังนั้นคุณอาจต้องปรับเปลี่ยน

ไม่มันไม่ ฉันคาดหวังสิ่งนี้ในการเปิดตัว api ในอนาคต แต่ตอนนี้เราติดอยู่กับ EditText อีกทางเลือกหนึ่งคือไลบรารีนี้:
https://github.com/marvinlabs/android-floatinglabel-widgets

สำหรับวิธีที่ง่ายกว่าในการใช้ InputTextLayout ฉันได้สร้างไลบรารีนี้ที่ตัดโค้ด XML ของคุณให้เหลือน้อยกว่าครึ่งหนึ่งและยังช่วยให้คุณสามารถตั้งค่าข้อความแสดงข้อผิดพลาดตลอดจนข้อความคำใบ้และวิธีง่ายๆในการทำ การตรวจสอบ https://github.com/TeleClinic/SmartEditText

เพียงแค่เพิ่ม

compile 'com.github.TeleClinic:SmartEditText:0.1.0'

จากนั้นคุณสามารถทำสิ่งนี้:

<com.teleclinic.kabdo.smartmaterialedittext.CustomViews.SmartEditText
    android:id="@+id/emailSmartEditText"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:setLabel="Email"
    app:setMandatoryErrorMsg="Mandatory field"
    app:setRegexErrorMsg="Wrong email format"
    app:setRegexType="EMAIL_VALIDATION" />

<com.teleclinic.kabdo.smartmaterialedittext.CustomViews.SmartEditText
    android:id="@+id/passwordSmartEditText"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:setLabel="Password"
    app:setMandatoryErrorMsg="Mandatory field"
    app:setPasswordField="true"
    app:setRegexErrorMsg="Weak password"
    app:setRegexType="MEDIUM_PASSWORD_VALIDATION" />

<com.teleclinic.kabdo.smartmaterialedittext.CustomViews.SmartEditText
    android:id="@+id/ageSmartEditText"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:setLabel="Age"
    app:setMandatory="false"
    app:setRegexErrorMsg="Is that really your age :D?"
    app:setRegexString=".*\\d.*" />

ใช้สิ่งที่TextInputLayoutจัดเตรียมโดยไลบรารีส่วนประกอบวัสดุ :

    <com.google.android.material.textfield.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Label">

        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

    </com.google.android.material.textfield.TextInputLayout>