1. 程式人生 > Android入門教學 >自動補全文字框 AutoCompleteText

自動補全文字框 AutoCompleteText

而實際上百度是在我們輸入的過程中實時的自動預判我們要輸入的內容,然後幫我們補全關鍵詞,這時候我們可以直接選擇系統的補全方案而減少很多不必要的時間,大大提高了搜尋效率,體驗非常棒。

1. AutoCompleteTextView 的特性

AutoCompleteTextView 派生自 EditText,擁有 EditText 的所有屬性和 API(關於 EditText 的詳細講解,可參見第 14 節)。它提供一個輸入框,並在 EditText 的基礎之上增加了輸入過程中的實時文字自動補全的功能,我們可以通過 Adapter 實現補全列表和補全資料的繫結,就和 ListView 一樣,這個效果對於使用者的輸入體驗提升是非常大的。

2. AutoCompleteTextView 的基本用法

2.1 常用屬性

AutoCompleteTextView 是繼承自 EditText 的,所以 EditText 的屬性它全都可以適用,這裡主要講解 AutoCompleteTextView 特有的屬性。

  • android:completionHint:
    設定下拉選單中的提示資訊
  • android:completionHintView:
    設定提示選單的佈局樣式
  • android:completionThreshold:
    指定當使用者輸入多少字元的時候開始提示
  • android:dropDownAnchor:
    指定自動補全下拉選單的錨點 View,系統預設使用該當前 TextView 作為定位錨點 View
  • android:dropDownHeight:
    設定下拉選單的高度
  • android:dropDownWidth:
    設定下拉選單的寬度
  • android:dropDownHorizontalOffset:
    設定下拉選單的水平間距
  • android:dropDownVerticalOffset:
    設定下拉選單的豎直間距
  • android:dropDownSelector:
    設定下拉選單點選效果,類似Button
  • android:popupBackground:
    設定下拉選單的背景樣式

2.2 AutoCompleteTextView 的 API

AutoCompleteTextView 作為升級版的 EditText,要用到 API 的地方並不多,大多數場景還需要掌握屬性的設定就行,這裡對 API 做一個簡單的講解。

  • getAdapter()
    返回一個 ListAdapter 型別的 adapter ,即我們程式碼中繫結的 adapter 物件。
  • getCompletionHint()
    獲取當前匹配的補全資訊列表
  • getDropDownAnchor()
    獲取下拉補全列表的錨定 View 的 id
  • getListSelection()
    獲取下拉列表中被選中的選項所在的位置
  • isPopupShowing()
    判斷下拉選單是否彈出
  • showDropDown()
    彈出下拉選單

3. AutoCompleteTextView 示例

3.1 編寫佈局檔案

佈局檔案很簡單,只需要在根佈局的位置新增一個 AutoCompleteTextView 標籤,然後加上適當的屬性即可:

<?xml version="1.0" encoding="utf-8"?>
<AutoCompleteTextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/autoCompleteTextView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:completionHint="請輸入您要查詢的內容"
    android:completionThreshold="1"
    android:dropDownHorizontalOffset="10dp" />

通過android:completionHint設定當前 AutoCompleteTextView 的功能提示,android:completionThreshold="1"表示當用戶輸入一個字元時就開始做補全提示,最後通過android:dropDownHorizontalOffset設定一個水平間距。

3.2 編寫 Java 程式碼

Java 程式碼相對比較簡單,因為補全的結果是一個字串陣列,補全列表的列表項也都是單個專案,所以這裡直接使用ArrayAdapter再好不過(關於 ArrayAdapter 的使用詳見 23 節),程式碼如下:

package com.emercy.myapplication;

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

public class MainActivity extends Activity {

    private AutoCompleteTextView mTextView;
    private String[] mDataName = {"慕課", "", "慕課Android教程", "慕斯蛋糕", "慕容復"};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mTextView = findViewById(R.id.autoCompleteTextView);

        ArrayAdapter<String> adapter = new ArrayAdapter<>(this, android.R.layout.simple_dropdown_item_1line, mDataName);
        mTextView.setAdapter(adapter);
    }
}

首先我們將補全項存入字串陣列中,然後獲取 AutoCompleteTextView 物件,建立 ArrayAdapter,最後為 AutoCompleteTextView 物件指定 Adapter 即可。
其中在建立 ArrayAdapter 的時候我們傳入了一個 id 為android.R.layout.simple_dropdown_item_1line的佈局檔案,它是 Android 系統為我們內建的專門用於下拉選單使用的佈局檔案,其實裡面只有一個 TextView 用於顯示下拉選單項,檢視原始碼如下:

<TextView xmlns:android="http://schemas.android.com/apk/res/android" 
    android:id="@android:id/text1"
    style="?android:attr/dropDownItemStyle"
    android:textAppearance="?android:attr/textAppearanceLargePopupMenu"
    android:singleLine="true"
    android:layout_width="match_parent"
    android:layout_height="?android:attr/listPreferredItemHeight"
    android:ellipsize="marquee" />

我們在使用下拉選單型別的樣式時都可考慮直接採用系統樣式,最終編譯出來螢幕中有一個輸入框,我們輸入一個“慕”字,會展示以慕開頭的所有可補全的字串,結果如圖所示:

AutoCompleteTextView示例

4. 小結

本節學習了 EditText 的升級版,同時也是有一個使用 Adapter 的控制元件。它除了能提供和 EditText 一樣的輸入功能之外,還能通過 Adapter 載入一個字串陣列,在使用者輸入的同時為使用者實現實時自動補全,在搜尋查詢的場景非常適用。
到這裡已經學習了很多和 Adpater 有關的 UI 元件了,大家有沒有發現 Adapter 的一些規律?這個問題留給大家在課後思考,也希望大家在學習的過程中能夠不斷歸納總結。