1

To tentando criar uma tela que tem uma imagem no final da screen e por cima dela fica os botoes de login, tipo essa aqui: tela que quero

com o retangulo amarelo em baixo e os botoes por cima dela. mas nao consigo fazer, veja o resultado:

tela que fiz

e aqui vai o codigo:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         x:Class="vanhack.mobile.StartPageView"
         BackgroundImage="bg.png">
<StackLayout>
    <Label Text="Tentando Fazer um layout bonito!" VerticalOptions="Center"></Label>
    <StackLayout VerticalOptions="EndAndExpand">
        <RelativeLayout >
            <Button Text="Log In With e-mail" Command="{Binding EmailLoginCommand}"></Button>
            <Image Source="Rectangle2.png"  />
            <Image Source="linkedin.png"  />
        </RelativeLayout>

    </StackLayout>
</StackLayout>

Como ajeitar?

2 Respostas 2

1

A imagem está sobrepondo o botão, basta adicionar o botão após a imagem.

<RelativeLayout >
   <Image Source="Rectangle2.png"  />
   <Image Source="linkedin.png"  />
   <Button Text="Log In With e-mail" Command="{Binding EmailLoginCommand}"></Button>
</RelativeLayout>

Veja o resultado:


Captura tela

Recomendo o uso de Grid caso queira posicionar o botão em um local específico da tela.

Cor do botão utilizado no exemplo:

<Button Text="Log In With e-mail" Command="{Binding EmailLoginCommand}" BackgroundColor="#F2C248"/>
2
  • Olá! obrigado por responder, viu que o triangulo amarelo perdeu tamanho? queria que ficasse do msm tamanho. =x
    – Biellx
    28/08/2016 às 20:30
  • @Biellx Eu não tenho as imagens originais que você utilizou, se deixar um link para elas aqui posso fazer outro teste. Vale lembrar também que é importante positivar e marcar a resposta como aceita. 28/08/2016 às 21:01
0

Cara, não usa esse relative layout, tenta usar o grid que é muito melhor.

O grid tem um comportamento parecido com o table onde você controla a quantidade de linhas e colunas e consegue usar o span igual no html

    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="Auto" />  isso serve para ajustar a largura de acordo com o tamanho do campo
      <ColumnDefinition Width="*" />isso serve para preencher todo o espaço
      <ColumnDefinition Width="40" />
    </Grid.ColumnDefinitions>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .