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 . |
@
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 atributoandroid:inputType
nos permite especificar valores adicionales al tipo, separados por una barra vertical 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 atributoandroid: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 atributoandroid: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 atributoandroid: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 claseAutoCompleteTextView
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:
- 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" />
- 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>
- Desde el código fuente de una actividad o fragmento, asociaremos el adaptador con los términos sugeridos a nuestro campo:
Podemos observar como asignamos al adaptador la plantilla predefinida// 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); 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.
No hay comentarios:
Publicar un comentario