Desarrollo de un app Android (3)
Una interfaz gráfica de usuario se construye mediante objetos que heredan todos de
En este post aprenderemos a crear un layout XML que incluye un text field y un button. Programaremos el botón para pasar el contenido del text field a otra actividad al pulsarlo.
Al crear el proyecto se crea por defecto el layout principal
Todos los views deben especificar su tamaño mediante los atributos
Como
Cuando necesites añadir texto en la interfaz de usuario debes siempre especificar cada string como un recurso. Los recursos String permiten administrar todo el texto de la UI en un solo lugar; con lo cual se nos facilita la tarea de encontrar y actualizar el texto. Externalizando los string también nos permite adaptar nuestra aplicación a diferentes lenguajes definiendo nuevos ficheros de recursos String. Por defecto el proyecto Android incluye un fichero de recursos String en
Añadimos un
Hasta aquí el
Con el fin de mejorar la eficiencia del diseño cuando se especifica el peso se debe cambiar el width(ancho) del
Y asi es como se debería ver nuestro Layout:
Este post está divido en:
View y ViewGroup.Los objetos que heredan de View son usualmente UI widgets como buttons o text fields y los objetos que heredan de ViewGroup son contenedores de vista invisible.En este post aprenderemos a crear un layout XML que incluye un text field y un button. Programaremos el botón para pasar el contenido del text field a otra actividad al pulsarlo.
Crear un Linear Layout
Al crear el proyecto se crea por defecto el layout principal
main.xml en la carpeta res/layout. Primero borramos todo y reemplazamos por el siguiente código:
<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:orientation="horizontal">
</LinearLayout>
LinearLayout es un view group(una subclase de ViewGroup); permite mostrar los views en orientación vertical o horizontal mediante el atributo android:orientation. Cada hijo de LinearLayout aparecerá en la pantalla en el mismo orden que aparece en el XML.Todos los views deben especificar su tamaño mediante los atributos
android:layout_width y android:layout_height.Como
LinearLayout es la raiz del layout y se ha especificado un ancho y una altura "match_parent" ocupará la pantalla entera.Añadir un Text Field
<EditText android:id"@+id/edit_message"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="@string/edit_message" />
EditTextandroid:id- Provee un único identificador para el view el cual puedes usar para referenciar el objeto desde tu código para leer o manipularlo.
El signo "@" se requiere cuando se referencia un recurso desde un XML.
El signo "+" se necesita solo cuando se define el ID pro primera vez. Cuando se compila la app las herramientas del SDK usa el ID para crear un nuevo recurso en tu proyecto en el ficherogen/R.java android:layout_widthyandroid:layout_height- En vez de usar un tamaño especifico el valor
"wrap_content"especifica que el view puede ser tan grande como necesite para fijar su contenido al contenedor. Si el view utiliza el atributo"match_parent"o"fill_parent"llenaría la pantalla android:hint- Es una cadena de texto a mostrar cuando el text field está vacío. El valor
"@string/edit_message"referencia un recurso string definido en un fichero separado. Dado que referencia a un recurso en concreto(no un identificador) no necesita el signo "+". Posiblemente tengas un error ya que el recurso string aún no está definido ... lo haremos en la siguiente sección.
Añadir recursos String
Cuando necesites añadir texto en la interfaz de usuario debes siempre especificar cada string como un recurso. Los recursos String permiten administrar todo el texto de la UI en un solo lugar; con lo cual se nos facilita la tarea de encontrar y actualizar el texto. Externalizando los string también nos permite adaptar nuestra aplicación a diferentes lenguajes definiendo nuevos ficheros de recursos String. Por defecto el proyecto Android incluye un fichero de recursos String en
res/values/string.xml. Añadir un nuevo String llamado "edit_message" con el valor "Introduce un mensaje" (debes eliminar el String "hello_world").
El fichero strings.xml se verá algo así:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">My First App</string>
<string name="edit_message">Enter a message</string>
<string name="button_send">Send</string>
<string name="action_settings">Settings</string>
<string name="title_activity_main">MainActivity</string>
</resources>
Añadir un Button
Añadimos un
<Button> inmediatamente después del elemento <EditText>:<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/button_send" />"wrap_content" con lo cual el botón sera tan alto y tan ancho como el texto que contiene. Este botón no necesita android:id ya que no se referenciará de momento desde el código de nuestra Activity.
Hacer que el campo de texto rellene el ancho de pantalla
EditText y Button con ancho "wrap_content".Hasta aquí el
EditText y el Button serán tan grandes como su contenido.
Esto funciona perfectamente para el botón pero no para el campo de texto ya que el usuario puede introducir un texto demasiado largo. Sería mejor rellenar el ancho de pantalla sin usar con el campo de texto. Puedes hacer esto dentro de LinearLayout con la propiedad weight la cual se especifica usando el atributo android:layout_weight.
El valor de weight es un número que especifica la cantidad del espacio restante que el view puede consumir, en relación con la cantidad consumida por los views hermanos.
Esto funciona algo así como la cantidad de ingredientes en una receta de bebidas: "2 partes de vodka, 1 de licor de café..."; significa que dos tercios de la bebida es vodka. Por ejemplo si asignamos a un view un weight(peso) de 2 y a otro view un weight 1, suman 3, esto quiere decir que el primer view ocupará 2/3 del espacio restante y el segundo view rellena el resto. Si añadimos un tercer view y le damos un peso 1 ahora el primer view ocupa 1/2 del espacio restante y los otros dos view 1/4 cada uno.
Por defecto los views tienen peso "0". Si tenemos un solo view y le especificamos un peso mayor que 0, entonces el view rellenará cualquier espacio que queda después que a todas las vistas se les da el espacio que requieren. Por lo tanto para que nuestro elemento EditView rellene el espacio restante le asignamos weight 1 y dejar el boton sin peso.
<EditText
android:layout_weight="1"
... />
Con el fin de mejorar la eficiencia del diseño cuando se especifica el peso se debe cambiar el width(ancho) del
EditText a cero (0dp).
<EditText
android:layout_weight="1"
android:layout_width="0dp"
... />
Resultado de asignar todo el peso a EditText.
<?xml version="1.0" encoding="utf-8"?>
<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:orientation="horizontal">
<EditText android:id="@+id/edit_message"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:hint="@string/edit_message" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/button_send" />
</LinearLayout>
