Hello, Android Multiscreen: inicio rápido
Esta guía de dos partes expande la aplicación Phoneword para controlar una segunda pantalla. Por el camino, se presentan bloques de creación básicos de aplicaciones Android con un análisis más profundo de la arquitectura de Android.
En la parte del tutorial de esta guía, agregará una segunda pantalla a la aplicación Phoneword para realizar un seguimiento del historial de números traducidos mediante la aplicación. La aplicación final tendrá una segunda pantalla en la que se mostrarán los números "traducidos", como se muestra en la captura de pantalla de la derecha:
La sección complementaria Análisis detallado revisa lo que se creó y describe la arquitectura, la navegación y otros conceptos de Android nuevos que encontrará en el camino.
Requisitos
Dado que esta guía continúa desde donde lo deja Hello, Android, requiere la finalización de Hello, Android: inicio rápido.
Tutorial
En este tutorial agregará una pantalla Translation History (Historial de traducciones) a la aplicación Phoneword.
Para empezar, abra la aplicación Phoneword en Visual Studio y edite el archivo Main.axml en el Explorador de soluciones.
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.
Actualización del diseño
En el cuadro de herramientas, arrastre un botón hasta la superficie de diseño y colóquelo debajo de la vista de texto TranslatedPhoneWord. En el panel Propiedades, cambie el Id del botón por @+id/TranslationHistoryButton.
Establezca la propiedad Text del botón en @string/translationHistory. Android Designer lo interpretará literalmente, pero va a realizar algunos cambios para que el texto del botón se muestre correctamente:
Expanda el nodo valores bajo la carpeta Recursos en el Explorador de soluciones y haga doble clic en el archivo de recursos de cadena, Strings.xml:
Agregue el nombre y el valor de cadena translationHistory al archivo Strings.xml y guárdelo:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="translationHistory">Translation History</string>
<string name="ApplicationName">Phoneword</string>
</resources>
El texto del botón Translation History (Historial de traducciones) debería actualizarse para reflejar el nuevo valor de cadena:
Con el botón Translation History (Historial de traducciones) seleccionado en la superficie de diseño, busque el ajuste enabled en el panel Propiedades y establezca su valor en false para deshabilitar el botón. Esto hará que el botón se vuelva más oscuro en la superficie de diseño:
Creación de la segunda actividad
Cree una segunda actividad para activar la segunda pantalla. En el Explorador de soluciones, haga clic con el botón derecho en el proyecto Phoneword y seleccione Agregar > Nuevo elemento...:
En el cuadro de diálogo Agregar nuevo elemento, seleccione Visual C# > Actividad y asigne al archivo de actividad el nombre TranslationHistoryActivity.cs.
Reemplace el código de plantilla de TranslationHistoryActivity.cs por lo siguiente:
using System;
using System.Collections.Generic;
using Android.App;
using Android.OS;
using Android.Widget;
namespace Phoneword
{
[Activity(Label = "@string/translationHistory")]
public class TranslationHistoryActivity : ListActivity
{
protected override void OnCreate(Bundle bundle)
{
base.OnCreate(bundle);
// Create your application here
var phoneNumbers = Intent.Extras.GetStringArrayList("phone_numbers") ?? new string[0];
this.ListAdapter = new ArrayAdapter<string>(this, Android.Resource.Layout.SimpleListItem1, phoneNumbers);
}
}
}
En esta clase, se crea una ListActivity y se rellena mediante programación, por lo que no es necesario crear un nuevo archivo de diseño para esta actividad. Esto se explica con más detalle en Hello, Android Multiscreen: análisis detallado.
Adición de una lista
Esta aplicación recopila números de teléfono (que el usuario ha traducido en la primera pantalla) y los pasa a la segunda pantalla. Los números de teléfono se almacenan como una lista de cadenas. Para admitir listas (y también Intents, que se usan más adelante), agregue las directivas using siguientes a la parte superior de MainActivity.cs:
using System.Collections.Generic;
using Android.Content;
Después, cree una lista vacía que se pueda rellenar con números de teléfono.
La clase MainActivity tendrá este aspecto:
[Activity(Label = "Phoneword", MainLauncher = true)]
public class MainActivity : Activity
{
static readonly List<string> phoneNumbers = new List<string>();
...// OnCreate, etc.
}
En la clase MainActivity, agregue el código siguiente para registrar el botón Translation History (Historial de traducciones) (coloque esta línea después de la declaración translateButton):
Button translationHistoryButton = FindViewById<Button> (Resource.Id.TranslationHistoryButton);
Agregue el código siguiente al final del método OnCreate para conectar el botón Translation History (Historial de traducciones):
translationHistoryButton.Click += (sender, e) =>
{
var intent = new Intent(this, typeof(TranslationHistoryActivity));
intent.PutStringArrayListExtra("phone_numbers", phoneNumbers);
StartActivity(intent);
};
Actualice el botón Traducir para agregar el número de teléfono a la lista de phoneNumbers. El controlador Click de translateButton debería ser similar al código siguiente:
// Add code to translate number
string translatedNumber = string.Empty;
translateButton.Click += (sender, e) =>
{
// Translate user's alphanumeric phone number to numeric
translatedNumber = Core.PhonewordTranslator.ToNumber(phoneNumberText.Text);
if (string.IsNullOrWhiteSpace(translatedNumber))
{
translatedPhoneWord.Text = "";
}
else
{
translatedPhoneWord.Text = translatedNumber;
phoneNumbers.Add(translatedNumber);
translationHistoryButton.Enabled = true;
}
};
Guarde y compile la aplicación para asegurarse de que no existen errores.
Ejecución de la aplicación
Implemente la aplicación en un dispositivo o emulador. En las siguientes capturas de pantalla se muestra la aplicación Phoneword en ejecución:
Para empezar, abra el proyecto Phoneword en Visual Studio para Mac y edite el archivo Main.axml en Panel de solución.
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.
Actualización del diseño
En el cuadro de herramientas, arrastre un botón hasta la superficie de diseño y colóquelo debajo de la vista de texto TranslatedPhoneWord. En el panel Propiedades, cambie el Id. del botón por @+id/TranslationHistoryButton:
Establezca la propiedad Text del botón en @string/translationHistory. Android Designer lo interpretará literalmente, pero va a realizar algunos cambios para que el texto del botón se muestre correctamente:
Expanda el nodo values situado debajo de la carpeta Recursos en Panel de solución y haga doble clic en el archivo de recursos de cadena, Strings.xml:
Agregue el nombre y el valor de cadena translationHistory al archivo Strings.xml y guárdelo:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="translationHistory">Translation History</string>
<string name="ApplicationName">Phoneword</string>
</resources>
El texto del botón Translation History (Historial de traducciones) debería actualizarse para reflejar el nuevo valor de cadena:
Con el botón Translation History (Historial de traducciones) seleccionado en la superficie de diseño, abra la pestaña Comportamiento en el Panel de propiedades y haga doble clic en la casilla Habilitado para deshabilitar el botón. Esto hará que el botón se vuelva más oscuro en la superficie de diseño:
Creación de la segunda actividad
Cree una segunda actividad para activar la segunda pantalla. En el Panel de solución, haga clic en el icono de engranaje de color gris junto al proyecto Phoneword y seleccione Agregar > Nuevo archivo...:
En el cuadro de diálogo Nuevo archivo, elija Android > Actividad, asigne a la actividad el nombre TranslationHistoryActivity y haga clic en Agregar.
Reemplace el código de plantilla de TranslationHistoryActivity por lo siguiente:
using System;
using System.Collections.Generic;
using Android.App;
using Android.OS;
using Android.Widget;
namespace Phoneword
{
[Activity(Label = "@string/translationHistory")]
public class TranslationHistoryActivity : ListActivity
{
protected override void OnCreate(Bundle bundle)
{
base.OnCreate(bundle);
// Create your application here
var phoneNumbers = Intent.Extras.GetStringArrayList("phone_numbers") ?? new string[0];
this.ListAdapter = new ArrayAdapter<string>(this, Android.Resource.Layout.SimpleListItem1, phoneNumbers);
}
}
}
En esta clase, se crea una ListActivity y se rellena mediante programación, por lo que no es necesario crear un nuevo archivo de diseño para esta actividad. Esto se explica con más detalle en la Hello, Android Multiscreen: análisis detallado.
Adición de una lista
Esta aplicación recopila números de teléfono (que el usuario ha traducido en la primera pantalla) y los pasa a la segunda pantalla. Los números de teléfono se almacenan como una lista de cadenas. Para admitir listas (y también Intents, que se usan más adelante), agregue las directivas using siguientes a la parte superior de MainActivity.cs:
using System.Collections.Generic;
using Android.Content;
Después, cree una lista vacía que se pueda rellenar con números de teléfono. La clase MainActivity tendrá este aspecto:
[Activity(Label = "Phoneword", MainLauncher = true)]
public class MainActivity : Activity
{
static readonly List<string> phoneNumbers = new List<string>();
...// OnCreate, etc.
}
En la clase MainActivity, agregue el código siguiente para registrar el botón TranslationHistory (coloque esta línea después de la declaración TranslationHistoryButton):
Button translationHistoryButton = FindViewById<Button> (Resource.Id.TranslationHistoryButton);
Agregue el código siguiente al final del método OnCreate para conectar el botón Translation History (Historial de traducciones):
translationHistoryButton.Click += (sender, e) =>
{
var intent = new Intent(this, typeof(TranslationHistoryActivity));
intent.PutStringArrayListExtra("phone_numbers", phoneNumbers);
StartActivity(intent);
};
Actualice el botón Traducir para agregar el número de teléfono a la lista de phoneNumbers. El controlador Click de TranslateHistoryButton debería ser similar al código siguiente:
translateButton.Click += (sender, e) =>
{
// Translate user's alphanumeric phone number to numeric
translatedNumber = Core.PhonewordTranslator.ToNumber(phoneNumberText.Text);
if (string.IsNullOrWhiteSpace(translatedNumber))
{
translatedPhoneWord.Text = "";
}
else
{
translatedPhoneWord.Text = translatedNumber;
phoneNumbers.Add(translatedNumber);
translationHistoryButton.Enabled = true;
}
};
Ejecución de la aplicación
Implemente la aplicación en un dispositivo o emulador. En las siguientes capturas de pantalla se muestra la aplicación Phoneword en ejecución:
Enhorabuena por completar su primera aplicación multipantalla de Xamarin.Android. Ahora es el momento de analizar minuciosamente las herramientas y los conocimientos que acaba de aprender: a continuación Análisis detallado de Hello, Android Multiscreen.