Este artículo me ha parecido Sin valorarEste artículo me ha parecido MaloEste artículo me ha parecido RegularEste artículo me ha parecido BuenoEste artículo me ha parecido Muy BuenoSin valorar
Reportar este artículo al admistrador

El esquema de interface de usuario para aplicaciones móviles, esta compuesto de vistas (View) y grupos de vista (ViewGroup). Y con esta forma jerárquica podremos construir nuestra aplicación web, esto es, vistas donde el usuario puede interactuar con campos y botones por ejemplo y grupo de vista desde donde el usuario podrá acceder a otras vistas ocultas.

 

viewgroup.png

En este pequeño tutorial veremos cómo crear un campo de texto donde el usuario podrá escribir y un botón, al cual más adelante le aplicaremos una función.

Crear una vista

Para crear una vista, deberemos abrir el archivo activity_main.xml de la carpeta res/layout.

Puesto que elegimos BlankActivity en el wizard de Eclipse, el XML contiene una vista RelativeLayout con un campo de texto con nuestro querido "Hello World". Lo primero que vamos a hacer es eliminar la etiqueta y sustituir RelativeLayout por LinearLayout, además indicaremos que la orientación será horizontal con el atributo: android:orientation. Quedando así vuestro archivo activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
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 es un grupo de vista (una subclase de ViewGroup) que establece la orientación de sus hijos. El orden de aparición de sus hijos vendrá dado por su aparición en el XML.

Otros atributos de LinearLayout son android:layout_width y android:layout_height, que son requeridos en todos las vistas. Mediante su valor "match_parent" se establece que su dimensión debe ser la máxima de su vista padre.

Añadir un campo de texto

Para añadir un campo de texto, deberemos incluir la etiqueta dento de LayerLayout.

Como en todas las vistas, deberemos indicar las propiedades del campo dentro de su etiqueta.

android:id="@+id/edit_message"
       
android:layout_width="wrap_content"
       
android:layout_height="wrap_content"
       
android:hint="@string/edit_message"/>

Los atributos básicos son:

  • android:id
    para poder referenciar al campo desde otra parte de la aplicación, el símbolo @ es obligatorio si lo queremos llamar desde otra parte de la aplicación, seguido de "/" y del tipo de recurso, en este caso id y seguido de su nombre. El símbolo + es para cuando se define el recurso ID por primera vez.
  • android:layout_width y android:layout_height
    nos permiten indicar el ancho y alto del campo de texto, con wrap_content éstos se adaptarán al mínimo necesario para el texto. Si usáramos match_content, el campo de textos se adaptaría al máximo tamaño de su padre LinearLayout
  • android:hint
    es el texto que aparecerá cuando el campo esté vacío, similar a placeholder en HTML5, en este caso le hemos asignado una srting llamada edit_message que deberá estar definida en el archivo strings.xml del directorio res/values/
    Nota: se ha establecido como norma, el usar el mismo nombre para el ID del recurso y el string con el texto del mismo, de esta forma evitaremos colisiones en los nombres y facilitaremos su uso.

Añadir el recurso del string

Como ya he adelantado, para añadir definiciones de las variables, habrá que modificar el archivo res/values/strings.xml. En él podremos añadir todos los textos de nuestra aplicación, de esta forma facilitaremos la posibilidad de añadir un segundo idioma a la aplicación.

<?xml version="1.0" encoding="utf-8"?>

   
<stringname="app_name">Mi primera Aplicación
   
<stringname="edit_message">Escribe tu nombre
   
<stringname="button_send">Enviar
   
<stringname="menu_settings">Ajustes

Añadir un botón

Justo después de añadir nuestro campo de texto, deberemos añadir el botón de la siguiente forma:

    <Button
       
android:layout_width="wrap_content"
       
android:layout_height="wrap_content"
       
android:text="@string/button_send"/>

Con este script, veremos un campo de testo y un botón que ocupan lo justo para que se pueda meter el texto que les ayamos indicado, pero aunque para el botón es lo ideal, para el campo de texto no lo es, puesto que debería ocupar el mayor espacio posible. Para ello deberemos utilizar el atributo: android:weight.

Este nuevo atributo, permite distribuir las dimensiones de los objetos por un peso específico. Si tienes un campo con un peso igual a 2 y un botón con un peso de 1, el layout tiene un total de 3, con lo cual 2/3 artes se irán para el campo de texto y el resto, un 1/3, para el botón.

Por defecto, las vistas tienen un valor de 0, con lo que si asigmanos a nuestro campo un peso de 1, y dejamos al botón SIN peso, éste último adoptará el espacio mínimo y el campo el máximo posible.

Por otro lado, si al campo de texto le indicamos un peso = 1, deberemos indicar que su ancho sea 0 (0dp) para que así el sistema se evite su cálculo innecesario, quedando el código de la siguente manera:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayoutxmlns: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">
   
<EditTextandroid: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"/>

En el siguiente tutorial veremos cómo aplicar una función a nuestro botón "Enviar"

Galería (4 documentos)?
Indicando android:width = "wrap_content"
Indicando android:width = "wrap_content"
Indicando un peso de 1 (android:weight="1") al campo de texto.
Indicando un peso de 1 (android:weight="1") al campo de texto.

Comentar PhoneGap III: Interface de usuario

Nombre/Nick*:

E-mail:

Noooo puedes pasaaaaaar!!

Escribe lo que ves arriba, no lo entiendo...

Destacados

Bote de bolas de padel / tenis gratis

Buscador

Suscripciones

¿quieres recibir un aviso de actualizaciones?
(4 suscritos)

BlogRoll

Galería privada de fotos

Síguenos en...

Síguenos en twitterFeed de Noticias

Redes Sociales

The next version of Ubuntu is coming soon

ChatBox

Nick/Nombre:

¿, quieres BlaBla?:

Últimos comentarios

 bnP1v0l89LZ en No es tan dificil pasar de Windows... Ubuntu is here!!!: What a pleasure to find someone who idinitfees the issues so...
 Fdr0ZbKh en Curso de Internet para abuelos... NoEsTanDificil¡¡: ALSO, what about if there are no apliapnces or some broken w...
 xzVRAj9lwT en Instalar apache+php+mysql en Windows y Ubuntu: This is extremely interesting. A few questions:a. Does the a...
 nDsM6k1E en Cuando la publicidad educa...: Есть поÑ...
 ToPgErRfhh en Curso de Internet para abuelos... NoEsTanDificil¡¡: You are a complete idiot. Not only was Be8;#&c217ks rally t...
 1ltv0nC880 en No es tan dificil pasar de Windows... Ubuntu is here!!!: Je ne vois rien de réjouissant à cette minime augmenta...
 bQGiiV1npk en Preparándome para LinixMint Debian Edition: I got what you mean , thanks for posting .Woh I am pleased...
 qSSYoEn5AXb2 en NoEsTanDificil hacer fluir el tráfico: Well, I’ve never been a mom, but I do have a sign at t...
 dMlaGXDOf en Más que indignado...: what a tool. I hope we break his fucking ankle. We had to ...
 b4eON63ulb6a en Nuevo Ubuntu 11.10: Onko epäluottamus perusteltu? Miksi hallitus pitäisi v...
 88RE4eFM en Arreglar el problema de Eclipse en Ubuntu 9.10 para novatos... muy novatos...: rpz,quer ver como daki a uns 3 ou 4 dias, esse topico nao ta...
 6vlac6mi en El fenómeno Redes Sociales...: Ihh det er nu altid dejligt at høre fra en læser at de...
 uys6GeDE en Restaurar paneles en Ubuntu: Très belle documentation qui nous explique parfaitem...
 bPUi5a7tx en Instalar Ubuntu, nociones básicas...: on 20/11/2009 ...
 OVJhMvuTeyL en Instalar Ubuntu, nociones básicas...: Racja Szanowny Panie ,racja! Tylko czy nigdy Pan nie zetknÄ...

Estadísticas

Visitas totales (reales): 16942
Visitas de hoy: 38 (18 únicas)
Visitas activas (1): 1 invitados
Maximo de Usuarios: 35 (04-03-2010)
Páginas mostradas desde 01-01-2017: 28903