AndroidのAutoCompleteTextViewの例のチュートリアル

2年 ago

光, 明

2 minutes

AutocompleteTextViewは、ユーザーがAndroidアプリで入力する際に自動的に補完提案を表示する編集可能なテキストビューです。このチュートリアルでは、提案のリストを定義するためにArrayAdapterを使用してAndroidのAutoCompleteTextViewをアプリケーションに実装します。

Android AutoCompleteTextViewの概要

AutoCompleteTextViewは、編集可能なテキストフィールドに入力中に候補を表示するために使用されるコンポーネントです。候補リストは、ドロップダウンメニューに表示され、ユーザーはそこから希望するアイテムを選択することができます。候補リストはアダプターから取得され、指定された閾値の文字数を超えた後にのみ表示されます。AutoCompleteThresholdフィールドを使用するには、xmlレイアウトで次のように定義する必要があります。

<AutoCompleteTextView
   android:id="@+id/autoCompleteTextView"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_alignParentTop="true"
   android:layout_centerHorizontal="true"
   android:layout_marginTop="65dp"
   android:ems="10" >

注：android：emsまたはsetEms（x）は、テキストの拡張やテキストサイズに関係なく、x個の文字数のテキストに合わせてTextViewの幅を設定します。オートコンプリートリストの重要なメソッドは以下の通りです：

showDropDown()：このメソッドは、ドロップダウンを画面に表示します。

setAdapterメソッドは、autoCompleteTextViewのアダプターを設定するために使用されます。それでは、コーディングの部分に移りましょう。

AndroidのAutoCompleteTextViewプロジェクトの構造

このプロジェクトには、MainActivityのレイアウトにはシンプルなTextViewとAutoCompleteTextViewが含まれています。ArrayAdapterには以下の果物が含まれています：リンゴ、バナナ、チェリー、デーツ、ぶどう、キウイ、マンゴー、洋なし。

AndroidのAutoCompleteTextViewの例のコード

MainActivityのレイアウトは、activity_main.xmlに以下のように定義されています。

<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_marginTop="15dp"
        android:text="Name a fruit from (Apple Banana Cherry Date Grape Kiwi Mango Pear)" />

    <AutoCompleteTextView
        android:id="@+id/autoCompleteTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_below="@+id/textView"
        android:layout_marginLeft="36dp"
        android:layout_marginTop="17dp"
        android:ems="10"
        android:text="">

        <requestFocus />
    </AutoCompleteTextView>

</RelativeLayout>

以下にMainActivity.javaが定義されています。

package com.scdev.autocomplete;

import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.widget.ArrayAdapter;
import android.widget.AutoCompleteTextView;

public class MainActivity extends Activity {
    String[] fruits = {"Apple", "Banana", "Cherry", "Date", "Grape", "Kiwi", "Mango", "Pear"};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //Creating the instance of ArrayAdapter containing list of fruit names
        ArrayAdapter<String> adapter = new ArrayAdapter<String>
                (this, android.R.layout.select_dialog_item, fruits);
        //Getting the instance of AutoCompleteTextView
        AutoCompleteTextView actv = (AutoCompleteTextView) findViewById(R.id.autoCompleteTextView);
        actv.setThreshold(1);//will start working from first character
        actv.setAdapter(adapter);//setting the adapter data into the AutoCompleteTextView
        actv.setTextColor(Color.RED);

    }
}

Android AutoCompleteTextView Example App

Android AutoCompleteTextViewプロジェクトをダウンロードしてください。