Back-End

17 out, 2016

Xamarin.Forms – Definindo a interface via código C#

Publicidade

No artigo de hoje, vou mostrar como criar uma aplicação multiplataforma que pode ser usada no Windows Phone, Android e iOS, usando o Xamarin.Forms. O foco de hoje será como definir a interface com o usuário via código C# na aplicação Xamarin Forms.

Um dos maiores benefícios do Xamarin.Forms é que ele permite desenvolver aplicativos móveis para as plataformas Android, iOS e Windows Phone. Assim, podemos usar o Xamarin integrado ao VS 2015 e à linguagem C# para criar aplicações para várias plataformas.

O Xamarin.Forms fornece um conjunto de ferramentas multiplataforma com páginas, layouts e controles, e esses elementos são construídos usando XAML ou codificados usando a linguagem C#, através do uso das classes Page, Layout, View e Cells.

Nota: Cells são elementos especializados usados para itens em uma lista, e descrevem como cada item em uma lista deve ser desenhado.

Nota: Como eu não tenho  um Mac (ainda) em meu ambiente, neste artigo eu vou focar o desenvolvimento, build e testes para a aplicação Android usando o Visual Studio e a linguagem C#.

Páginas, Layouts e views são os componentes-base da interface do usuário (UI) do Xamarin.Forms:

xamxam-1

As páginas são o container principal, e cada tela é preenchida por uma única classe Page que é derivada de Xamarin.Forms.VisualElement, que é a classe base para criar outras classes da UI.

Os objetos Page fornecem páginas de menu familiares como:

  • NavigationPane – para menus hierárquicos;
  • TabbedPage – para menus de abas;
  • MasterDetailPage – para gavetas de navegação;
  • CarouselPage – para rolagem de páginas de imagens;
  • ContentPage – classe-base para criar páginas personalizadas.

Uma página pode conter variações da classe Layout, que pode conter outros layouts usados para posicionar e dimensionar o seu conteúdo. As propriedades Content e Children dos layouts contêm outros layouts e views. As propriedades HorizontalOptions e VerticalOptions são usadas para fazer o alinhamento.

Os layouts abrangem os formatos-padrão:

  • StackLayout
  • AbsoluteLayout
  • RelativeLayout
  • Grid
  • ScrollView
  • ContentView

As páginas e os layouts contêm as views que são controles que herdam da classe View. Como exemplo de views temos os botões (button) , os rótulos (label), as caixas de texto (entry), Listvie, etc.

Nota: Em tempo de execução, cada controle será mapeado para o seu equivalente nativo que será renderizado.

Em cada página, os elementos visuais são organizados em uma hierarquia pai-filho. O filho de um ContentPage é geralmente um layout de algum tipo para organizar o visual.

Alguns layouts têm um único filho (child), mas muitos layouts podem ter vários filhos que o layout organiza dentro de si. Esses filhos (children) podem ser outros layouts ou views. Diferentes tipos de layouts arranjam filhos em uma pilha (stack), num grid bidimensional ou de um modo mais livre.

Todos esses elementos compõem a interface de usuário (UI) de uma aplicação móvel e, podemos criar essa interface com o usuário no Xamarin.Forms de duas maneiras:

  • Via código C#;
  • Via código XAML;

Neste artigo, vou mostrar como definir uma interface básica via código C#.

Requisitos necessários:

Criando a solução Xamarin.Forms no Visual Studio 2015

Abra o Visual Studio Community 2015 e clique em New Project.

Selecione Visual C#, o template Cross Plataform e a seguir Blank App (Xamarin.Forms Portable).

Nota:  A opção Portable (Portable Class Library – PCL ) inclui todo o código comum em uma biblioteca de vínculo dinâmico (DLL) que pode então ser referenciada a partir de outros projetos.

Informe o nome AppXamarin1 e clique no botão OK.

xam-2

Ao clicar no botão OK, será criada uma solução contendo 4 projetos (dependendo do seu ambiente, pode haver alguma variação nos projetos).

  • 1 Projeto comum contendo a maior parte do código da aplicação – esse é o projeto Portable, cuja compilação pode ser compartilhada com outras plataformas
  • 1 Projeto para plataforma Android
  • 1 Projeto para plataforma iOS
  • 1 Projeto para Windows 8.1 ou para Windows 10
  • 1 Projeto para plataforma Windows Phone

Nota: Durante o processo de criação dos projetos, ao criar o projeto para o iOS, será apresentada a janela Xamarin Mac Agent Instructions, com instruções para identificar e localizar o Mac (a própria máquina ou em uma rede local). Se você não tiver um Mac (como eu), clique no botão OK e a seguir clique no botão Close. Com isso, não poderemos compilar nem testar projetos iOS no Visual Studio.

O projeto comum possui a classe App.cs que irá conter o código compartilhado e que vamos usar neste artigo.

Podemos, na janela de propriedades da solução, marcar a opção – Multiple startup projects – e selecionar quais projetos vamos fazer o deploy e executar:

xam-3

Criando a UI via código

Vamos abrir o arquivo App.cs e alterar o seu código conforme abaixo:

using Xamarin.Forms;

namespace AppXamarin1
{
    public class App : Application
    {
        Button button1;

        public App()
        {
            var label = new Label
            {
                Text = "Olá , Xamarin Forms !",
                TextColor = Color.Red,
                FontSize = 20,
                VerticalOptions = LayoutOptions.Center
            };

            button1 = new Button
            {
                Text = "http://www.macoratti.net",
                FontSize = Device.GetNamedSize(NamedSize.Medium, typeof(Button)),
                HorizontalOptions = LayoutOptions.Center,
                VerticalOptions = LayoutOptions.Fill
            };

            button1.Clicked += Button_Clicked;

            var entry = new Entry
            {
                Placeholder = "Quase tudo para .Net",
                VerticalOptions = LayoutOptions.CenterAndExpand,
                Keyboard = Keyboard.Text
            };

            var datepicker = new DatePicker
            {
                VerticalOptions = LayoutOptions.CenterAndExpand
            };

            var boxview = new BoxView
            {
                Color = Color.Green,
                WidthRequest = 100,
                HeightRequest = 100,
                HorizontalOptions = LayoutOptions.StartAndExpand,
                VerticalOptions = LayoutOptions.Fill
            };

            var imagem = new Image
            {
                Source = "icon.png",
                Aspect = Aspect.AspectFit,
                HorizontalOptions = LayoutOptions.End,
                VerticalOptions = LayoutOptions.Fill
            };

            MainPage = new ContentPage
            {
                BackgroundColor = Color.Silver,
                Content = new StackLayout
                {
                    Orientation = StackOrientation.Vertical,
                    Children = { label, button1, entry, datepicker, boxview, imagem }
                }
            };
        }

        private void Button_Clicked(object sender, System.EventArgs e)
        {
            button1.Text = "Macoratti .net ";
        }

        protected override void OnStart()
        {
            // Handle when your app starts
        }

        protected override void OnSleep()
        {
            // Handle when your app sleeps
        }

        protected override void OnResume()
        {
            // Handle when your app resumes
        }
    }
}

Vamos entender o código:

Como você pode ver, no final do código, estamos usando um objeto ContentPage, no qual estamos definindo a sua propriedade Content para uma nova instância de um controle StackLayout.

           MainPage = new ContentPage
            {
                BackgroundColor = Color.Silver,
                Content = new StackLayout
                {
                    Orientation = StackOrientation.Vertical,
                    Children = { label, button1, entry, datepicker, boxview, imagem }
                }
            };

O controle StackLayout é usado para dispor outros controles em uma pilha, um sobre o outro, segundo uma orientação vertical (nesse exemplo).

O layout de um controle individual é definido usando a propriedade HorizontalOptions ou VerticalOptions com uma das classes LayoutOptions:

  • Start – justifica o controle à esquerda ou acima (depende da propriedade Orientation);
  • Center – centraliza o controle;
  • End – justifica o controle à direita ou abaixo;
  • Fill – expande o tamanho do controle para preencher o espaço;
  • StartAndExpand – igual a Start e ao redor ele é preenchido com espaço;
  • CenterAndExpand – igual a Center e ao redor ele é preenchido com espaço;
  • EndAndExpand – igual a End e ao redor ele é preenchido com espaço;
  • FillAndExpand – igual a Fill e ao redor ele é preenchido com espaço;

Usando a sua propriedade Children, definimos 6 controles filhos que serão instanciados e dispostos na interface com base nos seus tamanhos.

Definimos os seguintes controles na propriedade Children:

  • Label –  Exibe uma sequência simples de texto em linha única ou várias linhas;
  • Button – Exibe um botão de comando e permite definir um evento para tratar o clique do usuário;
  • Entry – Permite que o usuário digite uma única linha de texto;
  • DatePicker – Permite que o usuário selecione uma data;
  • BoxView – Cria um retângulo gráfico colorido;
  • Image – Permite exibir uma imagem usando sua propriedade Source.

Vou comentar somente o controle Image, pois os demais são bem simples.

Usamos o seguinte código para exibir a imagem no controle Image:

            var imagem = new Image
            {
                Source = "icon.png",
                Aspect = Aspect.AspectFit,
                HorizontalOptions = LayoutOptions.End,
                VerticalOptions = LayoutOptions.Fill
            };

A propriedade Source representa o local da imagem e, no nosso exemplo, copiamos essa imagem para a pasta Resources/drawable do projeto Android para que ela seja exibida no projeto, visto que as imagens locais possuem pastas específicas da plataforma em seus projetos.

O dimensionamento da imagem é feito usando a propriedade Aspect sendo definida pelo enumerador Aspect. Assim, podemos ter:

  • Aspect.AspectFill – dimensiona a imagem para preencher a view, recortando-a se necessário;
  • Aspect.AspectFit – dimensiona a imagem para caber na view, mantendo a taxa de proporção sem distorcer a imagem;
  • Aspect.Fill – dimensiona a imagem para preencher a view de maneira total e precisa, podendo distorcer a imagem.

Abaixo, vemos o resultado da execução no Android e no Windows:

xam-4xam-5

Outra opção para criar o código da interface com o usuário é utilizar os arquivos XML que veremos no próximo artigo.

Pegue o projeto aqui: AppXamarin1.zip (sem as referências).