Xamarin - Layouts

Layout Linear

No layout linear, os conteúdos são organizados de maneira horizontal ou vertical.

Layout Linear ─ Horizontal

O conteúdo deste layout é organizado horizontalmente. Para esta demonstração, vamos criar 3 botões e organizá-los horizontalmente em um layout linear.

<?xml version = "1.0" encoding = "utf-8"?> 
<LinearLayout xmlns:android = "http://schemas.android.com/apk/res/android" 
   android:orientation = "horizontal" 
   android:layout_width = "fill_parent" 
   android:layout_height = "fill_parent" 
   android:background = "#d3d3d3" 
   android:minWidth="25px" 
   android:minHeight="25px"> 
   <Button 
      android:id="@+id/MyButton1" 
      android:layout_width="wrap_content" 
      android:layout_margin="10dp" 
      android:layout_height="wrap_content" 
      android:text="Button 1" 
      android:background="@android:color/holo_green_dark" /> 
   <Button 
      android:id="@+id/MyButton2" 
      android:layout_width="wrap_content" 
      android:layout_margin="10dp" 
      android:layout_height="wrap_content" 
      android:text="Button 2" 
      android:background="@android:color/holo_green_dark" /> 
   <Button 
      android:id="@+id/MyButton3" 
      android:layout_width="wrap_content" 
      android:layout_margin="10dp"
      android:layout_height="wrap_content" 
      android:text="Button 3" 
      android:background="@android:color/holo_green_dark" /> 
</LinearLayout>

A saída resultante é mostrada abaixo -

Layout Linear ─ Vertical

Este tipo de layout posiciona a visualização secundária de maneira vertical.

<?xml version = "1.0" encoding = "utf-8"?> 
<LinearLayout xmlns:android = "http://schemas.android.com/apk/res/android" 
   android:orientation = "vertical" 
   android:layout_width = "fill_parent" 
   android:layout_height = "fill_parent" 
   android:background = "#d3d3d3" 
   android:minWidth = "25px" 
   android:minHeight = "25px"> 
   <Button 
      android:id = "@+id/MyButton1" 
      android:layout_width = "fill_parent" 
      android:layout_margin = "10dp"
      android:layout_height = "wrap_content" 
      android:text = "Button 1" 
      android:background = "@android:color/holo_green_dark" /> 
   <Button 
      android:id = "@+id/MyButton2" 
      android:layout_width = "fill_parent" 
      android:layout_margin = "10dp" 
      android:layout_height = "wrap_content" 
      android:text = "Button 2" 
      android:background = "@android:color/holo_green_dark" /> 
   <Button 
      android:id = "@+id/MyButton3" 
      android:layout_width = "fill_parent" 
      android:layout_margin = "10dp" 
      android:layout_height = "wrap_content" 
      android:text="Button 3" 
      android:background = "@android:color/holo_green_dark" /> 
</LinearLayout>

Sua saída resultante é a seguinte -

esquema relativo

Nesta visão, a posição da visão filha é relativa a sua visão pai ou irmã. No exemplo a seguir, vamos criar 3 visualizações EditText e um botão e, em seguida, alinhá-los relativamente.

Crie um novo projeto e chame-o relative layout app. Abrirmain.axml e adicione o seguinte código.

<?xml version = "1.0" encoding = "utf-8"?> 
<RelativeLayout xmlns:android = "http://schemas.android.com/apk/res/android" 
   android:layout_width = "match_parent" 
   android:layout_height = "match_parent" 
   android:paddingLeft = "16dp" 
   android:background = "#d3d3d3" 
   android:paddingRight = "16dp"> 
   <EditText 
      android:id = "@+id/name" 
      android:layout_width = "match_parent" 
      android:layout_height = "wrap_content" 
      android:hint = "First Name" 
      android:textColorHint = "@android:color/background_dark" 
      android:textColor = "@android:color/background_dark" /> 
   <EditText 
      android:id = "@+id/lastName" 
      android:layout_width = "0dp" 
      android:layout_height = "wrap_content" 
      android:hint = "Last Name" 
      android:layout_below = "@id/name" 
      android:textColorHint = "@android:color/background_dark" 
      android:textColor = "@android:color/background_dark" 
      android:layout_alignParentLeft = "true" 
      android:layout_toLeftOf = "@+id/age" /> 
   <EditText 
      android:id = "@id/age" 
      android:layout_width = "80dp" 
      android:layout_height = "wrap_content" 
      android:layout_below = "@id/name" 
      android:hint = "Age" 
      android:textColorHint = "@android:color/background_dark"
      android:textColor = "@android:color/background_dark" 
      android:layout_alignParentRight = "true" /> 
   <Button 
      android:layout_width = "85dp" 
      android:layout_height = "wrap_content" 
      android:layout_below = "@id/age" 
      android:layout_alignParentRight = "true" 
      android:text = "Submit" 
      android:background = "@android:color/holo_green_dark" /> 
</RelativeLayout>

Os parâmetros importantes que usamos neste código são -

android:layout_below - Ele alinha o elemento de visualização filho abaixo de seu pai.
android:layout_alignParentLeft - Ele alinha o elemento pai à esquerda.
android:layout_toLeftOf - Esta propriedade alinha um elemento à esquerda de outro elemento.
android:layout_alignParentRight - Alinha o pai à direita.

Quando você constrói e executa o aplicativo agora, ele produziria a seguinte tela de saída -

Layout da moldura

O layout do quadro é usado para exibir apenas um item. É difícil organizar vários itens neste layout sem que eles se sobreponham.

Comece um novo projeto e chame-o frameLayoutApp. Crie um novo Layout de quadro como mostrado abaixo.

<?xml version = "1.0" encoding = "utf-8"?> 
<FrameLayout xmlns:android = "http://schemas.android.com/apk/res/android" 
   android:layout_width = "fill_parent" 
   android:layout_height = "fill_parent"> 
  <ImageView 
      android:id = "@+id/ImageView1" 
      android:scaleType = "matrix" 
      android:layout_height = "fill_parent" 
      android:layout_width = "fill_parent" 
      android:src = "@drawable/img1" /> 
   <TextView 
      android:layout_width = "fill_parent" 
      android:layout_height = "wrap_content" 
      android:textSize = "50dp" 
      android:textColor = "#000" 
      android:text = "This is a Lake" /> 
   <TextView 
      android:gravity = "right" 
      android:layout_width = "fill_parent" 
      android:layout_height = "wrap_content" 
      android:textSize = "50dp" 
      android:text = "A very Deep Lake" 
      android:layout_gravity = "bottom" 
      android:textColor = "#fff" /> 
</FrameLayout>

O código acima cria um imageViewque preenche a tela inteira. Duas visualizações de texto flutuam acima doimageView.

Agora, crie e execute seu aplicativo. Ele exibirá a seguinte saída -

Layout da mesa

Neste layout, a visualização é organizada em rows e columns. Vamos ver como isso funciona.

<?xml version = "1.0" encoding = "utf-8"?> 
<TableLayout xmlns:android = "http://schemas.android.com/apk/res/android" 
   android:layout_width = "fill_parent" 
   android:background = "#d3d3d3" 
   android:layout_height = "fill_parent" 
   android:stretchColumns = "1"> 
   
   <TableRow> 
      <TextView 
         android:text = "First Name:" 
         android:layout_width = "wrap_content" 
         android:layout_height = "wrap_content" 
         android:textColor = "@android:color/black" /> 
      <EditText 
         android:width = "100px" 
         android:layout_width = "fill_parent" 
         android:layout_height = "30dp"
         android:textColor = "@android:color/black" /> 
   </TableRow> 
   
   <TableRow> 
      <TextView 
         android:text = "Last Name:" 
         android:layout_width = "wrap_content" 
         android:layout_height = "wrap_content" 
         android:textColor = "@android:color/black" /> 
      <EditText 
         android:width = "50px" 
         android:layout_width = "fill_parent" 
         android:layout_height = "30dp" 
         android:textColor = "@android:color/black" /> 
   </TableRow> 
   
   <TableRow> 
      <TextView 
         android:text = "Residence:" 
         android:layout_width = "wrap_content" 
         android:layout_height = "wrap_content" 
         android:textColor = "@android:color/black" /> 
      <EditText 
         android:width = "100px" 
         android:layout_width = "fill_parent" 
         android:layout_height = "30dp" 
         android:textColor = "@android:color/black" /> 
   </TableRow> 
   
   <TableRow> 
      <TextView 
         android:text = "Occupation:" 
         android:layout_width = "wrap_content" 
         android:layout_height = "wrap_content" 
         android:textColor = "@android:color/black" /> 
      <EditText 
         android:width = "100px" 
         android:layout_width = "fill_parent" 
         android:layout_height = "30dp" 
         android:textColor = "@android:color/black" /> 
   </TableRow> 
   
   <TableRow>
      <Button 
         android:text = "Cancel" 
         android:layout_width = "wrap_content" 
         android:layout_margin = "10dp" 
         android:layout_height = "wrap_content" 
         android:background = "@android:color/holo_green_dark" /> 
      <Button 
         android:text = "Submit" 
         android:width = "100px" 
         android:layout_margin = "10dp" 
         android:layout_width = "wrap_content" 
         android:layout_height = "wrap_content" 
         android:background = "@android:color/holo_green_dark" /> 
   </TableRow> 
</TableLayout>

O código acima cria um formulário simples de entrada de dados organizado usando tables e rows.