Android Xamarim V Studio

alfinete · 8 de Fevereiro de 2020

Boa Noite

Estou a Tentar fazer um Layout simples em android [Xamrim] mas que seja tipo responsive par aqualquer tamanho de monitor de tablet ou tlm.

Código:

  <RelativeLayout Padding="0">
  <!-- Background -->
  <!--<Image Aspect="AspectFill" Source="background.png" RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width}" RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height}">
  </Image>-->
  <Grid>
  <Grid.ColumnDefinitions>
  <ColumnDefinition Width="*" >
  </ColumnDefinition>
  <ColumnDefinition Width="8*">
  </ColumnDefinition>
  <ColumnDefinition Width="*">
  </ColumnDefinition>
  </Grid.ColumnDefinitions>
  <Grid.RowDefinitions>
  <RowDefinition Height="*">
  </RowDefinition>
  <RowDefinition Height="*">
  </RowDefinition>
  <RowDefinition Height="*">
  </RowDefinition>
  <RowDefinition Height="*">
  </RowDefinition>
  </Grid.RowDefinitions>
   


<StackLayout Grid.Row="1"  Grid.Column="0" BackgroundColor="Aqua" HorizontalOptions="Start">
  </StackLayout>
  <StackLayout  Grid.Row="1" Grid.Column="1" BackgroundColor="Blue"  VerticalOptions="Fill" HorizontalOptions="Fill" IsClippedToBounds="True">
  <Label Text="LOGO" FontSize="Large">
  </Label>
  </StackLayout>
  <StackLayout  Grid.Row="1" Grid.Column="2" BackgroundColor="red">
  </StackLayout>
  </Grid>
  </RelativeLayout>

Tenho uma Grid com 3 colunas em que a primeira e a ultima é apenas uma lateral com no maximo 10% pelo menos é o que estou a Testar

a coluna do meio é do tipo pare Fazer um formulário

onde temos o texto "LOGO" se o texto for pequeno só estica ate ao tamanho de mesmo - aqui eu queria que ele pusesse o Tamanho do stack com width ao máximo da percentagem da coluna.

quando punho um texto que ocupa mais que a percentagem da coluna ele faz wrap ao texto e estica a mesma ao máximo [Aqui esta correcto]

eu queria que ele fizesse o mesmo quando textos [ou outro obj qualquer] menores que o with da coluna.

Obrigado Aguardo

alfinete · 18 de Fevereiro de 2020

Resolvido

Utilização de CSs
Ecrã Dinamico Conforme os varios Tamanhos de Monitor mobile

testado em samsung 5 polgadas tlm , e tabllet samsung 10 polgadas

Form.css - Stylesheet referente ao Form em causa
CssTest.Xaml - Desenho do Form
CssTest.Xaml.cs- Tratamento de Alguns tamanhos de Objectos em percentagem

________________________________________

Código:

.ContPage {
  background-color: #454545;
  padding: 14px;
}

Label {
  text-align: center;
  font-style: normal;
  font-size: large;
  background-color: #454545;
  color: #FFFFFF;
}


.body {
  align-items: center;
  justify-content: center;
  color: #fff;
  background-color: #000000;
  
}


entry {
  margin: 10 10 0;
  color: #FFFFFF;
  /*background-color: #F8F8FF;*/
  border-color: #FFFFFF;
  border-radius: 5;
}

Ficheiro CssTest.Xaml
________________________________________

Código:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
  xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
  x:Class="BdFacturas.Views.CssTest"
  BackgroundColor="#454545"
  >
  <ContentPage.Resources>
  <StyleSheet Source="/Assets/Form.css" />
  
  <ResourceDictionary>
  <Style x:Key="EntryStyle" TargetType="Entry">
  <Setter Property="TextColor"  Value="#FFFFFF" />
  <Setter Property="PlaceholderColor"  Value="#F4A460" />
  </Style>
  </ResourceDictionary>
  </ContentPage.Resources>
  
  <!--Grid Principal
  Comtem 3 Colunas
  Coluna 1  Espaçamento a esquerda
  Coluna 2  Zona de Conteudo
  Coluna 3  Zona de Espaçamento á Direira -->
  <Grid x:Name="GrdGeneric" RowSpacing="0">
  <Grid.ColumnDefinitions>
  <ColumnDefinition Width="5*"> </ColumnDefinition>
  <ColumnDefinition Width="90*"></ColumnDefinition>
  <ColumnDefinition Width="5*"> </ColumnDefinition>
  </Grid.ColumnDefinitions>
  <Grid.RowDefinitions>
  <RowDefinition Height="Auto"></RowDefinition>
  <RowDefinition Height="*">  </RowDefinition>
  <RowDefinition Height="Auto"></RowDefinition>
  <RowDefinition Height="Auto"></RowDefinition>
  </Grid.RowDefinitions>

  <!--Titulo  1ª Linha-->
  <!--Zona A esquerda Grid Principal-->
  <StackLayout Grid.Row="0"  Grid.Column="0" HorizontalOptions="FillAndExpand">
  </StackLayout>
  <!--Zona De Conteudo-->
  <StackLayout Grid.Row="0"  Grid.Column="1" HorizontalOptions="FillAndExpand" x:Name="StkContentTitle">
  <Label HorizontalOptions="CenterAndExpand"  Text="formulario insersão alo alo alo alo alo"></Label>
  </StackLayout>
  <!--Zona A direita Grid Principal-->
  <StackLayout Grid.Row="0"  Grid.Column="2" HorizontalOptions="FillAndExpand">
  </StackLayout>

  <!-- formulario 2ª Linha-->
  <!--Zona A esquerda Grid Principal-->
  <StackLayout Grid.Row="1"  Grid.Column="0" HorizontalOptions="FillAndExpand">
  </StackLayout>
  <!--Zona De Conteudo Formulario-->
  <StackLayout Grid.Row="1"  Grid.Column="1" HorizontalOptions="FillAndExpand">
  <ScrollView>
  <StackLayout >
  <!--Grid Formulário
  Comtem 1 Coluna
  Coluna 1  Conteudo
  Feito com Grip pois podemos querer dividir por mais colunas
  -->
  <Grid x:Name="GrdForm" RowSpacing="0">
  <Grid.ColumnDefinitions>
  <ColumnDefinition Width="100*"></ColumnDefinition>
  </Grid.ColumnDefinitions>
  <Grid.RowDefinitions>
  <RowDefinition Height="Auto"></RowDefinition>
  <RowDefinition Height="Auto"></RowDefinition>
  <RowDefinition Height="Auto"></RowDefinition>
  <RowDefinition Height="Auto"></RowDefinition>
  <RowDefinition Height="Auto"></RowDefinition>  
  </Grid.RowDefinitions>

  <StackLayout Grid.Row="0" Grid.Column="0" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" x:Name="StkContentForm0">
  <Entry x:Name="EtrNome"  Style="{StaticResource EntryStyle}"  Placeholder="Nome" HorizontalOptions="FillAndExpand" VerticalOptions="Center"
  Margin="5,0,0,0"></Entry>
  <Entry x:Name="EtrEnteado"  Style="{StaticResource EntryStyle}"  Placeholder="Nome Enteado" HorizontalOptions="FillAndExpand" VerticalOptions="Center"
  Margin="5,0,0,0"></Entry>
  </StackLayout>
  <StackLayout Grid.Row="1" Grid.Column="0" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" x:Name="StkContentForm1">
  <Entry x:Name="EtrIdade"  Style="{StaticResource EntryStyle}" HorizontalOptions="Start" VerticalOptions="Center"  Placeholder="idade"
  Margin="5,0,0,0"></Entry>
  <Entry x:Name="EtrSexo"  Style="{StaticResource EntryStyle}" HorizontalOptions="Start" VerticalOptions="Center"  Placeholder="Sexo"
  Margin="5,0,0,0"></Entry>
  </StackLayout>
  <StackLayout Grid.Row="2"  Grid.Column="0" HorizontalOptions="FillAndExpand"  VerticalOptions="FillAndExpand" x:Name="StkContentForm2">
  <Entry x:Name="EtrProfissao"  Style="{StaticResource EntryStyle}" HorizontalOptions="FillAndExpand" VerticalOptions="Center"  Placeholder="Profissão"
  Margin="5,0,0,0"></Entry>
  <Entry x:Name="EtrLocalidade" Style="{StaticResource EntryStyle}" HorizontalOptions="FillAndExpand" VerticalOptions="Center"  Placeholder="Localidade"
  Margin="5,0,0,0"></Entry>
  </StackLayout>
  <StackLayout Grid.Row="3"  Grid.Column="0" HorizontalOptions="FillAndExpand"  VerticalOptions="FillAndExpand" x:Name="StkContentForm3">
  <Entry x:Name="EtrDistrito"  Style="{StaticResource EntryStyle}" HorizontalOptions="FillAndExpand" VerticalOptions="Center"  Placeholder="Distrito"
  Margin="5,0,0,0"></Entry>
  <Entry x:Name="EtrConcelho"  Style="{StaticResource EntryStyle}" HorizontalOptions="FillAndExpand" VerticalOptions="Center"  Placeholder="Concelho"
  Margin="5,0,0,0"></Entry>
  </StackLayout>
  <StackLayout Grid.Row="4"  Grid.Column="0" HorizontalOptions="FillAndExpand"  VerticalOptions="FillAndExpand" x:Name="StkContentForm4">
  <Entry x:Name="EtrCodPostal"  Style="{StaticResource EntryStyle}" HorizontalOptions="FillAndExpand" VerticalOptions="Center"  Placeholder="Cod.Postal"
  Margin="5,0,0,0"></Entry>
  <Entry x:Name="EtrPais"  Style="{StaticResource EntryStyle}" HorizontalOptions="FillAndExpand" VerticalOptions="Center"  Placeholder="Pais"
  Margin="5,0,0,0"></Entry>
  </StackLayout>  
  </Grid>

  </StackLayout>
  </ScrollView>
  </StackLayout>
  <!--Zona A Direira Grid Principal-->
  <StackLayout Grid.Row="1"  Grid.Column="2" HorizontalOptions="FillAndExpand">
  </StackLayout>

  <!--Buttons-->
  <StackLayout Grid.Row="2"  Grid.Column="0" HorizontalOptions="FillAndExpand">
  </StackLayout>
  <StackLayout Grid.Row="2"  Grid.Column="1" HorizontalOptions="FillAndExpand">
  <FlexLayout Direction="Row" JustifyContent="SpaceBetween" x:Name="FlexBtns" Margin="0,0,0,5" HorizontalOptions="Center" VerticalOptions="Center">
  <ImageButton Source="Voltar40.png"  BackgroundColor="Transparent"  x:Name="BtnVoltar" />
  <ImageButton Source="Apagarlista40.png" BackgroundColor="Transparent"  x:Name="BtnApagar" />
  <ImageButton Source="pay2.png"  BackgroundColor="Transparent"  x:Name="BtnPagar"/>
  <ImageButton Source="Moeda40.png"  BackgroundColor="Transparent"  x:Name="BtnAssistir"/>
  </FlexLayout>
  </StackLayout>
  <StackLayout Grid.Row="2"  Grid.Column="2" HorizontalOptions="FillAndExpand">
  </StackLayout>
  </Grid>

</ContentPage>

Ficheiro CssTest.Xaml.cs
________________________________________

Código:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace BdFacturas.Views
{
   [XamlCompilation(XamlCompilationOptions.Compile)]
   public partial class CssTest : ContentPage
   {
     public CssTest ()
     {
       InitializeComponent ();
  



  }
  private double WidthScr = 0;
  private double HeightScr = 0;

  protected override void OnSizeAllocated(double width, double height)
  {
  double PercentageScreen = 0.9;
  double GenericWidth = 0;
  double SizeSmallButton = 0.15;
  double SizeBigButton = 0.20;
  

  base.OnSizeAllocated(width, height);
  if (width != this.WidthScr || height != this.HeightScr)
  {
  this.WidthScr = width;
  this.HeightScr = height;
  GenericWidth = WidthScr * PercentageScreen;
  if (width > height)
  {
  

  //Stacks
  StkContentForm0.Orientation = StackOrientation.Horizontal;
  StkContentForm1.Orientation = StackOrientation.Horizontal;
  StkContentForm2.Orientation = StackOrientation.Horizontal;
  StkContentForm3.Orientation = StackOrientation.Horizontal;
  StkContentForm4.Orientation = StackOrientation.Horizontal;

  //Campos
  EtrNome.WidthRequest  = GenericWidth * 0.5;
  EtrEnteado.WidthRequest = GenericWidth * 0.5;

  EtrProfissao.WidthRequest  = GenericWidth * 0.5;
  EtrLocalidade.WidthRequest  = GenericWidth * 0.5;
  EtrDistrito.WidthRequest  = GenericWidth * 0.5;
  EtrConcelho.WidthRequest  = GenericWidth * 0.5;
  EtrCodPostal.WidthRequest  = GenericWidth * 0.5;
  EtrPais.WidthRequest  = GenericWidth * 0.5;
  EtrIdade.WidthRequest = GenericWidth * 0.30;
  EtrSexo.WidthRequest = GenericWidth * 0.30;


  //flex /buttons
  FlexBtns.WidthRequest = GenericWidth * 0.5;
  
  BtnApagar.WidthRequest = FlexBtns.WidthRequest * SizeBigButton;
  BtnApagar.HeightRequest = FlexBtns.WidthRequest * SizeBigButton;

  BtnAssistir.WidthRequest = FlexBtns.WidthRequest * SizeBigButton;
  BtnAssistir.HeightRequest = FlexBtns.WidthRequest * SizeBigButton;

  BtnPagar.WidthRequest = FlexBtns.WidthRequest * SizeBigButton;
  BtnPagar.HeightRequest = FlexBtns.WidthRequest * SizeBigButton;

  BtnVoltar.WidthRequest = FlexBtns.WidthRequest * SizeBigButton;
  BtnVoltar.HeightRequest = FlexBtns.WidthRequest * SizeBigButton;



  }
  else
  {
  //stacks
  StkContentForm0.Orientation = StackOrientation.Vertical;
  StkContentForm1.Orientation = StackOrientation.Horizontal;
  StkContentForm2.Orientation = StackOrientation.Vertical;
  StkContentForm3.Orientation = StackOrientation.Vertical;
  StkContentForm4.Orientation = StackOrientation.Vertical;

  //campos
  EtrNome.WidthRequest  = GenericWidth;
  EtrIdade.WidthRequest = GenericWidth * 0.25;
  EtrSexo.WidthRequest  = GenericWidth * 0.25;

  EtrProfissao.WidthRequest = GenericWidth ;
  EtrLocalidade.WidthRequest = GenericWidth ;
  EtrDistrito.WidthRequest = GenericWidth ;
  EtrConcelho.WidthRequest = GenericWidth ;
  EtrCodPostal.WidthRequest = GenericWidth ;
  EtrPais.WidthRequest = GenericWidth ;

  //Flex / buttons
  FlexBtns.WidthRequest = GenericWidth * 0.9;

  BtnApagar.WidthRequest = FlexBtns.WidthRequest * SizeSmallButton;
  BtnApagar.HeightRequest = FlexBtns.WidthRequest * SizeSmallButton;

  BtnAssistir.WidthRequest = FlexBtns.WidthRequest  * SizeSmallButton;
  BtnAssistir.HeightRequest = FlexBtns.WidthRequest  * SizeSmallButton;

  BtnPagar.WidthRequest = FlexBtns.WidthRequest  * SizeSmallButton;
  BtnPagar.HeightRequest = FlexBtns.WidthRequest  * SizeSmallButton;

  BtnVoltar.WidthRequest = FlexBtns.WidthRequest  * SizeSmallButton;
  BtnVoltar.HeightRequest = FlexBtns.WidthRequest  * SizeSmallButton;

  }


  }
  }
  }
}

alfinete · 8 de Março de 2020

Agradecia a passagem desta Resolução para o repositório de Código

Android Xamarim V Studio

alfinete

Power Member

alfinete

Power Member

alfinete

Power Member