Angelfg: /* Atributos a coñecer */

2021-03-07T15:13:51Z

Atributos a coñecer

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

2020-11-21T12:55:30Z

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

Angelfg: /* Foco */

2020-11-15T11:51:59Z

Foco

Angelfg: /* Foco */

2020-11-15T11:06:15Z

Foco

Angelfg: Página creada con «==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 '''T…»

2020-11-14T21:01:09Z

Página creada con «==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 '''T…»

Página nueva

==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.
[[Image:00_Part_of_Android_View_Hierarchy.png|600px]]
*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.

[[Image: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)

*'''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 [http://wiki.cifprodolfoucha.es/index.php?title=PDM_Creando_proxecto_base 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 [http://wiki.cifprodolfoucha.es/index.php?title=PDM_Creando_proxecto_base 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 [https://developer.android.com/reference/android/text/InputType.html 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.
[[Image:PDM_EditText_1.jpg|400px]]

*O layout xml que define esa pantalla é o seguinte. Observar como sempre as liñas marcadas.

<syntaxhighlight lang="xml" line highlight="10,11,16,17,22,23,28,29,34,35">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >

<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Escribe un número enteiro"
android:inputType="numberSigned" />

<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Escribe un número decimal"
android:inputType="numberSigned|numberDecimal" />

<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Escribe palabras...(saíra a 1ª letra en maísculas)"
android:inputType="textCapWords|textMultiLine" />

<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Enderezo e-mail. Esta línea sae por fóra da pantalla"
android:inputType="textEmailAddress" />

<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Escribe a clave."
android:inputType="textPassword" />

</LinearLayout>
</syntaxhighlight>
*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.
<gallery caption="Botóns teclado" widths="350" heights="300px" perrow="2">
Image:PDM_EditText_7.jpg| En caso de varios campos no formulario, este botón indica '''Next''', pasar ao seguinte se se preme.
Image:PDM_EditText_8.jpg| En caso dun campo multiliña, esta icona indica salto de liña ou '''Enter'''.
Image:PDM_EditText_9.jpg| Cando chegamos ao derradeiro campo do formulario, aparece a icona de '''Done'''.
</gallery>

<gallery caption="Distintos teclados" widths="350" heights="300px" perrow="2">
Image:PDM_EditText_1.jpg| 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.
Image:PDM_EditText_2.jpg| O segundo campo xa admite números decimais e con signo. A tecla '''Enter''' segue marcando '''Next'''.
Image:PDM_EditText_3.jpg| O teclado xa contempla as letras e demais. Observar como de xeito automático pon en maiúsculas a primeira letra de cada palabra.
Image:PDM_EditText_4.jpg| Como o terceiro campo é multiliña a tecla de '''Enter''' é agora un retorno de carro para poder seguir escribindo varias liñas no campo.
Image:PDM_EditText_5.jpg| Situámonos co dedo (ou rato) no seguinte campo. Agora o teclado xa ofrece a @ para o mail. A tecla '''Enter''' segue sendo '''Next'''.
Image:PDM_EditText_6.jpg| 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.
Image:PDM_EditText_10.jpg| Unha vez que se preme na tecla '''Done''' desaparece o teclado.

</gallery>

===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.
<syntaxhighlight lang="xml" line highlight="11,18,32">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >

<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Escribe un número enteiro"
android:imeOptions="actionDone"
android:inputType="numberSigned" />

<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Escribe un número decimal"
android:imeOptions="actionPrevious"
android:inputType="numberSigned|numberDecimal" />

<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Escribe palabras...(saíra a 1ª letra en maísculas)"
android:inputType="textCapWords|textMultiLine" />

<EditText
android:id="@+id/et_mail"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Enderezo e-mail. Esta línea sae por fóra da pantalla"
android:imeOptions="actionSend"
android:inputType="textEmailAddress" />

<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Escribe a clave."
android:inputType="textPassword" />

</LinearLayout>
</syntaxhighlight>

<gallery caption="Introducir datos" widths="350" heights="300px" perrow="2">
Image:PDM_EditText_11.jpg| O primeiro campo ten definida a acción '''Done''' para a tecla '''Enter'''.
Image:PDM_EditText_12.jpg| O segundo campo a acción ir ao anterior campo.
Image:PDM_EditText_13.jpg| O campo do mail, ten definida a acción '''Send''' que vai ser capturada en Java e realizar unha acción en consecuencia.
</gallery>

 

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

<syntaxhighlight lang="xml" line highlight="12">
<EditText
android:id="@+id/evEmail"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:hint="@string/email_Alta_Empr"
android:inputType="textEmailAddress"
app:layout_constraintEnd_toStartOf="@+id/guideline3"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/evTfno">
<requestFocus />
</EditText>

</syntaxhighlight>

: 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:
<syntaxhighlight lang="java" line highlight="7">
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_operar_empregados);

EditText email = findViewById(R.id.evEmail);
email.requestFocus();

}

</syntaxhighlight>
: 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 [https://support.google.com/accessibility/android/answer/6007100 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:
<syntaxhighlight lang="xml" line highlight="9">
<EditText
android:id="@+id/etNome_UD03_01_Intents"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:ems="10"
android:inputType="textPersonName"
android:hint="Nome a enviar"
app:layout_constraintStart_toEndOf="@+id/textView7"
app:layout_constraintTop_toTopOf="parent" />
</syntaxhighlight>

* 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.
<syntaxhighlight lang="xml" line highlight="9">
<TextView
android:id="@+id/textView7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="Dime o teu nome:"
android:textSize="18sp"
android:labelFor="@id/etNome_UD03_01_Intents"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="@+id/etNome_UD03_01_Intents" />

<EditText
android:id="@+id/etNome_UD03_01_Intents"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:ems="10"
android:inputType="textPersonName"
app:layout_constraintStart_toEndOf="@+id/textView7"
app:layout_constraintTop_toTopOf="parent" />
</syntaxhighlight>

* Para comprobar que non temos problemas de accesibilidade:

<gallery caption="Comprobando a accesibilidade" widths="350" heights="300px" perrow="2">
Image:PDM_Accesibilidad_1.jpg| Imos o menú do Android Studio e escollemos a opción '''Analyce''' =>'''Inspect Code'''.
Image:PDM_Accesibilidad_2.jpg| Indicamos se queremos analizar o proxecto completo ou a activity actual.
Image:PDM_Accesibilidad_3.jpg| Se hai algún problema teremos que ir a sección de '''Lint''' e ver os erros que aparecen.
</gallery>

 
==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:
::<syntaxhighlight lang="java" enclose="div" highlight="">
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

</syntaxhighlight>

 -- [[Usuario:angelfg|Ángel D. Fernández González]] e [[Usuario:Carrion|Carlos Carrión Álvarez]] -- (2015).

← Revisión anterior		Revisión del 12:55 21 nov 2020
Línea 358:		Línea 358:


		+	<br />
		+	'''[https://wiki.cifprodolfoucha.es/index.php?title=Programaci%C3%B3n_de_dispositivos_m%C3%B3biles#UNIDADE_2:_A_interface_de_usuario. Enlace a la página principal de la UD2]'''
		+	<br />
		+	<br />
		+	'''[https://wiki.cifprodolfoucha.es/index.php?title=Programación_de_dispositivos_móbiles Enlace a la página principal del curso]'''
		+	<br />


	<br> -- [[Usuario:angelfg\|Ángel D. Fernández González]] e [[Usuario:Carrion\|Carlos Carrión Álvarez]] -- (2015).		<br> -- [[Usuario:angelfg\|Ángel D. Fernández González]] e [[Usuario:Carrion\|Carlos Carrión Álvarez]] -- (2015).

@@ Línea 228: / Línea 228: @@
 </syntaxhighlight>
-: 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.
+: Cando temos EditText, normalmente o foco pasa ao primeiro da lista e aparece o teclado virtual por defecto.
-: '''Importante:''' Non funciona se empregamos esta forma: findViewById(R.id.evEmail).requestFocus()
+: En algúns sitios indica que se poñemos o foco sobre o view diferente a un EditText, o teclado desaparece, pero eu fancendo probas, algunhas veces funciona e outras non.
-: Desta outra si: ((EditText)findViewById(R.id.evEmail)).requestFocus()
+: A forma que atopei de ocultar o teclado virtual ao arrancar a activity é poñendo no método onCreate: getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_STATE_HIDDEN);

← Revisión anterior		Revisión del 11:06 15 nov 2020
Línea 229:		Línea 229:
	</syntaxhighlight>		</syntaxhighlight>
	: 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.		: 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.
		+	: '''Importante:''' Non funciona se empregamos esta forma: findViewById(R.id.evEmail).requestFocus()
		+	: Desta outra si: ((EditText)findViewById(R.id.evEmail)).requestFocus()

@@ Línea 312: / Línea 312: @@
 :* hint
 :* inputType
 :* maxLines
 :* imeoptions
@@ Línea 323: / Línea 324: @@
 <br />
 ==Métodos mínimos a coñecer no manexo dos EditText´s==

PDM EditText - Historial de revisiones

Angelfg: /* Atributos a coñecer */

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

Angelfg: /* Foco */

Angelfg: /* Foco */

Angelfg: Página creada con «==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 '''T…»

Angelfg: Página creada con «==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 '''T…»