TextView. Definición de recursos XML

De Manuais Informática - IES San Clemente.
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

  • Comezamos creando un novo proxecto: U2_07_TextView.
  • Imos comezar creando un layout con 2 TextViews, onde o segundo TextView se modifica en tempo de execución (ao iniciarse a aplicación).

Android 2013 U2 07 TextView 01.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/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: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>
  • NOTA ECLIPSE: os campos dos controis pódense poñer na orde que se desexe. Se se preme SHIFT+CTRL+F Eclipse vai organizar o código e ordenar os campos. Esa combinación de teclas pode usarse tanto en código XML como Java.
  • 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.
  • Como xa se sabe, neste caso, a definición da constante @string/hello_world está no ficheiro de recursos: /res/values/strings.xml.

Android 2013 U2 07 TextView 02.jpg

1 <?xml version="1.0" encoding="utf-8"?>
2 <resources>
3 
4     <string name="app_name">U2_07_TextView</string>
5     <string name="action_settings">Settings</string>
6     <string name="hello_world">Hello world!</string>
7 
8 </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.

Android 2013 U2 07 TextView 04.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 EditText declarado en XML dende Java e imos realizar accións sobre o control.
  • Para iso imos á clase Java que lanza a aplicación. (Por agora só hai unha clase Java).

Android 2013 U2 07 TextView 03.jpg

  • Como xa se indicou, podemos acceder aos elementos visuais declarados en XML a través do seu ID usando de intermediaria a clase R.

Android 2013 U2 07 TextView 04.jpg


  • Dentro do método onCreate() que é o encargado de lanzar a Activity, como se verá máis adiante.

Android 2013 U2 07 TextView 05.jpg

  • Comezamos a declarar un obxecto de tipo TextView.
  • A medida que imos escribindo o tipo se prememos CTRL+ Barra espaciadora xa sabemos que nos vai a autocompletar, pero ademais vai importar o paquete que define onde está declarada a clase.

Android 2013 U2 07 TextView 07.jpg


  • Declaramos un obxecto de tipo TextView e queremos asocialo ao primeiro TextView do Layaout (ID:tv_orixinal).

Android 2013 U2 07 TextView 08.jpg

  • Para iso precisamos o método findViewById():
    • 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 é preciso facer un casting (TextView) para que faga unha conversión de tipos ao tipo desexado, neste caso dun obxecto tipo View a un obxecto de tipo TextView.


  • A continuación amósase o código Java que vai manipular o TextView
 1 package com.example.u2_07_textview;
 2 
 3 import android.app.Activity;
 4 import android.os.Bundle;
 5 import android.view.Menu;
 6 import android.widget.TextView;
 7 
 8 public class U2_07_TextView extends Activity {
 9 
10 	@Override
11 	protected void onCreate(Bundle savedInstanceState) {
12 		super.onCreate(savedInstanceState);
13 		setContentView(R.layout.activity_u2_07__text_view);
14 		
15 		final TextView tvOrixinal = (TextView) findViewById(R.id.tv_orixinal);
16 		final TextView tvJava = (TextView) findViewById(R.id.tv_java);
17 		
18 		tvJava.setText("Etiqueta modificada en java: "+tvOrixinal.getText());
19 	}
20 	
21 	@Override
22 	public boolean onCreateOptionsMenu(Menu menu) {
23 		// Inflate the menu; this adds items to the action bar if it is present.
24 		getMenuInflater().inflate(R.menu.u2_07__text_view, menu);
25 		return true;
26 	}
27 }
  • Liña 15: temos un obxecto que apunta a TextView orixinal, ao primeiro TextView do Layout.
  • Liña 16: temos un obxecto que apunta ao novo TextView, ao segundo do Layout.
  • Liña 18: 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:

Android 2013 U2 07 TextView 09.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.

Android 2013 U2 07 TextView 10.jpg

  • Na segunda etiqueta cambiouse: cor, tamaño da fonte e púxose en negriña unha palabra.


  • Código JAVA ...
 1 package com.example.u2_07_textview;
 2 
 3 import android.app.Activity;
 4 import android.graphics.Color;
 5 import android.os.Bundle;
 6 import android.text.Html;
 7 import android.view.Menu;
 8 import android.widget.TextView;
 9 
10 public class U2_07_TextView extends Activity {
11 
12 	@Override
13 	protected void onCreate(Bundle savedInstanceState) {
14 		super.onCreate(savedInstanceState);
15 		setContentView(R.layout.activity_u2_07__text_view);
16 		
17 		final TextView tvOrixinal = (TextView) findViewById(R.id.tv_orixinal);
18 		final TextView tvJava = (TextView) findViewById(R.id.tv_java);
19 		
20 		tvJava.setText("Etiqueta modificada en java: "+tvOrixinal.getText());
21 		tvJava.append(". Máis texto. ");
22 		tvJava.setTextColor(Color.RED);
23 		tvJava.setTextSize(20);
24 		tvJava.append(Html.fromHtml("<p><br>Isto está en <b>negriña</b> e noutra liña.</p>"));
25 	}
26 	
27 	@Override
28 	public boolean onCreateOptionsMenu(Menu menu) {
29 		// Inflate the menu; this adds items to the action bar if it is present.
30 		getMenuInflater().inflate(R.menu.u2_07__text_view, menu);
31 		return true;
32 	}
33 }
  • Para importar os paquetes premer (SHIFT + CTRL + O)


  • Liña 21: engade contido á etiqueta polo final da mesma e amosa o contido final.
  • Liña 22: cambiar a cor usando unha constante estática.
  • Liña 23: cambiar o tamaño da fonte
  • Liña 24: 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

Android 2013 U2 07 TextView 11.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/tv_html"
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/tv_string"
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:

Android 2013 U2 07 TextView 12.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 com.example.u2_07_textview;
 2 
 3 import android.R.string;
 4 import android.app.Activity;
 5 import android.graphics.Color;
 6 import android.os.Bundle;
 7 import android.text.Html;
 8 import android.text.Spanned;
 9 import android.view.Menu;
10 import android.widget.TextView;
11 
12 public class U2_07_TextView extends Activity {
13 
14 	@Override
15 	protected void onCreate(Bundle savedInstanceState) {
16 		super.onCreate(savedInstanceState);
17 		setContentView(R.layout.activity_u2_07__text_view);
18 		
19 		final TextView tvOrixinal = (TextView) findViewById(R.id.tv_orixinal);
20 		final TextView tvJava = (TextView) findViewById(R.id.tv_java);
21 		final TextView tvHtml = (TextView) findViewById(R.id.tv_html);
22 		final TextView tvString = (TextView) findViewById(R.id.tv_string);
23 		
24 		tvJava.setText("Etiqueta modificada en java: "+tvOrixinal.getText());
25 		
26 		//tvJava.setText(tvJava.getText()+". Máis texto. ");
27 		tvJava.append(". Máis texto. ");
28 		tvJava.setTextColor(Color.RED);
29 		tvJava.setTextSize(20);
30 		tvJava.append(Html.fromHtml("<p><br>Isto está en <b>negriña</b> e noutra liña.</p>"));
31 		
32 		
33 		tvHtml.setText(Html.toHtml((Spanned)(tvJava.getText())));
34 		
35 		//tvString.setText(""+tvJava.getText());
36 		tvString.setText(tvJava.getText().toString());
37 		
38 	}
39 	
40 	@Override
41 	public boolean onCreateOptionsMenu(Menu menu) {
42 		// Inflate the menu; this adds items to the action bar if it is present.
43 		getMenuInflater().inflate(R.menu.u2_07__text_view, menu);
44 		return true;
45 	}
46 }
  • Liña 33: colle o valor da etiqueta vermella e a pasa a formato Html.
  • Liña 36: 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 
 4     <string name="app_name">U2_07_TextView</string>
 5     <string name="action_settings">Settings</string>
 6     <string name="hello_world">Hello world!</string>
 7 
 8     <string name="texto_tv_java">Dá igual o que escribamos aquí. Neste exemplo, ao lanzar a aplicación, vaise cambiar este texto</string>
 9     <string name="texto_tv_html">Cadena html do tv_java. Realizarase en java</string>
10     <string name="texto_tv_string">String do tv_java. Realizarase en java</string> 
11     
12 </resources>
  • Gardar o ficheiro


1 <resources>
2 
3     <!-- Default screen margins, per the Android Design guidelines. -->
4     <dimen name="activity_horizontal_margin">16dp</dimen>
5     <dimen name="activity_vertical_margin">16dp</dimen>
6     <dimen name="alto_liña">2sp</dimen>
7     
8 </resources>


  • A continuación vaise crear un ficheiro de recurso para as cores.
  • Ficheiro de recurso de cores:
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 <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="@string/texto_tv_java"
19         android:textColor="@color/azul" />
20 
21     <View
22         android:layout_width="match_parent"
23         android:layout_height="@dimen/alto_liña"
24         android:background="@color/negro" />
25 
26     <TextView
27         android:id="@+id/tv_html"
28         android:layout_width="wrap_content"
29         android:layout_height="wrap_content"
30         android:text="@string/texto_tv_html" />
31 
32     <TextView
33         android:id="@+id/tv_string"
34         android:layout_width="wrap_content"
35         android:layout_height="wrap_content"
36         android:textColor="@color/azul"
37         android:textSize="16sp" 
38         android:text="@string/texto_tv_string"/>
39         
40 </LinearLayout>
  • Anda!!! Quedounos na liña 37 un valor candidato a ser definido nunha constante tipo dimen. Seguro que o participante no curso é quen de facelo.



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