Автозаполнение в Android. Используем AutoCompleteTextView

Создавая пользовательский интерфейс нужно уделить максимум внимания тому, чтобы пользователь мог достигнуть необходимого результата приложив минимум усилий. Именно таким целям  служит виджет AutoCompleteTextView. Попутно научимся использовать массивы строк, описанные в ресурсном xml-файле.

Суть проблемы

Допустим у нас есть текстовое поле, в которое пользователь может вводить значение, при этом у нас есть предположения относительного того, какие значение это могут быть. Как помочь ему ускорить ввод и не сделать ошибки в таком случае?

Мы реализуем несложный пример, который будет помогать пользователю найти один из первых десяти неправильных глаголов английского языка.

Алгоритм решения

1. Создадим xml со списком глаголов (файл verbs.xml – ресурс-массив строк) и модель  IrregularVerb.java
2. В разметку активности main.xml добавим элемент AutoCompleteTextView, опишем в файле list_item.xml элемент выпадающего списка автозаполнения
3. Свяжем массив неправильных глаголов с AutoCompleteTextView при помощи ArryaAdapter

Шаг 1:

Опишем ресурс с глаголами в файле res/values/verbs.xml:

<?xml version="1.0" encoding="utf-8"?>

<resources>

    <string-array name="verbs">

      <item>be was/were been</item>

      <item>become became become</item>

      <item>begin began begun</item>

      <item>bring brought brought</item>

      <item>buy bought bought</item>

      <item>choose chose chosen</item>

      <item>come came come</item>

      <item>do did done</item>

      <item>drink drank drunk</item>

      <item>drive drove driven</item>

    </string-array>

</resources>

Создадим простую модель неправильного глагола, организуем в ней чтение тройки глаголов из входной строки:

package by.idev.android.autocomplete;

import java.util.Scanner;

public class IrregularVerd {

      private String infinitive;

      private String pastSimple;

      private String pastParticiple;

      public IrregularVerd(String input) {

            super();

            setVerbs(input);

      }

      public void setVerbs(String input) {

      //Выделим три формы глагола из одной строки

            Scanner scanner = new Scanner(input);

            infinitive = scanner.next();

            pastSimple= scanner.next();

            pastParticiple = scanner.next();

      }

      public String getInfinitive() {

            return infinitive;

      }

      public void setInfinitive(String infinitive) {

            this.infinitive = infinitive;

      }

      public String getPastSimple() {

            return pastSimple;

      }

      public void setPastSimple(String pastSimple) {

            this.pastSimple = pastSimple;

      }

      public String getPastParticiple() {

            return pastParticiple;

      }

      public void setPastParticiple(String pastParticiple) {

            this.pastParticiple = pastParticiple;

      }

      //Важно правильно переопределить toString(),

      //так как автозаполнение

      //использует этот метод

      @Override

      public String toString() {

            String result = String.format("%s %s %s", infinitive,

                                        pastSimple, pastParticiple);

            return result;

      }

}

Шаг 2:

Создадим разметку для главной активности:

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:orientation="horizontal"

    android:layout_width="fill_parent"

    android:layout_height="wrap_content"

    android:padding="25dp">

<TextView

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:text="Verb"/>

<AutoCompleteTextView

      android:id="@+id/autocomplete"

      android:layout_height="wrap_content"

      android:layout_width="fill_parent"

      android:layout_margin="3dp"

      android:hint="enter your verb here"

      <!-- атрибут указывает число символов,-->

      <!-- которое нужно ввести чтобы получить подсказку -->

      android:completionThreshold="1"

      android:singleLine="true"/>

</LinearLayout>

</code>

И разметку элемента выпадающего списка с подсказками:

<code class="prettyprint">

<?xml version="1.0" encoding="utf-8"?>

<TextView

  xmlns:android="http://schemas.android.com/apk/res/android"

  android:orientation="vertical"

  android:layout_height="fill_parent"

  android:layout_width="fill_parent"

  android:padding="12dp"

  android:textSize="14dp"

  android:textColor="@android:color/black">

</TextView>

<?xml version="1.0" encoding="utf-8"?>

<TextView

  xmlns:android="http://schemas.android.com/apk/res/android"

  android:orientation="vertical"

  android:layout_height="fill_parent"

  android:layout_width="fill_parent"

  android:padding="12dp"

  android:textSize="14dp"

  android:textColor="@android:color/black">

</TextView>

Шаг 3:

Осталось связать все воедино в рамках нашей активности:

package by.idev.android.autocomplete;

import java.util.ArrayList;

import android.app.Activity;

import android.os.Bundle;

import android.widget.ArrayAdapter;

import android.widget.AutoCompleteTextView;

public class IdevAutocompleteActivity extends Activity {

    AutoCompleteTextView

    ArrayList<IrregularVerd> verbs;

    @Override

    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.main);

        textView = (AutoCompleteTextView)findViewById(R.id.autocomplete);

        setVerbs();

        //Адаптер привяжет массив глаголов к выпадающему списку подсказки

        ArrayAdapter<IrregularVerd> adapter = new ArrayAdapter<IrregularVerd>(this, R.layout.list_item, verbs);

        textView.setAdapter(adapter);

    }

      private void setVerbs() {

            //Извлечение массива с описанием глаголов из ресурсов приложения

            String[] resStrings = getResources().getStringArray(R.array.verbs);

            verbs = new ArrayList<IrregularVerd>();

            for (String string : resStrings) {

                  verbs.add(new IrregularVerd(string));

            }

      }

}

Вот и все! Сравните результат со скриншотом в начале статьи и порадуйтесь успеху=)

Исходники лежат тут IdevAutocomplete

Резюме:

Из этой статьи пользу можно было извлечь так:

1. Научится использовать AutoCompleteTextView
2. Научится использовать ресурсы-массивы, описанные в xml
3. Повторить неправильные глаголы

Happy coding!

Похожие статьи