TextView. Definición de recursos XML
Revisión del 13:03 27 oct 2018 de Wiki (discusión | contribuciones) (→Definición de constantes/recursos xml)
Sumario
Introdución
- Un TextView é unha etiqueta de texto que serve para amosar texto na aplicación.
- Este control é unha subclase da clase View.
- Opcionalmente pódese permitir editar o contido.
- A clase que implementa o control vén configurada para non permitir a edición.
- Aproveitando que este é o primeiro control que imos ver, tamén imos explicar como se definen constantes para usar nos recursos XML.
- Referencias:
- A clase View: http://developer.android.com/reference/android/view/View.html
- Antes de continuar é importante familiarizarse (non fai falla aprender nada) cos métodos, subclases e atributos que ten esta clase de que van colgar todos os demais controis. Co cal, aparte de pararse na seguinte imaxe, é aconsellable premer no enlace anterior.
- A clase View: http://developer.android.com/reference/android/view/View.html
- Control TextView: http://developer.android.com/reference/android/widget/TextView.html
- Observar no enlace anterior o valor do atributo editable.
- Recomendacións de tipografía: http://developer.android.com/design/style/typography.html
- Observar no enlace anterior o tamaño recomendado en px do lanzador dunha aplicación en Google Play.
- Cores: http://developer.android.com/guide/topics/resources/more-resources.html#Color
- Observar en que formatos se pode describir unha cor.
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: CaixaTexto.
- Dentro do paquete CaixaTexto crear unha nova 'Empty Activity' de nome: UD02_01_TextView 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.
- Imos comezar creando un layout con 2 TextViews, onde o segundo TextView se modifica en tempo de execución (ao iniciarse a aplicación).
- Nota: No exemplo faise uso dun LineaLayout pero podedes facer uso de calquera dos layouts vistos anteriormente.
- A imaxe amosa en tempo de deseño os 2 TextViews.
- Le o contido da etiqueta azul.
- O XML do layout asociado a esa imaxe é:
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:padding="20sp"
6 android:orientation="vertical" >
7
8 <TextView
9 android:id="@+id/txtOrixinal_UD02_01_TextView"
10 android:layout_width="wrap_content"
11 android:layout_height="wrap_content"
12 android:text="@string/hello_world" />
13
14 <TextView
15 android:id="@+id/txtJava_UD02_01_TextView"
16 android:layout_width="wrap_content"
17 android:layout_height="wrap_content"
18 android:textColor="#00F"
19 android:text="Dá igual o que escribamos aquí. Neste exemplo, ao lanzar a aplicación, vaise cambiar este texto" />
20
21 </LinearLayout>
- Nas liñas 9 e 15 asóciase un ID a cada control, TextView, que logo usaremos en Java.
- Observar as diferenzas entre as liñas 12 e 19. A primeira amosará o texto que contén a constante definida en XML (noutro ficheiro XML), a segunda amosa o texto directamente.
- Deberedes de ter definida a constante @string/hello_world no ficheiro de recursos: /res/values/strings.xml, como está indicado despois da imaxe.
1 <?xml version="1.0" encoding="utf-8"?>
2 <resources>
3
4 <string name="app_name">Aprendendo</string>
5 <string name="hello_world">Hello world!</string>
6
7 </resources>
- Como xa se dixo é recomendable usar o primeiro caso, pero no material vaise abusar do segundo caso para que se entendan os exemplos máis facilmente.
- No segundo caso, como xa se indicou, o IDE Eclipse dará unha advertencia na liña 19 porque recomenda que esa propiedade se declare a través dunha constante.
- As liñas 9 e 15 están creando o ID para os controis para que poidan ser accedidos dende Java a través da Clase R.
- Observar na imaxe a declaración deses IDs.
- Isto xerase automaticamente cando se ten gardado o documento XML onde se declaran os controis.
- Finalmente mirar como se define a cor azul (RGB), liña 18. Esta definición tamén podería estar usando unha constante declarada noutro ficheiro XML, como se verá ao final deste apartado.
Acceder e manipular o control dende Java
- A continuación imos acceder ao control TextView declarado en XML dende Java e imos realizar accións sobre o control.
- A forma de acceder a calquera compoñente gráfico é por medio da chamada ao método findViewById(int id) no que pasamos como parámetro o id do recurso, o cal o podemos obter a través da clase R, da forma: R.id.identificador_recurso.
- Escribiremos esta liña:
1 @Override
2 protected void onCreate(Bundle savedInstanceState) {
3 super.onCreate(savedInstanceState);
4 setContentView(R.layout.activity_ud02_01__text_view);
5
6 final TextView txtOrixinal = findViewById(R.id.txtOrixinal_UD02_01_TextView);
7
8 }
- Ao facelo, se temos axustado o IDE Android Studio, fará unha importación da clase de forma automática e aparecerá o impor na parte superior da clase, se non, teremos que facelo manualmente:
- A medida que imos escribindo o tipo se prememos CTRL+ Barra espaciadora xa sabemos que nos vai a autocompletar.
- O método método findViewById(int id):
- Recibe como parámetro unha constante da Clase R: neste caso o id asociado a un elemento visual. (CTRL+Barra espaciadora, para localizar a constante).
- Devolve un obxecto de tipo View.
- Todo control visual é unha subclase de View, por tanto como obtemos un obxecto View.
- Anteriormente á versión 26, sería necesario facer un cast do método da forma:
- TextView variable = (TextView) findViewById(R.id.id_text);
- A partires da versión API 26 xa non é necesario.
- A continuación amósase o código Java que vai manipular o TextView
1 package es.cursoandroid.cifprodolfoucha.aprendiendo.UI.CaixaTexto;
2
3 import android.app.Activity;
4 import android.os.Bundle;
5 import android.widget.TextView;
6
7 import es.cursoandroid.cifprodolfoucha.aprendiendo.R;
8
9 public class UD02_01_TextView extends Activity {
10
11 @Override
12 protected void onCreate(Bundle savedInstanceState) {
13 super.onCreate(savedInstanceState);
14 setContentView(R.layout.activity_ud02_01__text_view);
15
16 final TextView txtOrixinal = findViewById(R.id.txtOrixinal_UD02_01_TextView);
17 final TextView tvJava = (TextView) findViewById(R.id.txtJava_UD02_01_TextView);
18
19 tvJava.setText("Etiqueta modificada en java: "+txtOrixinal.getText());
20
21 }
22 }
- Liña 16: temos un obxecto que apunta a TextView orixinal, ao primeiro TextView do Layout.
- Liña 17: temos un obxecto que apunta ao novo TextView, ao segundo do Layout.
- Liña 19: modificamos o texto do segundo TextView. O contido é unha cadea de texto concatenada (+) co texto que ten o primeiro TextView.
- Observar a función dos métodos: setText() e getText(). No seguinte enlace pódense ver estes métodos públicos: http://developer.android.com/reference/android/widget/TextView.html#pubmethods.
- Cando se lance a aplicación vaise executar ese código, co cal o texto do segundo TextView non vai ser o que se indicou no Layout en tempo de deseño senón o que se indica en tempo de execución.
- A imaxe amosa a execución da aplicación:
- Observar o contido da segunda liña, non é o que se asignou no Layout.
Manipulación html dunha etiqueta de texto
- As Etiquetas de texto non son texto (String) senón que son código semellante ao html.
- Entón na liña 18 anterior parece que hai unha contradición: concatenar unha cadea con algo html.
- Teríamos que ter usado o método toString(): tvOrixinal.getText().toString()
- Pero en Java non fai falla poñelo porque ese método chámase automaticamente sempre que o obxecto se concatene con outro String (Neste caso a cadea de texto).
- Para obter a seguinte imaxe non se vai tocar o XML e vaise facer todo en Java.
- Na segunda etiqueta cambiouse: cor, tamaño da fonte e púxose en negriña unha palabra.
- Código JAVA ...
1 package es.cursoandroid.cifprodolfoucha.aprendiendo.UI.CaixaTexto;
2
3 import android.app.Activity;
4 import android.graphics.Color;
5 import android.os.Bundle;
6 import android.text.Html;
7 import android.widget.TextView;
8
9 import es.cursoandroid.cifprodolfoucha.aprendiendo.R;
10
11 public class UD02_01_TextView extends Activity {
12
13 @Override
14 protected void onCreate(Bundle savedInstanceState) {
15 super.onCreate(savedInstanceState);
16 setContentView(R.layout.activity_ud02_01__text_view);
17
18 final TextView txtOrixinal = findViewById(R.id.txtOrixinal_UD02_01_TextView);
19 final TextView tvJava = (TextView) findViewById(R.id.txtJava_UD02_01_TextView);
20
21 tvJava.setText("Etiqueta modificada en java: "+txtOrixinal.getText());
22 tvJava.append(". Máis texto. ");
23 tvJava.setTextColor(Color.RED);
24 tvJava.setTextSize(20);
25 tvJava.append(Html.fromHtml("<p><br>Isto está en <b>negriña</b> e noutra liña.</p>"));
26
27 }
28 }
- Para importar os paquetes premer (SHIFT + CTRL + O)
- Liña 22: engade contido á etiqueta polo final da mesma e amosa o contido final.
- Liña 23: cambiar a cor usando unha constante estática.
- Liña 24: cambiar o tamaño da fonte
- Liña 25: devolve a cadea en formato HTML no que en Android se podería chamar Texto con estilo mostrable
- A continuación vaise modificar a aplicación para que poidamos recuperar o contido exacto dun TextView, non o que amosa por pantalla.
- Tamén se vai usar o método toString() para ver o seu resultado.
- A imaxe amosa o deseño do Layout
- Observar a liña de separación e despois desta, dúas etiquetas de texto.
- O Ficheiro XML asociado
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 android:padding="20sp" >
7
8 <TextView
9 android:id="@+id/tv_orixinal"
10 android:layout_width="wrap_content"
11 android:layout_height="wrap_content"
12 android:text="@string/hello_world" />
13
14 <TextView
15 android:id="@+id/tv_java"
16 android:layout_width="wrap_content"
17 android:layout_height="wrap_content"
18 android:text="Dá igual o que escribamos aquí. Neste exemplo, ao lanzar a aplicación, vaise cambiar este texto"
19 android:textColor="#00F" />
20
21 <View
22 android:layout_width="match_parent"
23 android:layout_height="2sp"
24 android:background="#000" />
25
26 <TextView
27 android:id="@+id/txtTv_html_UD02_01_TextView"
28 android:layout_width="wrap_content"
29 android:layout_height="wrap_content"
30 android:text="Cadena html do tv_java. Realizarase en java" />
31
32 <TextView
33 android:id="@+id/txtTv_string_UD02_01_TextView"
34 android:layout_width="wrap_content"
35 android:layout_height="wrap_content"
36 android:text="String do tv_java. Realizarase en java"
37 android:textColor="#00F"
38 android:textSize="16sp" />
39
40 </LinearLayout>
- Observar as liñas marcadas
- A imaxe amosa a aplicación en execución:
- Observar como a primeira etiqueta despois da liña ten o contido do que almacena o EditText vermello.
- A segunda etiqueta despois da liña amosa a etiqueta vermella pasada polo método toString. Observar como xa non hai negriña.
- O código que fai iso posible é o seguinte:
1 package es.cursoandroid.cifprodolfoucha.aprendiendo.UI.CaixaTexto;
2
3 import android.app.Activity;
4 import android.graphics.Color;
5 import android.os.Bundle;
6 import android.text.Html;
7 import android.text.Spanned;
8 import android.widget.TextView;
9
10 import es.cursoandroid.cifprodolfoucha.aprendiendo.R;
11
12 public class UD02_01_TextView extends Activity {
13
14 @Override
15 protected void onCreate(Bundle savedInstanceState) {
16 super.onCreate(savedInstanceState);
17 setContentView(R.layout.activity_ud02_01__text_view);
18
19 final TextView txtOrixinal = findViewById(R.id.txtOrixinal_UD02_01_TextView);
20 final TextView tvJava = (TextView) findViewById(R.id.txtJava_UD02_01_TextView);
21 final TextView tvHtml = (TextView) findViewById(R.id.txtTv_html_UD02_01_TextView);
22 final TextView tvString = (TextView) findViewById(R.id.txtTv_string_UD02_01_TextView);
23
24 tvJava.setText("Etiqueta modificada en java: "+txtOrixinal.getText());
25 tvJava.append(". Máis texto. ");
26 tvJava.setTextColor(Color.RED);
27 tvJava.setTextSize(20);
28 tvJava.append(Html.fromHtml("<p><br>Isto está en <b>negriña</b> e noutra liña.</p>"));
29
30 tvHtml.setText(Html.toHtml((Spanned)(tvJava.getText())));
31
32 //tvString.setText(""+tvJava.getText());
33 tvString.setText(tvJava.getText().toString());
34 }
35 }
- Liña 30: colle o valor da etiqueta vermella e a pasa a formato Html.
- Liña 33: pasa a cadea vermella a String. Sería o equivalente á liña 35 (Concatenar cunha cadea).
Definición de constantes/recursos xml
- Como xa vimos na definición XML do Layout temos valores postos á ferro.
- Sería bo definir esas propiedades noutros ficheiros XML, deste xeito permítese a reutilización e a internacionalización.
- Engadimos os novos recurso de tipo string. Observar as liñas marcadas.
1 <?xml version="1.0" encoding="utf-8"?>
2 <resources>
3 <string name="app_name">Aprendendo</string>
4 <string name="hello_world">Hello world!</string>
5
6 <string name="texto_tv_java">Dá igual o que escribamos aquí. Neste exemplo, ao lanzar a aplicación, vaise cambiar este texto</string>
7 <string name="texto_tv_html">Cadena html do tv_java. Realizarase en java</string>
8 <string name="texto_tv_string">String do tv_java. Realizarase en java</string>
9 </resources>
- Gardar o ficheiro
- A continuación vaise crear un ficheiro de recurso para as cores.
- Cada cor está formado por 3 cores (RED, GREEN, BLUE) que van dende 00 a FF en hexadecimal (0 a 255 en decimal), aínda que tamén acepta un único díxito (de 0 a F).
- Normalmente faríamos uso do que xa trae por defecto, pero imos crear un novo para que vexades cal sería o proceso...
- As constantes dos recursos pódense crear directamente no deseñador ou ben crealas previamente e utilizalas no deseñador posteriormente.
- Modifiquemos o ficheiro de recursos de meucores:
1 <?xml version="1.0" encoding="utf-8"?>
2 <resources>
3 <color name="azul">#00F</color>
4 <color name="negro">#000</color>
5
6 </resources>
- Uso dos recursos no layout. Como sempre, observar as liñas marcadas
1 <?xml version="1.0" encoding="utf-8"?>
2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3 xmlns:tools="http://schemas.android.com/tools"
4 android:layout_width="match_parent"
5 android:layout_height="match_parent"
6 android:padding="20sp"
7 android:orientation="vertical" >
8
9 <TextView
10 android:id="@+id/txtOrixinal_UD02_01_TextView"
11 android:layout_width="wrap_content"
12 android:layout_height="wrap_content"
13 android:text="@string/hello_world" />
14
15 <TextView
16 android:id="@+id/txtJava_UD02_01_TextView"
17 android:layout_width="wrap_content"
18 android:layout_height="wrap_content"
19 android:text="@string/texto_tv_java"
20 android:textColor="@color/azul" />
21
22 <View
23 android:layout_width="match_parent"
24 android:layout_height="2sp"
25 android:background="@color/negro" />
26
27 <TextView
28 android:id="@+id/txtTv_html_UD02_01_TextView"
29 android:layout_width="wrap_content"
30 android:layout_height="wrap_content"
31 android:text="@string/texto_tv_html" />
32
33 <TextView
34 android:id="@+id/txtTv_string_UD02_01_TextView"
35 android:layout_width="wrap_content"
36 android:layout_height="wrap_content"
37 android:text="@string/texto_tv_string"
38 android:textColor="@color/azul"
39 android:textSize="16sp" />
40 </LinearLayout>
NOTA IMPORTANTE: Lembra que calquera recurso que cres, soamente aceptará como nome letras minúsculas e guión baixo. Os demais caracteres están prohibidos.
- Anda!!! Quedounos na liña 24 e 39 dous valores candidatos a ser definidos nunhas constantes tipo dimen. Seguro que o participante no curso é quen de facelo.
- A etiqueta para as dimensións é: <dimen> </dimen>. Lembra facer uso do atributo 'name'.
- Os recursos de tamaño son bos telos para aplicar o mesmo tamaño a todos os views da nosa aplicación desa forma damos a impresión de ter un mesmo deseño.
- Importante: O tamaño que se garde en <dimen> ten que especificar a unidade, sp ou dp da forma: <dimen name='nome'>10sp</dimen>
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:contentDescription' como se amosa no seguinte exemplo:
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:contentDescription="Nome a enviar"
10 app:layout_constraintStart_toStartOf="parent"
11 app:layout_constraintTop_toTopOf="@+id/etNome_UD03_01_Intents" />
- No caso de que o TextView estea asociado ao EditText, podemos substituír dito atributo polo atributo: android:labelFor 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).