Tampilan EditText Android Petunjuk Mengambang dalam Desain Material


97

Apakah API 21 menyediakan metode untuk menggunakan fitur berikut:

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

Saya mencoba untuk mengapungkan petunjuk EditText.

Terima kasih!



Saya mengalami ini juga selama pencarian saya, tetapi bertanya-tanya apakah Android menyediakan metode asli.
xsorifc28

1
Ini membuat kami berpikir bahwa ada yang salah dengan Android. Ada beberapa celah yang hilang pada API untuk Desain Material. Contoh lainnya adalah Tombol Tindakan Mengambang.
motobói

Jawaban:


4

Anda perlu menambahkan yang berikut ini ke file modul build.gradle Anda:

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

Dan gunakan com.google.android.material.textfield.TextInputLayout di XML Anda:

       <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>

108

Petunjuk mengambang EditText:

Tambahkan di bawah ketergantungan di gradle:

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

Dalam tata letak:

<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>

3
Waspadalah terhadap: TextInputLayout tidak menampilkan petunjuk EditText sebelum pengguna fokus padanya, bug ada di pustaka dukungan desain22.2.0
Ivan Chau

1
Apa perbedaan antara menggunakan EditText dan TextInputEditText dalam XML ini?
Pengembang android

2
Dependensi yang baru diubah namanya tampaknya implementation 'com.google.android.material:material:1.0.0-rc01'.
rmtheis

60

Ya, mulai 29 Mei 2015, fungsionalitas ini sekarang tersedia di Pustaka Dukungan Desain Android

Pustaka ini menyertakan dukungan untuk

  • Label mengambang
  • Tombol aksi mengambang
  • Snackbar
  • Panel samping navigasi
  • dan lainnya

3
Apakah Anda kebetulan mengetahui tutorial untuk label mengambang dengan EditTexts seperti yang disebutkan OP?
AdamMc331


1
Wow terima kasih! Saya akan memeriksa ini dan memberi tahu Anda bagaimana kelanjutannya!
AdamMc331

2
Yang ketiga adalah apa yang saya cari. Saya menemukan TextInputLayout, tetapi tidak dapat menemukan contoh yang baik (mungkin mencari semua istilah yang salah). Terima kasih!
AdamMc331

18

Pustaka dukungan Android bisa diimpor dalam gradle dalam dependensi:

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

Ini harus disertakan dalam GradlePlease! Dan sebagai contoh untuk menggunakannya:

 <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, editor mungkin tidak memahami bahwa AutoCompleteTextView diizinkan dalam TextInputLayout.


11

Android belum menyediakan metode asli. Juga AppCompat.

Coba pustaka ini: https://github.com/rengwuxian/MaterialEditText

Ini mungkin yang Anda inginkan.


1
Saya mendapatkan Kesalahan: (1) "Atribut" warna "telah ditentukan" pada sinkronisasi gradle, mungkin karena appcompat-v7. Saya tidak bisa menyingkirkannya. Ada saran?
mdzeko

MaterialEditText belum mendefinisikan atribut bernama "color", jadi pasti ada yang salah di tempat lain.
rengwuxian

9

Impor Pustaka Dukungan, Dalam file build.gradle proyek Anda, tambahkan baris berikut dalam dependensi proyek:

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

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

Gunakan TextInputLayout berikut di Layout UI Anda:

<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>

Kemudian, panggil setHint pada TextInputLayout tepat setelah panggilan setContentView karena, untuk menganimasikan label mengambang, Anda hanya perlu menyetel petunjuk, menggunakan metode setHint.

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

1
Setidaknya menggunakan 23.1.1, Anda tidak perlu menggunakan panggilan eksplisit ke setHint(). Ia bekerja dengan petunjuk yang ditetapkan di EditTextdalam layout xml.
Ionoclast Brigham

3

Saran @ andruboy tentang https://gist.github.com/chrisbanes/11247418 mungkin adalah pilihan terbaik Anda.

https://github.com/thebnich/FloatingHintEditText berfungsi dengan appcompat-v7 v21.0.0, tetapi karena v21.0.0 tidak mendukung warna aksen dengan subkelas EditText, garis bawah FloatingHintEditTextakan menjadi hitam pekat atau putih default. Juga padding tidak dioptimalkan untuk gaya Material EditText, jadi Anda mungkin perlu menyesuaikannya.


Terima kasih. Saya menduga google juga belum menyediakan api untuk membuat peringatan teks edit bergaya material, seperti di google.com/design/spec/components/… Maaf untuk pertanyaan amatir, saya mencoba beradaptasi dengan desain material karena saya bisa menggunakan api / perpustakaan google dan mencoba mencari tahu semua yang telah disediakan vs perpustakaan luar. Terima kasih lagi!
xsorifc28


0

Untuk cara yang lebih mudah menggunakan InputTextLayout, saya telah membuat pustaka ini yang memotong kode XML Anda menjadi kurang dari setengahnya, dan juga memberi Anda kemampuan untuk mengatur pesan kesalahan serta pesan petunjuk dan cara mudah untuk melakukannya. validasi. https://github.com/TeleClinic/SmartEditText

Cukup tambahkan

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

Kemudian Anda dapat melakukan sesuatu seperti ini:

<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.*" />

0

Coba cara ini

masukkan deskripsi gambar di sini

  dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:appcompat-v7:23.0.1'
    compile 'com.android.support:design:23.0.1'
  }

untuk referensi lebih lanjut klik di sini


0

Gunakan yang TextInputLayoutdisediakan oleh Material Components Library :

    <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>

masukkan deskripsi gambar di sini

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.