MultiAutoCompleteTextView en Android con ejemplo

MultiAutoCompleteTextView es un TextView editable que amplía AutoCompleteTextView. En una vista de texto, cuando el usuario comienza a escribir un texto, MultiAutoCompleteTextView muestra sugerencias de finalización para la substring del texto y es útil para el usuario seleccionar la opción en lugar de escribir. Esta función es muy útil en todo tipo de aplicaciones, como aplicaciones educativas, comerciales, de entretenimiento, etc. Esta función es una forma en que el usuario puede seleccionar el término correcto y, dado que se permiten varias sugerencias, hace que la vida del usuario sea muy sencilla. qué

Diferencia entre AutoCompleteTextView y MultiAutoCompleteTextView

Un AutoCompleteTextView solo ofrece sugerencias sobre todo el texto. Pero MultiAutoCompleteTextView ofrece múltiples sugerencias para la substring del texto.

Métodos importantes

1. setTokenizer():

El Tokenizer se establece dentro del método setTokenizer() . Por defecto, tenemos CommaTokenizer. En este ejemplo, estamos usando dos instancias de MultiAutoCompleteTextView. Uno (multiAutoCompleteTextViewDefault) con CommaTokenizer predeterminado.

multiAutoCompleteTextViewDefault.setTokenizer(nuevo MultiAutoCompleteTextView.CommaTokenizer());

Aquí, cuando el usuario termina de escribir o selecciona una substring, se agrega una coma al final de la substring. Para la segunda instancia (multiAutoCompleteTextViewCustom), estamos usando SpaceTokenizer. No es más que una clase de Java y necesitamos escribir el código dentro de 3 métodos, a saber, findTokenStart, findTokenEnd yterminarToken .

multiAutoCompleteTextViewCustom.setTokenizer(nuevo SpaceTokenizer());

Aquí, cuando el usuario termina de escribir o selecciona una substring, se agrega un espacio al final de la substring.

2. establecer umbral():

setThreshold() se usa para especificar la cantidad de caracteres después de los cuales se mostrará el menú desplegable con la lista de sugerencias de autocompletar. Puede ser 1 o 2 o depende de su requerimiento. Para este ejemplo, 

// Para multiAutoCompleteTextViewDefault, después de que el usuario escriba un carácter,

// se muestra el desplegable

multiAutoCompleteTextViewDefault.setThreshold(1);

// Para multiAutoCompleteTextViewCustom, después de que el usuario escriba 2 caracteres,

// se muestra el desplegable

multiAutoCompleteTextViewCustom.setThreshold(2);

3. setAdapter():

Para mostrar los elementos de la substring en el menú desplegable, debemos completar la array de strings en « ArrayAdapter».

// Primera Instancia

ArrayAdapter<String> randomArrayAdapter = new ArrayAdapter<>(this, android.R.layout.simple_list_item_1, fewRandomSuggestedText);

multiAutoCompleteTextViewDefault.setAdapter(randomArrayAdapter);

// segunda instancia

ArrayAdapter<String> tagArrayAdapter = new ArrayAdapter<>(this, android.R.layout.simple_list_item_1, fewTags);

multiAutoCompleteTextViewCustom.setAdapter(tagArrayAdapter);

Ejemplo

Paso 1: Crear un nuevo proyecto

Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio . Tenga en cuenta que seleccione Java como lenguaje de programación.

Paso 2: trabajar con el archivo activity_main.xml

Para este ejemplo, en el archivo activity_main.xml agregue dos TextViews y dos MultiAutoCompleteTextViews. A continuación se muestra el código completo para el archivo activity_main.xml . Se agregan comentarios dentro del código para comprender el código con más detalle.

<?xml version="1.0" encoding="utf-8"?>
<!--In linearlayout, screen is rendered and hence all the below
    components come line by line and provide neat layout -->
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="center"
    android:layout_margin="16dp"
    android:orientation="vertical"
    tools:context=".MainActivity">
     
    <!-- To indicate the user that first MultiAutoCompleteTextView
         is supported with comma separated this textview is introduced.
         It just displays Text Separated by Commas at the top -->
    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="Text Separated by Commas"
        android:textSize="18sp" />
 
    <!-- 1st MultiAutoCompleteTextView instance identified with
         multiAutoCompleteTextViewDefault and here when user starts
         to type, it will show relevant substrings and after user chooses it,
         the text is ended with "," as comma is the default tokenizer -->
    <MultiAutoCompleteTextView
        android:id="@+id/multiAutoCompleteTextViewDefault"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="20dp"
        android:ems="10"
        android:hint="Enter Search Terms here" />
     
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="Text Separated by Custom Token"
        android:textSize="18sp" />
 
    <!-- 2nd MultiAutoCompleteTextView instance identified with
         multiAutoCompleteTextViewCustom and here when user starts
         to type, it will show relevant substrings and after user
         chooses it, the text is ended with " " as code is done to
         have space as separator -->
    <MultiAutoCompleteTextView
        android:id="@+id/multiAutoCompleteTextViewCustom"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="20dp"
        android:ems="10"
        android:hint="Add your necessary tags here" />
     
</LinearLayout>

La interfaz de usuario tiene el siguiente aspecto:

Paso 3: Trabajar con los archivos Java

• A continuación se muestra el código completo del  archivo MainActivity.java . Se agregan comentarios dentro del código para comprender el código con más detalle.

import android.os.Bundle;
import android.widget.ArrayAdapter;
import android.widget.MultiAutoCompleteTextView;
import androidx.appcompat.app.AppCompatActivity;
 
public class MainActivity extends AppCompatActivity {
 
    // Defining two MultiAutoCompleteTextView
    // This is to recognize comma separated.
    MultiAutoCompleteTextView multiAutoCompleteTextViewDefault;
 
    // This is the second one and required for custom features
    MultiAutoCompleteTextView multiAutoCompleteTextViewCustom;
 
    // As a sample, few text are given below which can be populated in dropdown, when user starts typing
    // For example, when user types "a", text whichever starting with "a" will be displayed in dropdown
    // As we are using two MultiAutoCompleteTextView components, using two string array separately
    String[] fewRandomSuggestedText = {"a", "ant", "apple", "asp", "android", "animation", "adobe",
            "chrome", "chromium", "firefox", "freeware", "fedora"};
    String[] fewTags = {"Java", "JavaScript", "Spring", "Java EE", "Java 8", "Java 9", "Java 10",
            "MongoDB", "MarshMallow", "NoSQL", "NativeApp", "SQL", "SQLite"};
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        multiAutoCompleteTextViewDefault = findViewById(R.id.multiAutoCompleteTextViewDefault);
        multiAutoCompleteTextViewCustom = findViewById(R.id.multiAutoCompleteTextViewCustom);
 
        // In order to show the substring options in a dropdown, we need ArrayAdapter
        // and here it is using simple_list_item_1
        ArrayAdapter<String> randomArrayAdapter = new ArrayAdapter<>(this, android.R.layout.simple_list_item_1, fewRandomSuggestedText);
        multiAutoCompleteTextViewDefault.setAdapter(randomArrayAdapter);
 
        // setThreshold() is used to specify the number of characters after which
        // the dropdown with the autocomplete suggestions list would be displayed.
        // For multiAutoCompleteTextViewDefault, after 1 character, the dropdown shows substring
        multiAutoCompleteTextViewDefault.setThreshold(1);
 
        // Default CommaTokenizer is used here
        multiAutoCompleteTextViewDefault.setTokenizer(new MultiAutoCompleteTextView.CommaTokenizer());
        ArrayAdapter<String> tagArrayAdapter = new ArrayAdapter<>(this, android.R.layout.simple_list_item_1, fewTags);
        multiAutoCompleteTextViewCustom.setAdapter(tagArrayAdapter);
 
        // For multiAutoCompleteTextViewCustom, after 2 characters, the dropdown shows substring
        multiAutoCompleteTextViewCustom.setThreshold(2);
 
        // As multiAutoCompleteTextViewCustom is customized , we are using SpaceTokenizer
        // which is written as a separate java class to handle space
        // SpaceTokenizer can be customized as per our needs, here for this example,
        // after user types 2 character
        // the substring of the text is shown in the dropdown and once selected,
        // a space is appended at the
        // end of the substring. So for customized MultiAutoCompleteTextView,
        // we need to write code like SpaceTokenizer
        // It has 3 methods namely findTokenStart,findTokenEnd and terminateToken
        multiAutoCompleteTextViewCustom.setTokenizer(new SpaceTokenizer());
    }
}

• Para la segunda instancia de MultiAutoCompleteTextViewActivity, aquí se usó el tokenizador de espacio y solo el tokenizador de coma es el predeterminado y si estamos usando otros tokenizadores, debemos escribir el código en Java y debe tener 3 métodos implementados, a saber, findTokenStart, findTokenEnd yterminarToken.
• Ahora crea otro archivo Java ( aplicación > java > el nombre de tu paquete > Nuevo > Clase Java) y llámalo SpaceTokenizer . A continuación se muestra el código completo del  archivo SpaceTokenizer.java . Se agregan comentarios dentro del código para comprender el código con más detalle.

import android.text.SpannableString;
import android.text.Spanned;
import android.text.TextUtils;
import android.widget.MultiAutoCompleteTextView;
 
// As this java class implements MultiAutoCompleteTextView.Tokenizer,
// we should write 3 methods i.e. findTokenStart,findTokenEnd and terminateToken
public class SpaceTokenizer implements MultiAutoCompleteTextView.Tokenizer {
    private int i;
 
    // Returns the start of the token that ends at offset cursor within text.
    public int findTokenStart(CharSequence inputText, int cursor) {
        int idx = cursor;
 
        while (idx > 0 && inputText.charAt(idx - 1) != ' ') {
            idx--;
        }
        while (idx < cursor && inputText.charAt(idx) == ' ') {
            idx++;
        }
        return idx;
    }
 
    // Returns the end of the token (minus trailing punctuation) that
    // begins at offset cursor within text.
    public int findTokenEnd(CharSequence inputText, int cursor) {
        int idx = cursor;
        int length = inputText.length();
 
        while (idx < length) {
            if (inputText.charAt(i) == ' ') {
                return idx;
            } else {
                idx++;
            }
        }
        return length;
    }
 
    // Returns text, modified, if necessary, to ensure that it ends with a token terminator
    // (for example a space or comma).
    public CharSequence terminateToken(CharSequence inputText) {
        int idx = inputText.length();
 
        while (idx > 0 && inputText.charAt(idx - 1) == ' ') {
            idx--;
        }
 
        if (idx > 0 && inputText.charAt(idx - 1) == ' ') {
            return inputText;
        } else {
            if (inputText instanceof Spanned) {
                SpannableString sp = new SpannableString(inputText + " ");
                TextUtils.copySpansFrom((Spanned) inputText, 0, inputText.length(),
                        Object.class, sp, 0);
                return sp;
            } else {
                return inputText + " ";
            }
        }
    }
}

Ejecutar en el emulador

Conclusión

En muchas aplicaciones, es necesario tener MultiAutoCompleteTextView, lo que ayudará a proporcionar información valiosa y facilitará la vida de los usuarios para evitar seleccionar información irrelevante. Mientras recopila los requisitos, el usuario debe ingresar todo el texto necesario en el archivo java para que en el menú desplegable pueda aparecer el texto sugerido necesario.