Bagikan melalui

Xamarin.Forms Pilih Tata Letak

  • Artikel

Xamarin.Forms kelas tata letak memungkinkan Anda mengatur dan mengelompokkan kontrol UI di aplikasi Anda. Memilih kelas tata letak memerlukan pengetahuan tentang bagaimana tata letak memposisikan elemen turunannya, dan bagaimana tata letak mengukur elemen anaknya. Selain itu, mungkin perlu untuk menumpuk tata letak untuk membuat tata letak yang Anda inginkan.

Gambar berikut menunjukkan tata letak umum yang dapat dicapai dengan kelas tata letak utama Xamarin.Forms :

Kelas tata letak utama di Xamarin.Forms

StackLayout

Mengatur StackLayout elemen dalam tumpukan satu dimensi, baik secara horizontal maupun vertikal. Properti Orientation menentukan arah elemen, dan orientasi defaultnya adalah Vertical. StackLayout biasanya digunakan untuk mengatur sub-bagian UI pada halaman.

XAML berikut menunjukkan cara membuat vertikal StackLayout yang berisi tiga Label objek:

<StackLayout Margin="20,35,20,25">
    <Label Text="The StackLayout has its Margin property set, to control the rendering position of the StackLayout." />
    <Label Text="The Padding property can be set to specify the distance between the StackLayout and its children." />
    <Label Text="The Spacing property can be set to specify the distance between views in the StackLayout." />
</StackLayout>

StackLayoutDalam , jika ukuran elemen tidak diatur secara eksplisit, elemen akan meluas untuk mengisi lebar yang tersedia, atau tinggi jika Orientation properti diatur ke Horizontal.

A StackLayout sering digunakan sebagai tata letak induk, yang berisi tata letak anak lainnya. Namun, StackLayout tidak boleh digunakan untuk mereproduksi Grid tata letak dengan menggunakan kombinasi StackLayout objek. Kode berikut menunjukkan contoh praktik buruk ini:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Details.HomePage"
             Padding="0,20,0,0">
    <StackLayout>
        <StackLayout Orientation="Horizontal">
            <Label Text="Name:" />
            <Entry Placeholder="Enter your name" />
        </StackLayout>
        <StackLayout Orientation="Horizontal">
            <Label Text="Age:" />
            <Entry Placeholder="Enter your age" />
        </StackLayout>
        <StackLayout Orientation="Horizontal">
            <Label Text="Occupation:" />
            <Entry Placeholder="Enter your occupation" />
        </StackLayout>
        <StackLayout Orientation="Horizontal">
            <Label Text="Address:" />
            <Entry Placeholder="Enter your address" />
        </StackLayout>
    </StackLayout>
</ContentPage>

Ini boros karena perhitungan tata letak yang tidak perlu dilakukan. Sebaliknya, tata letak yang diinginkan dapat dicapai dengan lebih baik dengan menggunakan Grid.

Tip

Saat menggunakan StackLayout, pastikan hanya satu elemen anak yang diatur ke LayoutOptions.Expands. Properti ini memastikan bahwa anak yang ditentukan akan menempati ruang terbesar yang StackLayout dapat diberikan kepadanya, dan boros untuk melakukan perhitungan ini lebih dari sekali.

Untuk informasi selengkapnya, lihat Xamarin.Forms StackLayout.

Kisi

Grid digunakan untuk menampilkan elemen dalam baris dan kolom, yang dapat memiliki ukuran proporsional atau absolut. Baris dan kolom kisi ditentukan dengan RowDefinitions properti dan ColumnDefinitions .

Untuk memposisikan elemen dalam sel tertentu Grid , gunakan properti terlampir Grid.Column dan Grid.Row . Untuk membuat elemen mencakup beberapa baris dan kolom, gunakan Grid.RowSpan properti dan Grid.ColumnSpan terlampir.

Catatan

Tata Grid letak tidak boleh dikacaukan dengan tabel, dan tidak dimaksudkan untuk menyajikan data tabular. Tidak seperti tabel HTML, Grid ditujukan untuk meletakkan konten. Untuk menampilkan data tabular, pertimbangkan untuk menggunakan ListView, CollectionView, atau TableView.

XAML berikut menunjukkan cara membuat Grid dengan dua baris dan dua kolom:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="50" />
        <RowDefinition Height="50" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>    
    <Label Text="Column 0, Row 0"
           WidthRequest="200" />
    <Label Grid.Column="1"
           Text="Column 1, Row 0" />
    <Label Grid.Row="1"
           Text="Column 0, Row 1" />
    <Label Grid.Column="1"
           Grid.Row="1"
           Text="Column 1, Row 1" />
</Grid>

Dalam contoh ini, ukuran berfungsi sebagai berikut:

  • Setiap baris memiliki tinggi eksplisit 50 unit independen perangkat.
  • Lebar kolom pertama diatur ke Auto, dan oleh karena itu seluas yang diperlukan untuk anak-anaknya. Dalam hal ini, lebarnya adalah 200 unit independen perangkat untuk mengakomodasi lebar yang pertama Label.

Ruang dapat didistribusikan dalam kolom atau baris dengan menggunakan ukuran otomatis, yang memungkinkan ukuran kolom dan baris agar sesuai dengan kontennya. Ini dicapai dengan mengatur tinggi RowDefinition, atau lebar ColumnDefinition, ke Auto. Ukuran proporsional juga dapat digunakan untuk mendistribusikan ruang yang tersedia di antara baris dan kolom kisi berdasarkan proporsi tertimbang. Ini dicapai dengan mengatur tinggi RowDefinition, atau lebar ColumnDefinition, ke nilai yang menggunakan * operator.

Perhatian

Cobalah untuk memastikan bahwa baris dan kolom sesederh mungkin diatur ke Auto ukuran. Setiap baris atau kolom berukuran otomatis akan menyebabkan mesin tata letak melakukan perhitungan tata letak tambahan. Sebagai gantinya, gunakan baris dan kolom ukuran tetap jika memungkinkan. Atau, atur baris dan kolom untuk menempati jumlah ruang proporsional dengan GridUnitType.Star nilai enumerasi.

Untuk informasi selengkapnya, lihat Xamarin.Forms Kisi.

FlexLayout

mirip FlexLayout dengan StackLayout di dalamnya menampilkan elemen turunan baik secara horizontal atau vertikal dalam tumpukan. Namun, dapat FlexLayout juga membungkus anak-anaknya jika ada terlalu banyak yang pas dalam satu baris atau kolom, dan juga memungkinkan kontrol yang lebih terperinci dari ukuran, orientasi, dan keselarasan elemen turunannya.

XAML berikut menunjukkan cara membuat FlexLayout yang menampilkan tampilannya dalam satu kolom:

<FlexLayout Direction="Column"
            AlignItems="Center"
            JustifyContent="SpaceEvenly">
    <Label Text="FlexLayout in Action" />
    <Button Text="Button" />
    <Label Text="Another Label" />
</FlexLayout>

Dalam contoh ini, tata letak berfungsi sebagai berikut:

  • Properti Direction diatur ke Column, yang menyebabkan turunan FlexLayout disusun dalam satu kolom item.
  • Properti AlignItems diatur ke Center, yang menyebabkan setiap item dipusatkan secara horizontal.
  • Properti JustifyContent diatur ke SpaceEvenly, yang mengalokasikan semua ruang vertikal sisa secara merata di antara semua item, dan di atas item pertama, dan di bawah item terakhir.

Untuk informasi selengkapnya, lihat Xamarin.Forms FlexLayout.

RelativeLayout

RelativeLayout digunakan untuk memosisikan dan mengukur elemen relatif terhadap properti tata letak atau elemen saudara. Secara default, elemen diposisikan di sudut kiri atas tata letak. RelativeLayout Dapat digunakan untuk membuat UI yang menskalakan secara proporsional di seluruh ukuran perangkat.

RelativeLayoutDalam , posisi dan ukuran ditentukan sebagai batasan. Batasan memiliki Factor properti dan Constant , yang dapat digunakan untuk menentukan posisi dan ukuran sebagai kelipatan (atau pecahan) properti objek lain, ditambah konstanta. Selain itu, konstanta bisa negatif.

Catatan

Mendukung RelativeLayout elemen penempatan di luar batasnya sendiri.

XAML berikut menunjukkan cara menyusun elemen dalam RelativeLayout:

<RelativeLayout>
    <BoxView Color="Blue"
             HeightRequest="50"
             WidthRequest="50"
             RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0}"
             RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0}" />
    <BoxView Color="Red"
             HeightRequest="50"
             WidthRequest="50"
             RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=.85}"
             RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0}" />
    <BoxView x:Name="pole"
             Color="Gray"
             WidthRequest="15"
             RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=.75}"
             RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=.45}"
             RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=.25}" />
    <BoxView Color="Green"
             RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=.10, Constant=10}"
             RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=.2, Constant=20}"
             RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView, ElementName=pole, Property=X, Constant=15}"
             RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView, ElementName=pole, Property=Y, Constant=0}" />
</RelativeLayout>

Dalam contoh ini, tata letak berfungsi sebagai berikut:

  • Warna biru BoxView diberi ukuran eksplisit 50x50 unit independen perangkat. Ini ditempatkan di sudut kiri atas tata letak, yang merupakan posisi default.
  • Warna merah BoxView diberi ukuran eksplisit 50x50 unit independen perangkat. Ini ditempatkan di sudut kanan atas tata letak.
  • Abu-abu BoxView diberi lebar eksplisit 15 unit independen perangkat, dan tingginya diatur menjadi 75% dari tinggi induknya.
  • Warna hijau BoxView tidak diberi ukuran eksplisit. Posisinya diatur relatif terhadap yang BoxView bernama pole.

Peringatan

Hindari menggunakan RelativeLayout jika memungkinkan. Ini akan mengakibatkan CPU harus melakukan lebih banyak pekerjaan secara signifikan.

Untuk informasi selengkapnya, lihat Xamarin.Forms RelativeLayout.

AbsoluteLayout

Digunakan AbsoluteLayout untuk memposisikan dan mengukur elemen menggunakan nilai eksplisit, atau nilai relatif terhadap ukuran tata letak. Posisi ditentukan oleh sudut kiri atas anak relatif terhadap sudut AbsoluteLayoutkiri atas .

AbsoluteLayout Harus dianggap sebagai tata letak tujuan khusus yang akan digunakan hanya ketika Anda dapat memaksakan ukuran pada anak-anak, atau ketika ukuran elemen tidak memengaruhi posisi anak lain. Penggunaan standar tata letak ini adalah membuat overlay, yang mencakup halaman dengan kontrol lain, mungkin untuk melindungi pengguna agar tidak berinteraksi dengan kontrol normal di halaman.

Penting

Properti HorizontalOptions dan VerticalOptions tidak berpengaruh pada anak-anak dari AbsoluteLayout.

AbsoluteLayoutDalam , AbsoluteLayout.LayoutBounds properti terlampir digunakan untuk menentukan posisi horizontal, posisi vertikal, lebar dan tinggi elemen. Selain itu, AbsoluteLayout.LayoutFlags properti terlampir menentukan bagaimana batas tata letak akan ditafsirkan.

XAML berikut menunjukkan cara mengatur elemen dalam :AbsoluteLayout

<AbsoluteLayout Margin="40">
    <BoxView Color="Red"
             AbsoluteLayout.LayoutFlags="PositionProportional"
             AbsoluteLayout.LayoutBounds="0.5, 0, 100, 100"
             Rotation="30" />
    <BoxView Color="Green"
             AbsoluteLayout.LayoutFlags="PositionProportional"
             AbsoluteLayout.LayoutBounds="0.5, 0, 100, 100"
             Rotation="60" />
    <BoxView Color="Blue"
             AbsoluteLayout.LayoutFlags="PositionProportional"
             AbsoluteLayout.LayoutBounds="0.5, 0, 100, 100" />
</AbsoluteLayout>

Dalam contoh ini, tata letak berfungsi sebagai berikut:

  • Masing-masing BoxView diberi ukuran eksplisit 100x100, dan ditampilkan dalam posisi yang sama, berpusat secara horizontal.
  • BoxView Merah diputar 30 derajat, dan hijau BoxView diputar 60 derajat.
  • Pada setiap BoxView, AbsoluteLayout.LayoutFlags properti terlampir diatur ke PositionProportional, menunjukkan bahwa posisi sebanding dengan ruang yang tersisa setelah lebar dan tinggi diperhitungkan.

Perhatian

Hindari menggunakan AbsoluteLayout.AutoSize properti jika memungkinkan, karena akan menyebabkan mesin tata letak melakukan perhitungan tata letak tambahan.

Untuk informasi selengkapnya, lihat Xamarin.Forms AbsoluteLayout.

Transparansi input

Setiap elemen visual memiliki InputTransparent properti yang digunakan untuk menentukan apakah elemen menerima input. Nilai defaultnya adalah false, memastikan bahwa elemen menerima input.

Ketika properti ini diatur pada kelas tata letak, nilainya akan ditransfer ke elemen turunan. Oleh karena itu, mengatur InputTransparent properti ke true pada kelas tata letak akan mengakibatkan semua elemen dalam tata letak tidak menerima input.

Performa tata letak

Untuk mendapatkan performa tata letak terbaik, ikuti panduan di Mengoptimalkan performa tata letak.

Selain itu, performa penyajian halaman juga dapat ditingkatkan dengan menggunakan kompresi tata letak, yang menghapus tata letak tertentu dari pohon visual. Untuk informasi selengkapnya, lihat Pemadatan tata letak.