Multitela Hello, Android: início rápido

  • Artigo

Este guia de duas partes expande o aplicativo Phoneword para manipular uma segunda tela. Ao longo do caminho, Blocos de Construção do Aplicativo Android básicos são apresentados com um aprofundamento maior de uma arquitetura Android.

Na parte passo a passo deste guia, você adicionará uma segunda tela ao aplicativo Phoneword para acompanhar o histórico de números traduzidos usando o aplicativo. O aplicativo final terá uma segunda tela exibindo os números que foram “convertidos”, conforme ilustrado pela captura de tela à direita:

Capturas de tela de aplicativo de exemplo

O Aprofundamento de acompanhamento analisa o que foi criado e discute a arquitetura, navegação e outros novos conceitos do Android encontrados ao longo do caminho.

Requisitos

Como este guia continua do ponto que o Hello, Android parou, ele exige a conclusão do Início Rápido do Hello, Android.

Passo a passo

Neste passo a passo, você adicionará uma tela de Histórico de Conversão ao aplicativo Phoneword.

Comece abrindo o aplicativo Phoneword no Visual Studio e edite o arquivo Main.axml do Gerenciador de Soluções.

Dica

As versões mais recentes do Visual Studio dão suporte à abertura de arquivos .xml dentro do Android Designer.

Tanto arquivos .axml quanto .xml são compatíveis com o Android Designer.

Atualizando o layout

Na Caixa de Ferramentas, arraste um Botão para a superfície de design e coloque-o abaixo do TextView TranslatedPhoneWord. No painel Propriedades, altere a ID do botão para @+id/TranslationHistoryButton

Arrastar um novo botão

Ajuste a propriedade Texto do botão para @string/translationHistory. O Android Designer interpretará isso literalmente, porém vamos fazer algumas alterações para que o texto do botão seja exibido corretamente:

Definir o texto de botão do histórico de conversão

Expanda o nó de valores na pasta Recursos no Gerenciador de Soluções e clique duas vezes no arquivo de recursos de cadeia de caracteres, Strings.xml:

Abrir Strings.xml

Adicione o translationHistory nome e valor da cadeia de caracteres ao arquivo Strings.xml e salve-o:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="translationHistory">Translation History</string>
    <string name="ApplicationName">Phoneword</string>
</resources>

O texto do botão Histórico de Conversão deve ser atualizado para refletir o novo valor de cadeia de caracteres:

O botão reflete o novo valor de cadeia de caracteres

Com o botão Histórico de Conversão selecionado na superfície de design, localize a configuração enabled no painel Propriedades e defina seu valor como false para desabilitar o botão. Isso fará com que o botão fique mais escuro na superfície de design:

Desabilitar o botão de histórico de conversão

Criando a segunda atividade

Crie uma segunda Atividade para ligar a segunda tela. No Gerenciador de Soluções, clique com o botão direito do mouse no projeto Phoneword e escolha Adicionar > Novo Item...:

Adicionar um novo arquivo

Na caixa de diálogo Adicionar Novo Item, escolha Atividade do Visual C# > e nomeie o arquivo de Atividade como TranslationHistoryActivity.cs.

Substitua o código do modelo no TranslationHistoryActivity.cs pelo seguinte:

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);
        }
    }
}

Nesta aula, você está criando um ListActivity e preenchendo-o programaticamente, portanto não é necessário criar um novo arquivo de layout para essa Atividade. Isso será discutido mais detalhadamente no Aprofundamento na Multitela do Hello, Android.

Adicionando uma lista

Este aplicativo coleta números de telefone (que o usuário tenha convertido na primeira tela) e os transfere para a segunda tela. Os números de telefone são armazenados como uma lista de cadeias de caracteres. Para permitir listas (e intenções, que serão usadas mais tarde), adicione as seguintes diretivas using na parte superior de MainActivity.cs:

using System.Collections.Generic;
using Android.Content;

Em seguida, crie uma lista vazia que pode ser preenchida com números de telefone. A classe MainActivity terá a seguinte aparência:

[Activity(Label = "Phoneword", MainLauncher = true)]
public class MainActivity : Activity
{
    static readonly List<string> phoneNumbers = new List<string>();
    ...// OnCreate, etc.
}

Na classe MainActivity, adicione o código a seguir para registrar o botão Histórico de Conversão (coloque esta linha após a declaração translateButton):

Button translationHistoryButton = FindViewById<Button> (Resource.Id.TranslationHistoryButton);

Adicione o seguinte código ao final do método OnCreate para conectar o botão Histórico de Conversão:

translationHistoryButton.Click += (sender, e) =>
{
    var intent = new Intent(this, typeof(TranslationHistoryActivity));
    intent.PutStringArrayListExtra("phone_numbers", phoneNumbers);
    StartActivity(intent);
};

Atualize o botão Converter para adicionar o número de telefone à lista de phoneNumbers. O manipulador Click para o translateButton deve se parecer com o código a seguir:

// 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;
    }
};

Salve e compile o aplicativo para garantir que não haja erros.

Executar o aplicativo

Implante o aplicativo em um dispositivo ou emulador. As capturas de tela a seguir ilustram o aplicativo Phoneword em execução:

Capturas de tela de exemplo

Comece abrindo o projeto Phoneword no Visual Studio para Mac e edite o arquivo Main.axml no Painel de Soluções.

Dica

As versões mais recentes do Visual Studio dão suporte à abertura de arquivos .xml dentro do Android Designer.

Tanto arquivos .axml quanto .xml são compatíveis com o Android Designer.

Atualizando o layout

Na Caixa de Ferramentas, arraste um Botão para a superfície de design e coloque-o abaixo do TextView TranslatedPhoneWord. No painel Propriedades, altere a ID do botão para @+id/TranslationHistoryButton:

Arrastar um novo botão

Ajuste a propriedade Texto do botão para @string/translationHistory. O Android Designer interpretará isso literalmente, porém vamos fazer algumas alterações para que o texto do botão seja exibido corretamente:

Definir o texto de botão do histórico de conversão

Expanda o nó de valores na pasta Recursos do Painel de Soluções e clique duas vezes no arquivo de recursos de cadeia de caracteres, Strings.xml:

Abrir cadeias de caracteres

Adicione o translationHistory nome e valor da cadeia de caracteres ao arquivo Strings.xml e salve-o:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="translationHistory">Translation History</string>
    <string name="ApplicationName">Phoneword</string>
</resources>

O texto do botão Histórico de Conversão deve ser atualizado para refletir o novo valor de cadeia de caracteres:

O botão reflete o novo valor de cadeia de caracteres

Com o botão Histórico de Conversão selecionado na superfície de design, abra a guia Comportamento no Painel de Propriedades e clique duas vezes na caixa de seleção Habilitado para desabilitar o botão. Isso fará com que o botão fique mais escuro na superfície de design:

Desabilitar o botão de histórico de conversão

Criando a segunda atividade

Crie uma segunda Atividade para ligar a segunda tela. No Solution Pad, clique no ícone de engrenagem cinza ao lado do projeto Phoneword e escolha Adicionar > Novo Arquivo...:

Na caixa de diálogo Novo arquivo, escolha Atividade do Android>, nomeie a atividade TranslationHistoryActivitye clique em Adicionar.

Substitua o código do modelo no TranslationHistoryActivity pelo seguinte:

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);
        }
    }
}

Nesta aula, um ListActivity é criado e preenchido programaticamente, portanto você não tem que criar um novo arquivo de layout para essa Atividade. Isso será explicado mais detalhadamente no Aprofundamento na Multitela do Hello, Android.

Adicionando uma lista

Este aplicativo coleta números de telefone (que o usuário tenha convertido na primeira tela) e os transfere para a segunda tela. Os números de telefone são armazenados como uma lista de cadeias de caracteres. Para permitir listas (e intenções, que serão usadas mais tarde), adicione as seguintes diretivas using na parte superior de MainActivity.cs:

using System.Collections.Generic;
using Android.Content;

Em seguida, crie uma lista vazia que pode ser preenchida com números de telefone. A classe MainActivity terá a seguinte aparência:

[Activity(Label = "Phoneword", MainLauncher = true)]
public class MainActivity : Activity
{
    static readonly List<string> phoneNumbers = new List<string>();
    ...// OnCreate, etc.
}

Na classe MainActivity, adicione o código a seguir para registrar o botão Histórico de Conversão (coloque esta linha após a declaração TranslationHistoryButton):

Button translationHistoryButton = FindViewById<Button> (Resource.Id.TranslationHistoryButton);

Adicione o seguinte código ao final do método OnCreate para conectar o botão Histórico de Conversão:

translationHistoryButton.Click += (sender, e) =>
{
    var intent = new Intent(this, typeof(TranslationHistoryActivity));
    intent.PutStringArrayListExtra("phone_numbers", phoneNumbers);
    StartActivity(intent);
};

Atualize o botão Converter para adicionar o número de telefone à lista de phoneNumbers. O manipulador Click para o TranslateHistoryButton deve se parecer com o código a seguir:

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;
    }
};

Executar o aplicativo

Implante o aplicativo em um dispositivo ou emulador. As capturas de tela a seguir ilustram o aplicativo Phoneword em execução:

Capturas de tela de exemplo

Parabéns por concluir seu primeiro aplicativo Xamarin.Android de multitela! Agora é hora de dissecar as ferramentas e habilidades que você acabou de aprender - o próximo é o Hello, Android Multiscreen Deep Dive.