EditText. Control de eventos I

De MediaWiki
Saltar a: navegación, buscar

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.

00 Part of Android View Hierarchy.png


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

00 edittext-noextract.png

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




Casos prácticos

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.

PDM EditText 1.jpg

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


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

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:






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



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