Sekarang kita belajar bagaimana caranya membuat teks autocomplete. Skenarionya, disediakan sebuah editteks sebagi masukan. Saat Kamu mengetik minimal 3 huruf, secara otomatis akan muncul rekomendasi kata-kata yang berawalan dari 3 huruf tadi. Lebih jelasnya perhatikan Gambar 5.1.
Gambar 5.1
1. Jalankan Enclipse, buat project baru, isilah parameter seperti berikut
| Project name | AutocompleteSederhana |
|-------------------------|-------------------------------|
| Build Target | Android 2.2 |
| Application name | Belajar Autocomplete |
| Package name | com.auto.comp |
| Create Activity | AutocompleteSederhana |
| Min SDK version | 8 |
2. Tambahkan kode baris ke 5 berikut pada String.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="hello">Hello World, autoComplete!</string>
<string name="app_name">Membuat Teks AutoComplete</string>
<string name="perintah">Masukkan minimal 3 huruf</string>
</resources>
3. Kemudian ketikkan script berikut ini pada main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/textView1"
android:text="@string/perintah"></TextView>
<AutoCompleteTextView android:id="@+id/edit"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:completionThreshold="3" />
<TextView android:layout_width="fill_parent"
android:text="TextView"
android:layout_height="wrap_content"
android:id="@+id/hasil"></TextView>
</LinearLayout>
4. Ketiklah script AutocompleteSederhana.java seperti berikut
package com.auto.comp; 2:
import android.app.Activity;
import android.os.Bundle;
import android.text.Editable;
import android.text.TextWatcher;
import android.widget.ArrayAdapter;
import android.widget.AutoCompleteTextView; 9: import android.widget.TextView;
public class AutocompleteSederhana extends Activity implements TextWatcher {
/** Called when the activity is first created. */
TextView hasil;
AutoCompleteTextView edit;
String[] item = { "Merbabu", "Merapi", "Lawu", "Rinjani",
"Sumbing","Sindoro", "Krakatau", "Selat Sunda", "Selat Bali",
"Selat Malaka","Kalimantan", "Sulawesi", "Jawa" }; 18:
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState); 22: setContentView(R.layout.main);
hasil = (TextView) findViewById(R.id.hasil);
edit = (AutoCompleteTextView) findViewById(R.id.edit);
edit.addTextChangedListener(this);
edit.setAdapter(new ArrayAdapter<String>(this,
android.R.layout.simple_dropdown_item_1line, item));
}
public void onTextChanged(CharSequence s, int start, int
before, int count) {
hasil.setText(edit.getText());
}
public void beforeTextChanged(CharSequence s, int start, int
count, int after) {
// not used
}
public void afterTextChanged(Editable s) {
// not used
}
}
Bila script berantakan, lakukan Format (source > format). Lakukan RUN dan lihat hasilnya
Penjelasan Program
Lihat dulu Main.xml khususnya baris 9-10, merupakan bagian yang menciptakan widget autocomplete. Widget ini memiliki beberapa atribut salah satu contohnya adalah baris 12. Atribut pada baris 12 bernilai 3, berfungsi untuk membatasi jumlah minimal huruf yang nanti dimasukkan. Dengan demikian, seorang user minimal harus memasukkan 3 huruf dulu baru kemudian muncul kata-kata rekomendasi.
Sekarang kita focus ke activity AutocompleteSederhana. Saya bagi menjadi tiga blok
- Baris 13-17 : deklarasi object textview, string dan autocompletetextView
- Baris 24-28 : sinkronisasi object terhadap widget di layout xml berdasarkan id, sekaligus menempelkan method pada object edit.
- Baris 31-43 : implementasi method TextWatcher
Coba perhatikan dulu baris 14, object „edit‟ adalah turunan dari class AutoCompleteTextView. Object ini merupakan textview yang bisa diedit kemudian muncul daftar rekomendasi kata secara otomatis saat proses mengetik berlangsung. Daftar rekomendasi kata ditampilkan dalam sebuah drop down menu yang bisa diklik oleh pengguna.
Baris 26, mengaktifkan object „edit‟ supaya bisa menangkap sinyal ketika user memasukkan sebuah huruf. Sinyal ini kemudian direspon oleh method-method pada baris 31-43 yaitu
- afterTextChanged() method ini dipanggil setelah edittext selesai diubah
- beforeTextChanged() method ini dipanggil sebelum edittext diubah
- onTextChanged() method ini panggil saat text pada edittext sedang diubah
Baris 28, menempelkan data array bernama "item" ke object "edit". Bagian ini mengakibatkan kata-kata yang disimpan dalam variable item muncul otomatis saat user memasukkan huruf. Baris 33 berperan menduplikasi data, yaitu huruf apa saja yang dimasukkan ke dalam object "edit" maka tampil juga di object "hasil".
