NativeScript - Mizanpaj Kapları

NativeScript, yalnızca UI pencere bileşeni bileşenini yerleştirmek amacıyla konteyner bileşeni koleksiyonu sağlar. Mizanpaj kapları ana bileşen olarak hareket eder ve bir veya daha fazla alt bileşene sahip olabilir. Bir yerleşim kabının tüm alt bileşenleri, ana yerleşim kabı tarafından sağlanan tekniğe dayalı olarak düzenlenebilir.

NativeScript, altı düzen kabını destekler ve bunlar aşağıdaki gibidir -

Mutlak düzen kapsayıcı
Dock düzeni kapsayıcısı
Izgara düzeni kapsayıcısı
Yığın düzeni kapsayıcısı
Düzenleme kapsayıcısını sar
FlexBox düzen konteyneri

Bu bölümde tüm yerleşim kabı kavramlarını ayrıntılı olarak öğrenelim.

Mutlak Düzen

AbsoluteLayoutkonteyner, NativeScript'teki en basit düzen konteyneridir. AbsoluteLayout, alt öğeleri üzerinde herhangi bir kısıtlama uygulamaz ve çocuklarını, başlangıç noktası olarak sol üst köşeli 2 boyutlu koordinat sistemi kullanarak içine yerleştirir.

AbsoluteLayout, çocuklarını konumlandırmak için dört özelliğini kullanır ve bunlar aşağıdaki gibidir:

top - Aşağıya doğru y yönünde hareket eden çocuğun yerleşimini tanımlar.

left - X yönünde yana doğru hareket eden çocuğun yerleşimini tanımlar.

width - Çocuğun genişliğini tanımlar.

height - Çocuğun boyunu tanımlar.

Aşağıdaki gibi uygulamamızın ana sayfasına AbsoluteLayout kapsayıcısı ekleyelim -

<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar> 

<AbsoluteLayout width="200" height="300" backgroundColor="blue"> 
   <Label text="Top Left" left="0" top="0" width="100" height="150" backgroundColor="green">
   </Label> 
   <Label text="Top Right" left="100" top="0" width="100" height="150" backgroundColor="blue"></Label> 
   <Label text="Bottom Left" left="0" top="150" width="100" height="150" backgroundColor="orange">
   </Label>
   <Label text="Bottom Right" left="100" top="150" width="100" height="150" backgroundColor="red"></Label> 
</AbsoluteLayout>

Çıktı

AbsoluteLayout'un çıktısı aşağıda verildiği gibidir -

DockLayout

Docklayoutkonteyner bileşeni, çocuklarının içine kenetlenmesini sağlar. Kabın her bir tarafı (üst, alt, sol, sağ) bir alt bileşeni yerleştirebilir. DockLayout kapsayıcısı, alt öğelerini doğru şekilde yerleştirmek için dock özelliğini kullanır.

Dock özelliğinin olası değerleri aşağıdaki gibidir -

top - Düzen konteyneri, alt bileşeni üst köşeye yerleştirir.

bottom - Düzen konteyneri, alt bileşeni alt köşeye yerleştirir.

left - Düzen konteyneri, alt bileşeni sol köşeye yerleştirir.

right - Düzen konteyneri, alt bileşeni sağ köşeye yerleştirir.

Varsayılan olarak, DockLayoutkonteyner, son alt bileşenini yerleştirir. StretchLastChild özelliğini sıfır olarak ayarlayarak geçersiz kılabilir.

Ekleyelim DockLayout aşağıdaki gibi uygulamamızın ana sayfasındaki konteyner -

<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar> 
<DockLayout width="250" height="300" backgroundColor="blue" stretchLastChild="false"> 
   <Label text="left" dock="left" width="50" backgroundColor="green"></Label> 
   <Label text="top" dock="top" height="50" backgroundColor="orange"></Label> 
   <Label text="right" dock="right" width="50" backgroundColor="red"></Label< 
   <Label text="bottom" dock="bottom" height="50" 
   backgroundColor="orange"></Label> 
</DockLayout>

Çıktı

DockLayout için çıktı aşağıdadır -

GridLayout

GridLayout konteyner bileşeni, karmaşık düzen konteynerlerinden biridir ve alt öğeleri, satırlar ve sütunlarla birlikte tablo biçiminde düzenler. Varsayılan olarak, bir satırı ve bir sütunu vardır. Aşağıdaki özelliklere sahiptir -

columns- ile ayrılmış her bir sütunun varsayılan genişliğini temsil etmek için kullanılır. Olası değerler sayı, * ve otomatik anahtar sözcüktür.

Nerede,

sayı, mutlak bir sütun genişliğini belirtir.
diğer sütunlara göre bir sütunun genişliğini gösterir. Sütun genişliğinin diğer sütuna göre kaç katı olması gerektiğini belirtmek için önünde sayı olabilir. Örneğin, 2 *, sütunun en küçük sütunun genişliğinin 2 katı olması gerektiğini belirtir.
auto, sütunun genişliğini en geniş alt öğesi kadar geniş gösterir.

Örneğin, *, 2 *, iki sütun anlamına gelir ve ikincisi, ilk sütunun iki katı büyüklüğünde olacaktır.

rows - ile ayrılmış her satırın varsayılan yüksekliğini temsil etmek için kullanılır. Değer temsili sütunlara benzer.

GridLayout, alt öğelerinin aşağıda belirtilen özelliklerini onları yerleştirmek için kullanır -

row - Satır numarası

sütun - Sütun numarası

rowSpan - alt içeriğin bir düzen içinde yayıldığı toplam satır sayısı.

colSpan - alt içeriğin bir düzen içinde yayıldığı toplam sütun sayısı.

Uygulamamızın ana sayfasına aşağıdaki gibi GridLayout konteyneri ekleyelim -

<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar> 
<GridLayout columns="50, auto, *" rows="50, auto, *" width="210" height="210"
   backgroundColor="blue"> 
   <Label text="Row: 0; Column 0" row="0" col="0" backgroundColor="green"></Label> 
   <Label text="Row: 0; Column 1" row="0" col="1" colSpan="1" backgroundColor="brown"></Label> 
   <Label text="Row: 1; Column 0" row="1" col="0" rowSpan="1" backgroundColor="red"></Label> 
   <Label text="Row: 1; Column 1" row="1" col="1" backgroundColor="orange"></Label> 
</GridLayout>

Çıktı

GridLayout için çıktı aşağıdadır -

StackLayout

StackLayout, alt öğelerini yatay veya dikey olarak tek boyutlu bir çizgide düzenler. Yerleşim seçenekleri kullanılarak yerleşimdeki alana göre boyutlandırılabilir. Yön, yatay veya dikey belirtmek için kullanılabilen yönlendirme özelliğine sahiptir.

Uygulamamızın ana sayfasına aşağıdaki gibi StackLayout konteyneri ekleyelim -

<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar> 
<StackLayout orientation="vertical" width="200" height="200" backgroundColor="blue"> 
   <Label text="Label1" width="50" height="50" backgroundColor="green"></Label> 
   <Label text="Label2" width="50" height="50" backgroundColor="brown"></Label> 
   <Label text="Label3" width="50" height="50" backgroundColor="red"></Label> 
   <Label text="Label4" width="50" height="50" backgroundColor="orange"></Label> 
</StackLayout>

Çıktı

StackLayout için çıktı aşağıda gösterildiği gibidir -

WrapLayout

WrapLayout, içeriği yeni satırlara veya sütunlara kaydırmak için kullanılır.

Aşağıdaki üç özelliğe sahiptir -

orientation - yatay veya dikey olarak görüntüleme.

itemWidth - her çocuk için düzen genişliği.

itemHeight - her çocuk için düzen yüksekliği.

Aşağıdaki gibi uygulamamızın ana sayfasına WrapLayout konteyneri ekleyelim -

<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar> <WrapLayout orientation="horizontal" width="200" height="200" backgroundColor="blue">
   <Label text="Label1" width="70" height="70" backgroundColor="green"></Label> 
   <Label text="Label2" width="70" height="70" backgroundColor="brown"></Label 
   <Label text="Label3" width="70" height="70" backgroundColor="red"></Label> 
   <Label text="Label4" width="70" height="70" backgroundColor="orange"></Label> 
</WrapLayout>

Çıktı

Flexbox Düzeni

FlexboxLayout kapsayıcı bileşeni, gelişmiş düzen kapsayıcılarından biridir. Basit düzeni çok karmaşık ve karmaşık düzenlere dönüştürme seçeneği sunar. CSS Flexbox'a dayanmaktadır.

FlexboxLayout bileşeninin birçok özelliği vardır ve bunlar aşağıdaki gibidir -

flexDirection

Alt bileşenlerin düzenlendiği yönü temsil eder. FlexDirection'ın olası değerleri aşağıdaki gibidir -

row - Alt bileşenler yan yana düzenlenmiştir.

row-reverse - Alt bileşenler yan yana ancak ters yönde düzenlenmiştir.

column - Alt bileşenler birbirinin altına yerleştirilmiştir.

column-reverse - Alt bileşenler birbirinin altına ancak ters yönde düzenlenmiştir.

Uygulamamızın ana sayfasına aşağıdaki gibi FlexLayout konteyneri ekleyelim -

<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar> 
<FlexboxLayout flexDirection="row"> 
   <Label text="First Item" backgroundColor="red"></Label> 
   <Label text="Second Item" backgroundColor="green"></Label> 
   <Label text="Third Item" backgroundColor="red"></Label> 
   <Label text="Fourth Item" backgroundColor="green"></Label> 
   <Label text="Fifth Item" backgroundColor="red"></Label> 
</FlexboxLayout>

Çıktı

FlexLayout - Row - çıktısı aşağıdadır

Şimdi flexDirection değerini satırdan satır tersine değiştirelim ve düzeni nasıl etkilediğini kontrol edelim.

<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar> <FlexboxLayout flexDirection="row-reverse"> 
   <Label text="First Item" backgroundColor="red"></Label> 
   <Label text="Second Item" backgroundColor="green"></Label> 
   <Label text="Third Item" backgroundColor="red"></Label> 
   <Label text="Fourth Item" backgroundColor="green"></Label> 
   <Label text="Fifth Item" backgroundColor="red"></Label> 
</FlexboxLayout>

Çıktı

Aşağıda Flex Layout - Row Reverse - çıktısı verilmiştir.

FlexDirection değerini satır tersinden sütuna değiştirelim ve düzeni nasıl etkilediğini kontrol edelim.

<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar> 
<FlexboxLayout flexDirection="column"> 
   <Label text="First Item" backgroundColor="red"></Label> 
   <Label text="Second Item" backgroundColor="green"></Label> 
   <Label text="Third Item" backgroundColor="red"></Label> 
   <Label text="Fourth Item" backgroundColor="green"></Label> 
   <Label text="Fifth Item" backgroundColor="red"></Label> 
</FlexboxLayout>

Çıktı

FlexLayout - Column çıktısı aşağıda verilmiştir -

FlexDirection değerini sütundan sütun tersine değiştirelim ve düzeni nasıl etkilediğini kontrol edelim.

<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar> 
<FlexboxLayout flexDirection="column-reverse"> 
   <Label text="First Item" backgroundColor="red"></Label> 
   <Label text="Second Item" backgroundColor="green"></Label> 
   <Label text="Third Item" backgroundColor="red"></Label> 
   <Label text="Fourth Item" backgroundColor="green"></Label> 
   <Label text="Fifth Item" backgroundColor="red"></Label> 
</FlexboxLayout>

Çıktı

Aşağıda FlexLayout - Sütun Tersinin çıktısı verilmiştir -

flexWrap

FlexDirection tarafından ayarlanan yönde kaydırarak alt bileşenlerin tek bir satırda / sütunda mı yoksa birden çok satıra mı akacağını temsil eder.

Olası değerler aşağıdaki gibidir -

wrap - Verilen yönde boşluk yoksa alt bileşenleri sarar (flexDirection).

wrap-reverse - Parçanın ters yönde akması dışında sarma ile aynı.

FlexWrap özelliğini ekleyelim ve ardından değerini wrap olarak ayarlayalım. Ayrıca aşağıda belirtildiği gibi üç çocuk daha ekleyin -

<ActionBar> 
   <Label text="Home"></Label> 
&tl;/ActionBar> 
<FlexboxLayout flexDirection="row" flexWrap="wrap"> 
   <Label text="First Item" backgroundColor="red"></Label> 
   <Label text="Second Item" backgroundColor="green"></Label> 
   <Label text="Third Item" backgroundColor="red"></Label> 
   <Label text="Fourth Item" backgroundColor="green"></Label> 
   <Label text="Fifth Item" backgroundColor="red"></Label>
   <Label text="Sixth Item" backgroundColor="green"></Label> 
   <Label text="Seventh Item" backgroundColor="red"></Label> 
   <Label text="Eighth Item" backgroundColor="green"></Label> 
</FlexboxLayout>

Çıktı

FlexWrap için çıktı aşağıdadır -

JustifyContent

Alt bileşenlerin birbirine ve genel yapıya göre nasıl düzenlendiğini temsil eder. Aşağıda belirtildiği gibi üç özelliği vardır -

flex-end - Alt bileşeni bitiş çizgisine doğru paketler.

space-between - Eşit olarak aynı hizada dağıtarak alt bileşeni paketler.

space-around - Aradaki boşluğa benzerdir, tek farkı, alt bileşeni satır içinde ve etraflarında eşit boşluk olarak dağıtarak paketlemesidir.

JustifyContent'i de ekleyelim ve nasıl davrandığını kontrol edelim -

<ActionBar> 
   <Label text="Home"></Label>
</ActionBar> 
<FlexboxLayout flexDirection="row" flexWrap="wrap" justifyContent="space-around"> 
   <Label text="First Item" backgroundColor="red"></Label> 
   <Label text="Second Item" backgroundColor="green"></Label> 
   <Label text="Third Item" backgroundColor="red"></Label> 
   <Label text="Fourth Item" backgroundColor="green"></Label> 
   <Label text="Fifth Item" backgroundColor="red"></Label> 
   <Label text="Sixth Item" backgroundColor="green"></Label> 
   <Label text="Seventh Item" backgroundColor="red"></Label> 
   <Label text="Eighth Item" backgroundColor="green"></Label> 
</FlexboxLayout>