domingo, 7 de agosto de 2011

Elementos básicos del interface de usuario – TextView - Basic elements of the user interface


En los ejemplos vistos hasta ahora, siempre hemos utilizado Layouts de distintas clases y como elemento hijo un TextView o etiqueta. Como ya sabeis sirve para mostrar un texto por pantalla.
Su definición en un fichero xml es muy sencilla:
<TextView 
    android:id="@+id/TxtView1"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="@string/TxtView1"
    />

Si queremos manipular el contenido desde nuestro código java no debemos olvidar incluir el atributo id puesto que es la única manera de hacer referencia a cualquier dato de la vista activa:
public class AndroideNovatoActivity extends Activity {
    /** Called when the activity is first created. */
   
    // Definimos una variable tipo TextView
      TextView txtView1;

      @Override
      public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        // Localizamos TxtView1 por su id
        txtView1 = (TextView) findViewById (R.id.TxtView1);
        // Le asignamos un texto alternativo
        txtView1.setText("Texto alternativo");
       
     }
}
Ya hemos comentado la importancia de asignar los textos de nuestro proyecto basandonos siempre en el fichero strings.xml, sobre todo si pretendemos que la aplicación sea multi idioma. Pues bien, para mantener esa premisa, desde Java debemos tener acceso a dicho fichero:

Fichero strings.xml:
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="TxtView1">Texto original de TextView</string>
    <string name="TxtView2">Texto alternativo de TextView</string>
    <string name="app_name">Hola Androide Novato</string>
</resources>

Fuente fichero java:
public class AndroideNovatoActivity extends Activity {
    /** Called when the activity is first created. */
   
    // Definimos una variable tipo TextView
      TextView txtView1;
    // Definimos una variable tipo String
      String string1;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        // Localizamos TxtView1 por su id
        txtView1 = (TextView) findViewById (R.id.TxtView1);
        // Localizamos el texto alternativo del fichero strings
        string1 = getString(R.string.TxtView2);
        // Asignamos el texto alternativo al TextView
        txtView1.setText(string1);
       
    }
} 
Vemos cómo cargamos en una variable String la cadena a mostrar y posteriormente la asignamos a la etiqueta con el método setText(string). La asignación podía haberse hecho directamente mediante: 
txtView1.setText(R.string.TxtView2);

 
Tambien podemos cambiar la fuente del texto como vimos en la entrada correspondiente de este blog e incluso el tamaño de la letra utilizando los métodos getTextSize y setTextSize como vemos:
// Leemos el tamaño actual del texto
float textSize = txtView1.getTextSize();
// Lo aumentamos en 10 unidades
txtView1.setTextSize(textSize+10);

 
El color del texto o el fondo con setTextColor y setBackgroundColor:
// Le cambiamos el color del texto
txtView1.setTextColor(Color.BLUE);
// Y el color del fondo
txtView1.setBackgroundColor(Color.GREEN);

 
El estilo del texto (bold, italic…) con setTypeface
// Cambiamos estilo del texto
txtView1.setTypeface(null, Typeface.BOLD);

 

Bueno, podeis ir probando todos los posibles atributos en xml o bien sus métodos asociados en java consultando como siempre la página de referencia de android developer.

Hasta la próxima.



miércoles, 3 de agosto de 2011

Elementos básicos del interface de usuario – Layouts (III)- Basic elements of the user interface

RelativeLayout: Este tipo de Layout sitúa sus elementos  en función de la posición de los otros componentes de la vista, lo cual nos da un control total de su disposición. Hasta ahora veíamos cómo los elementos aparecían en pantalla dispuestos en el mismo orden en que los definíamos en el xml. Con este tipo de Layout podemos indicar que un elemento lo queremos situar arriba o a la izquierda del que hemos definido en primer lugar.
Para poder hacer referencia a un elemento del Layout debemos definirle el atributo id : android:id="@+id/nombre"
Veamos un ejemplo:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
      <TextView 
          android:id="@+id/Uno"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="UNO"
          android:background="#ff0000"
          android:layout_below="@+id/Dos"
          />
      <TextView
          android:id="@+id/Dos"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="DOS"
          android:background="#0000ff"
          android:layout_below="@+id/Tres"
          /> 
      <TextView
          android:id="@+id/Tres"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="TRES"
          android:background="#dddddd"
          />
</RelativeLayout>

Como vemos hemos definido tres elementos que muestran los textos ‘UNO’, ‘DOS’ y ‘TRES’ pero al probarlo vemos que el orden cambia:



Aparece primero el ‘TRES’, después el ‘DOS’ y, por último el ‘UNO’. Esto es debido al atributo android:layout_below="@+id/Nombre" en el que indicamos que deseamos que aparezca bajo el elemento identificado.
Debemos llevar cuidado en no generar incongruencias indicando, por ejemplo, que el elemento Dos debe ir bajo el Uno y viceversa puesto que nos daría un error de ejecución.
Si no ponemos atributos en los elementos, ‘RelativeLayout’ se comporta como un ‘FrameLayout’, apelotonando todos los elementos en la esquina superior izquierda.
Otros atributos son:

  • android:layout_above="@+id/Nombre" Sitúa el elemento por encima del identificado.
  • android:layout_toRightOf="@+id/Nombre" Sitúa el elemento a la derecha del identificado.
  • android:layout_toLeftOf="@+id/Nombre" Sitúa el elemento a la izquierda del identificado.
  • android:layout_alignLeft="@+id/Nombre" Hace que el borde izquierdo del elemento esté alineado con el borde izquerdo del identificado.
  • android:layout_alignRight="@+id/Nombre" Hace que el borde derecho del elemento esté alineado con el borde derecho del identificado.
Y asi algunos más que podeis ver en la página dereferencia

AbsoluteLayout: Este tipo de Layout posiciona sus elementos según las coordenadas x/y proporcionadas (en pixels), de forma que podemos situarlos en cualquier posición de la pantalla.
No es recomendable utilizar este tipo de Layouts a no ser que estemos realizando una aplicación para un determinado tipo de dispositivos, puesto que podemos encontrarnos sorpresas al probarlo con distintas resoluciones.

Por ejemplo:

<?xml version="1.0" encoding="utf-8"?>
<AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
      <TextView 
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="UNO"
          android:background="#ff0000"
          android:layout_x="45px"
          android:layout_y="20px"
          />
      <TextView
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="DOS"
          android:background="#0000ff"
          android:layout_x="10px"
          android:layout_y="25px"
          />
      <TextView
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="TRES"
          android:background="#dddddd"
          android:layout_x="20px"
          android:layout_y="10px"
          />
</AbsoluteLayout>

Nos proporciona una vista como esta:

Para hacer pruebas con los distintos tipos de Layout y sus atributos podeis utilizar el editor que viene en el IDE Eclipse, que es bastante completo y nos da facilidades a la hora de ver todas las opciones disponibles en cada momento.


Hasta la próxima..