Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Android SDK

Desain Interface Pengguna Android: EditText Controls

Read Time:6 minsLanguages:

Indonesian (Bahasa Indonesia) translation by Rossie (you can also view the original English article)

Dalam tutorial ini, Anda akan belajar cara membuat kontrol EditText Android dasar untuk mengumpulkan input teks dari pengguna. Kemudian Anda akan belajar cara mengkonfigurasi, menata, dan memanipulasi kontrol ini dalam berbagai cara.

Tutorial ini menunjukkan kepada Anda langkah-langkah untuk membuat sejumlah kontrol EditText yang berbeda di aplikasi Android Anda. Pertama, Anda belajar cara menambahkan kontrol input teks dasar ke file tata letak Anda dan atribut apa yang paling berguna. Selanjutnya, Anda belajar cara mengambil konten kontrol teks. Terakhir, kita membahas beberapa fitur lain yang tersedia untuk kontrol EditText di Android.

Android SDK menyertakan kontrol teks yang dapat diedit sederhana untuk digunakan dalam layout Anda: EditText (android.widget.EditText). Contoh yang baik dari penggunaan kontrol EditText adalah mengumpulkan input formulir, seperti "Masukkan Nama:" atau "Masukkan Kata Sandi:".

Gambar 1 menunjukkan contoh layar dengan banyak kontrol EditText berbeda yang ditampilkan di sana.

Android screen with numerous EditText controlsAndroid screen with numerous EditText controlsAndroid screen with numerous EditText controls

Langkah 1: Buat Aplikasi Android

Mulailah dengan membuat proyek Android. Terapkan aplikasi Android Anda seperti biasa. Setelah Anda menyiapkan proyek dan aplikasi berjalan, tentukan di bawah layar apa Anda ingin menambahkan kontrol. Mungkin Anda baru saja membuat proyek Android baru dengan Aktivitas dan layout default (main.xml). Ini akan bekerja untuk latihan ini. Setelah menyiapkan proyek Android, Anda siap melanjutkan dengan tutorial ini.

Langkah 2: Menambahkan Kontrol EditText ke Layout

Kontrol EditText biasanya disertakan sebagai bagian dari file sumber daya layout Aktivitas Anda. Misalnya, untuk menambahkan kontrol EditText ke sumber daya layout main.xml yang terkait dengan aplikasi Anda, Anda harus mengedit file tata letak. Anda dapat melakukan ini di dalam Eclipse menggunakan desainer Sumber Daya Layout, atau dengan mengedit XML secara langsung. Kontrol juga dapat dibuat secara pemrograman dan ditambahkan ke layar Anda saat runtime. Cukup buat kontrol EditText (android.widget.EditText) dan tambahkan ke tata letak Anda di dalam Aktivitas Anda.

Untuk menambahkan kontrol EditText ke file sumber daya tata letak, buka file layout /res/layout/main.xml yang merupakan bagian dari proyek Android Anda. Klik pada LinearLayout (atau kontrol layout induk) yang ingin Anda tambahkan kontrol EditText. Dalam Eclipse dari dalam desainer Sumber Daya Layout grafis, Anda dapat memilih kontrol EditText dan seret ke dalam layout induk.

Untuk mengonfigurasi bagaimana kontrol EditText terlihat dan berperilaku, sesuaikan atribut kontrol dengan memilih kontrol (baik di tab Garis Besar atau jendela Pratinjau) dan mengubah atributnya, seperti yang ditunjukkan pada Tab Properties. Anda juga dapat mengedit XML secara langsung.

Begini definisi XML untuk kontrol EditText yang sangat mendasar:

Atribut khusus kontrol EditText yang ingin Anda ketahui:

  • Berikan kontrol EditText nama unik menggunakan properti id. Ini adalah pengidentifikasi yang harus Anda gunakan untuk mengambil nilai kontrol ini secara terprogram.
  • Atur ketinggian layout dan properti lebar layout kontrol yang sesuai.
  • Kelas EditText berasal dari kelas TextView, sehingga sebagian besar atribut kontrol TextView statis (dan metode terkait) masih berlaku. Misalnya, Anda dapat mengatur atribut lain yang Anda inginkan untuk menyesuaikan tampilan kontrol. Misalnya, sesuaikan ukuran teks, warna, font atau pengaturan gaya lainnya untuk kontrol EditText.

Mari kita bahas beberapa atribut paling umum untuk kontrol EditText.

Langkah 3: Mengambil Nilai dari Kontrol EditTeks Secara Programatis

Untuk mengambil nilai kontrol EditText dari dalam Aktivitas Anda, Anda dapat menggunakan metode getText() dari kelas EditText. Misalnya, kode berikut mengambil pegangan ke kontrol EditText yang didefinisikan sebagai editTextSimple:

Langkah 4: Memantau Kontrol EditTeks untuk Tindakan

Anda biasanya ingin mengambil konten EditText, serta kontrol formulir lainnya di acara tertentu. Seringkali, pengumpulan informasi semacam ini dipicu oleh pengguna menekan tombol (seperti OK atau Kirim), atau menekan tombol Kembali.

Namun, Anda dapat memonitor kontrol seperti EditText lebih dekat jika Anda inginkan dengan menggunakan pendengar kontrol tampilan khas.

Biasanya, Anda mungkin tertarik mendengarkan acara seperti:

1. Ketika pengguna mengklik kontrol. Dalam hal ini, daftarkan pendengar menggunakan metode setOnClickListener().

1. Ketika pengguna mengklik-panjang pada kontrol. Dalam hal ini, daftarkan pendengar menggunakan metode setOnLongClickListener().

1. Ketika pengguna menekan tombol di dalam kontrol. Dalam hal ini, daftarkan pendengar menggunakan metode setOnKeyListener().

1. Saat pengguna mengubah fokus ke atau dari kontrol. Dalam hal ini, daftarkan pendengar menggunakan metode setOnFocusChangedListener().

Mari kita lihat contoh perubahan fokus. Saat kontrol pertama kali mendapatkan fokus, Anda akan melihat fokus mengubah acara. Setelah pengguna memindahkan fokus dari kontrol ini, Anda akan melihatnya lagi. Berikut ini contoh cara memantau konten kontrol EditText pada perubahan fokus dari dalam kelas Aktivitas Anda:

Langkah 5: Mengumpulkan Berbagai Jenis Input

Secara default, setiap konten teks dalam kontrol EditText ditampilkan sebagai teks biasa. Keyboard software standar digunakan, untuk memasukkan teks biasa. Namun, dengan menetapkan satu atribut sederhana yang disebut inputType, semua Anda dapat memfasilitasi input dari berbagai jenis informasi, seperti nomor telepon dan kata sandi. Dalam XML, properti ini akan muncul dalam kontrol EditText Anda sebagai:

Atau

Ada berbagai jenis input berbeda untuk tujuan berbeda. Jenis input telepon akan membatasi pengguna ke angka; keyboard software akan memberikan opsi numerik, seperti yang ditunjukkan pada Gambar 2.

EditText control phone input methodEditText control phone input methodEditText control phone input method

Demikian pula, metode input kata sandi menutupi kata sandi saat Anda mengetiknya, seperti yang ditunjukkan pada Gambar 3.

EditText control with masked password input methodEditText control with masked password input methodEditText control with masked password input method

Mengambil informasi ini dari kontrol dilakukan persis sama seperti jika Anda mengumpulkan teks dasar, menggunakan metode getText ().

Langkah 6: Mengatur Petunjuk dan Nilai Kontrol EditText

Secara umum, kontrol EditText digunakan untuk mengumpulkan input, bukan menampilkannya. Yang mengatakan, Anda selalu dapat mengatur nilai kontrol EditText menggunakan metode setText(), sama seperti Anda akan kontrol TextView biasa.

Anda mungkin juga ingin mengatur petunjuk untuk kontrol EditText untuk meminta pengguna untuk input tertentu. Saat pengguna mengetik dalam kontrol ini, petunjuk itu ditimpa. Anda dapat mengatur string petunjuk kontrol EditText Anda di layout Anda menggunakan atribut petunjuk:

Gambar 4 menunjukkan dua kontrol EditText. Yang pertama memiliki set petunjuk untuk meminta pengguna. Yang kedua menetapkan nilai (dan warna teks - merah) dari kontrol. Ini bukan petunjuk, tetapi VALUE aktual yang ditetapkan dalam kontrol.

EditText controls with hint and value attributesEditText controls with hint and value attributesEditText controls with hint and value attributes

Langkah 7: Memfasilitasi Input Tekstual dalam Kontrol EditText

Anda dapat membuat hidup pengguna Anda lebih mudah dengan menetapkan beberapa atribut tambahan pada kontrol EditText Anda. Misalnya, Anda mungkin ingin menggunakan atribut huruf besar untuk secara otomatis huruf besar setiap kalimat, kata atau karakter dalam kontrol EditText:

Meskipun opsi kalimat mungkin yang paling populer, Anda mungkin ingin menggunakan huruf besar untuk setiap kata untuk input seperti nama dan setiap karakter untuk dua singkatan status huruf.

Demikian pula, Anda dapat membatasi karakter yang dapat dimasukkan ke dalam bidang menggunakan atribut digit. Misalnya, Anda dapat membatasi bidang angka ke nol dan yang seperti ini:

Secara default kursor ditampilkan dalam EditText selama input. Anda dapat menonaktifkan kursor menggunakan atribut cursorVisible, seperti:

Kesimpulan

Kita hanya menggaruk permukaan dari apa yang dapat Anda lakukan dengan kontrol EditText. Kontrol EditText umumnya digunakan di interface pengguna aplikasi Android untuk mengumpulkan input teks dari pengguna. Dalam tutorial ini, Anda belajar cara membuat kontrol EditText Android dan menyesuaikannya dalam berbagai cara sederhana. Salah satu fitur yang paling kuat dari kontrol EditText adalah kemampuan untuk mengatur inputType untuk mengumpulkan teks, angka, alamat email, dan informasi lain dari pengguna. Atribut-atribut ini dapat dicampur dan dicocokkan untuk memungkinkan kontrol input yang sangat fleksibel pada layar.

Tentang Penulis

Pengembang seluler Lauren Darcey dan Shane Conder telah ikut menulis beberapa buku tentang pengembangan Android: buku pemrograman mendalam berjudul Pengembangan Aplikasi Nirkabel Android, Edisi Kedua dan Sams Teach Yourself Pengembangan Aplikasi Android dalam 24 Jam, Edisi Kedua. Ketika tidak menulis, mereka menghabiskan waktu mengembangkan software seluler di perusahaan mereka dan menyediakan layanan konsultasi. Mereka dapat dihubungi di melalui email ke [email protected], melalui blog mereka di androidbook.blogspot.com, dan di Twitter @androidwireless.

Perlu Bantuan Lagi Menulis Aplikasi Android? Lihat Buku dan Sumber Terbaru kami!

Buy Android Wireless Application Development, 2nd Edition Buy Sam's Teach Yourself Android Application Development in 24 Hours, Second Edition Mamlambo code at Code Canyon

Advertisement
Did you find this post useful?
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.