Xamarin (Prototipando APPs)

Xamarin Forms [A magia das classes – SimplesPrototype]

Continuando a saga para nos familiarizar XAML e C# do Xamarin.Forms.

A missão de hoje é aprender como desenvolver um protótipo APP X.Forms simples, incluindo alguns de seus componentes básicos.

Mas como projetos de protótipos são feitos para serem interativos, abordaremos alguns destes recursos. Vamos lá:

Este é o resultado final da App em execução.

Temos uma página de login nativa no Android e iOS.

Note que temos um APP que utiliza muitos controles comuns de UI (Entry,Label e Button). Observe também que a navbar terá texto branco para representar os screenshots acima.

XAML

No arquivo LoginPage.xaml:

Aqui temos apenas XAML, mas podemos fazer isso também em C#. Note que o arquivo é um XML e possui referências ao Xamarin.Forms e ao XAML.

Veja que automaticamente temos uma content page para adicionar algum conteúdo. Ou seja, defino o layout como ContentPage que exibe uma única View.

Em seguida, eu defino um StackLayout com 200 estofamento na parte superior e um fundo alaranjado.

Agora, dentro da stacklayout (orientado verticalmente por padrão), adicione um label, duas entry, e três buttons. A label e as duas entry será parecido com este:

Agora temos um label e, em seguida, duas entry dentro de outro stacklayout. A razão de colocar essas duas entries dentro de um novo stacklayout é para se certificar do espaçamento 20 na page stacklayout não se aplicam a esses elementos.

Aqui está o resto do XAML para o LoginPage:

Por último, eu defino 2 Entry (Nome e Pwd).

LoginPage.xaml.cs

Para exibir o form.

Os Namespaces utilizados

using Xamarin.Forms;

Antes de tudo vamos carregar os namespaces.


public LoginPage ()
{
InitializeComponent ();
NavigationPage.SetHasNavigationBar (this, false);
buttonLogin.Clicked += async (object sender, EventArgs e) => {
await Navigation.PushAsync (new ActivityFeedPage ());
};
}


Aqui temos uma login page estática, mas protótipos são feitos para ser interativo; queremos que o app para navegar quando o usuário clica no botão Log in.

No LoginPage.xaml.cs, adicione um event handler para esse botão, bem como uma linha de código para ocultar a navbar na LoginPage.

No event handler, utilizo a propriedade de navegação (concedido pelo NavigationPage lá no App.cs) para (push)empurrar um novo ActivityFeedPage. Você terá que adicionar um novo arquivo ContentPage XAML ActivityFeedPage para isto funcionar.

App1.cs
Agora ajuste este código do projeto:

public App ()
{
MainPage = new NavigationPage(new LoginPage())
{
BarBackgroundColor = Color.Transparent,
BarTextColor = Color.White
};
}

Aqui apenas instancio a classe NavPage para exibir a LoginPage assim que o APP for iniciado.

Ou seja, estou envolvendo a LoginPage em um NavPage e alterando algumas propriedades da navbar.

Isso provê uma NavigationPage, com propriedades de navegação simples para que possamos facilmente passar de uma tela para através do protótipo.

Pronto! Agora temos uma UI que simula um protótipo.

Agora é só compilar e testar a APP.

Missão cumprida!