TextView. Definición de recursos XML

De MediaWiki
Saltar a: navegación, buscar

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