Hello, Android: Inicio rápidoHello, Android: Quickstart

Esta guía, que consta de dos partes, le ayudará a compilar su primera aplicación de Xamarin.Android mediante Visual Studio y a comprender los aspectos básicos del desarrollo de aplicaciones de Android con Xamarin.In this two-part guide, you will build your first Xamarin.Android application with Visual Studio and develop an understanding of the fundamentals of Android application development with Xamarin.

Descargar ejemplo Descargar el ejemploDownload Sample Download the sample

Creará una aplicación que convierte un número de teléfono alfanumérico (escrito por el usuario) en un número de teléfono numérico y muestra ese número al usuario.You will create an application that translates an alphanumeric phone number (entered by the user) into a numeric phone number and display the numeric phone number to the user. La aplicación final tiene este aspecto:The final application looks like this:

Captura de pantalla de la aplicación una vez completadaScreenshot of app when it is complete

Requisitos de WindowsWindows requirements

Para seguir este tutorial, necesitará lo siguiente:To follow along with this walkthrough, you will need the following:

  • Windows 10.Windows 10.

  • Visual Studio 2019 o Visual Studio 2017 (versión 15.8 o posterior): Community, Professional o Enterprise.Visual Studio 2019 or Visual Studio 2017 (version 15.8 or later): Community, Professional, or Enterprise.

Requisitos de macOSmacOS requirements

Para seguir este tutorial, necesitará lo siguiente:To follow along with this walkthrough, you will need the following:

  • La versión más reciente de Visual Studio para Mac.The latest version of Visual Studio for Mac.

  • Un equipo Mac que ejecute macOS High Sierra (10.13) o una versión posterior.A Mac running macOS High Sierra (10.13) or later.

En este tutorial se presupone que está instalada la última versión de Xamarin.Android y que se está ejecutando en la plataforma que ha seleccionado.This walkthrough assumes that the latest version of Xamarin.Android is installed and running on your platform of choice. Para obtener una guía de instalación de Xamarin.Android, vea las guías Instalación de Xamarin.Android.For a guide to installing Xamarin.Android, refer to the Xamarin.Android Installation guides.

Configuración de los emuladoresConfiguring emulators

Si está usando el emulador de Android, le recomendamos que lo configure para usar la aceleración de hardware.If you are using the Android emulator, we recommend that you configure the emulator to use hardware acceleration. Las instrucciones para configurar la aceleración de hardware están disponibles en Aceleración de hardware para el rendimiento del emulador.Instructions for configuring hardware acceleration are available in Hardware Acceleration for Emulator Performance.

Crear el proyectoCreate the project

Inicie Visual Studio.Start Visual Studio. Para crear un proyecto, haga clic en Archivo > Nuevo > Proyecto.Click File > New > Project to create a new project.

En el cuadro de diálogo Nuevo proyecto, haga clic en la plantilla Aplicación Android.In the New Project dialog, click the Android App template. Asigne un nombre al nuevo proyecto Phoneword y haga clic en Aceptar:Name the new project Phoneword and click OK:

El nuevo proyecto es PhonewordNew project is Phoneword

En el cuadro de diálogo New Android App (Nueva aplicación Android), haga clic en Aplicación vacía y en Aceptar para crear el proyecto nuevo:In the New Android App dialog, click Blank App and click OK to create the new project:

Selección de la plantilla de aplicación vacíaSelect the Blank App template

Crear un diseñoCreate a layout

Sugerencia

Las versiones más recientes de Visual Studio admiten la apertura de archivos .xml dentro de Android Designer.Newer releases of Visual Studio support opening .xml files inside the Android Designer.

Android Designer admite tanto archivos .axml como .xml.Both .axml and .xml files are supported in the Android Designer.

Después de que el nuevo proyecto se haya creado, expanda la carpeta Recursos y, después, la carpeta Diseño en el Explorador de soluciones.After the new project is created, expand the Resources folder and then the layout folder in the Solution Explorer. Haga doble clic en activity_main.axml para abrirla en Android Designer.Double-click activity_main.axml to open it in the Android Designer. Este es el archivo de diseño para la pantalla de la aplicación:This is the layout file for the app's screen:

Archivo axml de actividad abiertoOpen activity axml file

Sugerencia

Las versiones más recientes de Visual Studio contienen una plantilla de aplicación ligeramente diferente.Newer releases of Visual Studio contain a slightly different app template.

  1. En lugar de activity_main.axml, el diseño está en content_main.axml.Instead of activity_main.axml, the layout is in content_main.axml.
  2. El diseño predeterminado será RelativeLayout.The default layout will be a RelativeLayout. Para que el resto de los pasos de esta página funcionen, debe cambiar la etiqueta <RelativeLayout> por <LinearLayout> y agregar otro atributo android:orientation="vertical" a la etiqueta de apertura LinearLayout.For the rest of the steps on this page to work you should change the <RelativeLayout> tag to <LinearLayout> and add another attribute android:orientation="vertical" to the LinearLayout opening tag.

En el Cuadro de herramientas (el área de la izquierda), escriba text en el campo de búsqueda y arrastre un widget de Texto (grande) a la superficie de diseño (el área del centro):From the Toolbox (the area on the left), enter text into the search field and drag a Text (Large) widget onto the design surface (the area in the center):

Agregar un widget de texto grandeAdd large text widget

Con el control de Texto (grande) seleccionado en la superficie de diseño, use el panel Propiedades para cambiar la propiedad Text del widget de Texto (grande) a Enter a Phoneword::With the Text (Large) control selected on the design surface, use the Properties pane to change the Text property of the Text (Large) widget to Enter a Phoneword::

Establecer las propiedades de texto grandeSet large text properties

Arrastre un widget de Texto sin formato del Cuadro de herramientas a la superficie de diseño y colóquelo debajo del widget de Texto (grande) .Drag a Plain Text widget from the Toolbox to the design surface and place it underneath the Text (Large) widget. La selección de ubicación del widget no se producirá hasta que mueva el puntero del mouse a un lugar en el diseño que pueda aceptar el widget.Placement of the widget will not occur until you move the mouse pointer to a place in the layout that can accept the widget. En las capturas de pantalla siguientes, el widget no se puede colocar (tal y como se muestra en la parte izquierda) hasta que el puntero del mouse se mueva justo debajo del TextView anterior (como se muestra en la parte derecha):In the screenshots below, the widget cannot be placed (as seen on the left) until the mouse pointer is moved just below the previous TextView (as shown on the right):

El mouse indica dónde se puede colocar el widgetMouse indicates where widget can be placed

Cuando el texto sin formato (un widget EditText) esté colocado correctamente, aparecerá tal y como se muestra en la captura de pantalla siguiente:When the Plain Text (an EditText widget) is placed correctly, it will appear as illustrated in the following screenshot:

Agregar un widget de texto sin formatoAdd plain text widget

Con el widget de Texto sin formato seleccionado en la superficie de diseño, use el panel Propiedades para cambiar la propiedad Id del widget de Texto sin formato a @+id/PhoneNumberText y cambiar la propiedad Text a 1-855-XAMARIN:With the Plain Text widget selected on the design surface, use the Properties pane to change the Id property of the Plain Text widget to @+id/PhoneNumberText and change the Text property to 1-855-XAMARIN:

Establecer las propiedades de texto sin formatoSet plain text properties

Arrastre un Botón del Cuadro de herramientas a la superficie de diseño y colóquelo debajo del widget de Texto sin formato:Drag a Button from the Toolbox to the design surface and place it underneath the Plain Text widget:

Arrastrar el botón Traducir al diseñoDrag translate button to the design

Con el botón seleccionado en la superficie de diseño, use el panel Propiedades para cambiar su propiedad Text a Translate y cambiar su propiedad Id a @+id/TranslateButton:With the Button selected on the design surface, use the Properties pane to change its Text property to Translate and its Id property to @+id/TranslateButton:

Establecer las propiedades del botón TraducirSet translate button properties

Arrastre la vista de texto desde Cuadro de herramientas hasta la superficie de diseño y colóquela debajo del widget Botón.Drag a TextView from the Toolbox to the design surface and place it under the Button widget. Cambie la propiedad Text de TextView por una cadena vacía y establezca su propiedad Id en @+id/TranslatedPhoneword:Change the Text property of the TextView to an empty string and set its Id property to @+id/TranslatedPhoneword:

Establecer las propiedades en la vista de texto.Set the properties on the text view.

Guarde su trabajo presionando CTRL+S.Save your work by pressing CTRL+S.

Escritura de algo de códigoWrite some code

El siguiente paso consiste en agregar código para convertir números de teléfono de formato alfanumérico a numérico.The next step is to add some code to translate phone numbers from alphanumeric to numeric. Agregue un nuevo archivo al proyecto haciendo clic con el botón derecho en el proyecto Phoneword en el panel del Explorador de soluciones y seleccionando Agregar > Nuevo elemento... , como se muestra a continuación:Add a new file to the project by right-clicking the Phoneword project in the Solution Explorer pane and choosing Add > New Item... as shown below:

Agregar nuevo elementoAdd new item

En el cuadro de diálogo Agregar nuevo elemento, seleccione Visual C# > Código > Archivo de código y asigne al nuevo archivo de código el nombre PhoneTranslator.cs:In the Add New Item dialog, select Visual C# > Code > Code File and name the new code file PhoneTranslator.cs:

Agregar PhoneTranslator.csAdd PhoneTranslator.cs

Esto crea una nueva clase de C# vacía.This creates a new empty C# class. Inserte el código siguiente en este archivo:Insert the following code into this file:

using System.Text;
using System;
namespace Core
{
    public static class PhonewordTranslator
    {
        public static string ToNumber(string raw)
        {
            if (string.IsNullOrWhiteSpace(raw))
                return "";
            else
                raw = raw.ToUpperInvariant();

            var newNumber = new StringBuilder();
            foreach (var c in raw)
            {
                if (" -0123456789".Contains(c))
                {
                    newNumber.Append(c);
                }
                else
                {
                    var result = TranslateToNumber(c);
                    if (result != null)
                        newNumber.Append(result);
                }
                // otherwise we've skipped a non-numeric char
            }
            return newNumber.ToString();
        }
        static bool Contains (this string keyString, char c)
        {
            return keyString.IndexOf(c) >= 0;
        }
        static int? TranslateToNumber(char c)
        {
            if ("ABC".Contains(c))
                return 2;
            else if ("DEF".Contains(c))
                return 3;
            else if ("GHI".Contains(c))
                return 4;
            else if ("JKL".Contains(c))
                return 5;
            else if ("MNO".Contains(c))
                return 6;
            else if ("PQRS".Contains(c))
                return 7;
            else if ("TUV".Contains(c))
                return 8;
            else if ("WXYZ".Contains(c))
                return 9;
            return null;
        }
    }
}

Guarde los cambios en el archivo PhoneTranslator.cs haciendo clic en Archivo > Guardar (o presionando CTRL+S) y, después, cierre el archivo.Save the changes to the PhoneTranslator.cs file by clicking File > Save (or by pressing CTRL+S), then close the file.

Conectar la interfaz de usuarioWire up the user interface

El siguiente paso consiste en agregar código para conectar la interfaz de usuario al insertar código auxiliar en la clase MainActivity.The next step is to add code to wire up the user interface by inserting backing code into the MainActivity class. Empiece con la conexión del botón Traducir.Begin by wiring up the Translate button. En la clase MainActivity, busque el método OnCreate.In the MainActivity class, find the OnCreate method. El siguiente paso consiste en agregar el código de botón dentro de OnCreate, debajo de las llamadas base.OnCreate(savedInstanceState) y SetContentView(Resource.Layout.activity_main).The next step is to add the button code inside OnCreate, below the base.OnCreate(savedInstanceState) and SetContentView(Resource.Layout.activity_main) calls. En primer lugar, modifique el código de plantilla para que el método OnCreate sea similar al siguiente:First, modify the template code so that the OnCreate method resembles the following:

using Android.App;
using Android.OS;
using Android.Support.V7.App;
using Android.Runtime;
using Android.Widget;

namespace Phoneword
{
    [Activity(Label = "@string/app_name", Theme = "@style/AppTheme", MainLauncher = true)]
    public class MainActivity : AppCompatActivity
    {
        protected override void OnCreate(Bundle savedInstanceState)
        {
            base.OnCreate(savedInstanceState);

            // Set our view from the "main" layout resource
            SetContentView(Resource.Layout.activity_main);

            // New code will go here
        }
    }
}

Obtenga una referencia de los controles que se han creado en el archivo de diseño con Android Designer.Get a reference to the controls that were created in the layout file via the Android Designer. Agregue el código siguiente dentro del método OnCreate, después de la llamada a SetContentView:Add the following code inside the OnCreate method, after the call to SetContentView:

// Get our UI controls from the loaded layout
EditText phoneNumberText = FindViewById<EditText>(Resource.Id.PhoneNumberText);
TextView translatedPhoneWord = FindViewById<TextView>(Resource.Id.TranslatedPhoneword);
Button translateButton = FindViewById<Button>(Resource.Id.TranslateButton);

Agregue el código que responda a las pulsaciones del usuario del botón Traducir.Add code that responds to user presses of the Translate button. Agregue el siguiente código al método OnCreate (después de las líneas que se han agregado en el paso anterior):Add the following code to the OnCreate method (after the lines added in the previous step):

// Add code to translate number
translateButton.Click += (sender, e) =>
{
    // Translate user's alphanumeric phone number to numeric
    string translatedNumber = Core.PhonewordTranslator.ToNumber(phoneNumberText.Text);
    if (string.IsNullOrWhiteSpace(translatedNumber))
    {
        translatedPhoneWord.Text = string.Empty;
    }
    else
    {
        translatedPhoneWord.Text = translatedNumber;
    }
};

Guarde su trabajo seleccionando Archivo > Guardar todo (o presionando CTRL-MAYÚS-S) y compile la aplicación seleccionando Compilar > Recompilar solución (o presionando CTRL-MAYÚS-B).Save your work by selecting File > Save All (or by pressing CTRL-SHIFT-S) and build the application by selecting Build > Rebuild Solution (or by pressing CTRL-SHIFT-B).

Si hay errores, repase los pasos anteriores y corrija cualquier error hasta que la aplicación se compile correctamente.If there are errors, go through the previous steps and correct any mistakes until the application builds successfully. Si obtiene un error de compilación como El recurso no existe en el contexto actual, compruebe que el nombre del espacio de nombres en MainActivity.cs coincida con el nombre del proyecto (Phoneword) y, después, recompile completamente la solución.If you get a build error such as, Resource does not exist in the current context, verify that the namespace name in MainActivity.cs matches the project name (Phoneword) and then completely rebuild the solution. Si sigue obteniendo errores de compilación, compruebe que ha instalado las últimas actualizaciones de Visual Studio.If you still get build errors, verify that you have installed the latest Visual Studio updates.

Establecer el nombre de la aplicaciónSet the app name

Ahora que debería tener una aplicación que funciona, es el momento de establecer su nombre.You should now have a working application – it's time to set the name of the app. Expanda la carpeta valores (dentro de la carpeta Recursos) y abra el archivo strings.xml.Expand the values folder (inside the Resources folder) and open the file strings.xml. Cambie la cadena de nombre de la aplicación por Phone Word como se muestra aquí:Change the app name string to Phone Word as shown here:

<resources>
    <string name="app_name">Phone Word</string>
    <string name="action_settings">Settings</string>
</resources>

Ejecutar la aplicaciónRun the app

Pruebe la aplicación; para ello, ejecútela en un dispositivo o emulador Android.Test the application by running it on an Android device or emulator. Haga clic en el botón TRANSLATE para convertir 1-855-XAMARIN en un número de teléfono:Tap the TRANSLATE button to translate 1-855-XAMARIN into a phone number:

Captura de pantalla de la aplicación en ejecuciónScreenshot of app running

Para ejecutar la aplicación en un dispositivo Android, vea cómo configurar el dispositivo para el desarrollo.To run the app on an Android device, see how to set up your device for development.

Inicie Visual Studio para Mac desde la carpeta Aplicaciones o desde Spotlight.Launch Visual Studio for Mac from the Applications folder or from Spotlight.

Para crear un proyecto, haga clic en Nuevo proyecto...Click New Project... to create a new project.

En el cuadro de diálogo Choose a template for your new project (Elegir una plantilla para el nuevo proyecto) , haga clic en Android > Aplicación y seleccione la plantilla Aplicación de Android.In the Choose a template for your new project dialog, click Android > App and select the Android App template. Haga clic en Siguiente.Click Next.

Elegir la plantilla Aplicación de AndroidChoose the Android App template

En el cuadro de diálogo Configure su aplicación de Android, asigne a la nueva aplicación el nombre Phoneword y haga clic en Siguiente.In the Configure your Android app dialog, name the new app Phoneword and click Next.

Configurar la aplicación de AndroidConfigure the Android App

En el cuadro de diálogo Configure su aplicación de Android, deje los nombres de solución y proyecto establecidos en Phoneword y haga clic en Crear para crear el proyecto.In the Configure your new Android App dialog, leave the Solution and Project names set to Phoneword and click Create to create the project.

Crear un diseñoCreate a layout

Sugerencia

Las versiones más recientes de Visual Studio admiten la apertura de archivos .xml dentro de Android Designer.Newer releases of Visual Studio support opening .xml files inside the Android Designer.

Android Designer admite tanto archivos .axml como .xml.Both .axml and .xml files are supported in the Android Designer.

Después de que el nuevo proyecto se haya creado, expanda la carpeta Recursos y, después, la carpeta Diseño en el panel de Solución.After the new project is created, expand the Resources folder and then the layout folder in the Solution pad. Haga doble clic en Main.axml para abrirlo en Android Designer.Double-click Main.axml to open it in the Android Designer. Este es el archivo de diseño de la pantalla cuando se visualiza en Android Designer:This is the layout file for the screen when it is viewed in the Android Designer:

Abrir Main.axmlOpen Main.axml

Seleccione el botón Hello World, Click Me! (Hola a todos, haz clic aquí)Select the Hello World, Click Me! Botón en la superficie de diseño; pulse la tecla Eliminar para quitarlo.Button on the design surface and press the Delete key to remove it.

Desde el Cuadro de herramientas (el área de la derecha), escriba text en el campo de búsqueda y arrastre un widget de Texto (grande) a la superficie de diseño (el área del centro):From the Toolbox (the area on the right), enter text into the search field and drag a Text (Large) widget onto the design surface (the area in the center):

Agregar un widget de texto grandeAdd large text widget

Con el widget de Texto (grande) seleccionado en la superficie de diseño, puede usar el panel Propiedades para cambiar la propiedad Text del widget de Texto (grande) a Enter a Phoneword: como se muestra a continuación:With the Text (Large) widget selected on the design surface, you can use the Properties pad to change the Text property of the Text (Large) widget to Enter a Phoneword: as shown below:

Establecer las propiedades del widget de texto grandeSet large text widget properties

Después, arrastre un widget de Texto sin formato del Cuadro de herramientas a la superficie de diseño y colóquelo debajo del widget de Texto (grande) .Next, drag a Plain Text widget from the Toolbox to the design surface and place it underneath the Text (Large) widget. Tenga en cuenta que puede usar el campo de búsqueda para ayudarle a buscar widgets por el nombre:Notice that you can use the search field to help locate widgets by name:

Agregar un widget de texto sin formatoAdd plain text widget

Con el widget de Texto sin formato seleccionado en la superficie de diseño, puede usar el panel Propiedades para cambiar la propiedad Id del widget de Texto sin formato a @+id/PhoneNumberText y cambiar la propiedad Text a 1-855-XAMARIN:With the Plain Text widget selected on the design surface, you can use the Properties pad to change the Id property of the Plain Text widget to @+id/PhoneNumberText and change the Text property to 1-855-XAMARIN:

Establecer las propiedades del widget de texto sin formatoSet plain text widget properties

Arrastre un Botón del Cuadro de herramientas a la superficie de diseño y colóquelo debajo del widget de Texto sin formato:Drag a Button from the Toolbox to the design surface and place it underneath the Plain Text widget:

Agregar un botónAdd a button

Con el Botón seleccionado en la superficie de diseño, puede usar el panel Propiedades para cambiar la propiedad Id del Botón a @+id/TranslateButton y cambiar la propiedad Text a Translate:With the Button selected on the design surface, you can use the Properties pad to change the Id property of the Button to @+id/TranslateButton and change the Text property to Translate:

Configurar como el botón TraducirConfigure as the translate button

Arrastre la vista de texto desde Cuadro de herramientas hasta la superficie de diseño y colóquela debajo del widget Botón.Drag a TextView from the Toolbox to the design surface and place it under the Button widget. Con la vista de texto seleccionada, establezca la propiedad id de la vista de texto en @+id/TranslatedPhoneWord y cambie el text por una cadena vacía:With the TextView selected, set the id property of the TextView to @+id/TranslatedPhoneWord and change the text to an empty string:

Establecer las propiedades en la vista de texto.Set the properties on the text view.

Guarde su trabajo presionando ⌘ + S.Save your work by pressing ⌘ + S.

Escritura de algo de códigoWrite some code

Ahora, agregue código para convertir números de teléfono de formato alfanumérico a numérico.Now, add some code to translate phone numbers from alphanumeric to numeric. Agregue un nuevo archivo al proyecto haciendo clic en el icono de engranaje junto al proyecto Phoneword en el panel de Solución y seleccionando Agregar > Nuevo archivo... :Add a new file to the project by clicking the gear icon next to the Phoneword project in the Solution pad and choosing Add > New File...:

Agregar un nuevo archivo al proyectoAdd a new file to the project

En el cuadro de diálogo Nuevo archivo, haga clic en General > Clase vacía, asigne al archivo nuevo el nombre PhoneTranslator y haga clic en Nuevo.In the New File dialog, select General > Empty Class, name the new file PhoneTranslator, and click New. Esto crea una nueva clase de C# vacía.This creates a new empty C# class for us.

Quite todo el código de plantilla de la clase nueva y reemplácelo por el siguiente código:Remove all of the template code in the new class and replace it with the following code:

using System.Text;
using System;
namespace Core
{
    public static class PhonewordTranslator
    {
        public static string ToNumber(string raw)
        {
            if (string.IsNullOrWhiteSpace(raw))
                return "";
            else
                raw = raw.ToUpperInvariant();

            var newNumber = new StringBuilder();
            foreach (var c in raw)
            {
                if (" -0123456789".Contains(c))
                {
                    newNumber.Append(c);
                }
                else
                {
                    var result = TranslateToNumber(c);
                    if (result != null)
                        newNumber.Append(result);
                }
                // otherwise we've skipped a non-numeric char
            }
            return newNumber.ToString();
        }
        static bool Contains (this string keyString, char c)
        {
            return keyString.IndexOf(c) >= 0;
        }
        static int? TranslateToNumber(char c)
        {
            if ("ABC".Contains(c))
                return 2;
            else if ("DEF".Contains(c))
                return 3;
            else if ("GHI".Contains(c))
                return 4;
            else if ("JKL".Contains(c))
                return 5;
            else if ("MNO".Contains(c))
                return 6;
            else if ("PQRS".Contains(c))
                return 7;
            else if ("TUV".Contains(c))
                return 8;
            else if ("WXYZ".Contains(c))
                return 9;
            return null;
        }
    }
}

Guarde los cambios en PhoneTranslator.cs pulsando Archivo > Guardar (o presionando ⌘ + S) y cierre el archivo.Save the changes to the PhoneTranslator.cs file by choosing File > Save (or by pressing ⌘ + S), then close the file. Asegúrese de que no hay errores de tiempo de compilación al volver a compilar la solución.Ensure that there are no compile-time errors by rebuilding the solution.

Conectar la interfaz de usuarioWire up the user interface

El siguiente paso consiste en agregar código para conectar la interfaz de usuario al agregar código auxiliar en la clase MainActivity.The next step is to add code to wire up the user interface by adding the backing code into the MainActivity class. Haga doble clic en el archivo MainActivity.cs en Panel de solución para abrirlo.Double-click MainActivity.cs in the Solution Pad to open it.

Para empezar, agregue un controlador de eventos al botón Traducir.Begin by adding an event handler to the Translate button. En la clase MainActivity, busque el método OnCreate.In the MainActivity class, find the OnCreate method. Agregue el código de botón dentro de OnCreate, debajo de las llamadas a base.OnCreate(bundle) y SetContentView (Resource.Layout.Main).Add the button code inside OnCreate, below the base.OnCreate(bundle) and SetContentView (Resource.Layout.Main) calls. Quite cualquier código de control de botón existente (es decir, cualquier código que hace referencia a Resource.Id.myButton y crea un controlador de clic para él) de manera que el método OnCreate tenga el aspecto siguiente:Remove any existing button handling code (i.e., code that references Resource.Id.myButton and creates a click handler for it) so that the OnCreate method resembles the following:

using System;
using Android.App;
using Android.Content;
using Android.Runtime;
using Android.Views;
using Android.Widget;
using Android.OS;

namespace Phoneword
{
    [Activity (Label = "Phone Word", MainLauncher = true)]
    public class MainActivity : Activity
    {
        protected override void OnCreate (Bundle bundle)
        {
            base.OnCreate (bundle);

            // Set our view from the "main" layout resource
            SetContentView (Resource.Layout.Main);

            // Our code will go here
        }
    }
}

Después, se necesita una referencia de los controles que se han creado en el archivo de diseño con Android Designer.Next, a reference is needed to the controls that were created in the layout file with the Android Designer. Agregue el código siguiente dentro del método OnCreate (después de la llamada a SetContentView):Add the following code inside the OnCreate method (after the call to SetContentView):

// Get our UI controls from the loaded layout
EditText phoneNumberText = FindViewById<EditText>(Resource.Id.PhoneNumberText);
TextView translatedPhoneWord = FindViewById<TextView>(Resource.Id.TranslatedPhoneWord);
Button translateButton = FindViewById<Button>(Resource.Id.TranslateButton);

Agregue el código que responda a las pulsaciones del usuario del botón Traducir agregando el siguiente código al método OnCreate (después de las líneas que se han agregado en el último paso):Add code that responds to user presses of the Translate button by adding the following code to the OnCreate method (after the lines added in the last step):

// Add code to translate number
string translatedNumber = string.Empty;

translateButton.Click += (sender, e) =>
{
    // Translate user's alphanumeric phone number to numeric
    translatedNumber = PhonewordTranslator.ToNumber(phoneNumberText.Text);
    if (string.IsNullOrWhiteSpace(translatedNumber))
    {
        translatedPhoneWord.Text = string.Empty;
    }
    else
    {
        translatedPhoneWord.Text = translatedNumber;
    }
};

Guarde el trabajo y compile la aplicación seleccionando Compilar > Compilar todo (o presionando ⌘ + B).Save your work and build the application by selecting Build > Build All (or by pressing ⌘ + B). Si la aplicación se compila, obtendrá un mensaje de operación correcta en la parte superior de Visual Studio para Mac:If the application compiles, you will get a success message at the top of Visual Studio for Mac:

Si hay errores, repase los pasos anteriores y corrija cualquier error hasta que la aplicación se compile correctamente.If there are errors, go through the previous steps and correct any mistakes until the application builds successfully. Si obtiene un error de compilación como El recurso no existe en el contexto actual, compruebe que el nombre del espacio de nombres en MainActivity.cs coincida con el nombre del proyecto (Phoneword) y, después, recompile completamente la solución.If you get a build error such as, Resource does not exist in the current context, verify that the namespace name in MainActivity.cs matches the project name (Phoneword) and then completely rebuild the solution. Si sigue obteniendo errores de compilación, compruebe que ha instalado las últimas actualizaciones de Xamarin.Android y Visual Studio para Mac.If you still get build errors, verify that you have installed the latest Xamarin.Android and Visual Studio for Mac updates.

Establecer la etiqueta y el icono de la aplicaciónSet the label and app icon

Ahora que tiene una aplicación que funciona, es el momento de agregar los toques finales.Now that you have a working application, it's time to add the finishing touches! Empiece editando Label para MainActivity.Start by editing the Label for MainActivity. Label es lo que Android muestra en la parte superior de la pantalla para que los usuarios conozcan el lugar en el que se encuentran en la aplicación.The Label is what Android displays at the top of the screen to let users know where they are in the application. En la parte superior de la clase MainActivity, cambie Label por Phone Word como se muestra aquí:At the top of the MainActivity class, change the Label to Phone Word as shown here:

namespace Phoneword
{
    [Activity (Label = "Phone Word", MainLauncher = true)]
    public class MainActivity : Activity
    {
        ...
    }
}

Ahora es el momento de establecer el icono de la aplicación.Now it's time to set the application icon. De forma predeterminada, Visual Studio para Mac proporcionará un icono predeterminado para el proyecto.By default, Visual Studio for Mac will provide a default icon for the project. Elimine estos archivos de la solución y reemplácelos por otro icono.Delete these files from the solution, and replace them with a different icon. Expanda la carpeta Recursos en Panel de solución.Expand the Resources folder in the Solution Pad. Observe que hay cinco carpetas que tienen el prefijo mipmap- y que cada una de estas carpetas contiene un archivo Icon.png:Notice that there are five folders that are prefixed with mipmap-, and that each of these folders contains a single Icon.png file:

carpetas mipmap- y archivos Icon.pngmipmap- folders and Icon.png files

Es necesario eliminar del proyecto todos estos archivos de icono.It is necessary to delete each of these icon files from the project. Haga clic con el botón derecho en cada uno de los archivos Icon.png y haga clic en Quitar en el menú contextual:Right click on each of Icon.png files, and select Remove from the context menu:

Eliminar archivo Icon.png predeterminadoDelete default Icon.png

Haga clic en el botón Eliminar en el cuadro de diálogo.Click on the Delete button in the dialog.

Luego, descargue y descomprima el conjunto de iconos de aplicación de Xamarin.Next, download and unzip Xamarin App Icons set. Este archivo ZIP contiene los iconos de la aplicación.This zip file holds the icons for the application. Todos los iconos son idénticos visualmente, pero se representan correctamente con resoluciones diferentes en distintos dispositivos con distintas densidades de pantalla.Each icon is visually identical but at different resolutions it renders correctly on different devices with different screen densities. El conjunto de archivos debe copiarse en el proyecto Xamarin.Android.The set of files must be copied into the Xamarin.Android project. En Visual Studio para Mac, en Panel de solución, haga clic con el botón derecho en la carpeta mipmap-hdpi y seleccione Agregar > Agregar archivos:In Visual Studio for Mac, in the Solution Pad, right-click the mipmap-hdpi folder and select Add > Add Files:

Agregar archivosAdd files

En el cuadro de diálogo de selección, vaya al directorio descomprimido de los iconos de aplicación de Xamarin y abra la carpeta mipmap-hdpi.From the selection dialog, navigate to the unzipped Xamarin AdApp Icons directory and open the mipmap-hdpi folder. Seleccione Icon.png y haga clic en Abrir.Select Icon.png and click Open.

En el cuadro de diálogo Add File to Folder (Agregar archivo a carpeta) , seleccione Copy the file into the directory (Copiar el archivo en el directorio) y haga clic en Aceptar:In the Add File to Folder dialog box, select Copy the file into the directory and click OK:

Cuadro de diálogo Copiar el archivo en el directorioCopy the file to the directory dialog

Repita estos pasos para cada una de las carpetas mipmap- hasta que el contenido de las carpetas de iconos de aplicación de Xamarin mipmap- se copie en las carpetas mipmap- equivalentes en el proyecto Phoneword.Repeat these steps for each of the mipmap- folders until the contents of the mipmap- Xamarin App Icons folders are copied to their counterpart mipmap- folders in the Phoneword project.

Después de copiar todos los iconos en el proyecto de Xamarin.Android, abra el cuadro de diálogo Opciones del proyecto haciendo clic con el botón derecho en el proyecto en Panel de solución.After all the icons are copied to the Xamarin.Android project, open the Project Options dialog by right clicking on the project in the Solution Pad. Haga clic en Compilar > Aplicación de Android y seleccione @mipmap/icon en el cuadro combinado Icono de aplicación:Select Build > Android Application and select @mipmap/icon from the Application icon combo box:

Establecer el icono del proyectoSetting the project icon

Ejecutar la aplicaciónRun the app

Por último, pruebe la aplicación ejecutándola en un dispositivo o emulador Android y traduciendo un Phoneword:Finally, test the application by running it on an Android device or emulator and translating a Phoneword:

Captura de pantalla de la aplicación una vez completadaScreenshot of app when it is complete

Para ejecutar la aplicación en un dispositivo Android, vea cómo configurar el dispositivo para el desarrollo.To run the app on an Android device, see how to set up your device for development.

Ha completado su primera aplicación de Xamarin.Android.Congratulations on completing your first Xamarin.Android application! Ahora es el momento de analizar las herramientas y los conocimientos que ha aprendido.Now it's time to dissect the tools and skills you have just learned. Lo siguiente es el Análisis detallado de Hello, Android.Next up is the Hello, Android Deep Dive.