Android
2.10.Extendiendo la pantalla con ScrollView
Página 3 de 25
2. ESCRIBIR Y MANIPULAR TEXTO
2.1. Actividad básica: Hola Android
Comenzamos examinando el siguiente listado del programa por defecto generado por Eclipse al crear un nuevo proyecto android. Se trata de escribir el mensaje "Hola Android" en la pantalla. En este programa básico se define la clase Activity, que contiene el método onCreate() que se ejecuta cuando se crea la actividad (ver la sección A.1 en el apéndice para una explicación detallada de los elementos Java de esta actividad)
package prueba.android.hello;
import android.app.Activity;
public class Hello extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
}
}
Lo que hace la última instrucción del programa anterior setcontentview(R.layout.main), es "inflar" la vista de la pantalla (o "layout"). Esta vista está definida en el fichero main.xml, al que hace referencia la variable R.layout.main.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android=
"http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Hola Android"
/>
</LinearLayout>
La cadena de texto que queremos escribir en la pantalla se define en este fichero xml mediante TextView android:text="Hola Android". El resultado de ejecutar este proyecto en el emulador de android (AVD) se muestra en la figura 2.1.
Figura 2.1. Hola Android.
2.2. Color de fondo y formato del texto
A partir del fichero main.xml del ejemplo anterior podemos añadir otras propiedades de formato para modificar la presentación y el formato del texto. Por ejemplo, podemos:
• Cambiar el color de fondo a blanco en lugar de negro añadiendo el modificador android:background = "#ffffff" a la etiqueta LinearLayout.,
• Cambiar el color del texto a negro añadiendo en TextView el modificador android:textColor = "#000000".
• Cambiar el tamaño del texto a 24 puntos con android:textSize = "24sp".
• Centrar el texto mediante android:layout_gravity = "center". Nótese que para que esto surta efecto debemos definir la anchura de TextView igual a la anchura del texto que contiene mediante android:layout_width = "wrap_content", ya que con fill_parent se considera el texto igual de ancho que el Layout, que a su vez es igual de ancho que la pantalla y no es posible el centrado.
Figura 2.2. Hola Android en negro sobre blanco.
Con todos estos cambios el fichero main.xml quedaría de la siguiente forma:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:background="#ffffff"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TextView
android:layout_width="wrap_content"
android:layout_gravity="center"
android:layout_height="wrap_content"
android:textColor="#000000"
android:textSize="24sp"
android:text="Negro sobre blanco Android"
/>
El resultado puede verse en la figura 2.2.
2.3. Modificando el texto desde java
La cadena de texto que se muestra en pantalla está definida en el fichero de layout main.xml. Podemos modificarla desde java. Para ello primero añadimos una etiqueta (o ID) al texto TextView en el archivo xml:
<TextView
android:id="@+id/myTextView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textColor="#000000"
android:textSize="20sp"
android:text="Hola Android"
/>
Aqui hemos añadido la linea android:id y el texto quedará identificado mediante la etiqueta myTextView. A continuación en la clase Activity del código java escribimos la siguiente instrucción que define un objeto TextView asociado a la id myTextView que hemos indicado en main.xml:
TextView myTextView=(TextView) findViewById(R.id.myTextView);
El método findViewById() aplicado a variable R.id.myTextView se encarga de localizar el bloque en main.xml asociado a TextView. A continuación, definimos otro texto con el método setText():
myTextView.setText(
"He modificado TextView con un nuevo texto" +
"usando jav\a");
El programa java quedaría así:
package prueba.android.hello;
import android.app.Activity;
import android.os.Bundle;
import android.widget.TextView;
public class Hello extends Activity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
TextView myTextView=
(TextView) findViewById(R.id.myTextView);
myTextView.setText(
"He modificado TextView con un nuevo texto " +
"usando java");
}
}
Y el resultado se puede ver en la figura 2.3. setText() no modifica el texto que hay escrito en el fichero main.xml, sólo el que se muestra en la pantalla del teléfono.
Figura 2.3. Texto modificado con setText().
2.4. Modificando el color desde Java
También se pueden modificar otras propiedades del texto con java. Por ejemplo, setTextColor() para cambiar el color. Así, añadiendo la siguiente instrucción definiríamos el texto rojo:0
myTextView.setTextColor(Color.argb(255,255,0,0));
El método Color.argb(alpha,red,green,blue)construye el color asociado a las componentes de alpha (transparencia), rojo, verde y azul, que son números enteros entre 0 y 255. El resultado se ve en la figura 2.4.
Figura 2.4. Texto de color con setTextColor().
2.5. Añadir texto adicional con addView
Para añadir nuevo texto a un layout usamos el método LinearLayout. addView(TextView). Para ello debemos definir un nuevo objeto de tipo TextView mediante:
TextView tv=new TextView(this);
y sus propiedades, por ejemplo, color y tamaño:
tv.setTextColor(Color.argb(255,0,0,0));
tv.setTextSize(40);
y finalmente el texto a escribir:
tv.setText("añadiendo nuevo texto con addView");
Este objeto se debe añadir al layout que debemos definir previamente mediante:
LinearLayout ll =
(LinearLayout)findViewById(R.id.myLinearLayout);
ll.addView(tv);
donde findViewById(R.id.myLinearLayout) se refiere a la id del layout que habremos definido en el fichero main.xml:
<LinearLayout
......
android:id="@+id/myLinearLayout"
>
Figura 2.5. Añadiendo nuevo texto al layout.
El código completo para añadir un texto a un layout queda como sigue:
TextView tv=new TextView(this);
tv.setTextColor(Color.argb(255,0,0,0));
tv.setTextSize(40);
tv.setText("añadiendo nuevo texto con addView");
LinearLayout ll=
(LinearLayout)findViewById(R.id.myLinearLayout);
ll.addView(tv);
y el resultado puede verse en la figura 2.5.
2.6. Definir un método print()
El código del ejemplo anterior habrá que repetirlo cada vez que queramos añadir un nuevo texto al layout. Para simplificar la escritura podemos definir un método print(Layout,String)para añadir un texto a un layout. Esto nos permite ilustrar tambien el normal uso de Java en Android. Por ejemplo, añadimos el siguiente método a nuestra actividad:
public void print(LinearLayout ll, String texto){
TextView tv=new TextView(this);
tv.setTextColor(Color.argb(255,0,0,0));
tv.setTextSize(18);
tv.setText(texto);
ll.addView(tv);
}
de manera que para añadir un texto al layout nos basta llamar a este método:
LinearLayout ll =
(LinearLayout)findViewById(R.id.myLinearLayout);
print(ll,"Añadiendo texto al layout usando el método print()"
+" que hemos definido");
Además, podemos definir un método print()alternativo añadiendo parámetros para escribir el texto con un tamaño y un color dados:
public void print(LinearLayout ll, String texto,
int size, int r, int g, int b){
TextView tv=new TextView(this);
tv.setTextColor(Color.argb(255,r,g,b));
tv.setTextSize(size);
tv.setText(texto);
ll.addView(tv);
}
Ya podemos ejecutar este método cuanto queramos con distintos tamaños y colores, por ejemplo:
LinearLayout ll =
(LinearLayout)findViewById(R.id.myLinearLayout);
print(ll,"text size 18 red ",18,255,0,0);
print(ll,"text size 24 green ",24,0,255,0);
print(ll,"text size 28 blue ",28,0,0,255);
print(ll,"text size 32 amarillo ",32,255,255,0);
print(ll,"text size 28 magenta ",28,255,0,255);
print(ll,"text size 24 cyan ",24,0,255,255);
El resultado se muestra en la figura 2.6.
Figura 2.6. Resultado de escribir usando la función print().
2.7. Escribiendo resultados de operaciones
Utilizando setTex podemos escribir cualquier texto o el resultado de cualquier operación matemática, por ejemplo:
double a=2.25;
double b=1.25;
double c=a+b;
tv.setText("La suma de "+ a + " mas " + b + " es " + c );
Aunque setText admite sólo cadenas, estas se pueden concatenar con números usando el signo +. También podemos aprovechar la función print() definida en el ejemplo anterior. Aquí tenemos el programa Hello modificado para escribir el resultado de una operacion:
public class Hello extends Activity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
TextView myTextView =
(TextView)findViewById(R.id.myTextView);
myTextView.setText(
"Ejemplo de resultados de operaciones matemáticas" +
"usando java");
myTextView.setTextColor(Color.argb(255,255,0,0));
double a=2.25;
double b=1.25;
double c=a+b;
LinearLayout ll =
(LinearLayout)findViewById(R.id.myLinearLayout);
print(ll,
"La suma de "+ a + " mas " + b + " es " + c);
}
public void print(LinearLayout ll, String texto){
TextView tv=new TextView(this);
tv.setTextColor(Color.argb(255,0,0,0));
tv.setTextSize(18);
tv.setText(texto);
ll.addView(tv);
}
}
El resultado se puede ver en la figura 2.7.
Figura 2.7. Resultado de operaciones matemáticas.
2.8. Ejemplo: una tabla del seno
Otro ejemplo, en lugar de la simple suma anterior, escribamos una tabla de la función seno entre 0 y 1
LinearLayout ll=
(LinearLayout)findViewById(R.id.myLinearLayout);
print(ll,"\n Tabla de sin(x):\n");
for(int i=0;i<10;i++){
double x=i/10.0;
double sx=Math.sin(x);
print(ll, "sin( " + x + " ) = " + sx);
}
El resultado está en la figura 2.8. El símbolo \n indica nueva línea. Recordamos además en este ejemplo cómo se realiza un ciclo repetitivo en Java usando for().
Figura 2.8. Resultado de operaciones matemáticas. Tabla del seno.
2.9. Añadir texto con Append()
Se puede añadir texto a un objeto TextView usando el método append(). Por ejemplo:
public class HolaAndroid2 extends Activity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
View v=findViewById(R.id.myTextView);
TextView myTextView=(TextView) v;
myTextView.setText("Texto 1 definido con setText");
myTextView.append("\n Texto 2 con append");
myTextView.append("\n Texto 3 con append");
myTextView.append("\n Texto 4 con append");
}
}
El resultado se muestra en la figura 2.9.
Figura 2.9. Añadir texto a un textView con append().
2.10. Extendiendo la pantalla con ScrollView
Si vamos a escribir mucho texto en un Layout, llega un momento en que aquél se sale de la pantalla y ya no es posible verlo, aunque el texto en teoría está ahí (de forma virtual). Para remediar esto, se puede insertar el layout dentro de un ScrollView, que permite mover la vista hacia arriba o hacia abajo a lo largo del layout. Por ejemplo, la siguiente actividad escribe una tabla de la función seno con cien puntos, que llega a salirse de la pantalla:
public class HolaAndroid2 extends Activity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
View v=findViewById(R.id.myTextView);
TextView myTextView=(TextView) v;
for(double x=0; x<1; x=x+0.01){
double y=Math.sin(x);
myTextView.append("sin("+x+") = "+y+"\n");
}
}
Figura 2.10. Un ScrollView permite extender la vista y acceder a la
parte del texto oculta porque se sale de la pantalla.
Para verla completa basta modificar main.xml insertando el LinearLayout dentro de un ScrollView:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:background="#ffffff"
android:layout_height="wrap_content"
android:id="@+id/scrollView1"
android:layout_width="fill_parent">
<LinearLayout
android:id="@+id/linearLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:id="@+id/myTextView"
android:textColor="#000000"
android:textSize="12sp"
android:layout_gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hola Android"
/>
</LinearLayout>
</ScrollView>
El resultado se muestra en la figura 2.10. La barra vertical de la derecha indica el sector que se está mostrando.