Uso de Xamarin.Android Designer

Este artículo es un tutorial de Xamarin.Android Designer. Muestra cómo crear una interfaz de usuario para una aplicación de explorador de colores pequeña. Esta interfaz de usuario se crea completamente en el Diseñador.

Información general

Las interfaces de usuario de Android se pueden crear mediante declaración usando archivos XML o mediante programación escribiendo código. Xamarin.Android Designer permite a los desarrolladores crear y modificar visualmente diseños declarativos, sin necesidad de editar manualmente archivos XML. El Diseñador también proporciona comentarios en tiempo real que permiten al desarrollador evaluar los cambios de la interfaz de usuario sin tener que volver a implementar la aplicación en un dispositivo o en un emulador. Estas características del Diseñador pueden acelerar enormemente el desarrollo de la interfaz de usuario de Android. En este artículo se muestra cómo usar Xamarin.Android Designer para crear visualmente una interfaz de usuario.

Sugerencia

Las versiones más recientes de Visual Studio admiten la apertura de archivos .xml dentro de Android Designer.

Android Designer admite tanto archivos .axml como .xml.

Tutorial

El objetivo de este tutorial es usar Android Designer para crear una interfaz de usuario para una aplicación de explorador de colores de ejemplo. La aplicación de explorador de colores presenta una lista de colores, sus nombres y sus valores RGB. Obtendrá información sobre cómo agregar widgets a la Superficie de diseño, así como a diseñar estos widgets visualmente. Después, obtendrá información sobre cómo modificar widgets de manera interactiva en la Superficie de diseño o mediante el panel Propiedades del Diseñador. Por último, verá cómo se ve el diseño cuando la aplicación se ejecuta en un dispositivo o emulador.

Visual Studio

Creación de un nuevo proyecto

El primer paso es crear un nuevo proyecto de Xamarin.Android. Inicie Visual Studio, haga clic en Nuevo proyecto... y elija la plantilla Visual C# > Android > Aplicación Android (Xamarin). Asigne el nombre DesignerWalkthrough a la nueva aplicación y haga clic en Aceptar.

En el cuadro de diálogo Nueva aplicación Android, elija Aplicación en blanco y haga clic en Aceptar:

Agregar un diseño

El siguiente paso consiste en crear un LinearLayout que contendrá los elementos de la interfaz de usuario. Haga clic con el botón derecho en Recursos/diseño en el Explorador de soluciones y seleccione Agregar > Nuevo elemento.... En el cuadro de diálogo Agregar nuevo elemento, seleccione Diseño de Android. Asigne un nombre al archivo list_item y haga clic en Agregar:

El nuevo diseño de list_item se muestra en el Diseñador. Observe que se muestran dos paneles: la Superficie de diseño para list_item está visible en el panel izquierdo mientras que su archivo XML de origen se muestra en el panel derecho. Puede intercambiar las posiciones de los paneles Superficie de diseño y Origen haciendo clic en el icono Intercambiar paneles ubicado entre los dos paneles:

En el menú Ver, haga clic en Otras ventanas > Esquema del documento para abrir el Esquema del documento. El Esquema del documento muestra que el diseño contiene actualmente un único widget LinearLayout:

El siguiente paso es crear la interfaz de usuario para la aplicación de explorador de colores dentro de LinearLayout.

Crear la interfaz de usuario de elemento de lista

Si el panel Cuadro de herramientas no se muestra, haga clic en la pestaña Cuadro de herramientas de la izquierda. En el Cuadro de herramientas, desplácese hacia abajo hasta la sección Imágenes y elementos multimedia y desplácese hacia abajo hasta que encuentre ImageView:

Como alternativa, puede escribir ImageView en la barra de búsqueda para buscar ImageView:

Arrastre ImageView a la Superficie de diseño (ImageView se usará para mostrar una muestra de color en la aplicación del explorador de colores):

A continuación, arrastre un widget LinearLayout (Vertical) desde el Cuadro de herramientas al Diseñador. Observe que un contorno azul indica los límites del LinearLayout agregado. El Esquema del documento muestra que es un elemento secundario de LinearLayout, ubicado en imageView1 (ImageView):

Al seleccionar ImageView en el Diseñador, el contorno azul se mueve para rodear a ImageView. Además, la selección se mueve a imageView1 (ImageView) en el Esquema del documento:

A continuación, arrastre un widget Text (Large) desde el Cuadro de herramientas al LinearLayout recién agregado. Observe que el Diseñador usa resaltados verdes para indicar dónde se insertará el nuevo widget:

A continuación, agregue un widget Text (Small) debajo del widget Text (Large):

En este momento, la Superficie del diseñador debe ser similar a la siguiente captura de pantalla:

Si los dos widgets textView no están dentro de linearLayout1, puede arrastrarlos a linearLayout1 en el Esquema del documento y colocarlos para que aparezcan como se muestra en la captura de pantalla anterior (con sangría debajo de linearLayout1).

Organización de la interfaz de usuario

El siguiente paso consiste en modificar la interfaz de usuario para que se muestre ImageView a la izquierda, con los dos widgets TextView apilados a la derecha de ImageView.

1. Seleccione ImageView.

2. En la ventana Propiedades, escriba el ancho en el cuadro de búsqueda y busque Ancho de diseño.

3. Cambie el valor de Ancho de diseño a wrap_content:

Otra manera de cambiar la configuración de Width es hacer clic en el triángulo del lado derecho del widget para alternar su valor de ancho a wrap_content:

Al hacer clic de nuevo en el triángulo, se devuelve el valor Width a match_parent. A continuación, vaya al panel Esquema del documento y seleccione la raíz LinearLayout:

Con la raíz LinearLayout seleccionada, vuelva al panel Propiedades, escriba orientación en el cuadro de búsqueda y busque el valor de Orientación. Cambie la Orientación a horizontal:

En este momento, la Superficie del diseñador debe ser similar a la siguiente captura de pantalla. Observe que los widgets TextView se han movido a la derecha de ImageView:

Modificar el relleno

El siguiente paso es modificar la configuración de relleno y el margen en la interfaz de usuario para proporcionar más espacio entre los widgets. Seleccione ImageView en la Superficie de diseño. En el panel Propiedades, escriba min en el cuadro de búsqueda. Escriba 70dp en Altura mínima y 50dp en Ancho mínimo:

En el panel Propiedades, escriba padding en el cuadro de búsqueda y escriba 10dp en Relleno. Estos valores minHeight, minWidth y padding agregan relleno alrededor de todos los lados de ImageView y lo alargan verticalmente. Tenga en cuenta que el XML de diseño cambia a medida que escribe estos valores:

La configuración de relleno inferior, izquierdo, derecho y superior se puede establecer independientemente escribiendo valores en los campos Relleno inferior, Relleno izquierdo, Relleno derecho y Relleno superior, respectivamente. Por ejemplo, establezca el campo Relleno izquierdo en 5dp y los campos Relleno inferior, Relleno derecho y Relleno superior en 10dp:

A continuación, ajuste la posición del widget LinearLayout que contiene los dos widgets TextView. En Esquema del documento, seleccione linearLayout1. En la ventana Propiedades, escriba margin en el cuadro de búsqueda. Establezca el Margen de diseño inferior, Margen de diseño izquierdo y Margen de diseño superior en 5dp. Establezca el Margen de diseño derecho en 0dp:

Eliminar la imagen predeterminada

Dado que ImageView se usa para mostrar colores (en lugar de imágenes), el siguiente paso es quitar el origen de la imagen predeterminado agregado por la plantilla.

1. Seleccione ImageView en la Superficie del diseñador.

2. En Propiedades, escriba src en el cuadro de búsqueda.

3. Haga clic en el cuadrado pequeño situado a la derecha del valor de la propiedad Src y seleccione Restablecer:

Esto quita android:src="@android:drawable/ic_menu_gallery" del XML de origen para ese ImageView.

Agregar un contenedor ListView

Ahora que el diseño de list_item está definido, el siguiente paso es agregar un ListView al diseño principal. ListView contendrá una lista de list_item.

En el Explorador de soluciones, abra Resources/layout/activity_main.axml. En el Cuadro de herramientas, busque el widget ListView y arrástrelo a la Superficie de diseño. ListView en el Diseñador estará en blanco, excepto las líneas azules que describen su borde cuando está seleccionado. Puede ver el Esquema del documento para comprobar que ListView se agregó correctamente:

De manera predeterminada, se proporciona a ListView un valor Id de @+id/listView1. Aunque listView1 todavía está seleccionado en el Esquema del documento, abra el panel Propiedades, haga clic en Organizar por y seleccione Categoría. Abra Principal, busque la propiedad Id y cambie su valor a @+id/myListView:

En este momento, la interfaz de usuario está lista para usarse.

Ejecución de la aplicación

Abra MainActivity.cs y reemplace su código por lo siguiente:

using Android.App;
using Android.Widget;
using Android.Views;
using Android.OS;
using Android.Support.V7.App;
using System.Collections.Generic;

namespace DesignerWalkthrough
{
    [Activity(Label = "@string/app_name", Theme = "@style/AppTheme", MainLauncher = true)]
    public class MainActivity : AppCompatActivity
    {
        List<ColorItem> colorItems = new List<ColorItem>();
        ListView listView;

        protected override void OnCreate(Bundle savedInstanceState)
        {
            base.OnCreate(savedInstanceState);

            // Set our view from the "main" layout resource
            SetContentView(Resource.Layout.activity_main);
            listView = FindViewById<ListView>(Resource.Id.myListView);

            colorItems.Add(new ColorItem()
            {
                Color = Android.Graphics.Color.DarkRed,
                ColorName = "Dark Red",
                Code = "8B0000"
            });
            colorItems.Add(new ColorItem()
            {
                Color = Android.Graphics.Color.SlateBlue,
                ColorName = "Slate Blue",
                Code = "6A5ACD"
            });
            colorItems.Add(new ColorItem()
            {
                Color = Android.Graphics.Color.ForestGreen,
                ColorName = "Forest Green",
                Code = "228B22"
            });

            listView.Adapter = new ColorAdapter(this, colorItems);
        }
    }

    public class ColorAdapter : BaseAdapter<ColorItem>
    {
        List<ColorItem> items;
        Activity context;
        public ColorAdapter(Activity context, List<ColorItem> items)
            : base()
        {
            this.context = context;
            this.items = items;
        }
        public override long GetItemId(int position)
        {
            return position;
        }
        public override ColorItem this[int position]
        {
            get { return items[position]; }
        }
        public override int Count
        {
            get { return items.Count; }
        }
        public override View GetView(int position, View convertView, ViewGroup parent)
        {
            var item = items[position];

            View view = convertView;
            if (view == null) // no view to re-use, create new
                view = context.LayoutInflater.Inflate(Resource.Layout.list_item, null);
            view.FindViewById<TextView>(Resource.Id.textView1).Text = item.ColorName;
            view.FindViewById<TextView>(Resource.Id.textView2).Text = item.Code;
            view.FindViewById<ImageView>(Resource.Id.imageView1).SetBackgroundColor(item.Color);

            return view;
        }
    }

    public class ColorItem
    {
        public string ColorName { get; set; }
        public string Code { get; set; }
        public Android.Graphics.Color Color { get; set; }
    }
}

Este código usa un adaptador ListView personalizado para cargar información de color y mostrar estos datos en la interfaz de usuario que se acaba de crear. Para mantener este ejemplo corto, la información de color está codificada de forma rígida en una lista, pero el adaptador se podría modificar para extraer información de color de un origen de datos o para calcularla sobre la marcha. Para obtener más información acerca de los adaptadores ListView, consulte ListView.

Compile y ejecute la aplicación. La captura de pantalla siguiente es un ejemplo de cómo aparece la aplicación cuando se ejecuta en un dispositivo:

Visual Studio para Mac

Creación de un nuevo proyecto

El primer paso es crear un nuevo proyecto de Xamarin.Android.

Inicie Visual Studio para Mac y haga clic en Nuevo proyecto.... Elija la plantilla Aplicación de Android y haga clic en Siguiente:

Asigne el nombre DesignerWalkthrough a la nueva aplicación. En Plataformas de destino, seleccione Más reciente y mayor y haga clic en Siguiente:

En la siguiente pantalla de diálogo, haga clic en Crear.

Agregar un diseño

El siguiente paso consiste en crear un LinearLayout que contendrá los elementos de la interfaz de usuario.

En Visual Studio para Mac, haga clic con el botón derecho en Recursos/diseño en el panel Solución y seleccione Agregar > Nuevo archivo.... En el cuadro de diálogo Nuevo archivo, seleccione Android > Diseño. Asigne un nombre al archivo list_item y haga clic en Nuevo:

Después de agregar este archivo, el nuevo diseño de list_item se muestra en la Superficie de diseño (si ve el mensaje, Este proyecto contiene recursos que no se compilaron correctamente, la representación podría verse afectada, haga clic en Compilar > Compilar todo para compilar el proyecto):

Haga clic en la pestaña Origen de la parte inferior del Diseñador para ver el origen XML de este diseño. Al hacer clic en la pestaña Esquema del documento de la derecha, se muestra que el diseño contiene actualmente un único widget LinearLayout:

El siguiente paso es crear la interfaz de usuario para la aplicación de explorador de colores.

Crear la interfaz de usuario de elemento de lista

Haga clic en la pestaña Diseñador en la parte inferior de la pantalla para volver a la Superficie del diseñador. En el panel Cuadro de herramientas de la derecha, desplácese hacia abajo hasta la sección Imágenes y elementos multimedia y busque ImageView:

Como alternativa, puede escribir ImageView en la barra de búsqueda para buscar ImageView:

Arrastre ImageView a la Superficie de diseño (ImageView se usará para mostrar una muestra de color en la aplicación del explorador de colores):

A continuación, arrastre un widget LinearLayout (Vertical) desde el Cuadro de herramientas a la Superficie de diseño. Observe que un contorno azul indica los límites del LinearLayout agregado. El Esquema del documento muestra que es un elemento secundario de LinearLayout, que se encuentra debajo de imageView1 (ImageView):

Al seleccionar ImageView en el Diseñador, el contorno azul se mueve para rodear a ImageView. Además, la selección se mueve a imageView1 (ImageView) en el Esquema del documento:

A continuación, arrastre un widget Text (Large) desde el Cuadro de herramientas al LinearLayout recién agregado. Observe que a medida que arrastra el mouse a la Superficie de diseño, se resalta dónde se insertará el nuevo widget. El widget Text (Large) debe encontrarse dentro de linearLayout1, como se muestra aquí:

A continuación, agregue un widget Text (Small) debajo del widget Text (Large). En este punto, la Superficie de diseño debe ser similar a la siguiente captura de pantalla:

Si los dos widgets textView no están dentro de linearLayout1, puede arrastrarlos a linearLayout1 en el Esquema del documento y colocarlos para que aparezcan como se muestra en la captura de pantalla anterior (con sangría debajo de linearLayout1).

Organización de la interfaz de usuario

El siguiente paso consiste en modificar la interfaz de usuario para que se muestre ImageView a la izquierda, con los dos widgets TextView apilados a la derecha de ImageView.

1. Con ImageView seleccionado, haga clic en la pestaña Propiedades.

2. Justo debajo de la pestaña Propiedades, haga clic en Diseño.

3. Desplácese hacia abajo hasta ViewGroup y cambie el valor Width a wrap_content:

Otra manera de cambiar la configuración de Width es hacer clic en el triángulo del lado derecho del widget para alternar su valor de ancho a wrap_content:

Al hacer clic de nuevo en el triángulo, se devuelve el valor Width a match_parent. A continuación, vaya al panel Esquema del documento y seleccione la raíz LinearLayout:

Con la raíz LinearLayout seleccionada, vuelva a la pestaña Propiedades y haga clic en Widget. Cambie el valor Orientation a horizontal como se muestra a continuación. En este punto, la Superficie de diseño debe ser similar a la siguiente captura de pantalla. Observe que los widgets TextView se han movido a la derecha de ImageView:

Modificar el relleno

El siguiente paso es modificar la configuración de relleno y margen en la interfaz de usuario para proporcionar más espacio entre los widgets. Seleccione y ImageView haga clic en la pestaña Diseño en Propiedades. Cambie Min Width a 50dp, Min Height a 70dp y Padding a 10dp. Esto aplica relleno alrededor de todos los lados de ImageView y los alarga verticalmente:

La configuración de relleno superior, derecho, inferior e izquierdo se puede establecer de forma independiente escribiendo valores en los campos de relleno Top, Right, Bottom y Left, respectivamente. Por ejemplo, establezca el valor de relleno Left en 5dp y los valores de relleno Top, Right y Bottom en 10dp. Tenga en cuenta que el valor de Padding cambia a una lista separada por comas de estos valores:

A continuación, ajuste la posición del widget LinearLayout que contiene los dos widgets TextView. En Esquema del documento, seleccione linearLayout1. En el panel Propiedades, seleccione la pestaña Diseño. Desplácese hacia abajo hasta la sección ViewGroup y establezca los márgenes Left, Top, Right y Bottom en 5dp, 5dp, 0dp y 5dp respectivamente:

Eliminar la imagen predeterminada

Dado que ImageView se usa para mostrar colores (en lugar de imágenes), el siguiente paso es quitar el origen de la imagen predeterminado agregado por la plantilla.

1. Seleccione ImageView.

2. Haga clic en la pestaña Widget en Propiedades.

3. Desactive el valor Src para que esté en blanco:

Esto quita android:src="@android:drawable/ic_menu_gallery" del XML de origen para ese ImageView.

Agregar un contenedor ListView

Ahora que el diseño de list_item está definido, el siguiente paso es agregar un ListView al diseño principal. ListView contendrá una lista de list_item.

En el Explorador de soluciones, abra Resources/layout/Main.axml. Haga clic en el widget Button (si existe) y elimínelo. En el Cuadro de herramientas, busque el widget ListView y arrástrelo a la Superficie de diseño. ListView en el Diseñador estará en blanco, excepto las líneas azules que describen su borde cuando está seleccionado. Puede ver el Esquema del documento para comprobar que ListView se agregó correctamente:

De manera predeterminada, se proporciona a ListView un valor Id de @+id/listView1. Aunque listView1 todavía está seleccionado en el Esquema del documento, abra el panel Propiedades, haga clic en Organizar por y seleccione Categoría. Abra Principal, busque la propiedad Id y cambie su valor a @+id/myListView:

En este momento, la interfaz de usuario está lista para usarse.

Ejecución de la aplicación

Abra MainActivity.cs y reemplace su código por lo siguiente:

using Android.App;
using Android.Widget;
using Android.Views;
using Android.OS;
using System.Collections.Generic;

namespace DesignerWalkthrough
{
    [Activity(Label = "@string/app_name", MainLauncher = true)]
    public class MainActivity : Activity
    {
        List<ColorItem> colorItems = new List<ColorItem>();
        ListView listView;

        protected override void OnCreate(Bundle savedInstanceState)
        {
            base.OnCreate(savedInstanceState);

            // Set our view from the "main" layout resource
            SetContentView(Resource.Layout.Main);
            listView = FindViewById<ListView>(Resource.Id.myListView);

            colorItems.Add(new ColorItem()
            {
                Color = Android.Graphics.Color.DarkRed,
                ColorName = "Dark Red",
                Code = "8B0000"
            });
            colorItems.Add(new ColorItem()
            {
                Color = Android.Graphics.Color.SlateBlue,
                ColorName = "Slate Blue",
                Code = "6A5ACD"
            });
            colorItems.Add(new ColorItem()
            {
                Color = Android.Graphics.Color.ForestGreen,
                ColorName = "Forest Green",
                Code = "228B22"
            });

            listView.Adapter = new ColorAdapter(this, colorItems);
        }
    }

    public class ColorAdapter : BaseAdapter<ColorItem>
    {
        List<ColorItem> items;
        Activity context;
        public ColorAdapter(Activity context, List<ColorItem> items)
            : base()
        {
            this.context = context;
            this.items = items;
        }
        public override long GetItemId(int position)
        {
            return position;
        }
        public override ColorItem this[int position]
        {
            get { return items[position]; }
        }
        public override int Count
        {
            get { return items.Count; }
        }
        public override View GetView(int position, View convertView, ViewGroup parent)
        {
            var item = items[position];

            View view = convertView;
            if (view == null) // no view to re-use, create new
                view = context.LayoutInflater.Inflate(Resource.Layout.list_item, null);
            view.FindViewById<TextView>(Resource.Id.textView1).Text = item.ColorName;
            view.FindViewById<TextView>(Resource.Id.textView2).Text = item.Code;
            view.FindViewById<ImageView>(Resource.Id.imageView1).SetBackgroundColor(item.Color);

            return view;
        }
    }

    public class ColorItem
    {
        public string ColorName { get; set; }
        public string Code { get; set; }
        public Android.Graphics.Color Color { get; set; }
    }
}

Este código usa un adaptador ListView personalizado para cargar información de color y mostrar estos datos en la interfaz de usuario que se acaba de crear. Para mantener este ejemplo corto, la información de color está codificada de forma rígida en una lista, pero el adaptador se podría modificar para extraer información de color de un origen de datos o para calcularla sobre la marcha. Para obtener más información acerca de los adaptadores ListView, consulte ListView.

Compile y ejecute la aplicación. La captura de pantalla siguiente es un ejemplo de cómo aparece la aplicación cuando se ejecuta en un dispositivo:

Resumen

En este artículo se explica el proceso de uso de Xamarin.Android Designer en Visual Studio para crear una interfaz de usuario para una aplicación básica. Se mostró cómo crear la interfaz para un solo elemento de una lista y se mostró cómo agregar widgets y diseñarlos visualmente. También se explica cómo asignar recursos y, a continuación, establecer varias propiedades en esos widgets.