TextView. Definición de recursos XML

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.

• • • Imaxe obtida de: http://www.itcsolutions.eu/2011/08/27/android-tutorial-4-procedural-vs-declarative-design-of-user-interfaces
  • 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.

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/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>

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

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

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

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

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

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

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

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

• Recursos string
• 

  Advertencia no XML indicando que ...

• 

  usemos un recurso de tipo @string.

• 

  Editamos o ficheiro res/values/strings.xml ou creamos un novo en /res/values

• 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

• Uso recursos string
• 

  No layout facemos uso dos recursos anteriores: (CTRL + Barra espaciadora). Lembrar gardar antes o ficheiro de recursos anterior.

• 

  Xa quedan menos advertencias: A da dimensión podería declararse no ficheiro /res/values/dimens.xml ou crear un novo.

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.

• Crear ficheiro de recursos
• 

  En /res/values creamos un novo ficheiro Android XML File

• 

  Indicamos un nome significativo, vale calquera. Neste caso colors e gardamos.

• 

  Imos ao ficheiro

• 

  Engadimos un elemento

• 

  Seleccionar Color e aceptar.

• 

  Engadimos a definición dunha cor graficamente ...

• 

  ... en modo texto.

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