TextView. Definición de recursos XML

De MediaWiki
Ir a la navegación Ir a la búsqueda

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.

00 Part of Android View Hierarchy.png



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


PDM TextView 7.JPG

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

PDM TextView 2.JPG

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.

PDM TextView 3.JPG

  • 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:
PDM TextView 4.JPG
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.
  • 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:

PDM TextView 8.JPG

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

PDM TextView 5.JPG

  • 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

PDM TextView 9.JPG

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

PDM TextView 6.JPG

  • 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

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