Relative Layout

Relative Layout

Boa noite galera,

Hoje vou apresentar para vocês o componente Relative Layout.

Primeiramente gostaria de me apresentar, sou o Leonardo, estou trabalhando junto com o Rafael e o Albert nesse projeto de divulgação do xamarin, também me tornei um XSA, e é um grande prazer estar compartilhando conhecimento com todos vocês.

Apresentação feita, vamos para o que interessa e o que todos querem ver, programação Xamarin !!!

Esse componente é utilizando para personalizar telas, sobrepor componentes de uma maneira que fique apresentável e bonita para o usuário final.

Então vamos lá, iremos utilizar um projeto já publicado pelo Rafael que está la no GitHub chamado ContactList.

Primeiramente fiz algumas modificações para facilitar a explicação do Relative Layout.

A primeira delas é alterar a classe Contato, criando novos atributos

Posteriormente, vamos modificar a classe ListaContatos.xaml.cs, para não trazer os contatos do telefone e sim dados ficticios para montarmos nossa página de detalhes, modifique conforme a imagem abaixo:

Lista para Tela com Relative Layout

No método getList, retorne uma lista de contatos com os contatos que desejar.

Verifique também, que incluímos o método OnAppearing(), onde criamos um método plugado ao evento ItemSelected da lista, ou seja, assim conseguiremos chamar a outra tela quando clicarmos em um dos itens da lista.

Agora criaremos três novas classes, dentro da pasta Views no projeto portable (ContactList), chamadas ContactDetails que deve ser herdada de ContentPage, DetailsView e PicturesSlideView ambas herdadas de ContentView.

Decidi criar as telas via código fonte e não utilizando XAML, ao meu ver facilita o aprendizado, já que você estará montando a tela na mão e conhecendo melhor os componentes.

As classes DetailsView e PicturesSlideView são do tipo ContentView, ou seja, fazendo um paralelo com o desenvolvimento em asp.net ou winforms, ele é equivalente ao UserControl, são controles que irão ser “pregados” na nossa view principal.

Agora após termos criados as nossas ContentViews, iremos utilizá-las na nossa página de Detalhes (ContactDetails).

Tela de Detalhe – Começando o Relative Layout

Então, vamos criar nosso componentes que serão setados ao nosso Relative Layout que é o nosso maior objetivo nesse post. No construtor da nossa página de detalhes implemente os componentes:

Snippet

BackgroundColor = Color.White;
 
            var backgroundImage = new Image()
            {
                Source = new FileImageSource() { File = contact.ListUrlImages.First() },
                Aspect = Aspect.AspectFill,
                IsOpaque = true,
                Opacity = 0.8
            };
 
            var boxView = new BoxView()
            {
                Color = Color.Black.MultiplyAlpha(.5)
            };
 
            var profileImage = new Image()
            {
                Aspect = Aspect.AspectFill,
                Source = new FileImageSource() { File = contact.ProfileUrlImage }
            };
 
            var details = new DetailsView(contact.Name, contact.Phone, contact.Email, contact.History);
            var picturesSlide = new PicturesSlideView(contact.ListUrlImages);

Perceba que os dois últimos componentes são as classes de ContentView que criamos !!

As imagens que forem adicionadas devem estar dentro da pasta Resources dos projetos IOS e Android, no nosso caso estão somente na pasta do projeto .Droid

Após criarmos esses componentes, temos que organizá-los de uma forma legal para ser apresentada ao nosso usuário final, utilizaremos então o Relative Layout, após a declaração dos componentes implemente o Relative Layout.

O Relative Layout, assim como o Stack Layout é um componente que utilizaremos para adicionar outros componentes dentro dele, porém o Relative Layout nos permite posicionar os elementos de uma forma mais livre, fazendo sobreposições de elementos, diferentemente do Stack Layout.

No trecho de código abaixo, veremos que após criarmos o componente Relative Layout, iremos adicionar “Childrens” dentro dele com algumas formatações. Assim que chamarmos o método Add, ele nos pedirá alguns parâmetros, são eles:

  • Componente que deseja adicionar, no caso os que criamos anteriormente (boxView, backgroudImage …)
  • Posição Y do elemento na tela (posição Y no plano cartesiano)
  • Posição X do elemento na tela (posição X no plano cartesiano)
  • Width do elemento na tela (largura)
  • Height do elemento (altura)

Esses parâmetros devem ser preenchidos com um classe chamada Constraint do xamarin, se você deseja colocar valores fixos, então utilizaremos Constraint.Constant(valor).

Caso você deseja que a posição seja relativa ao próprio componente Relative Layout, deve-se utilizar o método Constraint.RelativeToParent,podemos ver no componente backgroundImage que o seu width vai ser igual ao do seu parent(RelativeLayout).

Também existe uma outra relação chamada Constraint.RelativeToView, esse pedirá dois parâmetros iniciais, são eles:

  • View (qual componente alvo para as definições de posição)
  • Delegate (parent, view), sendo Parent o elemento Pai, no nosso caso o Relative Layout e View, o componente alvo que definimos no parâmetro  anterior.

Com isso conseguimos definir qualquer posição para os nossos elementos que serão adicionados dentro do nosso Relative Layout.

Snippet

rl.Children.Add(
    backgroundImage,
    Constraint.Constant(0),
    Constraint.Constant(0),
    Constraint.RelativeToParent((parent) =>
    {
        return parent.Width;
    }),
    Constraint.RelativeToParent((parent) =>
    {
        return parent.Height * .5;
    })
    );
 
rl.Children.Add(
    boxView,
    Constraint.Constant(0),
    Constraint.Constant(0),
    Constraint.RelativeToParent((parent) =>
    {
        return parent.Width;
    }),
    Constraint.RelativeToParent((parent) =>
    {
        return parent.Height * .5;
    })
    );
 
rl.Children.Add(
    profileImage,
    Constraint.RelativeToParent((parent) =>
    {
        return (parent.Width / 2) - (profileImage.Width / 2);
    }),
    Constraint.RelativeToParent((parent) =>
    {
        return parent.Height * .25;
    }),
    Constraint.RelativeToParent((parent) =>
    {
        return parent.Width * .5;
    }),
    Constraint.RelativeToParent((parent) =>
    {
        return parent.Width * .5;
    })
    );
 
rl.Children.Add(
    details,
    Constraint.Constant(0),
    Constraint.RelativeToView(profileImage, (parent, view) =>
    {
        return view.Y + view.Height;
    }),
    Constraint.RelativeToParent((parent) =>
    {
        return parent.Width;
    }),
    Constraint.Constant(120)
    );
 
rl.Children.Add(
    picturesSlide,
    Constraint.Constant(0),
    Constraint.RelativeToView(details, (parent, view) =>
    {
        return view.Y + view.Height;
    }),
    Constraint.RelativeToParent((parent) =>
    {
        return parent.Width;
    }),
    Constraint.RelativeToView(details, (parent, view) =>
    {
        var detailsBottomY = view.Y + view.Height;
        return parent.Height - detailsBottomY;
    })
    );

Abaixo estão as telas que desenvolvemos:

Lista do projeto com Relative Layout Tela com Relative Layout Tela com Relative Layout Tela com Relative Layout

Então galera, esse foi o nosso post sobre RelativeLayout, o código fonte já está no GitHub, qualquer dúvida estamos à disposição =)

Relative Layout
5 (100%) 1 voto

Leonardo

Xamarin Student Partner, apaixonado pela tecnologia .NET, Desenvolvedor na BRAE Biotecnologia, atua a mais de 4 anos no mercado com .NET

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

%d blogueiros gostam disto: