https://manuais.iessanclemente.net/index.php?title=TextView._Definici%C3%B3n_de_recursos_XML&feed=atom&action=historyTextView. Definición de recursos XML - Historial de revisiones2024-03-28T23:12:44ZHistorial de revisiones de esta página en el wikiMediaWiki 1.36.2https://manuais.iessanclemente.net/index.php?title=TextView._Definici%C3%B3n_de_recursos_XML&diff=57082&oldid=prevAngelfg en 11:39 24 jul 20152015-07-24T11:39:02Z<p></p>
<p><b>Página nueva</b></p><div>==Introdución==<br />
*Un '''TextView''' é unha etiqueta de texto que serve para amosar texto na aplicación.<br />
*Este control é unha subclase da clase '''View'''.<br />
*Opcionalmente pódese permitir editar o contido.<br />
*A clase que implementa o control vén configurada para non permitir a edición.<br />
<br />
<br />
*Aproveitando que este é o primeiro control que imos ver, tamén imos explicar como se definen '''constantes''' para usar nos recursos XML.<br />
<br />
<br />
*'''Referencias''':<br />
**A clase '''View''': http://developer.android.com/reference/android/view/View.html<br />
***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.<br />
[[Image:00_Part_of_Android_View_Hierarchy.png|600px]]<br />
***Imaxe obtida de: http://www.itcsolutions.eu/2011/08/27/android-tutorial-4-procedural-vs-declarative-design-of-user-interfaces<br />
**Control TextView: http://developer.android.com/reference/android/widget/TextView.html<br />
***Observar no enlace anterior o valor do atributo '''editable'''.<br />
**Recomendacións de tipografía: http://developer.android.com/design/style/typography.html<br />
***Observar no enlace anterior o tamaño recomendado en px do lanzador dunha aplicación en Google Play.<br />
**Cores: http://developer.android.com/guide/topics/resources/more-resources.html#Color<br />
***Observar en que formatos se pode describir unha cor.<br />
<br />
<br />
<br />
<br />
===Casos prácticos===<br />
*Comezamos creando un novo proxecto: '''U2_07_TextView'''.<br />
*Imos comezar creando un layout con 2 TextViews, onde o segundo TextView se modifica en tempo de execución (ao iniciarse a aplicación).<br />
<br />
[[Image:Android_2013_U2_07_TextView_01.jpg|300px]]<br />
*A imaxe amosa en tempo de deseño os 2 TextViews.<br />
*Le o contido da etiqueta azul.<br />
<br />
*O XML do layout asociado a esa imaxe é:<br />
<syntaxhighlight lang="xml" line highlight="9,12,15,18,19" enclose="div"><br />
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"<br />
xmlns:tools="http://schemas.android.com/tools"<br />
android:layout_width="match_parent"<br />
android:layout_height="match_parent"<br />
android:padding="20sp"<br />
android:orientation="vertical" ><br />
<br />
<TextView<br />
android:id="@+id/tv_orixinal"<br />
android:layout_width="wrap_content"<br />
android:layout_height="wrap_content"<br />
android:text="@string/hello_world" /><br />
<br />
<TextView<br />
android:id="@+id/tv_java"<br />
android:layout_width="wrap_content"<br />
android:layout_height="wrap_content"<br />
android:textColor="#00F"<br />
android:text="Dá igual o que escribamos aquí. Neste exemplo, ao lanzar a aplicación, vaise cambiar este texto" /><br />
<br />
</LinearLayout><br />
</syntaxhighlight><br />
*'''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.<br />
*Nas liñas 9 e 15 asóciase un ID a cada control, TextView, que logo usaremos en Java.<br />
*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.<br />
*Como xa se sabe, neste caso, a definición da constante '''@string/hello_world''' está no ficheiro de recursos: '''/res/values/strings.xml'''.<br />
<br />
[[Image:Android_2013_U2_07_TextView_02.jpg|150px]]<br />
<br />
<syntaxhighlight lang="xml" line highlight="6"><br />
<?xml version="1.0" encoding="utf-8"?><br />
<resources><br />
<br />
<string name="app_name">U2_07_TextView</string><br />
<string name="action_settings">Settings</string><br />
<string name="hello_world">Hello world!</string><br />
<br />
</resources><br />
</syntaxhighlight><br />
<br />
*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.<br />
*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.<br />
<br />
<br />
*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.<br />
*Observar na imaxe a declaración deses IDs. <br />
[[Image:Android_2013_U2_07_TextView_04.jpg|600px]]<br />
*Isto xerase automaticamente cando se ten '''gardado o documento XML''' onde se declaran os controis.<br />
<br />
<br />
*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.<br />
<br />
===Acceder e manipular o control dende Java===<br />
*A continuación imos acceder ao control EditText declarado en XML dende Java e imos realizar accións sobre o control.<br />
*Para iso imos á clase Java que lanza a aplicación. (Por agora só hai unha clase Java).<br />
[[Image:Android_2013_U2_07_TextView_03.jpg|600px]]<br />
<br />
*Como xa se indicou, podemos acceder aos elementos visuais declarados en XML a través do seu ID usando de intermediaria a clase R.<br />
[[Image:Android_2013_U2_07_TextView_04.jpg|600px]]<br />
<br />
<br />
*Dentro do método '''onCreate()''' que é o encargado de lanzar a Activity, como se verá máis adiante.<br />
[[Image:Android_2013_U2_07_TextView_05.jpg|600px]]<br />
*Comezamos a declarar un obxecto de tipo TextView.<br />
*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. <br />
[[Image:Android_2013_U2_07_TextView_07.jpg|600px]]<br />
<br />
<br />
*Declaramos un obxecto de tipo TextView e queremos asocialo ao primeiro TextView do Layaout (ID:tv_orixinal).<br />
[[Image:Android_2013_U2_07_TextView_08.jpg|600px]]<br />
*Para iso precisamos o método '''findViewById()''':<br />
**'''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).<br />
**'''Devolve un obxecto''' de tipo '''View'''.<br />
*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'''.<br />
<br />
<br />
*A continuación amósase o código Java que vai manipular o TextView<br />
<syntaxhighlight lang="java" line highlight="15,16,18"><br />
package com.example.u2_07_textview;<br />
<br />
import android.app.Activity;<br />
import android.os.Bundle;<br />
import android.view.Menu;<br />
import android.widget.TextView;<br />
<br />
public class U2_07_TextView extends Activity {<br />
<br />
@Override<br />
protected void onCreate(Bundle savedInstanceState) {<br />
super.onCreate(savedInstanceState);<br />
setContentView(R.layout.activity_u2_07__text_view);<br />
<br />
final TextView tvOrixinal = (TextView) findViewById(R.id.tv_orixinal);<br />
final TextView tvJava = (TextView) findViewById(R.id.tv_java);<br />
<br />
tvJava.setText("Etiqueta modificada en java: "+tvOrixinal.getText());<br />
}<br />
<br />
@Override<br />
public boolean onCreateOptionsMenu(Menu menu) {<br />
// Inflate the menu; this adds items to the action bar if it is present.<br />
getMenuInflater().inflate(R.menu.u2_07__text_view, menu);<br />
return true;<br />
}<br />
}<br />
</syntaxhighlight><br />
*Liña 15: temos un obxecto que apunta a TextView orixinal, ao primeiro TextView do Layout.<br />
*Liña 16: temos un obxecto que apunta ao novo TextView, ao segundo do Layout.<br />
*Liña 18: modificamos o texto do segundo TextView. O contido é unha cadea de texto concatenada (+) co texto que ten o primeiro TextView.<br />
**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. <br />
*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.<br />
<br />
*A imaxe amosa a execución da aplicación:<br />
[[Image:Android_2013_U2_07_TextView_09.jpg|300px]]<br />
*Observar o contido da segunda liña, non é o que se asignou no Layout.<br />
<br />
===Manipulación html dunha etiqueta de texto===<br />
*As Etiquetas de texto non son texto (String) senón que son código semellante ao html.<br />
*Entón na liña 18 anterior parece que hai unha contradición: concatenar unha cadea con ''algo'' html.<br />
*Teríamos que ter usado o método '''toString()''': '''tvOrixinal.getText().toString()'''<br />
*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).<br />
<br />
<br />
*Para obter a seguinte imaxe non se vai tocar o XML e vaise facer todo en Java.<br />
[[Image:Android_2013_U2_07_TextView_10.jpg|300px]]<br />
*Na segunda etiqueta cambiouse: cor, tamaño da fonte e púxose en '''negriña''' unha palabra.<br />
<br />
<br />
*Código JAVA ...<br />
<syntaxhighlight lang="java" line highlight="21-25"><br />
package com.example.u2_07_textview;<br />
<br />
import android.app.Activity;<br />
import android.graphics.Color;<br />
import android.os.Bundle;<br />
import android.text.Html;<br />
import android.view.Menu;<br />
import android.widget.TextView;<br />
<br />
public class U2_07_TextView extends Activity {<br />
<br />
@Override<br />
protected void onCreate(Bundle savedInstanceState) {<br />
super.onCreate(savedInstanceState);<br />
setContentView(R.layout.activity_u2_07__text_view);<br />
<br />
final TextView tvOrixinal = (TextView) findViewById(R.id.tv_orixinal);<br />
final TextView tvJava = (TextView) findViewById(R.id.tv_java);<br />
<br />
tvJava.setText("Etiqueta modificada en java: "+tvOrixinal.getText());<br />
tvJava.append(". Máis texto. ");<br />
tvJava.setTextColor(Color.RED);<br />
tvJava.setTextSize(20);<br />
tvJava.append(Html.fromHtml("<p><br>Isto está en <b>negriña</b> e noutra liña.</p>"));<br />
}<br />
<br />
@Override<br />
public boolean onCreateOptionsMenu(Menu menu) {<br />
// Inflate the menu; this adds items to the action bar if it is present.<br />
getMenuInflater().inflate(R.menu.u2_07__text_view, menu);<br />
return true;<br />
}<br />
}<br />
<br />
</syntaxhighlight><br />
*Para importar os paquetes premer (SHIFT + CTRL + O)<br />
<br />
<br />
*Liña 21: engade contido á etiqueta polo final da mesma e amosa o contido final.<br />
*Liña 22: cambiar a cor usando unha constante estática.<br />
*Liña 23: cambiar o tamaño da fonte<br />
*Liña 24: devolve a cadea en formato HTML no que en Android se podería chamar ''Texto con estilo mostrable''<br />
<br />
<br />
<br />
*A continuación vaise modificar a aplicación para que poidamos recuperar o contido exacto dun ''TextView'', non o que amosa por pantalla.<br />
*Tamén se vai usar o método '''toString()''' para ver o seu resultado.<br />
<br />
<br />
*A imaxe amosa o deseño do Layout<br />
[[Image:Android_2013_U2_07_TextView_11.jpg|300px]]<br />
*Observar a liña de separación e despois desta, dúas etiquetas de texto.<br />
<br />
*O Ficheiro XML asociado<br />
<syntaxhighlight lang="xml" line highlight="21-24,26,32" enclose="div"><br />
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"<br />
xmlns:tools="http://schemas.android.com/tools"<br />
android:layout_width="match_parent"<br />
android:layout_height="match_parent"<br />
android:orientation="vertical"<br />
android:padding="20sp" ><br />
<br />
<TextView<br />
android:id="@+id/tv_orixinal"<br />
android:layout_width="wrap_content"<br />
android:layout_height="wrap_content"<br />
android:text="@string/hello_world" /><br />
<br />
<TextView<br />
android:id="@+id/tv_java"<br />
android:layout_width="wrap_content"<br />
android:layout_height="wrap_content"<br />
android:text="Dá igual o que escribamos aquí. Neste exemplo, ao lanzar a aplicación, vaise cambiar este texto"<br />
android:textColor="#00F" /><br />
<br />
<View<br />
android:layout_width="match_parent"<br />
android:layout_height="2sp"<br />
android:background="#000" /><br />
<br />
<TextView<br />
android:id="@+id/tv_html"<br />
android:layout_width="wrap_content"<br />
android:layout_height="wrap_content"<br />
android:text="Cadena html do tv_java. Realizarase en java" /><br />
<br />
<TextView<br />
android:id="@+id/tv_string"<br />
android:layout_width="wrap_content"<br />
android:layout_height="wrap_content"<br />
android:text="String do tv_java. Realizarase en java"<br />
android:textColor="#00F"<br />
android:textSize="16sp" /><br />
<br />
</LinearLayout><br />
</syntaxhighlight><br />
*Observar as liñas marcadas<br />
<br />
*A imaxe amosa a aplicación en execución:<br />
[[Image:Android_2013_U2_07_TextView_12.jpg|300px]]<br />
*Observar como a primeira etiqueta despois da liña ten o contido do que almacena o EditText vermello.<br />
*A segunda etiqueta despois da liña amosa a etiqueta vermella pasada polo método '''toString'''. Observar como xa non hai negriña.<br />
<br />
<br />
*O código que fai iso posible é o seguinte:<br />
<syntaxhighlight lang="java" line highlight="21,22,33,35,36"><br />
package com.example.u2_07_textview;<br />
<br />
import android.R.string;<br />
import android.app.Activity;<br />
import android.graphics.Color;<br />
import android.os.Bundle;<br />
import android.text.Html;<br />
import android.text.Spanned;<br />
import android.view.Menu;<br />
import android.widget.TextView;<br />
<br />
public class U2_07_TextView extends Activity {<br />
<br />
@Override<br />
protected void onCreate(Bundle savedInstanceState) {<br />
super.onCreate(savedInstanceState);<br />
setContentView(R.layout.activity_u2_07__text_view);<br />
<br />
final TextView tvOrixinal = (TextView) findViewById(R.id.tv_orixinal);<br />
final TextView tvJava = (TextView) findViewById(R.id.tv_java);<br />
final TextView tvHtml = (TextView) findViewById(R.id.tv_html);<br />
final TextView tvString = (TextView) findViewById(R.id.tv_string);<br />
<br />
tvJava.setText("Etiqueta modificada en java: "+tvOrixinal.getText());<br />
<br />
//tvJava.setText(tvJava.getText()+". Máis texto. ");<br />
tvJava.append(". Máis texto. ");<br />
tvJava.setTextColor(Color.RED);<br />
tvJava.setTextSize(20);<br />
tvJava.append(Html.fromHtml("<p><br>Isto está en <b>negriña</b> e noutra liña.</p>"));<br />
<br />
<br />
tvHtml.setText(Html.toHtml((Spanned)(tvJava.getText())));<br />
<br />
//tvString.setText(""+tvJava.getText());<br />
tvString.setText(tvJava.getText().toString());<br />
<br />
}<br />
<br />
@Override<br />
public boolean onCreateOptionsMenu(Menu menu) {<br />
// Inflate the menu; this adds items to the action bar if it is present.<br />
getMenuInflater().inflate(R.menu.u2_07__text_view, menu);<br />
return true;<br />
}<br />
}<br />
</syntaxhighlight><br />
<br />
*Liña 33: colle o valor da etiqueta vermella e a pasa a formato Html.<br />
*Liña 36: pasa a cadea vermella a String. Sería o equivalente á liña 35 (Concatenar cunha cadea).<br />
<br />
===Definición de constantes/recursos xml===<br />
*Como xa vimos na definición XML do Layout temos valores postos á ''ferro''.<br />
*Sería bo definir esas propiedades noutros ficheiros XML, deste xeito permítese a reutilización e a internacionalización.<br />
<br />
<br />
<gallery caption="Recursos string" widths="350" heights="300px" perrow="2"><br />
Image:Android_2013_U2_07_TextView_13.jpg| Advertencia no XML indicando que ...<br />
Image:Android_2013_U2_07_TextView_14.jpg| usemos un recurso de tipo @string. <br />
Image:Android_2013_U2_07_TextView_15.jpg| Editamos o ficheiro '''res/values/strings.xml''' ou creamos un novo en '''/res/values'''<br />
</gallery><br />
*Engadimos os novos recurso de tipo string. Observar as liñas marcadas.<br />
<syntaxhighlight lang="xml" line highlight="8-10" enclose="div"><br />
<?xml version="1.0" encoding="utf-8"?><br />
<resources><br />
<br />
<string name="app_name">U2_07_TextView</string><br />
<string name="action_settings">Settings</string><br />
<string name="hello_world">Hello world!</string><br />
<br />
<string name="texto_tv_java">Dá igual o que escribamos aquí. Neste exemplo, ao lanzar a aplicación, vaise cambiar este texto</string><br />
<string name="texto_tv_html">Cadena html do tv_java. Realizarase en java</string><br />
<string name="texto_tv_string">String do tv_java. Realizarase en java</string> <br />
<br />
</resources><br />
</syntaxhighlight><br />
*Gardar o ficheiro<br />
<br />
<br />
<gallery caption="Uso recursos string" widths="350" heights="300px" perrow="2"><br />
Image:Android_2013_U2_07_TextView_16.jpg| No layout facemos uso dos recursos anteriores: (CTRL + Barra espaciadora). Lembrar gardar antes o ficheiro de recursos anterior.<br />
Image:Android_2013_U2_07_TextView_17.jpg| Xa quedan menos advertencias: A da dimensión podería declararse no ficheiro '''/res/values/dimens.xml''' ou crear un novo.<br />
</gallery><br />
<br />
<syntaxhighlight lang="xml" line highlight="6"><br />
<resources><br />
<br />
<!-- Default screen margins, per the Android Design guidelines. --><br />
<dimen name="activity_horizontal_margin">16dp</dimen><br />
<dimen name="activity_vertical_margin">16dp</dimen><br />
<dimen name="alto_liña">2sp</dimen><br />
<br />
</resources><br />
</syntaxhighlight><br />
<br />
<br />
<br />
*A continuación vaise crear un ficheiro de recurso para as cores.<br />
<gallery caption="Crear ficheiro de recursos" widths="350" heights="300px" perrow="2"><br />
Image:Android_2013_U2_07_TextView_18.jpg| En '''/res/values''' creamos un novo ficheiro '''Android XML File'''<br />
Image:Android_2013_U2_07_TextView_19.jpg| Indicamos un nome significativo, vale calquera. Neste caso ''colors'' e gardamos.<br />
Image:Android_2013_U2_07_TextView_20.jpg| Imos ao ficheiro<br />
Image:Android_2013_U2_07_TextView_21.jpg| Engadimos un elemento<br />
Image:Android_2013_U2_07_TextView_22.jpg| Seleccionar '''Color''' e aceptar.<br />
Image:Android_2013_U2_07_TextView_23.jpg| Engadimos a definición dunha cor graficamente ...<br />
Image:Android_2013_U2_07_TextView_24.jpg| ... en modo texto.<br />
</gallery><br />
<br />
*Ficheiro de recurso de cores:<br />
<syntaxhighlight lang="xml" line highlight="3-4"><br />
<?xml version="1.0" encoding="utf-8"?><br />
<resources><br />
<color name="azul">#00F</color><br />
<color name="negro">#000</color><br />
<br />
</resources><br />
</syntaxhighlight><br />
<br />
<br />
<br />
*Uso dos recursos no layout. Como sempre, observar as liñas marcadas<br />
<syntaxhighlight lang="xml" line highlight="12,18,19,23,24,30,36,38"><br />
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"<br />
xmlns:tools="http://schemas.android.com/tools"<br />
android:layout_width="match_parent"<br />
android:layout_height="match_parent"<br />
android:orientation="vertical"<br />
android:padding="20sp" ><br />
<br />
<TextView<br />
android:id="@+id/tv_orixinal"<br />
android:layout_width="wrap_content"<br />
android:layout_height="wrap_content"<br />
android:text="@string/hello_world" /><br />
<br />
<TextView<br />
android:id="@+id/tv_java"<br />
android:layout_width="wrap_content"<br />
android:layout_height="wrap_content"<br />
android:text="@string/texto_tv_java"<br />
android:textColor="@color/azul" /><br />
<br />
<View<br />
android:layout_width="match_parent"<br />
android:layout_height="@dimen/alto_liña"<br />
android:background="@color/negro" /><br />
<br />
<TextView<br />
android:id="@+id/tv_html"<br />
android:layout_width="wrap_content"<br />
android:layout_height="wrap_content"<br />
android:text="@string/texto_tv_html" /><br />
<br />
<TextView<br />
android:id="@+id/tv_string"<br />
android:layout_width="wrap_content"<br />
android:layout_height="wrap_content"<br />
android:textColor="@color/azul"<br />
android:textSize="16sp" <br />
android:text="@string/texto_tv_string"/><br />
<br />
</LinearLayout><br />
</syntaxhighlight><br />
<br />
*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.<br />
<br />
<br />
<br />
<br> -- [[Usuario:angelfg|Ángel D. Fernández González]] e [[Usuario:Carrion|Carlos Carrión Álvarez]] -- (2015).</div>Angelfg