Xamarin.Android GridLayout

GridLayout, aşağıda gösterildiği gibi HTML tablosuna benzer şekilde 2B kılavuzda görünümleri yerleştirmeyi destekleyen yeni ViewGroup bir alt sınıftır:

GridLayout alt görünümlerin, içinde olmaları gereken satırları ve sütunları belirterek kılavuzdaki konumlarını ayarladığı düz görünüm hiyerarşisiyle çalışır. Bu şekilde GridLayout, herhangi bir ara görünümün TableLayout'ta kullanılan tablo satırlarında görüldüğü gibi bir tablo yapısı sağlamasına gerek kalmadan görünümleri kılavuzda konumlandırabilir. Düz hiyerarşiyi koruyarak GridLayout, alt görünümlerini daha hızlı bir şekilde düzenler. Şimdi bu kavramın kodda gerçekte ne anlama geldiğini göstermek için bir örneğe göz atalım.

Kılavuz Düzeni Oluşturma

Aşağıdaki XML, GridLayout'a çeşitli TextView denetimler ekler.

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"    
        android:rowCount="2"
        android:columnCount="2">
     <TextView
            android:text="Cell 0"
            android:textSize="14dip" />
     <TextView
            android:text="Cell 1"
            android:textSize="14dip" />
     <TextView
            android:text="Cell 2"
            android:textSize="14dip" />
     <TextView
            android:text="Cell 3"
            android:textSize="14dip" />
</GridLayout>

Düzen, aşağıdaki diyagramda gösterildiği gibi hücrelerin içeriklerine sığabilmesi için satır ve sütun boyutlarını ayarlar:

Bu, bir uygulamada çalıştırıldığında aşağıdaki kullanıcı arabirimine neden olur:

Yönlendirme Belirtme

Yukarıdaki XML'de her TextView birinin bir satır veya sütun belirtmediğini görebilirsiniz. Bunlar belirtilmediğinde, GridLayout her alt görünümü yönlendirmeye göre sırayla atar. Örneğin, GridLayout'un yönlendirmesini yatay olan varsayılandan dikeye şöyle değiştirelim:

<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"    
        android:rowCount="2"
        android:columnCount="2"
        android:orientation="vertical">
</GridLayout>

Şimdi, GridLayout aşağıda gösterildiği gibi, hücreleri her sütunda soldan sağa yerine yukarıdan aşağıya konumlandıracaktır:

Bu, çalışma zamanında aşağıdaki kullanıcı arabirimiyle sonuçlanmaktadır:

Açık Konum Belirtme

içindeki alt görünümlerin GridLayoutkonumlarını açıkça denetlemek istiyorsak ve layout_column özniteliklerini layout_row ayarlayabiliriz. Örneğin, aşağıdaki XML, yönlendirmeden bağımsız olarak ilk ekran görüntüsünde gösterilen düzene (yukarıda gösterilmiştir) neden olur.

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"    
        android:rowCount="2"
        android:columnCount="2">
     <TextView
            android:text="Cell 0"
            android:textSize="14dip"
            android:layout_row="0"
            android:layout_column="0" />
     <TextView
            android:text="Cell 1"
            android:textSize="14dip"
            android:layout_row="0"
            android:layout_column="1" />
     <TextView
            android:text="Cell 2"
            android:textSize="14dip"
            android:layout_row="1"
            android:layout_column="0" />
     <TextView
            android:text="Cell 3"
            android:textSize="14dip"
            android:layout_row="1"
            android:layout_column="1"  />
</GridLayout>

Aralık belirtme

alt görünümleri GridLayoutarasında boşluk sağlayacak birkaç seçeneğiniz vardır. Özniteliğini layout_margin , aşağıda gösterildiği gibi her alt görünümde kenar boşluğunu doğrudan ayarlamak için kullanabiliriz

<TextView
            android:text="Cell 0"
            android:textSize="14dip"
            android:layout_row="0"
            android:layout_column="0"
            android:layout_margin="10dp" />

Ayrıca Android 4'te adlı Space yeni bir genel amaçlı aralık görünümü kullanıma sunulmuştur. Bunu kullanmak için alt görünüm olarak eklemeniz yeterlidir. Örneğin, aşağıdaki XML öğesini 3 olarak ayarlayarak rowcount öğesine ek bir satır GridLayout ekler ve arasında TextViewsaralık sağlayan bir Space görünüm ekler.

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"    
        android:rowCount="3"
        android:columnCount="2"
        android:orientation="vertical">
     <TextView
            android:text="Cell 0"
            android:textSize="14dip"
            android:layout_row="0"
            android:layout_column="0" />
     <TextView
            android:text="Cell 1"
            android:textSize="14dip"
            android:layout_row="0"        
            android:layout_column="1" />
     <Space
            android:layout_row="1"
            android:layout_column="0"
            android:layout_width="50dp"         
            android:layout_height="50dp" />    
     <TextView
            android:text="Cell 2"
            android:textSize="14dip"
            android:layout_row="2"        
            android:layout_column="0" />
     <TextView
            android:text="Cell 3"
            android:textSize="14dip"
            android:layout_row="2"        
            android:layout_column="1" />
</GridLayout>

Bu XML, aşağıda gösterildiği gibi içinde GridLayout boşluk oluşturur:

Yeni Space görünümü kullanmanın avantajı, aralıklara izin vermesi ve her alt görünümde öznitelikleri ayarlamamızı gerektirmemesidir.

Sütunları ve Satırları Kapsayan

, GridLayout birden çok sütuna ve satıra yayılan hücreleri de destekler. Örneğin, aşağıda gösterildiği gibi öğesine düğme GridLayout içeren başka bir satır eklediğimize dikkat edin:

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"    
        android:rowCount="4"
        android:columnCount="2"
        android:orientation="vertical">
     <TextView
            android:text="Cell 0"
            android:textSize="14dip"
            android:layout_row="0"
            android:layout_column="0" />
     <TextView
            android:text="Cell 1"
            android:textSize="14dip"
            android:layout_row="0"        
            android:layout_column="1" />
     <Space
            android:layout_row="1"
            android:layout_column="0"
            android:layout_width="50dp"        
            android:layout_height="50dp" />   
     <TextView
            android:text="Cell 2"
            android:textSize="14dip"
            android:layout_row="2"        
            android:layout_column="0" />
     <TextView
            android:text="Cell 3"
            android:textSize="14dip"        
            android:layout_row="2"        
            android:layout_column="1" />
     <Button
            android:id="@+id/myButton"
            android:text="@string/hello"        
            android:layout_row="3"
            android:layout_column="0" />
</GridLayout>

Bu, burada gördüğümüz gibi düğmenin GridLayout boyutuna uyum sağlamak için genişletilen ilk sütuna neden olur:

İlk sütunun esnetilmesini korumak için sütun genişliğini şöyle ayarlayarak düğmeyi iki sütuna yayılacak şekilde ayarlayabiliriz:

<Button
    android:id="@+id/myButton"
    android:text="@string/hello"       
    android:layout_row="3"
    android:layout_column="0"
    android:layout_columnSpan="2" />

Bunun yapılması, aşağıda gösterildiği gibi düğmesinin TextViews alt GridLayout kısmına eklenmesiyle, daha önce sahip olduğumuz düzene benzer bir düzen elde edilir:

Last updated on 2018-02-06

Aracılığıyla paylaş