Diferencia entre revisiones de «TextView. Definición de recursos XML»

De MediaWiki
Ir a la navegación Ir a la búsqueda
 
(No se muestran 36 ediciones intermedias de otro usuario)
Línea 27: Línea 27:
  
 
* Partimos que xa temos creado o proxecto inicial como [http://wiki.cifprodolfoucha.es/index.php?title=PDM_Creando_proxecto_base xa indicamos anteriormente].
 
* Partimos que xa temos creado o proxecto inicial como [http://wiki.cifprodolfoucha.es/index.php?title=PDM_Creando_proxecto_base xa indicamos anteriormente].
−
: Crearemos un novo paquete de nome: '''CaixaTexto'''.
+
: 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'''.
  
 +
 +
<br />
 
* Dentro do paquete '''CaixaTexto''' crear unha nova 'Empty Activity' de nome: '''UD02_01_TextView''' de tipo Launcher e sen compatibilidade.
 
* 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 [http://wiki.cifprodolfoucha.es/index.php?title=PDM_Creando_proxecto_base xa vimos na creación do proxecto base].
 
: Modifica o arquivo '''AndroidManifiest.xml''' e engade unha label á activity como [http://wiki.cifprodolfoucha.es/index.php?title=PDM_Creando_proxecto_base xa vimos na creación do proxecto base].
Línea 36: Línea 39:
  
  
−
[[Image:Android_2013_U2_07_TextView_01.jpg|300px]]
+
[[Image:PDM_TextView_7.JPG|400px]]
 
*A imaxe amosa en tempo de deseño os 2 TextViews.
 
*A imaxe amosa en tempo de deseño os 2 TextViews.
 
*Le o contido da etiqueta azul.
 
*Le o contido da etiqueta azul.
Línea 50: Línea 53:
  
 
     <TextView
 
     <TextView
−
         android:id="@+id/tv_orixinal"
+
         android:id="@+id/txtOrixinal_UD02_01_TextView"
 
         android:layout_width="wrap_content"
 
         android:layout_width="wrap_content"
 
         android:layout_height="wrap_content"
 
         android:layout_height="wrap_content"
Línea 56: Línea 59:
  
 
     <TextView
 
     <TextView
−
         android:id="@+id/tv_java"
+
         android:id="@+id/txtJava_UD02_01_TextView"
 
         android:layout_width="wrap_content"
 
         android:layout_width="wrap_content"
 
         android:layout_height="wrap_content"
 
         android:layout_height="wrap_content"
Línea 71: Línea 74:
 
[[Image:PDM_TextView_2.JPG|350px]]
 
[[Image:PDM_TextView_2.JPG|350px]]
  
−
<syntaxhighlight lang="xml" line highlight="6">
+
<syntaxhighlight lang="xml" line highlight="5">
 
<?xml version="1.0" encoding="utf-8"?>
 
<?xml version="1.0" encoding="utf-8"?>
 
<resources>
 
<resources>
Línea 94: Línea 97:
  
 
===Acceder e manipular o control dende Java===
 
===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.
+
*A continuación imos acceder ao control TextView 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).
+
 
−
[[Image:Android_2013_U2_07_TextView_03.jpg|600px]]
+
*A forma de acceder a calquera compoñente gráfico é por medio da chamada ao [https://developer.android.com/reference/android/view/View.html#findViewById(int) 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:
 +
<syntaxhighlight lang="java" line highlight="6">
 +
    @Override
 +
    protected void onCreate(Bundle savedInstanceState) {
 +
        super.onCreate(savedInstanceState);
 +
        setContentView(R.layout.activity_ud02_01__text_view);
  
−
*Como xa se indicou, podemos acceder aos elementos visuais declarados en XML a través do seu ID usando de intermediaria a clase R.
+
        final TextView txtOrixinal = findViewById(R.id.txtOrixinal_UD02_01_TextView);
−
[[Image:Android_2013_U2_07_TextView_04.jpg|600px]]
 
  
 +
    }
 +
</syntaxhighlight>
  
−
*Dentro do método '''onCreate()''' que é o encargado de lanzar a Activity, como se verá máis adiante.
+
: <u>Nota:</u> Ao poñer final aplicado a un obxecto dunha clase impedimos que poidamos cambiar a referencia de txtOrixinal a outro obxecto da clase TextView.
−
[[Image:Android_2013_U2_07_TextView_05.jpg|600px]]
 
−
*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.  
 
−
[[Image:Android_2013_U2_07_TextView_07.jpg|600px]]
 
  
 +
: Ao facelo, [http://wiki.cifprodolfoucha.es/index.php?title=PDM_UD1_Co%C3%B1ecendoAndroidStudio#Automaticamente 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:
  
−
*Declaramos un obxecto de tipo TextView e queremos asocialo ao primeiro TextView do Layaout (ID:tv_orixinal).
+
[[Imagen:PDM_TextView_4.JPG|500px|center]]
−
[[Image:Android_2013_U2_07_TextView_08.jpg|600px]]
+
 
−
*Para iso precisamos o método '''findViewById()''':
+
: A medida que imos escribindo o tipo se prememos '''CTRL+ Barra espaciadora''' xa sabemos que nos vai a autocompletar.
 +
 
 +
* O método [https://developer.android.com/reference/android/view/View.html#findViewById(int) 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).
 
**'''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'''.
 
**'''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'''.
+
 
 +
*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
 
*A continuación amósase o código Java que vai manipular o TextView
−
<syntaxhighlight lang="java" line highlight="15,16,18">
+
<syntaxhighlight lang="java" line highlight="16,17,19">
−
package com.example.u2_07_textview;
+
package es.cursoandroid.cifprodolfoucha.aprendiendo.UI.CaixaTexto;
  
 
import android.app.Activity;
 
import android.app.Activity;
 
import android.os.Bundle;
 
import android.os.Bundle;
−
import android.view.Menu;
 
 
import android.widget.TextView;
 
import android.widget.TextView;
  
−
public class U2_07_TextView extends Activity {
+
import es.cursoandroid.cifprodolfoucha.aprendiendo.R;
  
−
@Override
+
public class UD02_01_TextView extends Activity {
−
protected void onCreate(Bundle savedInstanceState) {
+
 
−
super.onCreate(savedInstanceState);
+
    @Override
−
setContentView(R.layout.activity_u2_07__text_view);
+
    protected void onCreate(Bundle savedInstanceState) {
−
+
        super.onCreate(savedInstanceState);
−
final TextView tvOrixinal = (TextView) findViewById(R.id.tv_orixinal);
+
        setContentView(R.layout.activity_ud02_01__text_view);
−
final TextView tvJava = (TextView) findViewById(R.id.tv_java);
+
 
−
+
        final TextView txtOrixinal = findViewById(R.id.txtOrixinal_UD02_01_TextView);
−
tvJava.setText("Etiqueta modificada en java: "+tvOrixinal.getText());
+
        final TextView tvJava = (TextView) findViewById(R.id.txtJava_UD02_01_TextView);
−
}
+
 
−
+
        tvJava.setText("Etiqueta modificada en java: "+txtOrixinal.getText());
−
@Override
+
 
−
public boolean onCreateOptionsMenu(Menu menu) {
+
    }
−
// Inflate the menu; this adds items to the action bar if it is present.
 
−
getMenuInflater().inflate(R.menu.u2_07__text_view, menu);
 
−
return true;
 
−
}
 
 
}
 
}
 
</syntaxhighlight>
 
</syntaxhighlight>
−
*Liña 15: temos un obxecto que apunta a TextView orixinal, ao primeiro TextView do Layout.
+
*Liña 16: 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 17: 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.
+
*Liña 19: 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.  
 
**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.
 
*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:
 
*A imaxe amosa a execución da aplicación:
−
[[Image:Android_2013_U2_07_TextView_09.jpg|300px]]
+
[[Image:PDM_TextView_8.JPG|400px]]
 
*Observar o contido da segunda liña, non é o que se asignou no Layout.
 
*Observar o contido da segunda liña, non é o que se asignou no Layout.
  
Línea 165: Línea 175:
  
 
*Para obter a seguinte imaxe non se vai tocar o XML e vaise facer todo en Java.
 
*Para obter a seguinte imaxe non se vai tocar o XML e vaise facer todo en Java.
−
[[Image:Android_2013_U2_07_TextView_10.jpg|300px]]
+
[[Image:PDM_TextView_5.JPG|400px]]
 
*Na segunda etiqueta cambiouse: cor, tamaño da fonte e púxose en '''negriña''' unha palabra.
 
*Na segunda etiqueta cambiouse: cor, tamaño da fonte e púxose en '''negriña''' unha palabra.
  
  
 
*Código JAVA  ...
 
*Código JAVA  ...
−
<syntaxhighlight lang="java" line highlight="21-25">
+
<syntaxhighlight lang="java" line highlight="22-25">
−
package com.example.u2_07_textview;
+
package es.cursoandroid.cifprodolfoucha.aprendiendo.UI.CaixaTexto;
  
 
import android.app.Activity;
 
import android.app.Activity;
Línea 177: Línea 187:
 
import android.os.Bundle;
 
import android.os.Bundle;
 
import android.text.Html;
 
import android.text.Html;
−
import android.view.Menu;
 
 
import android.widget.TextView;
 
import android.widget.TextView;
  
−
public class U2_07_TextView extends Activity {
+
import es.cursoandroid.cifprodolfoucha.aprendiendo.R;
  
−
@Override
+
public class UD02_01_TextView extends Activity {
−
protected void onCreate(Bundle savedInstanceState) {
+
 
−
super.onCreate(savedInstanceState);
+
    @Override
−
setContentView(R.layout.activity_u2_07__text_view);
+
    protected void onCreate(Bundle savedInstanceState) {
−
+
        super.onCreate(savedInstanceState);
−
final TextView tvOrixinal = (TextView) findViewById(R.id.tv_orixinal);
+
        setContentView(R.layout.activity_ud02_01__text_view);
−
final TextView tvJava = (TextView) findViewById(R.id.tv_java);
+
 
−
+
        final TextView txtOrixinal = findViewById(R.id.txtOrixinal_UD02_01_TextView);
−
tvJava.setText("Etiqueta modificada en java: "+tvOrixinal.getText());
+
        final TextView tvJava = (TextView) findViewById(R.id.txtJava_UD02_01_TextView);
−
tvJava.append(". Máis texto. ");
+
 
−
tvJava.setTextColor(Color.RED);
+
        tvJava.setText("Etiqueta modificada en java: "+txtOrixinal.getText());
−
tvJava.setTextSize(20);
+
        tvJava.append(". Máis texto. ");
−
tvJava.append(Html.fromHtml("<p><br>Isto está en <b>negriña</b> e noutra liña.</p>"));
+
        tvJava.setTextColor(Color.RED);
−
}
+
        tvJava.setTextSize(20);
−
+
        tvJava.append(Html.fromHtml("<p><br>Isto está en <b>negriña</b> e noutra liña.</p>"));
−
@Override
+
 
−
public boolean onCreateOptionsMenu(Menu menu) {
+
    }
−
// Inflate the menu; this adds items to the action bar if it is present.
 
−
getMenuInflater().inflate(R.menu.u2_07__text_view, menu);
 
−
return true;
 
−
}
 
 
}
 
}
−
 
 
</syntaxhighlight>
 
</syntaxhighlight>
 
*Para importar os paquetes premer (SHIFT + CTRL + O)
 
*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: 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 a cor usando unha constante estática.
−
*Liña 23: cambiar o tamaño da fonte
+
*Liña 24: 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''
+
*Liña 25: devolve a cadea en formato HTML no que en Android se podería chamar ''Texto con estilo mostrable''
  
  
Línea 221: Línea 225:
  
 
*A imaxe amosa o deseño do Layout
 
*A imaxe amosa o deseño do Layout
−
[[Image:Android_2013_U2_07_TextView_11.jpg|300px]]
+
[[Image:PDM_TextView_9.JPG|400px]]
 
*Observar a liña de separación e despois desta, dúas etiquetas de texto.
 
*Observar a liña de separación e despois desta, dúas etiquetas de texto.
  
Línea 252: Línea 256:
  
 
     <TextView
 
     <TextView
−
         android:id="@+id/tv_html"
+
         android:id="@+id/txtTv_html_UD02_01_TextView"
 
         android:layout_width="wrap_content"
 
         android:layout_width="wrap_content"
 
         android:layout_height="wrap_content"
 
         android:layout_height="wrap_content"
Línea 258: Línea 262:
  
 
     <TextView
 
     <TextView
−
         android:id="@+id/tv_string"
+
         android:id="@+id/txtTv_string_UD02_01_TextView"
 
         android:layout_width="wrap_content"
 
         android:layout_width="wrap_content"
 
         android:layout_height="wrap_content"
 
         android:layout_height="wrap_content"
Línea 270: Línea 274:
  
 
*A imaxe amosa a aplicación en execución:
 
*A imaxe amosa a aplicación en execución:
−
[[Image:Android_2013_U2_07_TextView_12.jpg|300px]]
+
[[Image:PDM_TextView_6.JPG|500px]]
 
*Observar como a primeira etiqueta despois da liña ten o contido do que almacena o EditText vermello.
 
*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.
 
*A segunda etiqueta  despois da liña amosa a etiqueta vermella pasada polo método '''toString'''. Observar como xa non hai negriña.
Línea 276: Línea 280:
  
 
*O código que fai iso posible é o seguinte:
 
*O código que fai iso posible é o seguinte:
−
<syntaxhighlight lang="java" line highlight="21,22,33,35,36">
+
<syntaxhighlight lang="java" line highlight="21,22,30,32,33">
−
package com.example.u2_07_textview;
+
package es.cursoandroid.cifprodolfoucha.aprendiendo.UI.CaixaTexto;
  
−
import android.R.string;
 
 
import android.app.Activity;
 
import android.app.Activity;
 
import android.graphics.Color;
 
import android.graphics.Color;
Línea 285: Línea 288:
 
import android.text.Html;
 
import android.text.Html;
 
import android.text.Spanned;
 
import android.text.Spanned;
−
import android.view.Menu;
 
 
import android.widget.TextView;
 
import android.widget.TextView;
  
−
public class U2_07_TextView extends Activity {
+
import es.cursoandroid.cifprodolfoucha.aprendiendo.R;
  
−
@Override
+
public class UD02_01_TextView extends Activity {
−
protected void onCreate(Bundle savedInstanceState) {
+
 
−
super.onCreate(savedInstanceState);
+
    @Override
−
setContentView(R.layout.activity_u2_07__text_view);
+
    protected void onCreate(Bundle savedInstanceState) {
−
+
        super.onCreate(savedInstanceState);
−
final TextView tvOrixinal = (TextView) findViewById(R.id.tv_orixinal);
+
        setContentView(R.layout.activity_ud02_01__text_view);
−
final TextView tvJava = (TextView) findViewById(R.id.tv_java);
+
 
−
final TextView tvHtml = (TextView) findViewById(R.id.tv_html);
+
        final TextView txtOrixinal = findViewById(R.id.txtOrixinal_UD02_01_TextView);
−
final TextView tvString = (TextView) findViewById(R.id.tv_string);
+
        final TextView tvJava = (TextView) findViewById(R.id.txtJava_UD02_01_TextView);
−
+
        final TextView tvHtml = (TextView) findViewById(R.id.txtTv_html_UD02_01_TextView);
−
tvJava.setText("Etiqueta modificada en java: "+tvOrixinal.getText());
+
        final TextView tvString = (TextView) findViewById(R.id.txtTv_string_UD02_01_TextView);
−
+
 
−
//tvJava.setText(tvJava.getText()+". Máis texto. ");
+
        tvJava.setText("Etiqueta modificada en java: "+txtOrixinal.getText());
−
tvJava.append(". Máis texto. ");
+
        tvJava.append(". Máis texto. ");
−
tvJava.setTextColor(Color.RED);
+
        tvJava.setTextColor(Color.RED);
−
tvJava.setTextSize(20);
+
        tvJava.setTextSize(20);
−
tvJava.append(Html.fromHtml("<p><br>Isto está en <b>negriña</b> e noutra liña.</p>"));
+
        tvJava.append(Html.fromHtml("<p><br>Isto está en <b>negriña</b> e noutra liña.</p>"));
−
+
 
−
+
        tvHtml.setText(Html.toHtml((Spanned)(tvJava.getText())));
−
tvHtml.setText(Html.toHtml((Spanned)(tvJava.getText())));
+
 
−
+
        //tvString.setText(""+tvJava.getText());
−
//tvString.setText(""+tvJava.getText());
+
        tvString.setText(tvJava.getText().toString());
−
tvString.setText(tvJava.getText().toString());
+
    }
−
 
−
}
 
−
 
−
@Override
 
−
public boolean onCreateOptionsMenu(Menu menu) {
 
−
// Inflate the menu; this adds items to the action bar if it is present.
 
−
getMenuInflater().inflate(R.menu.u2_07__text_view, menu);
 
−
return true;
 
−
}
 
 
}
 
}
 
</syntaxhighlight>
 
</syntaxhighlight>
  
−
*Liña 33: colle o valor da etiqueta vermella e a pasa a formato Html.
+
*Liña 30: 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).
+
*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===
 
===Definición de constantes/recursos xml===
Línea 339: Línea 332:
 
</gallery>
 
</gallery>
 
*Engadimos os novos recurso de tipo string. Observar as liñas marcadas.
 
*Engadimos os novos recurso de tipo string. Observar as liñas marcadas.
−
<syntaxhighlight lang="xml" line highlight="8-10" enclose="div">
+
<syntaxhighlight lang="xml" line highlight="6-8" enclose="div">
 
<?xml version="1.0" encoding="utf-8"?>
 
<?xml version="1.0" encoding="utf-8"?>
 
<resources>
 
<resources>
−
 
+
     <string name="app_name">Aprendendo</string>
−
     <string name="app_name">U2_07_TextView</string>
 
−
    <string name="action_settings">Settings</string>
 
 
     <string name="hello_world">Hello world!</string>
 
     <string name="hello_world">Hello world!</string>
  
 
     <string name="texto_tv_java">Dá igual o que escribamos aquí. Neste exemplo, ao lanzar a aplicación, vaise cambiar este texto</string>
 
     <string name="texto_tv_java">Dá igual o que escribamos aquí. Neste exemplo, ao lanzar a aplicación, vaise cambiar este texto</string>
 
     <string name="texto_tv_html">Cadena html do tv_java. Realizarase en java</string>
 
     <string name="texto_tv_html">Cadena html do tv_java. Realizarase en java</string>
−
     <string name="texto_tv_string">String do tv_java. Realizarase en java</string>  
+
     <string name="texto_tv_string">String do tv_java. Realizarase en java</string>
−
   
 
 
</resources>
 
</resources>
 
</syntaxhighlight>
 
</syntaxhighlight>
Línea 357: Línea 347:
  
 
<gallery caption="Uso recursos string" widths="350" heights="300px" perrow="2">
 
<gallery caption="Uso recursos string" widths="350" heights="300px" perrow="2">
−
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.
+
Image:PDM_Res_2.JPG| No layout facemos uso dos recursos anteriores: (CTRL + Barra espaciadora). Lembrar gardar antes o ficheiro de recursos anterior.
−
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.
+
Image:PDM_Res_1.JPG| Xa está todo correcto. <u>Nota</u> Antes da versión 2.3 de Android Studio creábase un arquivo 'dimesn.xml' onde se gardaban constantes que tiñan que ver co tamaño dos marxes.
 
</gallery>
 
</gallery>
  
−
<syntaxhighlight lang="xml" line highlight="6">
 
−
<resources>
 
−
 
−
    <!-- Default screen margins, per the Android Design guidelines. -->
 
−
    <dimen name="activity_horizontal_margin">16dp</dimen>
 
−
    <dimen name="activity_vertical_margin">16dp</dimen>
 
−
    <dimen name="alto_liña">2sp</dimen>
 
−
   
 
−
</resources>
 
−
</syntaxhighlight>
 
  
  
  
 
*A continuación vaise crear un ficheiro de recurso para as cores.
 
*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.
 +
 
<gallery caption="Crear ficheiro de recursos" widths="350" heights="300px" perrow="2">
 
<gallery caption="Crear ficheiro de recursos" widths="350" heights="300px" perrow="2">
−
Image:Android_2013_U2_07_TextView_18.jpg| En '''/res/values''' creamos un novo ficheiro '''Android XML File'''
+
Image:PDM_Res_3.JPG| En '''/res/values''' creamos un novo ficheiro '''Values Resource File'''
−
Image:Android_2013_U2_07_TextView_19.jpg| Indicamos un nome significativo, vale calquera. Neste caso ''colors'' e gardamos.
+
Image:PDM_Res_4.JPG| Indicamos un nome significativo, vale calquera. Neste caso ''meucolors'' e gardamos.
−
Image:Android_2013_U2_07_TextView_20.jpg| Imos ao ficheiro
+
Image:PDM_Res_5.JPG| Editamos o arquivo e engadimos os valores que queiramos. No exemplo son cores, polo que a etiqueta a empregar é <color>. Todos os tipos que podemos empregar en res (colors, dimens, string) levan un atributo '''name''' que ven ser o nome da constate e un valor entre as etiquetas <color>valor</color>.
−
Image:Android_2013_U2_07_TextView_21.jpg| Engadimos un elemento
+
Image:PDM_Res_6.JPG| Agora no deseñador de layout seleccionamos o view ao que queremos asinar esta cor e prememos nos puntos suspensivos.
−
Image:Android_2013_U2_07_TextView_22.jpg| Seleccionar '''Color''' e aceptar.
+
Image:PDM_Res_7.JPG| Na sección 'Color' a nivel de 'Proxecto', podemos seleccionar a cor creada.
−
Image:Android_2013_U2_07_TextView_23.jpg| Engadimos a definición dunha cor graficamente ...
+
Image:PDM_Res_8.JPG| Podemos facer o proceso contrario e crear a constante de cor dende o deseñador. Seleccionamos outra etiqueta calquera e prememos nos puntos suspensivos do seu cor.
−
Image:Android_2013_U2_07_TextView_24.jpg| ... en modo texto.
+
Image:PDM_Res_9.JPG| Prememos en '''Add new resource''' => '''Add new values'''.
 +
Image:PDM_Res_10.JPG| Escollemos a cor que queiramos utilizar e asociamos un nome.
 +
Image:PDM_Res_11.JPG| A nova cor créase automaticamente no arquivo 'colors.xml'.
 
</gallery>
 
</gallery>
  
−
*Ficheiro de recurso de cores:
+
 
−
<syntaxhighlight lang="xml" line highlight="3-4">
+
* Modifiquemos o ficheiro de recursos de '''meucores''':
 +
<syntaxhighlight lang="xml" line enclose="div" highlight="3-4">
 
<?xml version="1.0" encoding="utf-8"?>
 
<?xml version="1.0" encoding="utf-8"?>
 
<resources>
 
<resources>
Línea 398: Línea 385:
  
 
*Uso dos recursos no layout. Como sempre, observar as liñas marcadas
 
*Uso dos recursos no layout. Como sempre, observar as liñas marcadas
−
<syntaxhighlight lang="xml" line highlight="12,18,19,23,24,30,36,38">
+
<syntaxhighlight lang="xml" line enclose="div" highlight="13,19,20,24,25,31,37-39">
 +
<?xml version="1.0" encoding="utf-8"?>
 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 
     xmlns:tools="http://schemas.android.com/tools"
 
     xmlns:tools="http://schemas.android.com/tools"
 
     android:layout_width="match_parent"
 
     android:layout_width="match_parent"
 
     android:layout_height="match_parent"
 
     android:layout_height="match_parent"
−
     android:orientation="vertical"
+
     android:padding="20sp"
−
     android:padding="20sp" >
+
     android:orientation="vertical" >
  
 
     <TextView
 
     <TextView
−
         android:id="@+id/tv_orixinal"
+
         android:id="@+id/txtOrixinal_UD02_01_TextView"
 
         android:layout_width="wrap_content"
 
         android:layout_width="wrap_content"
 
         android:layout_height="wrap_content"
 
         android:layout_height="wrap_content"
Línea 413: Línea 401:
  
 
     <TextView
 
     <TextView
−
         android:id="@+id/tv_java"
+
         android:id="@+id/txtJava_UD02_01_TextView"
 
         android:layout_width="wrap_content"
 
         android:layout_width="wrap_content"
 
         android:layout_height="wrap_content"
 
         android:layout_height="wrap_content"
Línea 421: Línea 409:
 
     <View
 
     <View
 
         android:layout_width="match_parent"
 
         android:layout_width="match_parent"
−
         android:layout_height="@dimen/alto_liña"
+
         android:layout_height="2sp"
 
         android:background="@color/negro" />
 
         android:background="@color/negro" />
  
 
     <TextView
 
     <TextView
−
         android:id="@+id/tv_html"
+
         android:id="@+id/txtTv_html_UD02_01_TextView"
 
         android:layout_width="wrap_content"
 
         android:layout_width="wrap_content"
 
         android:layout_height="wrap_content"
 
         android:layout_height="wrap_content"
Línea 431: Línea 419:
  
 
     <TextView
 
     <TextView
−
         android:id="@+id/tv_string"
+
         android:id="@+id/txtTv_string_UD02_01_TextView"
 
         android:layout_width="wrap_content"
 
         android:layout_width="wrap_content"
 
         android:layout_height="wrap_content"
 
         android:layout_height="wrap_content"
 +
        android:text="@string/texto_tv_string"
 
         android:textColor="@color/azul"
 
         android:textColor="@color/azul"
−
         android:textSize="16sp"
+
         android:textSize="16sp" />
−
        android:text="@string/texto_tv_string"/>
 
−
       
 
 
</LinearLayout>
 
</LinearLayout>
 
</syntaxhighlight>
 
</syntaxhighlight>
  
−
*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.
+
 
 +
'''<u>NOTA IMPORTANTE:</u> 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.
 +
 
 +
* <u>Importante:</u> O tamaño que se garde en <dimen> ten que especificar a unidade, sp ou dp da forma: <dimen name='nome'>10'''sp'''</dimen>
 +
 
 +
 
 +
 
 +
<br />
 +
===Clickable / No Clickable===
 +
 
 +
* Todos os view´s teñen a propiedade 'Clickable' no que a documentación indica que serve para que o view resposte aos eventos de Click sobre o mesmo.
 +
: O 'problema' o temos en que ao xestionar o evento de Click dende o código, ao poñer a orde <u>setOnClickListener(new OnClickListener)</u> volvemos a facer clickable o control.
 +
: Se queremos que isto non pase teremos que desabilitar o clickable dende o código da seguinte maneira:
 +
<syntaxhighlight lang="java" line  enclose="div" highlight="8">
 +
        tvJava.setOnClickListener(new View.OnClickListener() {
 +
            @Override
 +
            public void onClick(View v) {
 +
                TextView t = (TextView)v;
 +
                t.setText("OLA");
 +
            }
 +
        });
 +
        tvJava.setClickable(false);
 +
</syntaxhighlight>
 +
 
 +
: Como vemos, a orde setClickable <u><b>ten que estar despois do rexistro de eventos</b></u>.
 +
: O mesmo sucede con calquera View.
 +
 
 +
 
 +
: <u>Nota:</u> Grazas a [http://likecharm.blogspot.com/2014/12/viewsetclickable-does-not-work_21.html likeCharm polo seu post].
 +
 
 +
 
 +
 
 +
* Outro aspecto a ter en conta é cando temos direccións web, de correo, mapas, como parte do texto que se amosa.
 +
: Nese caso entraría en xogo as propiedades '''autolink''' e '''linksclickables'''.
 +
: Por exemplo:
 +
<syntaxhighlight lang="java" line  enclose="div" highlight="">
 +
tvJava.setText("https://wwww.google.es");
 +
</syntaxhighlight>
 +
 
 +
 
 +
* Por último, se queremos amosar enlaces html no TextView dentro do código da Activity da forma:
 +
<syntaxhighlight lang="java" line  enclose="div" highlight="2">
 +
tvJava.append(Html.fromHtml("<br /><a href=\"http://www.google.com\">This is a link</a>"));
 +
tvJava.setMovementMethod(LinkMovementMethod.getInstance());
 +
</syntaxhighlight>
 +
 
 +
: Temos que engadir a liña 2 para que o faga. Máis información [https://developer.android.com/reference/android/text/method/LinkMovementMethod neste enlace].
 +
 
 +
==Accesibilidade==
 +
 
 +
* Podemos activar el modo TalkBack [https://support.google.com/accessibility/android/answer/6007100 seguindo as instrucións deste enlace].
 +
: 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:
 +
<syntaxhighlight lang="xml" line highlight="9">
 +
    <TextView
 +
        android:id="@+id/textView7"
 +
        android:layout_width="wrap_content"
 +
        android:layout_height="wrap_content"
 +
        android:layout_marginStart="8dp"
 +
        android:layout_marginTop="8dp"
 +
        android:text="Dime o teu nome:"
 +
        android:textSize="18sp"
 +
        android:contentDescription="Nome a enviar"
 +
        app:layout_constraintStart_toStartOf="parent"
 +
        app:layout_constraintTop_toTopOf="@+id/etNome_UD03_01_Intents" />
 +
</syntaxhighlight>
 +
 
 +
 
 +
* 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.
 +
<syntaxhighlight lang="xml" line highlight="9">
 +
    <TextView
 +
        android:id="@+id/textView7"
 +
        android:layout_width="wrap_content"
 +
        android:layout_height="wrap_content"
 +
        android:layout_marginStart="8dp"
 +
        android:layout_marginTop="8dp"
 +
        android:text="Dime o teu nome:"
 +
        android:textSize="18sp"
 +
        android:labelFor="@id/etNome_UD03_01_Intents"
 +
        app:layout_constraintStart_toStartOf="parent"
 +
        app:layout_constraintTop_toTopOf="@+id/etNome_UD03_01_Intents" />
 +
 
 +
    <EditText
 +
        android:id="@+id/etNome_UD03_01_Intents"
 +
        android:layout_width="wrap_content"
 +
        android:layout_height="wrap_content"
 +
        android:layout_marginStart="8dp"
 +
        android:layout_marginTop="8dp"
 +
        android:ems="10"
 +
        android:inputType="textPersonName"
 +
        app:layout_constraintStart_toEndOf="@+id/textView7"
 +
        app:layout_constraintTop_toTopOf="parent" />
 +
</syntaxhighlight>
 +
 
 +
 
 +
 
 +
* Para comprobar que non temos problemas de accesibilidade:
 +
 
 +
<gallery caption="Comprobando a accesibilidade" widths="350" heights="300px" perrow="2">
 +
Image:PDM_Accesibilidad_1.jpg| Imos o menú do Android Studio e escollemos a opción '''Analyce''' =>'''Inspect Code'''.
 +
Image:PDM_Accesibilidad_2.jpg| Indicamos se queremos analizar o proxecto completo ou a activity actual.
 +
Image:PDM_Accesibilidad_3.jpg| Se hai algún problema teremos que ir a sección de '''Lint''' e ver os erros que aparecen.
 +
</gallery>
 +
 
 +
 
 +
<br />
 +
==Empregando recursos definidos Res==
 +
 
 +
* Xa veremos na sección de [https://wiki.cifprodolfoucha.es/index.php?title=Internacionalizaci%C3%B3n internacionalización] como podemos ter cadeas en varios idiomas e que Android recolla a correcta en función do idioma escollido a nivel de S.O. nos axustes.
 +
 
 +
: Pero existen outras cadeas que poida que empreguemos directamente no código da aplicación e non a través de /res/ no layout da activity.
 +
: Esas cadeas tamén necesitarán que estean traducidas a diferentes idiomas (se a nosa aplicación ten esa funcionalidade).
 +
: Para iso non podemos 'teclear' directamente a cadea de texto no código como fixemos nos exercicios anteriores, da forma:
 +
 
 +
<syntaxhighlight lang="java" line highlight="19">
 +
package es.cursoandroid.cifprodolfoucha.aprendiendo.UI.CaixaTexto;
 +
 
 +
import android.app.Activity;
 +
import android.os.Bundle;
 +
import android.widget.TextView;
 +
 
 +
import es.cursoandroid.cifprodolfoucha.aprendiendo.R;
 +
 
 +
public class UD02_01_TextView extends Activity {
 +
 
 +
    @Override
 +
    protected void onCreate(Bundle savedInstanceState) {
 +
        super.onCreate(savedInstanceState);
 +
        setContentView(R.layout.activity_ud02_01__text_view);
 +
 
 +
        final TextView txtOrixinal = findViewById(R.id.txtOrixinal_UD02_01_TextView);
 +
        final TextView tvJava = (TextView) findViewById(R.id.txtJava_UD02_01_TextView);
 +
 
 +
        tvJava.setText("Etiqueta modificada en java: "+txtOrixinal.getText());
 +
 
 +
    }
 +
}
 +
</syntaxhighlight>
 +
 
 +
: Como vemos, temos o texto 'Etiqueta modificada en Java:' escrito directamente no código.
 +
 
 +
 
 +
* O que temos que facer é crear unha constante nun arquivo de recurso en '/res/values/' ou empregar un xa creado, por exemplo '''strings.xml'''.
 +
: Dentro deste arquivo (ou outro creado) definimos a constante có texto asociado da forma:
 +
<syntaxhighlight lang="java" line highlight="3">
 +
<resources>
 +
    <string name="app_name">Aprendiendo</string>
 +
    <string name="hello_world">Hello world!</string>
 +
    <string name="mensaxe_UD2_01_TextView">Etiqueta modificada en Java:</string>
 +
 
 +
</resources>
 +
</syntaxhighlight>
 +
 
 +
: Como vemos o nome da constante é '''mensaxe_UD2_01_TextView'''
 +
 
 +
* Agora para empregar dita constante no código Java, temos que facer uso do [https://developer.android.com/reference/android/content/Context.html#getResources() método getResources()] da forma:
 +
<syntaxhighlight lang="java" line highlight="11,12">
 +
public class UD02_01_TextView extends AppCompatActivity {
 +
 
 +
    @Override
 +
    protected void onCreate(Bundle savedInstanceState) {
 +
        super.onCreate(savedInstanceState);
 +
        setContentView(R.layout.activity_ud02_01__text_view);
 +
 
 +
        final TextView txtOrixinal = findViewById(R.id.txtOrixinal_UD02_01_TextView);
 +
        final TextView tvJava = (TextView) findViewById(R.id.txtJava_UD02_01_TextView);
 +
 
 +
        String mensaxe = getResources().getString(R.string.mensaxe_UD2_01_TextView);
 +
        tvJava.setText(mensaxe + txtOrixinal.getText());
 +
    }
 +
}
 +
 
 +
</syntaxhighlight>
 +
 
 +
 
 +
* <u>Nota:</u> O método setText está sobrecargado e permite empregar como dato un recurso de tipo String directamente da forma: '''R.string.nome_recurso'''  , pero isto soamente o podemos facer se non engadimos unha nova cadea da forma: tvJava.setText(R.string.nome_recurso + " nova cadea."). Neste caso debemos empregar a opción anterior para obter primeiro a cadea definida no recurso ou ben empregar o método append(). Lembrar que R.tipo_recurso.nome_recurso é un número definido na clase R. Soamente aqueles métodos que acepten un parámetro de tipo 'int resId' traducirán ese número ao recurso definido en /res/values/.
 +
 
 +
 
 +
<br />
 +
 
 +
==Atributos a coñecer==
 +
 
 +
* Tedes a lista enteira de atributos en https://developer.android.com/reference/android/widget/TextView
 +
 
 +
* Dentro de este control tedes que coñecer e saber empregar os seguintes atributos:
 +
:* id
 +
:* layout_width, layout_height
 +
:* margin
 +
:* padding
 +
:* gravity
 +
:* laberFor
 +
:* enabled
 +
:* lines
 +
:* maxlength
 +
:* text
 +
:* textXXXX (Size, Color, Style, Alignment)
 +
:* fontFamily
 +
:* typeFace
 +
:* visibility
 +
 
 +
 
 +
<br />
 +
==Métodos mínimos a coñecer no manexo dos TextView´s==
 +
 
 +
:* Referenciar a un TextView có método findViewById.
 +
:* Recuperar o contido do texto.
 +
:* Cambiar o contido do texto, podendo empregar recursos gardados en /res/values.
 +
:* Engadir novo texto a un existente.
 +
:* Modificar propiedades básicas, como cor, tamaño, visibilidade,...(e os métodos getZZZZZ para obter os seus valores)
 +
:* Xestionar o evento de Click sobre calquera TextView e sabelo facer [https://wiki.cifprodolfoucha.es/index.php?title=PDM_Xesti%C3%B3n_de_Eventos#Xesti.C3.B3n_Eventos:_Empregando_Clases_an.C3.B3nimas empregando interfaces anónimas] ou [https://wiki.cifprodolfoucha.es/index.php?title=PDM_Xesti%C3%B3n_de_Eventos#Xesti.C3.B3n_Eventos:_Implementado_a_interface_na_Activity implementando a interface na Activity].
 +
 
 +
: Exemplos:
 +
::<syntaxhighlight lang="java" enclose="div" highlight="">
 +
        TextView tv = findViewById(R.id.txvTextoTextView);  // Referenciamos a un TextView que estea na Activity.
 +
 
 +
        String cadeatv = tv.getText().toString();          // Garda a cadea do TextView'''
 +
 
 +
        tv.setText("Cambiamos o texto directamente");      // Cambiamos o contido por unha cadea concreta
 +
        tv.setText(R.string.app_name);                      // Cambiamos o contido por unha cadea gardada nu arquivo de recursos en /res/values/. Desta forma o texto pode traducirse.
 +
        String textoRes = getResources().getString(R.string.app_name);
 +
        tv.setText(textoRes + " texto que ven da BD");      // Se queremos concatenar texto dunha base de datos cun texto que poida ser traducido
 +
 
 +
        tv.append(" engadimos novo texto");                // append para engadir
 +
 
 +
        tv.setTextSize(20);                                // Axustar tamaño
 +
 
 +
        tv.setTextColor(Color.BLUE);                        // Cambia a cor
 +
 
 +
        tv.setVisibility(View.VISIBLE);                    // As constantes aparecen no Android Studio ao teclear. GONE fai que non ocupe espazo no Layout.
 +
 
 +
        tv.setOnClickListener(new View.OnClickListener() {  // Xestionamos o evento de Click cunha interface anónima
 +
            @Override
 +
            public void onClick(View view) {
 +
                Toast.makeText(getApplicationContext(),"TextView Pulsado",Toast.LENGTH_LONG).show();
 +
            }
 +
        });
 +
</syntaxhighlight>
 +
 
 +
 
 +
 
 +
 
 +
 
 +
<br />
 +
'''[https://wiki.cifprodolfoucha.es/index.php?title=Programaci%C3%B3n_de_dispositivos_m%C3%B3biles#UNIDADE_2:_A_interface_de_usuario. Enlace a la página principal de la UD2]'''
 +
<br />
 +
<br />
 +
'''[https://wiki.cifprodolfoucha.es/index.php?title=Programación_de_dispositivos_móbiles Enlace a la página principal del curso]'''
 +
<br />
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
  
  
  
 
<br> -- [[Usuario:angelfg|Ángel D. Fernández González]] e [[Usuario:Carrion|Carlos Carrión Álvarez]] -- (2015).
 
<br> -- [[Usuario:angelfg|Ángel D. Fernández González]] e [[Usuario:Carrion|Carlos Carrión Álvarez]] -- (2015).

Revisión actual del 12:55 21 nov 2020

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     }
Nota: Ao poñer final aplicado a un obxecto dunha clase impedimos que poidamos cambiar a referencia de txtOrixinal a outro obxecto da clase TextView.
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>



Clickable / No Clickable

  • Todos os view´s teñen a propiedade 'Clickable' no que a documentación indica que serve para que o view resposte aos eventos de Click sobre o mesmo.
O 'problema' o temos en que ao xestionar o evento de Click dende o código, ao poñer a orde setOnClickListener(new OnClickListener) volvemos a facer clickable o control.
Se queremos que isto non pase teremos que desabilitar o clickable dende o código da seguinte maneira:
1         tvJava.setOnClickListener(new View.OnClickListener() {
2             @Override
3             public void onClick(View v) {
4                 TextView t = (TextView)v;
5                 t.setText("OLA");
6             }
7         });
8         tvJava.setClickable(false);
Como vemos, a orde setClickable ten que estar despois do rexistro de eventos.
O mesmo sucede con calquera View.


Nota: Grazas a likeCharm polo seu post.


  • Outro aspecto a ter en conta é cando temos direccións web, de correo, mapas, como parte do texto que se amosa.
Nese caso entraría en xogo as propiedades autolink e linksclickables.
Por exemplo:
1 tvJava.setText("https://wwww.google.es");


  • Por último, se queremos amosar enlaces html no TextView dentro do código da Activity da forma:
1 tvJava.append(Html.fromHtml("<br /><a href=\"http://www.google.com\">This is a link</a>"));
2 tvJava.setMovementMethod(LinkMovementMethod.getInstance());
Temos que engadir a liña 2 para que o faga. Máis información neste enlace.

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:



Empregando recursos definidos Res

  • Xa veremos na sección de internacionalización como podemos ter cadeas en varios idiomas e que Android recolla a correcta en función do idioma escollido a nivel de S.O. nos axustes.
Pero existen outras cadeas que poida que empreguemos directamente no código da aplicación e non a través de /res/ no layout da activity.
Esas cadeas tamén necesitarán que estean traducidas a diferentes idiomas (se a nosa aplicación ten esa funcionalidade).
Para iso non podemos 'teclear' directamente a cadea de texto no código como fixemos nos exercicios anteriores, da forma:
 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 }
Como vemos, temos o texto 'Etiqueta modificada en Java:' escrito directamente no código.


  • O que temos que facer é crear unha constante nun arquivo de recurso en '/res/values/' ou empregar un xa creado, por exemplo strings.xml.
Dentro deste arquivo (ou outro creado) definimos a constante có texto asociado da forma:
1 <resources>
2     <string name="app_name">Aprendiendo</string>
3     <string name="hello_world">Hello world!</string>
4     <string name="mensaxe_UD2_01_TextView">Etiqueta modificada en Java:</string>
5 
6 </resources>
Como vemos o nome da constante é mensaxe_UD2_01_TextView
 1 public class UD02_01_TextView extends AppCompatActivity {
 2 
 3     @Override
 4     protected void onCreate(Bundle savedInstanceState) {
 5         super.onCreate(savedInstanceState);
 6         setContentView(R.layout.activity_ud02_01__text_view);
 7 
 8         final TextView txtOrixinal = findViewById(R.id.txtOrixinal_UD02_01_TextView);
 9         final TextView tvJava = (TextView) findViewById(R.id.txtJava_UD02_01_TextView);
10 
11         String mensaxe = getResources().getString(R.string.mensaxe_UD2_01_TextView);
12         tvJava.setText(mensaxe + txtOrixinal.getText());
13     }
14 }


  • Nota: O método setText está sobrecargado e permite empregar como dato un recurso de tipo String directamente da forma: R.string.nome_recurso , pero isto soamente o podemos facer se non engadimos unha nova cadea da forma: tvJava.setText(R.string.nome_recurso + " nova cadea."). Neste caso debemos empregar a opción anterior para obter primeiro a cadea definida no recurso ou ben empregar o método append(). Lembrar que R.tipo_recurso.nome_recurso é un número definido na clase R. Soamente aqueles métodos que acepten un parámetro de tipo 'int resId' traducirán ese número ao recurso definido en /res/values/.



Atributos a coñecer

  • Dentro de este control tedes que coñecer e saber empregar os seguintes atributos:
  • id
  • layout_width, layout_height
  • margin
  • padding
  • gravity
  • laberFor
  • enabled
  • lines
  • maxlength
  • text
  • textXXXX (Size, Color, Style, Alignment)
  • fontFamily
  • typeFace
  • visibility



Métodos mínimos a coñecer no manexo dos TextView´s

  • Referenciar a un TextView có método findViewById.
  • Recuperar o contido do texto.
  • Cambiar o contido do texto, podendo empregar recursos gardados en /res/values.
  • Engadir novo texto a un existente.
  • Modificar propiedades básicas, como cor, tamaño, visibilidade,...(e os métodos getZZZZZ para obter os seus valores)
  • Xestionar o evento de Click sobre calquera TextView e sabelo facer empregando interfaces anónimas ou implementando a interface na Activity.
Exemplos:
        TextView tv = findViewById(R.id.txvTextoTextView);  // Referenciamos a un TextView que estea na Activity.

        String cadeatv = tv.getText().toString();           // Garda a cadea do TextView'''

        tv.setText("Cambiamos o texto directamente");       // Cambiamos o contido por unha cadea concreta
        tv.setText(R.string.app_name);                      // Cambiamos o contido por unha cadea gardada nu arquivo de recursos en /res/values/. Desta forma o texto pode traducirse.
        String textoRes = getResources().getString(R.string.app_name);
        tv.setText(textoRes + " texto que ven da BD");      // Se queremos concatenar texto dunha base de datos cun texto que poida ser traducido

        tv.append(" engadimos novo texto");                 // append para engadir

        tv.setTextSize(20);                                 // Axustar tamaño

        tv.setTextColor(Color.BLUE);                        // Cambia a cor

        tv.setVisibility(View.VISIBLE);                     // As constantes aparecen no Android Studio ao teclear. GONE fai que non ocupe espazo no Layout.

        tv.setOnClickListener(new View.OnClickListener() {  // Xestionamos o evento de Click cunha interface anónima
            @Override
            public void onClick(View view) {
                Toast.makeText(getApplicationContext(),"TextView Pulsado",Toast.LENGTH_LONG).show();
            }
        });




Enlace a la página principal de la UD2

Enlace a la página principal del curso







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