TEXTVIEW,
BUTTON, EDITTEXT, LAYOUT
También conoceremos un
elemento nuevo, los layouts, estos son como contenedores que nos sirven para
ordenar los componentes de nuestra aplicación. Existen varios tipos:
LinearLayout, RelativeLayout, FrameLayout, TableLayout y GridLayout. Por ahora
nos centraremos solo en los RelativeLayout y LinearLayout que son los que más
vamos a usar en nuestras apps.
LinearLayout: existen dos
tipos, horizontales y verticales, tienen varias propiedades que son
indispensables, layout_width ancho del layout, layout_height alto del layout,
orientation orientación del layout, puede ser horizontal o vertical,
layout_gravity posiciona los elementos hijos en el centro, izquierda, derecha,
arriba izquierda, arriba derecha, etc.
RelativeLayout: en este
tipo de layout todos los componentes hijos tienen una posición relativa, es útil en determinados casos.
Aquí una comparación
entre lo que tenemos y lo que vamos a crear:
Bueno, empecemos con el análisis de nuestra app!!.
Primero vamos a mejorar
la presentación de la interfaz, usando los layouts. Lo usaremos de esta manera:
Si notan tenemos tres
LinearLayout dos verticales y uno horizontal, la orientación de cada layout se
refiere a como es que se van a acomodar sus elementos hijos, en el caso del
horizontal, cada elemento que coloquemos se desplazara a la izquierda o derecha
según el orden en el código, de igual manera para el layout vertical, estos se
desplazan hacia arriba o abajo según el código.
Antes de codificar la
interfaz grafica de nuestra app, tenemos que abarcar algunos tópicos:
- Para cargar imágenes en cualquier aplicación el proyecto dispone de varias carpetas en donde debemos ubicarlas, estas terminan en hdpi, mdpi, xhdpi y xxhdpi. De acuerdo a la calidad en pantalla del dispositivo, la app selecciona la imagen correspondiente. Lo recomendable es cargar la misma imagen con diferentes resoluciones para que al mostrarse en pantalla la imagen no pierda calidad (en caso de tener una imagen con poca resolución mostrándose en un dispositivo de alta resolución) o no sobrecargue la memoria (en caso de tener una imagen de alta resolución en un dispositivo con poca densidad de pantalla), puedes obtener mas información en la documentación oficial de android aquí. Para nuestro caso solo preparé una imagen para el fondo de pantalla, de tamaño 141 x 200 pixeles en formato jpg. La colocaré en la carpeta drawable-mdpi.
- En el anterior post, les hablé algo acerca de los tamaños dinámicos en las propiedades layout_width y layout_height estos son wrap_content, fill_parent y match_parent, si no sabemos que dimensiones tendrá nuestro componente podemos usar estos valores en las propiedades ancho y alto, wrap_content nos dice que el la dimensión se ajustará al contenido de dicho componente; fill_parent nos dice que la dimensión del componente se ajustará a la dimensión del contenedor padre, es decir que si tenemos un botón dentro de un layout de dimensión 50px de altura, el botón tendrá la misma dimensión en altura que la del layout que lo contiene; y por ultimo y poco usado tenemos match_parent que nos indica que la dimensión del componente abarcará todo lo que pueda (por así decirlo) ya sea en altura o anchura, generalmente este valor solo está presente en los contenedores generales, en nuestro ejemplo le asignamos este valor al alto y ancho de nuestro layout principal (padre), por queremos que abarque toda la pantalla del dispositivo. No se preocupen si no entendieron este tópico, conforme vayan experimentando se darán cuenta cómo funcionan (es difícil explicar con palabras). Aquí un ejemplo para ayudar con la explicación:
Ahora modificaremos
algunas propiedades de los botones y los textViews.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:background="@drawable/fondo"
android:orientation="vertical">
<TextView
android:id="@+id/tvTitulo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="40sp"
android:textStyle="bold"
android:textColor="#0099cc"
android:paddingBottom="40sp"
android:text="Saluda Usuario"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<EditText
android:id="@+id/etNombre"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Escribe tu nombre"
android:textColorHint="@android:color/white"
android:gravity="center"
android:maxLines="1"
android:textColor="@android:color/white"
android:textAlignment="center"/>
<Button
android:id="@+id/btSaludo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="@android:color/white"
android:text="HOLA"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical">
<TextView
android:id="@+id/tvSaludo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20sp"
android:textColor="@android:color/white"
android:paddingTop="10dp"
android:text="Saludo:"/>
<TextView
android:id="@+id/tvFraseSaludo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="30sp"
android:textStyle="bold"
android:paddingTop="30sp"
android:text="Hola Usuario"
android:textColor="@android:color/white"/>
</LinearLayout>
</LinearLayout>
Si comparamos el código xml que teníamos
anteriormente con el de ahora, notaremos nuevas propiedades adicionadas a
algunos controles, para empezar a nuestro LinearLayout general, le hemos
asignado un fondo con android:background="@drawable/fondo",(@drawable
inidica que es un recurso ubicado en las
carpetas drawable, donde tenemos la imagen) y para que los elementos hijos se
ubiquen en el centro de la pantalla usamos android:gravity="center”.
En el TextView para el titulo le asignamos
un tamaño de letra más grande con android:textSize="40sp" también
cambiamos el color de texto android:textColor="#0099cc",
usamos
android:textStyle="bold"
para
darle un estilo Negrita (Bold), y le dimos un espaciado hacia debajo de 40sp android:paddingBottom="40sp".
En cuanto al EditText le asignamos un
hint, que es un texto que aparece cuando éste está vacío, también le dimos
color de texto y alineación, si notamos en android:textColor="@android:color/white"
android tiene colores predefinidos como azul, rojo, blanco, negro, etc.
También se puede asignar de esta manera.
Al botón solo le dimos color de texto
blanco y a los dos TextView finales tienen las mismas propiedades que el
TextView título.
Una vez que tengamos la interfaz acabada podemos darle funcionalidad,
(aunque ya la tiene podemos mejorarla). Si se dieron cuenta, nuestra app tiene
un error importante en su ejecución, ¿qué pasa cuando no introducimos un nombre
y clickamos sobre el botón Hola?. Para
solucionarlo, debemos hacer un pequeño ajuste, debemos verificar si el usuario
introdujo un nombre, en caso de que la verificación se fallida podemos
simplemente no hacer nada o mostrar un mensaje diciéndole al usuario que
escriba su nombre. Para este cometido podemos usar un dialogo aunque para este
caso no es eficiente, existe una forma más fácil de mostrar mensajes al usuario
informándole de alguna situación o error, usaremos los Toast, seguro que alguna
vez te salieron avisos en la parte inferior de la aplicación indicándote algo
como esto.
package ejemplo.android.com.miprimeraaplicacion;
import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;
import android.widget.Toast;
public class ActividadPrincipal extends Activity {
//Declaracion de los componentes a usar
private EditText etNombre;
private TextView tvSaludo;
private Button btSaludo;
//Metodo que se ejecuta cuando se inicia la actividad
@Override //@Override quiere decir que estamos sobreescribiendo un metodo propio de la clase padre(Activity)
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.actividad_principal); //asocia el layout a la actividad y lo muestra en pantalla
//Referencia a los controles que vamos a usar, dentro de findViewById, esta el id respectivo
// a cada control creado en el archivo xml
etNombre = (EditText)findViewById(R.id.etNombre);
tvSaludo = (TextView)findViewById(R.id.tvFraseSaludo);
btSaludo = (Button)findViewById(R.id.btSaludo);
/*El proceso es el siguiente: cuando el usuario escribe su nombre, y presiona el boton (btSaludo)
se produce un evento, debemos capturar el evento y realizar una accion, en este caso el evento
es el click en el boton, la accion seria tomar el valor de la caja de texto (etNombre) y concatenarlo
con la palabra hola, posteriormente mostramos el texto completo en el textView (tvSaludo)
*/
//Creamos el escuchador del evento click del boton
btSaludo.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
//aqui ponemos lo que querramos que se haga cuando se presiona el boton
if(etNombre.getText().toString().length() > 0) { //Si se escribio algo en el EditText podemos continuar
String nombre = etNombre.getText().toString(); //1ro tomamos el texto de el editText (etNombre)
String saludo = "Hola " + nombre; //2do concatenamos la palabra hola + el texto introducido
tvSaludo.setText(saludo);//Finalmente mostramos el saludo completo en el textView
}
else{
/*Si no se introdujo nada se muestra un mensaje toast, este requiere de tres parametros
contexto, mensaje, duracion; en este caso el contexto es la activity ActividadPrincipal
el mensaje es una cadena cualquiera y la duracion podemos usar long o short
finalmente usamos .show() para mostrar el mensaje*/
Toast.makeText(ActividadPrincipal.this, "Por favor introduce tu nombre", Toast.LENGTH_LONG).show();
}
}
});
}
}
Bueno hasta aquí esta segunda entrega del curso, todas
las dudas que tengan serán aclaradas en los comentarios, voy adelantándoles
algo de la próxima entrega, empezaremos a usar scrolls, imágenes y darle más
funcionalidad a la app creando algo útil.
No hay comentarios:
Publicar un comentario