Campos de texto

Los campos de texto permiten al usuario introducir texto en una o varias líneas. Cada vez que pulsamos sobre un campo de texto nos aparecerá un teclado virtual que nos permitirá escribir a partir de un cursor de escritura. También nos ofrece la posibilidad de seleccionar parte del texto (para copiar, pegar o cortar) y funciones de autocompletado.

Para añadir un campo de texto a nuestra plantilla usaremos un elemento EditText.

Tipos de teclado.

Los datos introducidos en un campo de texto están asociados a un tipo determinado: número, fecha, contraseña o dirección de correo electrónico, por ejemplo. El tipo determinará los caracteres permitidos en la entrada y condicionará la distribución de nuestro teclado virtual.

Podemos especificar el tipo de un campo de texto a través de su atributo android:inputType. Por ejemplo, si queremos que el usuario introduzca una dirección de correo electrónico, utilizaremos el valor textEmailAddress:

<EditText
    android:id="@+id/email_address"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:hint="@string/email_hint"
    android:inputType="textEmailAddress" />

Imagen 1. Teclado asociado a un campo de texto por defecto.

Imagen 2. Teclado asociado a un campo de texto de tipo textEmailAddress.

En la imagen 2 podemos observar que nos aparece la tecla @ para facilitarnos la introducción de la dirección de correo electrónico.

Los valores más habituales que puede tomar el atributo android:inputType son:

• text para teclado estándar.
• textEmailAddress para teclado estándar más la tecla @.
• textUri para teclado estándar más la tecla /.
• number para teclado numérico.
• phone para teclado telefónico.

Imagen 3. Teclado telefónico (android:inputType="phone").

Configurando el comportamiento del teclado.

El atributo android:inputType nos permite especificar valores adicionales al tipo, separados por una barra vertical |, para cambiar el comportamiento de nuestro teclado. Algunos de estos valores son:

• textCapSentences. Muestra el teclado estándar y pone en mayúscula la primera letra de cada frase.
• textCapWords. Muestra el teclado estándar y pone en mayúscula la primera letra de cada palabra.
• textAutoCorrect. Muestra el teclado estándar y activa el corrector ortográfico.
• textPassword. Muestra el teclado estándar y oculta los caracteres introducidos con puntos.
• textMultiline. Muestra el teclado estándar y permite múltiples líneas en el texto introducido (múltiples retornos de carro).
• textNoSuggestions. Muestra el teclado estándar e inhabilita la función de autocompletado.

En el siguiente ejemplo definimos un campo para obtener una dirección postal donde todas sus palabras comienzan con mayúscula y donde se inhabilita la función de autocompletado:

<EditText
    android:id="@+id/postal_address"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:hint="@string/postal_address_hint"
    android:inputType="textPostalAddress|
                       textCapWords|
                       textNoSuggestions" />

Especificando la acción del teclado.

Además de cambiar la distribución del teclado en función del tipo de la entrada, Android nos permite configurar qué acción será realizada después de haber sido introducido el valor de un campo determinado. La tecla de retorno de carro será sustituida por la acción especificada en el teclado.

Para especificar una acción, utilizaremos el atributo android:imeOptions:

<EditText
    android:id="@+id/search"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:hint="@string/search_hint"
    android:inputType="text"
    android:imeOptions="actionSend" />

Imagen 4. Acción de teclado enviar (send) para android:imeOptions="actionSend".

Si no especificamos este valor, el sistema intentará determinar qué campo es el siguiente en adquirir el foco. Si se encuentra, el sistema aplica automáticamente la acción actionNext para desplazarse al campo siguiente. Si no se encuentran campos que puedan adquirir el foco, el sistema utilizará la acción actionDone.

Respondiendo al evento clic de la acción del teclado.

Si hemos especificado un valor para el atributo android:imeOptions, podremos capturar su evento clic utilizando para ello una implementación del método onEditAction() de la interfaz TextView.OnEditorActionListener:

EditText editText = (EditText) findViewById(R.id.search);

// Asignamos al campo la nueva implementación.
editText.setOnEditorActionListener(new OnEditorActionListener() {
    @Override
    public boolean onEditorAction(TextView v, int actionId, KeyEvent event) {
        boolean handled = false;

        // Si la acción pulsada es de tipo actionSend.
        if (actionId == EditorInfo.IME_ACTION_SEND) {
            sendMessage();
            handled = true;
        }
        return handled;
    }
});

Personalizando el texto del botón de acción.

Cuando el teclado ocupa una parte importante de pantalla dejando poco espacio a la aplicación actual (se muestra el teclado y la orientación de pantalla es horizontal, por ejemplo), el campo pasa a ocupar toda la pantalla mostrándose a su lado un botón. El texto que aparece en el botón se puede personalizar utilizando el atributo android:imeActionLabel:

<EditText
    android:id="@+id/launch_codes"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:hint="@string/enter_launch_codes"
    android:inputType="number"
    android:imeActionLabel="@string/launch" />

Imagen 5. Texto personalizado para el botón asociado al campo.

Añadiendo otros comportamientos al teclado.

Además de especificar el tipo de acción en el atributo android:imeOptions, también podremos especificar otros valores adicionales asociados con el comportamiento del teclado. Por ejemplo, en la imagen 5 vemos como el sistema adapta toda la pantalla disponible al campo que tiene el foco y en la imagen 6 vemos como se ha inhabilitado este comportamiento por defecto asignando el valor falgNoExtractUi al atributo android:imeOptions.

Imagen 6. Se ha inhabilitado el modo a pantalla completa.

Función de autocompletado.

Si queremos proporcionar sugerencias a los usuarios mientras estos escriben, utilizaremos la clase AutoCompleteTextView que a su vez deriva de la clase EditText. Para implementar la función de autocompletado, tendremos que utilizar un adaptador con los términos sugeridos. Hay varios tipos de adaptadores disponibles en función de la fuente de datos (un array, una base de datos, etc).

Imagen 7. Función de autocompeltado.

Seguiremos los siguientes pasos para dotar de la función de autocompletado a un campo de texto:

1. Añadimos a nuestra plantilla un campo de tipo AutoCompleteTextView:
   

   <?xml version="1.0" encoding="utf-8"?>
   <AutoCompleteTextView xmlns:android="http://schemas.android.com/apk/res/android" 
       android:id="@+id/autocomplete_country"
       android:layout_width="fill_parent"
       android:layout_height="wrap_content" />
   

2. Definimos un array con la lista términos sugeridos. En esta ocasión, utilizaremos un listado de países almacenados en un recurso de tipo array dentro de res/values/strings.xml:
   

   <?xml version="1.0" encoding="utf-8"?>
   <resources>
       <string-array name="countries_array">
           <item>Afghanistan</item>
           <item>Albania</item>
           <item>Algeria</item>
           <item>American Samoa</item>
           <item>Andorra</item>
           <item>Angola</item>
           <item>Anguilla</item>
           <item>Antarctica</item>
           ...
       </string-array>
   </resources>
   

3. Desde el código fuente de una actividad o fragmento, asociaremos el adaptador con los términos sugeridos a nuestro campo:
   

   // Obtenemos el campo de la plantilla.
   AutoCompleteTextView textView = (AutoCompleteTextView) findViewById(R.id.autocomplete_country);
   
   // Obtenemos el array con los países.
   String[] countries = getResources().getStringArray(R.array.countries_array);
   
   // Creamos el adaptador a partir del array de países y una plantilla predefinida.
   ArrayAdapter adapter = 
           new ArrayAdapter(this, android.R.layout.simple_list_item_1, countries);
   
   // Asociamos el adaptador con el campo.
   textView.setAdapter(adapter);
   

   Podemos observar como asignamos al adaptador la plantilla predefinida android.R.layout.simple_list_item_1 para que éste genere las vistas asociadas a cada uno de los elementos del array. Recordemos que esta plantilla utiliza un campo de texto para mostrar cada valor.