Interfaz de usuario – Layouts I.LinearLayout

Twitter: @roboxito

Comenzaremos una serie de artículos para conocer las herramientras que nos brinda  Android para la creación de interfaces de usuario. En este apartado conoceremos los layouts o capas contenedoras de controles.

Primero veremos el Linear Layout que nos permite colocar controles de forma horizontal o vertical, uno despues de otro. Y anidando esta capa una dentro de otra podremos generar la  percepción de una cuadrícula donde sea necesario.

Cuando recién creamos un proyecto en eclipse o motodev studio esta capa es la predeterminada, y esta configurada de forma vertical.Si colocamos otro control se mostrará debajo de la etiqueta de Hola Mundo. Ahora imaginamos que queremos crear una interfaz tipo acceso de usuario y contraseña.


Insertaremos los controles,hacemos click sobre alguno y presionamos el botón derecho del ratón para cambiar las propiedades ID,Text,Layout Width, Layout  Height, Orientation y si necesitamos algún otro seleccionamos Show in / Properties.

Es importante el orden en que se colocan los controles, así como su jerarquía de cual va dentro de cual, para auxiliarnos podemos usar la ventana Outline de Eclipse y asegurarnos que estén en el orden correcto.

  1. Cambiamos el texto de la etiqueta hola mundo, por “Ingrese credenciales”
  2. En la propiedad Text size ponemos 8pt,en Text style
    bold,en Padding 10dp,Layout gravity center.
  3. Agregamos un Linear Layout, del grupo Layouts
  4. Por defecto al insertar uno nuevo tiene orientación Horizontal.
  5. Agregamos un Text View sobre el nuevo Linear Layout, y de texto ponemos “Usuario”
  6. Editamos las propiedades: Text size 8pt, Padding 5dp,
    Layout width 120dp.
  7. Agregamos un EditText a lado del TextView.
    Editamos propiedades: Text por cadena vacía, Layout Height 65dp,
    Layout width Match parent,Input type textNoSuggestions|textWebEditTextID edtUsuario.
  8. Agregamos debajo otro Linear Layout
  9. Agregamos dentro otro Text View
    Editamos propiedades: Text size 8pt,Padding 5dp,
    Layout width 120dp.
  10. A lado otro Edit Text
  11. Editamos propiedades: Text por cadena vacía, Layout Height 65dp,
    Layout width Match parent, Input type textPassword, ID edtContrasenia.
  12. Debajo un Button
  13. Editamos propiedades: Layout height 65dp, Text “Aceptar”, Layout gravity right, ID btnAceptar.

Sobre las unidades de medida que hemos utilizado son dp que permite manejar un tamaño relativo al dispositivo, para que conserve la misma proporción en una pantalla pequeña como grande. y para las fuentes de letras pt que sería como un estandar los fuentes de letras.

Experimente con diferentes valores de medidas, sobre todo si su dispositivo o emulador maneja una resolución diferente a la aquí mostrada (QVGA).

Para agregar funcionalidad a la aplicación, podemos validar el usuario y contraseña, escribamos el siguiente código en el método OnCreate.


  Button btnAceptar=(Button) findViewById(R.id.btnAceptar);
  btnAceptar.setOnClickListener(new OnClickListener() {
	@Override
	public void onClick(View arg0) {
	// TODO Auto-generated method stub
	 EditText edtUsuario=(EditText)
			findViewById(R.id.edtUsuario);
	 EditText edtContrasenia=(EditText)
			findViewById(R.id.edtContrasenia);
	 if(edtUsuario.getText().toString().equals("android") &&
		edtContrasenia.getText().toString().equals("androide")) {
		Toast.makeText(arg0.getContext(), "Acceso concedido",
			Toast.LENGTH_SHORT).show();
	 } else {
		Toast.makeText(arg0.getContext(), "Acceso denegado: ["+
			edtUsuario.getText()+"]["+
			edtContrasenia.getText()+"]",Toast.LENGTH_SHORT).show();
	 }
    }
  });

Y la recomendación final es que diseñen primero sus interfaces en papel,o usando alguna  herramienta para crear interfaces de usuario, como la que sugiere @nekrox, Pencil que es gratuita y puede correr desde firefox o como programa independiente.

Código fuente en .zip, Archivo de instalación .apk

Comparte ➜

No comments

Add yours