Introdução para desenvolvedores do Android

Applies to Windows and Windows Phone

Se você desenvolve aplicativos Android e também deseja desenvolver aplicativos para o Windows 8.1 ou Windows Phone 8.1, esse é um excelente ponto de partida. Mostraremos como usar ferramentas de desenvolvimento da Microsoft, como o Microsoft Visual Studio e as linguagens de programação da Microsoft, como C#. Você aprenderá alguns conceitos necessários para desenvolver aplicativos para a nova interface do usuário do Windows 8.1 e Windows Phone 8.1.

O Windows 8.1 e o Windows Phone 8.1 introduzem uma nova plataforma para criar aplicativos envolventes. Como esses aplicativos fornecem inúmeros recursos exclusivos, uma simples portagem do seu aplicativo do Android provavelmente impedirá você e seus usuários de utilizar esses recursos. Desse modo, não faça uma simples portagem do seu aplicativo: reinvente o seu aplicativo e aproveite recursos como a barra de aplicativos, o Zoom Semântico, os contratos de Pesquisa e Compartilhamento, o seletor de arquivos, botões, blocos dinâmicos e notificações do sistema.

O vídeo a seguir faz uma breve comparação entre o Eclipse e o Visual Studio.

Obtendo o Windows 8.1 e as ferramentas de desenvolvimento de aplicativos

Para seguir esses tutoriais, você precisará ter um computador com o Windows 8.1 e o Microsoft Visual Studio 2013 Update 2 instalados. Para obter esses programas, acesse a página Windows 8.1 para desenvolvedores.

Depois que o Visual Studio 2013 Update 2 for instalado pela primeira vez, ele solicitará que você obtenha uma licença de desenvolvedor. Para obter uma, basta seguir as instruções na tela. Essa licença permite criar e testar aplicativos da Windows Store em seu computador de desenvolvimento local antes de enviá-los à Windows Store. Se estiver usando um Mac, você pode usar ele em vez de um computador. Consulte Configurando o seu Mac.

Para comparação, ao iniciar o desenvolvimento de aplicativos do Android, você precisava instalar o JRE (Java Runtime Environment), depois o IDE do Eclipse, as ferramentas do SDK (kit de desenvolvimento de software) do Android e o plug-in ADT (Android Developer Tools).

Criando um projeto

Neste tutorial, apresentaremos as noções básicas do Visual Studio e as compararemos às noções básicas semelhantes do Eclipse. Sempre que for criar um aplicativo, você seguirá etapas semelhantes a estas.

Ao iniciar o Eclipse para o desenvolvimento de aplicativos do Android, você cria um novo projeto tocando em Arquivo > Novo > Projeto de aplicativo do Android, conforme mostrado na figura a seguir.

Comando do menu de novo projeto de aplicativo do Android do Eclipse

Depois que você criar um novo projeto do Android no Eclipse, poderá selecionar o tipo de atividade, conforme mostrado na figura a seguir.

Página de criação de atividade no Eclipse

Quando você iniciar o Microsoft Visual Studio, verá a Página inicial, conforme mostrado na figura a seguir.

Tela inicial do Visual Studio

Para criar um novo aplicativo, comece criando um projeto seguindo um destes procedimentos:

  • Na área Iniciar, toque em Novo Projeto.
  • Toque no menu Arquivo e toque em Novo Projeto.

Há vários modelos de projeto para escolher, conforme mostrado na figura a seguir.

Caixa de diálogo Novo Projeto do Visual Studio

Observação  O Visual Studio 2013 Update 2 introduz aplicativos universais do Windows. Esses são aplicativos que permitem uma única solução para conter ambos projetos do Windows 8.1 e de Windows Phone 8.1, juntamente com (opcional) código compartilhado e recursos. Aplicativos universais simplificam o desenvolvimento das famílias de dispositivos simultaneamente. Na prática, você usará uma mistura arquivos compartilhados e de origem específicos da plataforma no tempo de compilação, em vez de teste no tempo de execução. Para obter mais informações, consulte Compilando aplicativos universais do Windows para todos os dispositivos do Windows e Usando o Visual Studio para criar aplicativos XAML convergidos.

Dica para o Android

O modelo de projeto da Windows Store no Visual Studio é semelhante ao modelo Android Application Project que é adicionado ao Eclipse depois que você instala o plug-in ADT (Android Developer Tools).

 

Para este tutorial, toque em Visual C#, e em Aplicativos da loja, Aplicativos universais e Aplicativos em branco (Aplicativos universais). Na caixa Nome, digite "MyApp" e toque em OK. O Visual Studio cria e exibe seu primeiro projeto. Agora, você pode começar a criar seu aplicativo e adicionar código a ele.

Dica para o Android

A caixa Local na caixa de diálogo  Novo Projeto do Visual Studio é semelhante ao espaço de trabalho usado pelo Eclipse.

 

Diferentemente de um projeto do Eclipse do Android, em que você cria uma atividade por vez, o Visual Studio inclui modelos de projeto que criam aplicativos com várias páginas e a navegação entre essas páginas. O modelo Página em Branco, por outro lado, cria um aplicativo com apenas uma página. Mas não se preocupe, pois —adicionaremos uma segunda página e a navegação mais adiante neste artigo.

Topo

Escolhendo uma linguagem de programação

Antes de prosseguir, você deve conhecer as linguagens de programação que pode escolher ao desenvolver aplicativos da Windows Store e da Loja do Windows Phone. Apesar de o tutorial deste artigo usar C#, você pode desenvolver aplicativos usando C#, Visual Basic, C++ e JavaScript.

Apesar de nosso foco ser a linguagem C# neste artigo, as outras linguagens oferecem benefícios exclusivos, que convém explorar. Por exemplo, se o desempenho do aplicativo for uma preocupação prioritária, principalmente para gráficos intensos, então C++ pode ser a escolha certa. A versão Microsoft .NET do Microsoft Visual Basic é excelente para desenvolvedores de aplicativos do Visual Basic. JavaScript com HTML5 e Biblioteca do Windows para JavaScript (WinJS) são ótimos para quem vem de uma experiência de desenvolvimento da Web. Para saber mais, veja um destes artigos:

Observação  Para aplicativos que usam elementos gráficos 3D, os padrões OpenGL e OpenGL ES não estão disponíveis para dispositivos Windows 8.1 e Windows Phone 8.1. Porém, você pode usar o Microsoft DirectX—com C++. O DirectX 11,1 dá suporte a um pipeline programável e usa HLSL (Microsoft High Level Shader Language) que pode ser comparado com o GLSL (OpenGL Shading Language). Para saber mais sobre DirectX, veja:

Como um desenvolvedor do Android, você está acostumado com Java. Acreditamos que C# seja a linguagem de programação da Microsoft mais próxima ao Java, portanto, as informações e os tutoriais deste artigo concentram-se nessa linguagem. Para saber mais sobre C#, veja:

Veja a seguir uma classe escrita em Java e em C#. A versão em Java é mostrada primeiro, seguida pela versão em C#. Você verá que a estrutura é muito semelhante, de modo que é bastante fácil começar a usar C#. Neste exemplo, você também verá que há pequenas diferenças em termos de sintaxe de documentação e uso de maiúsculas e minúsculas. Por fim, você verá que as classes C# podem ter propriedades explícitas em vez de usar métodos getter e setter convencionais, como em Java.


package com.example.MyApp;

// Java class definition.
/** 
 * The Counter class shows key aspects of a Java class.
 */
public class Counter {
    private int count; // Private variables are not visible outside.

    public Counter() 
    {
        count = 0; // Initialize the local variable.
    }

    public int getValue()  // Getter for the local variable.
    {
        return count;      
    }

    public void setValue(int value) // Setter for the local variable.
    {
        count = value;         
    }	

    public int increment(int delta)
    {
    	   // Add the delta to the local count, and then return.
    	   count += delta;
        return count;
    }        

    public int increment()
    {
        return increment(1);
    }    
}

// Java usage.
import com.example.myapp.Counter;

Counter myCounter = new Counter();
int count = myCounter.getValue();
myCounter.setValue(5);
count = myCounter.increment();



// C# class definition.
namespace MyApp
{
    public class Counter
    {
        private int count; // Private variable not visible outside of the class.

        public Counter()
        {
            count = 0; // Initialize the local variable.
        }

        public int Value // Getter for the local variable.
        {
            get
            {
                return count;
            }
            set
            {
                count = value;
            }
        }

        /// <summary>
        /// Increments the counter by the delta.
        /// </summary>
        /// <param name="delta">delta</param>
        /// <returns>Returns the resulting counter.</returns>
        public int Increment(int delta)
        {
            // Add the delta to the local count, and then return.
            count += delta;
            return count;
        }

        public int Increment()
        {
            return Increment(1);
        }
    }

// C# usage.
using MyApp;

Counter myCounter = new Counter();
int count = myCounter.Value;
myCounter.Value = 5;
count = myCounter.Increment();


Você pode encontrar esses tópicos úteis ao iniciar com C#:

Topo

Conhecendo o Visual Studio

Agora vamos voltar ao projeto MyApp que você criou antes e ver como se familiarizar com o IDE do Visual Studio.

Os desenvolvedores do Android que usam o Eclipse devem ter familiaridade com o modo de exibição padrão na figura a seguir, em que os arquivos de origem estão no painel esquerdo, o editor (seja a interface do usuário ou o código) está no painel central, e os controles e suas propriedades estão no painel direito, conforme mostrado na figura a seguir.

Ambiente de desenvolvimento integrado do Eclipse

O Visual Studio é semelhante, embora a exibição padrão tenha os controles no lado esquerdo da Caixa de Ferramentas. Os arquivos de origem estão localizados no Gerenciador de Soluções, no lado direito, e as propriedades estão localizadas em Propriedades, no lado direito. Esse layout está ilustrado na imagem a seguir. Observe como um aplicativo universal do Windows, existem três ramificações no modo solução: uma para o aplicativo do Windows, uma para o aplicativo do Windows Phone e outra para o conteúdo compartilhado.

Ambiente de desenvolvimento do Visual Studio

Dicas para o Android

O Gerenciador de Soluções do Visual Studio é semelhante ao Package Explorer do Eclipse.

No Gerenciador de Soluções, o arquivo Package.appxmanifest é semelhante ao arquivo AndroidManifest.xml usado em aplicativos do Android.

No Gerenciador de Soluções, os itens no diretório Assets são semelhantes aos itens nos diretórios \res\drawable-*\ dos projetos do Android.

 

Você poderá reorganizar os painéis no Visual Studio se quiser os arquivos de origem no lado esquerdo e os controles no lado direito. Ou, assim como no Eclipse, você pode escolher as janelas de que precisa e organizá-las da maneira que preferir. Por exemplo, para mover a Caixa de Ferramentas do lado esquerdo da tela para o lado direito, pressione e segure a barra de título do painel da Caixa de Ferramentas, comece a arrastá-la e solte-a no destino de soltar à extrema direita que aparece no meio da tela. O Visual Studio exibe uma caixa sombreada para avisá-lo sobre o local onde a Caixa de Ferramentas será encaixada depois que você soltá-la.

Para fazer com que a IDE se pareça com a figura anterior, siga este procedimento:

  1. No Gerenciador de Soluções, mantenha pressionado MainPage.xaml (Windows 8.1 ou Windows Phone 8.1) para abri-lo.
  2. No lado esquerdo, toque na Caixa de Ferramentas para exibi-la. Na barra de título do painel da Caixa de Ferramentas, toque no ícone de alfinete para fixá-la, conforme mostrado na figura a seguir.
Fixando a Caixa de Ferramentas no Visual Studio

Topo

Adicionando controles, configurando suas propriedades e respondendo a eventos

Vamos agora adicionar alguns controles ao seu projeto MyApp. Em seguida, alteraremos algumas das propriedades dos controles e depois escreveremos um pouco de código para responder a um dos eventos do controle.

Para adicionar controles no Eclipse, você abre o arquivo XML de atividade no Layout Gráfico e depois adiciona os controles, como Button, EditText e TextView, conforme mostrado na figura a seguir. No Visual Studio, os arquivos .xaml são semelhantes aos arquivos .xml de layout do Android.

Editor de layout gráfico do Eclipse

Vamos fazer uma técnica semelhante no Visual Studio. Na Caixa de Ferramentas, pressione e segure o controle TextBox e solte-o na área de design do arquivo MainPage.xaml do Windows 8.1 ou Windows Phone 8.1. Faça o mesmo com o controle Button, colocando-o abaixo do controle TextBox. Por fim, faça o mesmo com o controle TextBlock, colocando-o abaixo do controle Button, conforme mostrado na figura a seguir.

Exibição de design de página principal do Visual Studio

Assim como os arquivos .xml de layout do Android no Eclipse, no Visual Studio, os arquivos .xaml exibem detalhes de layout da interface do usuário em uma linguagem declarativa sofisticada. Para saber mais sobre Linguagem de Marcação de Aplicativo Extensível, veja Visão geral de XAML. Tudo o que é exibido no painel Design está definido no painel XAML. O painel XAML permite um controle mais específico onde necessário e, à medida que você aprender mais sobre ele, poderá desenvolver seu código de forma muito mais rápida. Mas por enquanto vamos nos concentrar apenas no painel Design e em Propriedades.

Dicas para o Visual Studio

O arquivo *.xaml.cs associado a um arquivo *.xaml é chamado de arquivo code-behind.

Ao abrir um arquivo *.xaml, você verá uma exibição Design/XAML dividida por padrão. Por padrão, a exibição superior contém um designer visual e a exibição inferior contém a marcação gerada pelo designer. Se você quiser modificar o XAML diretamente e precisar de mais espaço na tela para a exibição XAML, clique no botão de seta para cima/baixo entre as exibições Design e XAML para mostrar uma parte maior da exibição XAML ou clique no botão de divisa dupla entre as exibições Design e XAML para minimizar completamente a exibição Design.

 

Dica para o Android

A relação entre os arquivos *.xaml e *.xaml.cs é semelhante à relação entre os layouts e as atividades no desenvolvimento do Android. Ao criar um aplicativo genérico do Android no Eclipse, você verá um arquivo chamado activity_main.xml no diretório \res\layout\ do projeto. É nesse arquivo que você definirá a interface do usuário do seu aplicativo do Android. Você também verá um arquivo chamado MainActivity.java no diretório \src\ do projeto. É nele que você criará o código que acompanha a interface do usuário do aplicativo. Em nosso projeto no Visual Studio, o arquivo MainPage.xaml corresponde ao arquivo activity_main.xml no Eclipse e o arquivo MainPage.xaml.cs no Visual Studio corresponde ao arquivo MainActivity.java no Eclipse.

 

Agora vamos mudar o conteúdo e o nome do botão. Para mudar o conteúdo do botão no Eclipse, no painel de propriedades do botão, você muda o valor da propriedade Text, conforme mostrado na figura a seguir.

Seletor de recursos do Eclipse

No Visual Studio, é possível fazer algo semelhante. No painel Design, toque no controle Button para atribuir o foco a ele. Para mudar o conteúdo do botão, no painel Propriedades, mude o valor da caixa Conteúdo de "Button" para "Say Hello". Em seguida, para mudar o nome do controle Button, mude o valor da caixa Nome de "<Sem nome>" para "sayHeloButton", conforme mostrado na figura a seguir.

Definição de propriedades do botão no Visual Studio

Agora, vamos mudar nome e o conteúdo do controle TextBlock. Toque no controle TextBox para atribuir o foco a ele. No painel Propriedades, mude o valor da caixa Texto de "TextBlock" para "Hello". Em seguida, mude o valor da caixa Nome de "<Sem nome>" para "helloMessage", conforme mostrado na figura a seguir.

Definição das propriedades de TextBlock no Visual Studio

Agora, vamos mudar nome e o conteúdo do controle TextBox. Toque no controle TextBlock para atribuir o foco a ele. No painel Propriedades, mude o valor da caixa Conteúdo de "TextBox" para "Enter your name". Em seguida, mude o valor da caixa Nome de "<Sem nome>" para "nameField".

Agora, vamos criar um código para mudar o conteúdo do controle TextBlock para saudar o usuário depois que ele digitar seu nome e tocar no botão.

No Eclipse, você associaria o comportamento de um evento a um controle associando esse código ao controle, como no código e na imagem a seguir.

Definição das propriedades do botão no Eclipse


<Button
    android:id="@+id/sayHelloButton"
    android:layout_width="147dp"
    android:layout_height="wrap_content"
    android:layout_marginTop="10dip"
    android:onClick="displayMessage"
    android:text="@string/button_title" />


O Visual Studio é semelhante. Na parte superior direita de Propriedades está um botão de relâmpago. É nesse local onde os eventos associados ao controle selecionado estão listados, conforme mostrado na figura a seguir.

Definição do manipulador de eventos do botão no Visual Studio

Para adicionar código referente ao evento de clique no botão, no painel Design, toque primeiro no botão. Em seguida, toque no botão de relâmpago em Propriedades e pressione e segure a caixa ao lado do rótulo Click. O Visual Studio adiciona o texto "sayHelloButton_Click" à caixa Click e depois adiciona e exibe o manipulador de eventos correspondente no arquivo MainPage.xaml.cs, como mostra o código a seguir.


private void sayHelloButton_Click(object sender, RoutedEventArgs e)
{

}

Agora, vamos adicionar um código a esse manipulador de eventos como mostrado a seguir.


private void sayHelloButton_Click(object sender, RoutedEventArgs e)
{
    helloMessage.Text = "Hello " + nameField.Text + "!";
}

Veja a seguir um código semelhante que você criaria no Eclipse.


/** Called when the user clicks the button. */
public void displayMessage(View view) {
    EditText nameField = (EditText) findViewById(R.id.nameField);
    String name = nameField.getText().toString();
    TextView helloMessage = (TextView) findViewById(R.id.messageView);
    helloMessage.setText("Hello "+name+ "!");		
}


Finalmente, para executar o aplicativo, no Visual Studio, torne o projeto no qual você está trabalhando o projeto de inicialização, clicando com o botão direito e selecionando Definir como projeto de inicialização. Em seguida, toque no menu Depurar e e, Iniciar Depuração ou Iniciar sem Depuração. Depois que o aplicativo for iniciado, na caixa Enter your name, digite "Phil". Toque no botão Say Hello e veja o conteúdo do rótulo mudar de "Hello" para "Hello Phil!", conforme mostrado na figura a seguir.

Ao ser executado, o aplicativo exibe Hello e o nome do usuário

Para encerrar o aplicativo, no Visual Studio, toque no menu Depurar e depois em Parar Depuração.

Dica para o Visual Studio

Você pode executar o aplicativo em três modos: no computador local (para um projeto do Windows 8.1), em um simulador ou em um computador remoto. Quando você executa o aplicativo no computador local, ele é executado no modo de tela inteira no mesmo computador que o Visual Studio. Você pode interagir com o aplicativo usando o mouse ou o toque (se estiver disponível no computador). O simulador é um aplicativo de área de trabalho que também é executado no computador local e simula eventos de toque e rotação. Ele é útil principalmente quando o computador local não dá suporte a esses eventos. Ele também pode ser útil para depurar o aplicativo e exibir seu código ao mesmo tempo. Por fim, você pode executar o aplicativo em um computador conectado através de uma rede. Isso é útil principalmente quando esse computador dá suporte a eventos de toque, geolocalização ou sensores físicos de orientação.

Para mudar o modo de execução do aplicativo, na barra de ferramentas do Visual Studio Standard, toque na seta para baixo ao lado de Computador Local, Simulador ou Máquina Remota e selecione um modo diferente. Para executar o aplicativo nesse modo, toque na seta de início ao lado do modo selecionado ou toque no menu Depurar e depois em Iniciar Depuração ou Iniciar sem Depurar.

 

Topo

Lista de controles comuns

Na seção anterior, você trabalhou com apenas três controles. Evidentemente, há muito mais controles disponíveis. A seguir estão alguns mais comuns. Os controles do Android estão listados em ordem alfabética, ao lado dos respectivos controles equivalentes nos aplicativos da Windows Store.

Controle do Android (classe)Controle equivalente no aplicativo da Windows Store

Barra de progresso (ProgressBar)

ProgressRing, ProgressBar

Veja também Guia de início rápido: adicionando controles de progresso

Publicidade (ADView, ADRequest)

Veja SDK de publicidade da Microsoft

Botão (Button)

Button

Veja também Guia de início rápido: adicionando controles de botão

Date picker (DatePicker)

DatePicker disponível somente para aplicativos da Windows Store usando C#, C++ e Microsoft Visual Basic)

DatePicker (disponível somente para aplicativos da Windows Store criados em JavaScript e HTML)

Imagem (ImageView)

Image

Veja também Guia de início rápido: Image e ImageBrush

Texto somente leitura (TextView)

TextBlock

Veja também Guia de início rápido: exibindo texto

Exibição de mapa (MapFragment)

Veja Mapas Bing para aplicativos da Windows Store

Navegação (Activity) e auxiliares de navegação (NavUtils, TaskStackBuilder)

Frame

Veja também Guia de início rápido: navegando entre as páginas

Página (Activity)

Page

Veja também Guia de início rápido: navegando entre as páginas

Lista rolável de itens (ListView)

ComboBox

Veja também Adicionando caixas de combinação e caixas de lista

Contêiner de layout rolável (ScrollView)

ScrollViewer

Veja também Amostra de rolagem, movimento panorâmico e aplicação de zoom em XAML

Widget de pesquisa (SearchView)

Veja Adicionando pesquisa a um aplicativo

Veja também Guia de início rápido: adicionando pesquisa a um aplicativo

Barra de progresso com elevador arrastável (SeekBar)

Slider

Veja também Como adicionar um controle deslizante

Botão de dois estados (RadioButton), caixa de dois estados (CheckBox)

ToggleSwitch

Veja também Como adicionar um botão de alternância

Grade rolável (GridView), layout de linha e coluna (TableLayout)

GridView

Veja também Guia de início rápido: adicionando controles ListView e GridView

Texto editável (EditText)

TextBox

Veja também Guia de início rápido: adicionando entrada de texto e editando controles

Exibição de página da Web (WebView)

WebView

Veja também Amostra de controle WebView em XAML

 

Para obter ainda mais controles, veja Lista de controles.

Observação  Para obter uma lista de controles para os aplicativos da Windows Store que usam JavaScript e HTML, veja Lista de controles.

Topo

Adicionando navegação

O Android oferece três formas principais de gerenciar a navegação: navegação temporal através de telas visitadas anteriormente, navegação ancestral e descendente através de objetos Intent e do método startActivity e navegação lateral através de guias. A navegação temporal é implementada através de uma pilha Voltar do sistema operacional que é gerenciada à medida que o usuário passa de uma atividade para outra ou de um fragmento para outro. Para a navegação ancestral e descendente, uma atividade cria um objeto Intent e inicia uma atividade filha usando o método startActivity ou através de fragmentos. A navegação lateral ocorre através de guias ou de exibições de passagem de dedo.

No Windows 8.1 e Windows Phone 8.1, a navegação deve se mesclar com o conteúdo do aplicativo. Isso é derivado de um dos princípios do design de aplicativos da Windows Store, "conteúdo antes da cromagem". Para saber mais, veja Design de navegação para aplicativos da Windows Store.

Com os aplicativos da Windows Store, uma das maneiras de gerenciar a navegação é com a classe Frame. O seguinte guia passo a passo mostra como você pode tentar fazer isso.

Continuando com a solução MyApp, abra o arquivo MainPage.xaml se ele ainda não estiver visível. Selecione MainPage em MyApp.Windows ou MyApp.WindowsPhone — conforme sua preferência. Adicione um botão ao arquivo MainPage.xaml no modo de exibição de Design. Mude a propriedade Content do botão de "Button" para "Go To Page". Crie um manipulador para o evento Click do botão, conforme mostrado na figura a seguir. Se você não se lembra de como fazer isso, leia o passo a passo na seção anterior Introdução: Conhecendo o Visual Studio (Dica: clique duas vezes no botão do modo Design).

Vamos adicionar uma nova página: toque no menu Projeto e depois em Adicionar Novo Item. Toque em Página em Branco, conforme mostrado na figura a seguir, e toque em Adicionar.

Adicionando uma nova página no Visual Studio

Dica para o Android

A classe Page em aplicativos da Windows Store, que representa uma página, é semelhante à classe Activity no desenvolvimento de aplicativos do Android.

 

Em seguida, adicione um botão ao arquivo BlankPage.xaml. Vamos usar o controle AppBarButton e fornecer a ele uma imagem de seta de voltar: na exibição XAML, adicione <AppBarButton Icon="Back"/> entre os elementos <Grid> </Grid>.

Mudando o estilo de botão padrão para o estilo de botão Voltar

Dica para o Android

Diferentemente do Android, em aplicativos da Windows Store, não há botões "voltar" no nível do sistema nem botões "acima" no nível do aplicativo. No entanto, os desenvolvedores podem implementar a navegação em seus aplicativos da Windows Store através da funcionalidade similar "voltar" ou "para cima". "Voltar" é representado neste exemplo.

 

Agora vamos adicionar um manipulador de eventos ao botão: clique duas vezes no controle do modo Design e o Visual Studio adiciona o texto "AppBarButton_Click" à caixa Clicar, como mostrado na figura a seguir e, em seguida, adiciona e exibe o manipulador de eventos correspondente no arquivo BlankPage.xaml.cs.

Se você voltar para a exibição XAML do arquivo BlankPage.xaml, o código XAML do elemento <AppBarButton> agora deverá ter esta aparência:

<AppBarButton Icon="Back" Click="AppBarButton_Click"/>

Volte ao arquivo BlankPage.xaml.cs e adicione este código para ir à página anterior depois que o usuário tocar no botão.


private void AppBarButton_Click(object sender, RoutedEventArgs e)
{
    // Add the following line of code.    
    Frame.GoBack();
}

Por fim, abra o arquivo MainPage.xaml.cs e adicione este código. Ele abrirá BlankPage depois de o usuário tocar no botão.



private void Button_Click(object sender, RoutedEventArgs e)
{
    // Add the following line of code.
    Frame.Navigate(typeof(BlankPage));
}

Agora execute o programa. Toque no botão "Go To Page" para ir à outra página e toque no botão de seta de voltar para voltar à página anterior.

A navegação progressiva no Windows é semelhante à navegação no Android. No Android, em MainActivity.java, enviamos uma tentativa para invocar a segunda página, como mostrado a seguir.


public void displayMessage(View view) {
		EditText nameField = (EditText) findViewById(R.id.nameField);
		String name = nameField.getText().toString();		
		Intent intent = new Intent(this, MessageActivity.class);
		intent.putExtra(EXTRA_MESSAGE, name);
		startActivity(intent);		
	}


Além disso, em MessageActivity.java, recebemos a tentativa e os dados passados com ela para exibir a saudação, como mostrado a seguir.


protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
	   Intent intent = getIntent();
	   String message = intent.getStringExtra(MainActivity.EXTRA_MESSAGE);		setContentView(R.layout.activity_message);
	   TextView messageView = (TextView) findViewById(R.id.helloMessage);
	   messageView.setText("Hello "+ message+"!");
	   // Show the Up button in the action bar.
	   setupActionBar();
}


No entanto, diferentemente do Windows, a navegação da pilha "voltar" do Android é fornecida por ActionBar e o usuário não precisa fazer nada.

Este tutorial cria uma nova instância de BlankPage sempre que você navega por ele. (A instância anterior será liberada, automaticamente pelo coletor de lixo). Se você não quiser que uma nova instância sempre seja criada, adicione o código a seguir ao construtor da classe BlankPage no BlankPage.xaml.cs. Isso habilitará o comportamento de NavigationCacheMode.


public BlankPage()
{
    this.InitializeComponent();
    // Add the following line of code.
    this.NavigationCacheMode = Windows.UI.Xaml.Navigation.NavigationCacheMode.Enabled;
}

Você também pode obter ou definir a propriedade CacheSize da classe Frame para gerenciar quantas páginas no histórico de navegação podem ser armazenadas em cache.

Para saber mais sobre navegação, veja Guia de início rápido: navegando entre páginas e Exemplo de animações de personalidade XAML.

Observação  Para saber mais sobre navegação para aplicativos da Windows Store que usam JavaScript e HTML, veja Guia de início rápido: usando a navegação de página única.

Dica para o Android

Em um aplicativo genérico do Android, você define a atividade padrão do aplicativo em AndroidManifest.xml. Geralmente, o código se parece com o seguinte:

<activity
    android:name="com.example.myfirstapp.MyActivity"
    android:label="@string/app_name" >
      <intent-filter>
          <action android:name="android.intent.action.MAIN" />
          <category android:name="android.intent.category.LAUNCHER" />
      </intent-filter>
</activity>

Se você abrir o arquivo App.xaml.cs em nosso projeto do Visual Studio e navegar até o final do método OnLaunched, verá um código como esse.


if (!rootFrame.Navigate(typeof(MainPage), args.arguments))
{
    throw new Exception("Failed to create initial page");
}

Esse código exibe MainPage.xaml depois que o aplicativo é iniciado.

 

Topo

Adicionando animações

No Android, você faz as animações através de programação ou com o XML da exibição. Uma animação de exibição permite que uma exibição seja transformada (por posição, tamanho, rotação ou transparência) para criar animações. Uma animação de propriedade permite animar valores de propriedade de objetos de exibição ou de outros tipos. Uma animação desenhável carrega uma série de objetos desenháveis, como bitmaps, um após o outro para criar uma animação. É possível especificar animações desenháveis e de exibição usando o XML ou o código. As animações de transição permitem atrair a atenção do usuário criando uma animação quando um controle entra, sai ou muda uma de suas propriedades. As animações de tema permitem ter maior controle sobre a duração e a ordem das animações. Para animações personalizadas, você pode usar animações de storyboard animando um valor de propriedade de um controle.

As animações nos aplicativos da Windows Store também podem ser criadas através de programação e declarativamente com XAML. Você pode usar o Visual Studio para editar o código XAML diretamente. Além disso, o Visual Studio 2013 é fornecido com uma ferramenta chamada Blend para Microsoft Visual Studio 2013, que edita o código XAML em segundo plano enquanto você trabalha com animações em um designer. Na realidade, o Blend permite até mesmo que você abra, crie, compile e execute projetos completos do Visual Studio. O tutorial a seguir permite experimentar.

Crie um novo projeto (para plataforma ou universal) e o nomeie com algo como "SimpleAnimation". Neste projeto, vamos mover um retângulo, desbotá-lo e trazê-lo de volta à exibição. As animações em XAML se baseiam no conceito das storyboards. As storyboards usam quadros-chave para animar as alterações da propriedade. Não há animações implícitas nos aplicativos da Windows Store, mas, como você verá, a animação de propriedades é simples.

Com o projeto aberto, no Gerenciador de Soluções, pressione e segure o nome do projeto. Em seguida, toque em Abrir no Blend, como mostra a imagem a seguir. O Visual Studio continua sendo executado em segundo plano.

Abra no comando de menu Blend

Depois que o Blend for iniciado, você deverá ver algo semelhante à figura a seguir.

Ambiente de desenvolvimento do Blend

Toque em Rectangle na janela Tools para selecioná-lo e desenhe um retângulo em Design View, conforme mostrado na figura a seguir.

Adicionando Rectangle a Design View

Para deixar o retângulo verde, na janela Properties, na área Brush, toque no botão Solid color brush, toque no ícone Color eyedropper e toque em algum lugar na faixa verde de matizes.

Para começar a animação do retângulo, na janela Objects and Timeline, toque no botão do símbolo de mais (New) conforme mostrado na figura a seguir e toque em OK.

Adicionando uma storyboard

Uma storyboard aparece na janela Objects and Timeline. O Design View exibe mudanças para mostrar que a gravação da linha do tempo Storyboard1 está ativa. Para capturar o estado atual do retângulo, na janela Objects and Timeline, toque no botão Record Keyframe logo acima da seta amarela, conforme mostrado na figura a seguir.

Gravando um quadro-chave

Agora vamos mover o retângulo e fazê-lo desaparecer. Para fazer isso, arraste a seta amarela para a posição de dois segundos e arraste o retângulo um pouco para a direita. Na janela Properties, na área Appearance, mude a propriedade Opacity para 0, conforme mostrado na figura a seguir. Para visualizar a animação, toque no botão Play, que está circundado na figura a seguir.

Janelas de propriedades e botão Play

Vamos trazer o retângulo de volta à exibição. Na janela Objects and Timeline, toque em Storyboard1. Na janela Properties, na área Common, toque em AutoReverse, conforme mostrado na figura a seguir.

Selecionando uma storyboard

Por fim, toque no botão Play para ver o que acontece.

Você pode executar o projeto tocando no menu Project e tocando em Run Project (ou basta pressionar F5). Se fizer isso, você verá o retângulo verde, mas ele não estará animado. Para iniciar a animação, você precisará adicionar uma linha de código ao projeto. Veja aqui como fazer isso.

No Blend, toque no menu File, toque em Save e volte para o Visual Studio. Se o Visual Studio exibir uma caixa de diálogo perguntando se você quer recarregar o arquivo modificado, toque em Yes. Abra o arquivo MainPage.xaml.cs e adicione o seguinte código.


protected override void OnNavigatedTo(NavigationEventArgs e)
{
    // Add the following line of code.
    Storyboard1.Begin();
}

Execute o projeto novamente e assista ao retângulo animado.

Se você abrir o arquivo MainPage.xaml, no modo de exibição XAML, verá o código XAML que o Blend adicionou enquanto você trabalhava no designer. Em particular, analise o código nos elementos <Storyboard> e <Rectangle>. O código a seguir mostra um exemplo. As reticências indicam código não relacionado omitido por questões de brevidade; as quebras de linha foram adicionadas para melhorar a legibilidade do código.


...
<Storyboard 
        x:Name="Storyboard1" 
        AutoReverse="True">
    <DoubleAnimationUsingKeyFrames 
            Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)"
            Storyboard.TargetName="rectangle">
        <EasingDoubleKeyFrame 
                KeyTime="0" 
                Value="0"/>
        <EasingDoubleKeyFrame 
                KeyTime="0:0:2" 
                Value="185.075"/>
    </DoubleAnimationUsingKeyFrames>
    <DoubleAnimationUsingKeyFrames 
            Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" 
            Storyboard.TargetName="rectangle">
        <EasingDoubleKeyFrame 
                KeyTime="0" 
                Value="0"/>
        <EasingDoubleKeyFrame 
                KeyTime="0:0:2" 
                Value="2.985"/>
    </DoubleAnimationUsingKeyFrames>
    <DoubleAnimationUsingKeyFrames 
            Storyboard.TargetProperty="(UIElement.Opacity)" 
            Storyboard.TargetName="rectangle">
        <EasingDoubleKeyFrame 
                KeyTime="0" 
                Value="1"/>
        <EasingDoubleKeyFrame 
                KeyTime="0:0:2"
                Value="0"/>
    </DoubleAnimationUsingKeyFrames>
</Storyboard>
...
<Rectangle 
        x:Name="rectangle" 
        Fill="#FF00FF63" 
        HorizontalAlignment="Left" 
        Height="122" 
        Margin="151,312,0,0" 
        Stroke="Black" 
        VerticalAlignment="Top" 
        Width="239" 
        RenderTransformOrigin="0.5,0.5">
    <Rectangle.RenderTransform>
        <CompositeTransform/>
    </Rectangle.RenderTransform>
</Rectangle>
...

Compare isso a uma animação semelhante do Android que anima o local de um quadrado e sua opacidade. A animação definida no XML tem muitas semelhanças, conforme mostrado no código a seguir.


<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" android:ordering="together" >
    <objectAnimator
        android:propertyName="TranslationX"
        android:duration="2000"
        android:valueFrom="0"
        android:valueTo="400"
        android:repeatCount="1"
        android:repeatMode="reverse"
        android:valueType="floatType"/>
    <objectAnimator
        android:propertyName="TranslationY"
        android:duration="2000"
        android:valueFrom="0"
        android:valueTo="300"
        android:repeatCount="1"
        android:repeatMode="reverse"
        android:valueType="floatType"/>
    <objectAnimator
        android:propertyName="Alpha"
        android:duration="2000"
        android:valueFrom="1"        
        android:valueTo="0"        
        android:repeatCount="1"
        android:repeatMode="reverse"
        android:valueType="floatType"/>        
</set>


A animação é iniciada através da programação do código a seguir.


...
ImageView iView = (ImageView) findViewById(R.id.ImageView1);
iView.setImageResource(R.drawable.green_rect);
AnimatorSet set = (AnimatorSet) AnimatorInflater.loadAnimator(this, R.animator.animation1);
set.setTarget(iView);
set.start();
...

No Eclipse, a animação deve ser criada manualmente. No Windows, o Blend facilita consideravelmente criar a animação de forma interativa e testá-la.

Para saber mais sobre animações, veja Animando sua interface do usuário.

Observação  Para saber mais sobre animações para aplicativos da Windows Store em JavaScript e HTML, veja Animando sua interface do usuário (HTML).

Topo

Próximas etapas

Agora, você pode criar aplicativos da Windows Store mais robustos com base nos aplicativos que começou a criar nestes breves guias passo a passo. Tendo isso como base, convidamos você a explorar os seguintes recursos adicionais:

Além disso, verifique se visitou nossos Recursos de comunidade para saber como obter ajuda e ficar conectado através de fóruns de desenvolvedores, blogs, palestras e workshops para desenvolvedores e eventos e contatos locais da Microsoft.

Acreditamos que o Windows 8.1 e Windows Phone 8.1 abrirá novas oportunidades de criação de aplicativos para você. Aguardamos ansiosos para ver os excelentes aplicativos que você vai criar!

Topo

 

 

Mostrar:
© 2014 Microsoft