EditText. Control de eventos I

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.

Lembrar que se estades a empregar as bibliotecas de compatibilidade (por defecto), a vosa activity derivará de AppCompactActivity e non de Activity.

Nos exemplos seguintes toda activity deriva de Activity, pero o normal é que empregedes AppCompactActivity (coidado ao copiar os exemplos).

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

• Máis información sobre todos os posibles valores de InputType neste enlace.

• 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.

• Botóns teclado
• 

  En caso de varios campos no formulario, este botón indica Next, pasar ao seguinte se se preme.

• 

  En caso dun campo multiliña, esta icona indica salto de liña ou Enter.

• 

  Cando chegamos ao derradeiro campo do formulario, aparece a icona de Done.

• Distintos teclados
• 

  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.

• 

  O segundo campo xa admite números decimais e con signo. A tecla Enter segue marcando Next.

• 

  O teclado xa contempla as letras e demais. Observar como de xeito automático pon en maiúsculas a primeira letra de cada palabra.

• 

  Como o terceiro campo é multiliña a tecla de Enter é agora un retorno de carro para poder seguir escribindo varias liñas no campo.

• 

  Situámonos co dedo (ou rato) no seguinte campo. Agora o teclado xa ofrece a @ para o mail. A tecla Enter segue sendo Next.

• 

  E agora é o momento de introducir a password. Observar como a tecla Enter é agora Done (Feito). Porque este campo é último e xa non hai máis a continuación.

• 

  Unha vez que se preme na tecla Done desaparece o teclado.

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.

• 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>

• Introducir datos
• 

  O primeiro campo ten definida a acción Done para a tecla Enter.

• 

  O segundo campo a acción ir ao anterior campo.

• 

  O campo do mail, ten definida a acción Send que vai ser capturada en Java e realizar unha acción en consecuencia.

Foco

• Por defecto sempre vai ter o foco o primeiro edittext que se atope na ventá de ComponentTree no deseñador de layout.

• Cando cargamos un Layout podemos indicar cal vai ser o View por defecto ao que vai ir o foco saltándanos a regra anterior.

Para iso temos que empregar a etiqueta: <requestFocus /> dentro do View ao que queramos que vaia o foco ao iniciar a activity.

 1     <EditText
 2         android:id="@+id/evEmail"
 3         android:layout_width="0dp"
 4         android:layout_height="wrap_content"
 5         android:layout_marginStart="16dp"
 6         android:hint="@string/email_Alta_Empr"
 7         android:inputType="textEmailAddress"
 8         app:layout_constraintEnd_toStartOf="@+id/guideline3"
 9         app:layout_constraintHorizontal_bias="0.0"
10         app:layout_constraintStart_toStartOf="parent"
11         app:layout_constraintTop_toBottomOf="@+id/evTfno">
12         <requestFocus />
13     </EditText>

Fixarse que dita etiqueta non está dentro da etiqueta <EditText ....> como o resto de atributos e tivemos que quitar o fin de etiqueta (/) ao final para poñer unha etiqueta </EditText>

• No caso de querer facelo por programación teríamos que chamar ao método requestFocus() da forma:

1     @Override
2     protected void onCreate(Bundle savedInstanceState) {
3         super.onCreate(savedInstanceState);
4         setContentView(R.layout.activity_operar_empregados);
5 
6         EditText email = findViewById(R.id.evEmail);
7         email.requestFocus();
8         
9     }

Isto pode ser moi útil cando queiramos que non apareza o teclado virtual al lanzar a activity se esta ten algún control EditText. O que faríamos sería chamar ao requestFocus() de outro view diferente que non provoque a aparición do teclado, coma un botón ou unha lista.

• Para facer que o control pase dun view a outro facendo Tab no teclado virtual, teríamos que empregar no layout a propiedade nextFocusForward da forma: android:nextFocusForward="@id/etNome"
• Para facer que o control pase dun view a outro premendo na frecha do teclado virtual, teríamos que empregar no layout a propiedade nextFocusDown da forma: android:nextFocusDown="@id/etNome"

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:

• Comprobando a accesibilidade
• 

  Imos o menú do Android Studio e escollemos a opción Analyce =>Inspect Code.

• 

  Indicamos se queremos analizar o proxecto completo ou a activity actual.

• 

  Se hai algún problema teremos que ir a sección de Lint e ver os erros que aparecen.

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:

• id
• layout_width, layout_height
• margin
• padding
• gravity
• contentDescription
• text
• hint
• inputType
• maxLines
• imeoptions
• textXXXX (Size, Color, Style, Alignment)
• fontFamily
• typeFace
• visibility
• ems
• maxLength

Métodos mínimos a coñecer no manexo dos EditText´s

• Referenciar a un EditText có método findViewById.
• Recuperar o contido do texto.
• Cambiar o contido do texto, podendo empregar recursos gardados en /res/values.
• Engadir novo texto a un existente.
• Modificar propiedades básicas, como cor, tamaño, visibilidade,...(e os métodos getZZZZZ para obter os seus valores)
• Cambiar o foco a un view EditText concreto.

Exemplos:

        EditText et = findViewById(R.id.etvTextoEditText);          // Referenciamos a un EditText que estea na Activity.
        String cadeaet = et.getText().toString();                   // Fixarse que getText() devolve un obxecto Editable, non un String.
        et.setText("Cambiamos o texto directamente");               // Cambiamos o contido por unha cadea concreta
        String textoRes = getResources().getString(R.string.app_name);
        et.setText(textoRes + " texto que ven da BD");      // Se queremos concatenar texto dunha base de datos cun texto que poida ser traducido

        et.append(" engadimos novo texto");                 // append para engadir

        et.setTextSize(20);                                 // Axustar tamaño

        et.setTextColor(Color.BLUE);                        // Cambia a cor

        et.setVisibility(View.VISIBLE);                     // As constantes aparecen no Android Studio ao teclear. GONE fai que non ocupe espazo no Layout.


        EditText et2 = findViewById(R.id.etvTextoEditText2);// Referenciamos a outro EditText que estea na Activity.
        et2.requestFocus();                                 // Cambiamos o foco para ese EditText

-- Ángel D. Fernández González e Carlos Carrión Álvarez -- (2015).