EditText. Control de eventos I
Revisión del 18:20 30 sep 2019 de Wiki (discusión | contribuciones)
Sumario
Introdución
- O control EditText serve para introducir e editar texto por parte do usuario dunha aplicación Android.
- Este control é unha subclase da clase TextView que se viu anteriormente.
- Imaxe obtida de: http://www.itcsolutions.eu/2011/08/27/android-tutorial-4-procedural-vs-declarative-design-of-user-interfaces
- A forma de engadir un EditText en XML nun layout é a través do compoñente: <EditText/>
- Unha propiedade importante é: android:inputType
- Permitirá que so se introduzan números, texto, passwords, teléfonos, etc.
- Tamén indicará se o control é dunha soa liña ou multiliña.
- Facer que non autocomplete as palabras, etc.
- Ademais permiten copiar, cortar e pegar.
- Cando se entra nun cadro de texto, nun dispositivo que non teña teclado físico conectado, abrirase en pantalla un teclado virtual (tamén chamado lixeiro/soft) que se adaptará á propiedade android:inputType como veremos a continuación.
- Finalmente a tecla Enter no teclado virtual poder realizar distintas accións, ben por defecto ou ben explicitamente coa propiedade android:imeOptions (IME: Input Method Editor)
- Referencias:
- O control EditText: http://developer.android.com/reference/android/widget/EditText.html
- Campos de texto: http://developer.android.com/design/building-blocks/text-fields.html
- Campos de texto para programadores: http://developer.android.com/guide/topics/ui/controls/text.html
- Filtros de entrada (android:inputType): http://developer.android.com/reference/android/widget/TextView.html#attr_android:inputType
- IME: http://developer.android.com/guide/topics/text/creating-input-method.html
- android:imeOptions: http://developer.android.com/reference/android/widget/TextView.html#attr_android:imeOptions
Casos prácticos
- Partimos que xa temos creado o proxecto inicial como xa indicamos anteriormente.
- Se non o temos creado antes, crea un paquete de nome UI como un subpaquete do teu paquete principal.
- Dentro do paquete UI, crearemos un novo paquete de nome: EditTexto.
- Dentro do paquete EditTexto crear unha nova 'Empty Activity' de nome: UD02_01_EditText de tipo Launcher e sen compatibilidade.
- Modifica o arquivo AndroidManifiest.xml e engade unha label á activity como xa vimos na creación do proxecto base.
Distintos tipos de datos: a propiedade android:inputType
- A imaxe amosa un AVD con distintos tipos de campos, e cunha lenda interior indicando que tipo de dato hai que introducir nese campo.
- O layout xml que define esa pantalla é o seguinte. Observar como sempre as liñas marcadas.
1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
2 xmlns:tools="http://schemas.android.com/tools"
3 android:layout_width="match_parent"
4 android:layout_height="match_parent"
5 android:orientation="vertical" >
6
7 <EditText
8 android:layout_width="match_parent"
9 android:layout_height="wrap_content"
10 android:hint="Escribe un número enteiro"
11 android:inputType="numberSigned" />
12
13 <EditText
14 android:layout_width="match_parent"
15 android:layout_height="wrap_content"
16 android:hint="Escribe un número decimal"
17 android:inputType="numberSigned|numberDecimal" />
18
19 <EditText
20 android:layout_width="match_parent"
21 android:layout_height="wrap_content"
22 android:hint="Escribe palabras...(saíra a 1ª letra en maísculas)"
23 android:inputType="textCapWords|textMultiLine" />
24
25 <EditText
26 android:layout_width="match_parent"
27 android:layout_height="wrap_content"
28 android:hint="Enderezo e-mail. Esta línea sae por fóra da pantalla"
29 android:inputType="textEmailAddress" />
30
31 <EditText
32 android:layout_width="match_parent"
33 android:layout_height="wrap_content"
34 android:hint="Escribe a clave."
35 android:inputType="textPassword" />
36
37 </LinearLayout>
- Propiedade android:hint: indica o texto que se vai amosar no control cando este está baleiro.
- Propiedade android:inputType: indica o tipo de datos que se poden introducir no campo.
- Se non se pon a propiedade, o campo acepta toda combinación de caracteres.
- Pódense combinar os filtros facendo uso de "|".
- Obviamente os valores dos Hints é mellor telos declarados en constantes en recursos XML.
- 'NOTA Edición 2015: No caso de usar un AVD con API 21, o botón Next é substituído por ">", o botón Done (Feito) por unha marca de verificación.
Cando nos posicionamos no primeiro campo, como é para enteiros con signo (inputType), ofrece un teclado con só números, signo "-" e "." ou ",".
Probar a introducir un número decimal.
Observar tamén que a tecla Enter foi substituída por Next, para pasar ao seguinte campo. Pronto estudaremos esta tecla.
Control de eventos no teclado virtual. Distintas accións da tecla "Enter": android:imeOptions
- A tecla Enter no teclado virtual pode realizar unha serie de accións:
- Por defecto:
- o sistema determina se existe outro elemento ao que poida ir o foco, nese caso a función da tecla é Next.
- Se non o atopa a acción da tecla é Done.
- Salvo nalgúns inputType como por exemplo o multiliña.
- Podemos asignar explicitamente que acción se desexa que se leve a cabo cada caixa de texto. Para iso está o atributo android:imeOptions.
- Que dun campo vaia ao anterior, que envíe o texto, que busque o texto, etc. En referencias está un enlace ás posibles accións.
- Por defecto:
- O seguinte XML vai e a mesma pantalla anterior, só que as accións da tecla Enter para algúns EditText foi cambiada. Observar as accións definidas nas liñas marcadas.
1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
2 xmlns:tools="http://schemas.android.com/tools"
3 android:layout_width="match_parent"
4 android:layout_height="match_parent"
5 android:orientation="vertical" >
6
7 <EditText
8 android:layout_width="match_parent"
9 android:layout_height="wrap_content"
10 android:hint="Escribe un número enteiro"
11 android:imeOptions="actionDone"
12 android:inputType="numberSigned" />
13
14 <EditText
15 android:layout_width="match_parent"
16 android:layout_height="wrap_content"
17 android:hint="Escribe un número decimal"
18 android:imeOptions="actionPrevious"
19 android:inputType="numberSigned|numberDecimal" />
20
21 <EditText
22 android:layout_width="match_parent"
23 android:layout_height="wrap_content"
24 android:hint="Escribe palabras...(saíra a 1ª letra en maísculas)"
25 android:inputType="textCapWords|textMultiLine" />
26
27 <EditText
28 android:id="@+id/et_mail"
29 android:layout_width="match_parent"
30 android:layout_height="wrap_content"
31 android:hint="Enderezo e-mail. Esta línea sae por fóra da pantalla"
32 android:imeOptions="actionSend"
33 android:inputType="textEmailAddress" />
34
35 <EditText
36 android:layout_width="match_parent"
37 android:layout_height="wrap_content"
38 android:hint="Escribe a clave."
39 android:inputType="textPassword" />
40
41 </LinearLayout>
- Codificación en Java que captura a acción actionSend dun campo de texto (email) e o que fai e recoller o texto desa caixa de texto, o e-mail, e volver a imprimir unha mensaxe nesa mesma caixa de texto.
1 package es.cursoandroid.cifprodolfoucha.aprendiendo.UI.EditTexto;
2
3 import android.app.Activity;
4 import android.os.Bundle;
5 import android.view.KeyEvent;
6 import android.view.inputmethod.EditorInfo;
7 import android.widget.EditText;
8 import android.widget.TextView;
9
10 import es.cursoandroid.cifprodolfoucha.aprendiendo.R;
11
12 public class UD02_01_EditText extends Activity {
13
14 @Override
15 protected void onCreate(Bundle savedInstanceState) {
16 super.onCreate(savedInstanceState);
17 setContentView(R.layout.activity_u2_08_edit_text);
18
19
20 final EditText etMail = (EditText) findViewById(R.id.et_mail);
21
22 etMail.setOnEditorActionListener(new OnEditorActionListener() {
23 @Override
24 public boolean onEditorAction(TextView v, int actionId, KeyEvent event) {
25 boolean handled = false;
26 if (actionId == EditorInfo.IME_ACTION_SEND) {
27 v.setText("Mensaxe enviada a: "+v.getText());
28 //etMail.setText("Mensaxe enviada a: " + etMail.getText());
29 handled = true;
30 }
31
32 return handled;
33 }
34 });
35
36 }
37
38 }
- Liña 20: creamos un obxecto (etMail) que apunta ao EditText no que se introduce o mail.
- Liña 22 - 33: chamamos a método Listener (escoitador) (que veremos máis adiante) do obxecto etMail: setOnEditorActionListener ()
- Ese método será chamado cando se realice unha acción nun TextView
- Lembrar que un EditText é unha subclase de TextView
- Por exemplo, cando se prema unha tecla ou cando haxa unha acción IME seleccionada polo usuario.
- Como parámetro váiselle pasar a creación dunha clase anónima que implementa unha interface (OnEditorActionListener) para a cal hai que sobreescribir o único método que ten a interface (onEditorAction()).
- Liñas 24-29: sobreescritura do método OnEditorAction() no que se reciben 3 parámetros:
- O TextView que xerou o evento (v). Neste caso a caixa de texto do mail
- O ID da acción enviada
- E se o evento foi xerado pola tecla Enter ou non (event).
- Comprobamos se o ID da acción é o SEND, nese caso modificamos o contido da caixa de texto do mail.
- Liña 28: realiza a mesma función ca 27. Lembrar que v é un TextView que apunta á caixa de edición do mail e que etMail é un EditText que apunta ao mesmo elemento.
- Para que o IDE nos cre a clase anónima:
- Escribir a chamada ao método (ollo ; final incluído): etMail.setOnEditorActionListener( );
- Escribir new entre os paréntesis: etMail.setOnEditorActionListener(new );
- Premer CTRL+Barra espaciadora e xa o sistema completa todo o demais.
- Logo só queda poñer o noso código no método a sobreescribir.
- Lembrar premer SHIFT+CTRL+O para importar os paquetes correspondentes.
Accesibilidade
- Podemos activar el modo TalkBack seguindo as instrucións deste enlace.
- Dito modo vai 'ler' a descrición de cada elemento.
- Como norma xeral podemos dar as seguintes pautas:
- Un <TextView> terá que ter o atributo 'android:hint' como se amosa no seguinte exemplo:
1 <EditText
2 android:id="@+id/etNome_UD03_01_Intents"
3 android:layout_width="wrap_content"
4 android:layout_height="wrap_content"
5 android:layout_marginStart="8dp"
6 android:layout_marginTop="8dp"
7 android:ems="10"
8 android:inputType="textPersonName"
9 android:hint="Nome a enviar"
10 app:layout_constraintStart_toEndOf="@+id/textView7"
11 app:layout_constraintTop_toTopOf="parent" />
- No caso de que o EditText estea asociado a un TextView, podemos substituír dito atributo polo atributo: android:labelFor do TextView o cal indica cal é o EditText asociado ao TextView.
1 <TextView
2 android:id="@+id/textView7"
3 android:layout_width="wrap_content"
4 android:layout_height="wrap_content"
5 android:layout_marginStart="8dp"
6 android:layout_marginTop="8dp"
7 android:text="Dime o teu nome:"
8 android:textSize="18sp"
9 android:labelFor="@id/etNome_UD03_01_Intents"
10 app:layout_constraintStart_toStartOf="parent"
11 app:layout_constraintTop_toTopOf="@+id/etNome_UD03_01_Intents" />
12
13 <EditText
14 android:id="@+id/etNome_UD03_01_Intents"
15 android:layout_width="wrap_content"
16 android:layout_height="wrap_content"
17 android:layout_marginStart="8dp"
18 android:layout_marginTop="8dp"
19 android:ems="10"
20 android:inputType="textPersonName"
21 app:layout_constraintStart_toEndOf="@+id/textView7"
22 app:layout_constraintTop_toTopOf="parent" />
- Para comprobar que non temos problemas de accesibilidade:
Atributos a coñecer
- Tedes a lista enteira de atributos en http://developer.android.com/reference/android/widget/EditText.html
- Dentro de este control tedes que coñecer e saber empregar os seguintes atributos:
- autolink
- capitalize
- clickable
- contentDescription
- enabled
- fontFamily
- gravity
- hint
- imeoptions
- inputType
- labelFor
- lines
- maxLength
- maxLines
- nextFocusForward
- singleLine
- tag
- text
- textAlignment
- textAllCaps
- textColor*** (son varios)
- textSize
- textStyle
- visibility
- A maiores todos os atributos relacionados cos layout´s e tamaños
-- Ángel D. Fernández González e Carlos Carrión Álvarez -- (2015).