top of page

App Inventor Proje Örneği 7 - Layout Bileşenleri

LAYOUT BİLEŞENLERİ İLE ÖRNEK UYGULAMALAR:


Yeni bir proje oluşturuyoruz. “Components” Alanı içinde “Screen1” üzerine tıklıyoruz, ve “Properties” alanı içindeki “AlignHorizontal” (Yatay Hizala) özelliğini “Center” (Ortala) olarak değiştiriyoruz. Böylece ekrana yerleştireceğimiz bileşenler ortalanacak görünümü daha iyi algılanacak.


Sırasıyla “Layout” bölümünden “HorizontalArrangement”(Yatay Yerleşim Düzenleme), “VerticalArrangement” (Dikey Yerleşim Düzenleme) ve “TableArrangement”(Tabloda Yerleşim Düzenleme) bileşenlerini ekrana ekliyoruz. Bu bileşenlerin genel görünümü kare şeklinde kutucuklardır. yapı olarak ise sadece “TableArrangement” içinde bileşen yerleştirirken fark edebileceğimiz; seçili olarak 2 satır ve 2 sütun şeklinde hücreler vardır. Bu bileşenin hücre sayısını “Properties” alanından ayarlayabilirsiniz.


Bileşenlerimizin içine “User Interface” Bölümünden “Button” bileşeni ekliyoruz görüldüğü gibi;


- “HorizontalArrangement”(Yatay Yerleşim Düzenleme) içine yerleştirilen butonlar yanyana yerleşir.

- “VerticalArrangement” (Dikey Yerleşim Düzenleme)içine yerleştirilen butonlar ise üst üste yerleşir. Daha doğru bir anlatımla dikey sıralanır.

- “TableArrangement”(Tabloda Yerleşim Düzenleme) içine yerleştirilen butonların yerleştirme anında görünen hücrelere yerleştiğini fark edeceksiniz.




Tüm bu yerleşim bileşenlerinin “Properties” alanında “Width” (Genişlik) ve “Height” (Yükseklik) özelliklerinin olduğunu göreceksiniz. Bu özellikler seçili olarak “Automatic” olarak gelir. Bu özelikler:

  1. Automatic: Bileşenin içine yerleştirilen bileşenlerin boyutu oranında genişlik veya yükseklik otomatik ayarlanır.

  2. FillParent: Bileşen bir üst düzenleme bileşeninin içine doldurur. İç içe birçok düzenleme bileşeni olabileceği gibi bu örnekteki gibi sadece “Screen1” içinde olabilir bu durumda üst düzenleme bileşeni “Screen1” olarka kabul edilir ve o bileşnin içi doldurulur.

  3. Pixels: Boyutu piksel olarak ayarlamak için buraya istediğimiz değeri girebiliriz.



Bu bileşenlerin “Visible” (Görünürlük) özelliğini kullanarak programın çalışması esnasında istediğiniz bileşenlerin olduğu gibi düzenleme bileşenin içe yerleştirdiğiniz tüm bileşenlerin de görünür olması veya gizlenmesini sağlayabilirsiniz. Aşağıdaki resimde ilgili bloklar ile “TableArrangement1” bileşenini gösterip gizleyen bir blok dizisi vardır. Bu bloklar “Button1” bileşeninin “Click” olayına kilitlenmiştir.




bottom of page