Bu yazı, Google'ın Android platformu üzerinde çalışacak uygulamalar için XML tabanlı arayüz tasarımı ile ilgili yazacağım yazılardan ilki. Bu yazılarımda arayüz tasarımı sırasında kullanmak zorunda olduğumuz container elemanlarından bahsedeceğim. Bu elemanların kullanımını iyi öğrenmek çok önemli çünkü bu elemanlar olmadan arayüzdeki bileşenlerin istediğimiz şekilde dizilmesini sağlamak mümkün değil. En basitinden ekrana her satırda 2 tane olmak üzere toplamda 4 tane tuş koyup bunların simetrik bir şekilde dizilmelerini istiyorsak bu container elemanlarından kullanmak zorundayız. Bundan daha ileri bir örnek olarak web sayfalarında oldukça sık karşılaşılan türden, sol tarafta etiketlerin, sağ tarafta da ilgili yazı kutularının olduğu bir form tasarlamak istiyorsak yine bu container elemanlarından birini (hatta duruma göre iç içe daha fazlasını) kullanmak zorundayız. Bu açıdan bakıldığında container elemanlarının HTML kodu yazarken kullandığımız table ve div tag'lerine benzer amaçla kullanılan şeyler olduklarını söyleyebiliriz.

İlk yazımda bahsedeceğim container, içerisindeki bileşenlerin web tarayıcılarında olduğu gibi box model'e göre yerleşmesini sağlayan ve bu sebeple de en çok kullanılan container olan LinearLayout. Bu container içerisine konan bileşenler ve diğer container'lar box model'de olduğu gibi ardışıl sütun veya satırlara, arka arkaya yerleşirler. Ayrıntılara girmeden önce bu container'ın ve içerisine konabilecek olan bileşenlerin XML içerisinde ayarlayabileceğimiz hangi özelliklere sahip olduğuna bir bakalım:

orientation: Container'ın satır temelli bir arayüz mü yoksa sütun temelli bir arayüz mü oluşturacağını belirler. İçerisindeki bileşenlerin yan yana dizilmesi için "horizontal", alt alta dizilmesi için "vertical" değerini vermek gereklidir.

layout_width: LinearLayout içerisindeki tüm bileşenler için belirtilmesi gereken bir özelliktir. Bileşenlerin genişliklerinin anne container genişliğinden küçük olması durumunda kalan kısmın nasıl doldurulacağını gösterir. Bu özelliğe 100px gibi sabit bir değer vererek bileşenin sabit boyutta olmasını, "wrap_content" değerini vererek içeriği ekranı aşacak kadar büyümedikçe normal boyutta kalmasını, "fill_parent" değerini vererek de aynı satırdaki diğer tüm bileşenler yerleştikten sonra yan taraflarında kalan tüm boşlukları kaplayacak şekilde yerleşemesini sağlayabilirsiniz. Ekran boyutundan bağımsız oldukları ve bu yüzden farklı ekran boyutlarına sahip cihazlarda da düzgün çalışacak arayüzler yapmaya imkan verdikleri için mümkün olduğunca saydığım son iki değerden birini kullanmaya çalışmalısınız.

layout_height: layout_width özeliğinin dikey yerleşim için olan versiyonu.

gravity: Container içerisindeki bileşenlerin nasıl hizalanacağını gösterir. Varsayılan olarak bileşenler container'ın sol üst köşesinden başlanarak hizalanır. Sütun şeklinde ayarlanmış bir container için bu özelliğin değeri "left", "right" ve "center_horizontal" yapılabilir. Bu değerler alt alta dizilmiş olan bileşenleri sırasıyla containerın sol tarafına, sağ tarafına ve ortasına yerleştirir. Satır şeklinde ayarlanmış bir container için ise değeri "center_vertical" yapılarak yan yana dizilmiş olan bileşenlerin satır içerisinde dikey eksende ortalanmasını sağlar.

weight: Yan yana durmakta olan iki bileşenlerin de layout_width özelliğinin değerinin "fill_parent" yapılmış olduğunu varsayalım. Bu durumda iki bileşen de kendi satırlarındaki boş alanları tamamen kaplamaya çalışacaklardır. Boş alanın ne kadarının hangi bileşen tarafından kaplanacağını bu özelliği kullanarak belirleyebiliriz. HTML'de table sütunlarına %30 gibi değerler vermeğe benzeyen bir şey bu. Ancak burada yüzde değil, sayı vermek gerekiyor. Mesela bir bileşene 1, diğerine 2 değerini vemişsek, ikinci bileşen birincinin aldığı boş alanın tam 2 katını kaplar.

padding: Bileşenlerin çerçeveleri ile içerikleri arasında ne kadar mesafe olacağını gösterir. HTML'deki padding'e benzerdir. 4 yöndeki padding değerini birden ayarlar. Eğer her yöne farklı padding değerleri vermek istiyorsanız paddingLeft, paddingTop, vb.. özellikleri kullanmanız gerekir.

<?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:gravity="center_horizontal"
    >
    <Button 
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content" 
        android:text="Satır kaplayan tuş"
        />
    <Button 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:text="Normal boyutta tuş"
        /> 
    <Button 
        android:layout_width="250px" 
        android:layout_height="wrap_content" 
        android:text="250px genişliğinde, 20px padding'li tuş"
        android:padding="20px"
        /> 

    <RadioGroup android:id="@+id/orientation"
        android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:padding="5px">
        <RadioButton
            android:id="@+id/yatay"
            android:layout_weight="1"
            android:text="Yatay" />
        <RadioButton
            android:id="@+id/dikey"
            android:layout_weight="1"
            android:text="Dikey" />
    </RadioGroup>
    <RadioGroup android:id="@+id/gravity"
        android:orientation="vertical"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:padding="5px">
        <RadioButton
            android:id="@+id/sol"
            android:text="Sola yasla" />
        <RadioButton
            android:id="@+id/orta"
            android:text="Ortala" />
        <RadioButton
            android:id="@+id/sag"
            android:text="Sağa yasla" />
    </RadioGroup>
</LinearLayout>   

Bu kod, içerisinde sırasıyla 3 tane tuş ve 2 adet RadiGroup container'ı barındıran lineer bir arayüz tanımlamakta. RadiGroup'lardan ilki 2, diğeri de 3 adet RadioButton bileşeni içeriyor. Arayüzü tasarlarken kullandığımız en dıştaki container ise tabi ki LinearLayout. Bu container'ın layout_width ve layout_height özelliklerinin her ikisi de "fill_parent" yapılmış olması, arayüzün tüm ekranı kaplamasını sağlayacak. Orientation özelliğinin "vertical" olması ise içerisine koyacağımız bileşenlerin alt alta dizilmesine sebep olacak. Son olarak gravity özelliğine "center_horizontal" dememizin nedeni ise daha sonra aksine sebep olacak bir özellik ayarlamadığımz sürece arayüz içerisindeki tüm bileşenlerin dikey olarak ortalanmasını istiyor olmamız.

Koymuş olduğumuz tuşlardan ilkinin layout_width özelliği "fill_parent" olarak ayarlanmış olduğu için tüm satırı kaplayacak, ancak layout_height özelliğine "wrap_content" değeri verilmiş olduğu için dikey olarak normal boyutta gözükecek.

İkinci tuşun ilkinden tek farkı layout_width özelliğinin değerinin de "wrap_content" olması. Bu da tuşun bulunduğu satır içerisinde sadece ihtiyaç duyduğu kadar yer kaplamasını sağlayacak.

Üçüncü tuş ise tam olarak 250px yer kaplayacak ve çerçevesi ile içeriği arasında padding özelliğine vermiş olduğumuz 20px değerinden ötürü her yönden 20px boşluk olacak.

Tuşlardan sonra gelen ilk RadioGroup container'ı tüm satırı kaplayacak ve içerisindeki RadioButton bileşenlerinin her ikisinin de layout_weight değeri 1 olduğundan bulundukları satırdaki boş alanları yarı yarıya bölüşecekler. RadioButton'lardan ilki seçildiğinde bu RadioGroup içerisindeki bileşenler yatay olarak dizilecek, yani orientation özelliğinin değeri "horizontal" yapılacak. Diğeri seçildiğinde ise orientation değerinin özelliği "vertical" yapılacak. Bu işlemleri yapabilmek için tabi ki Java kodu da yazmamız gerekecek.

Son RadioGroup da tüm satırı kaplayacak şekilde ayarlanmış ve 3 adet RadioButton bileşeni içeriyor. Ancak bunlar için XML içerisinde yapılmış herhangi bir ayar yok, çünkü ayarlar yine Java kodu içerisinden yapılacak. Sola yasla seçeneği seçildiğinde gravity özelliğinin değeri "Left", sağa yasla seçeneği seçildiğinde "Right", ortala seçeneği seçildiğinde ise "center_horizontal" olarak ayarlanarak RadioGroup içerisindeki bileşenlerin dikey olarak container içerisinde nasıl dizileceği ayarlanacak.

Şimdi programın çalışması için yazılması gereken Java koduna bakalım.

package org.example;

import android.app.Activity;
import android.os.Bundle;
import android.view.Gravity;
import android.widget.LinearLayout;
import android.widget.RadioGroup;

public class Ornek extends Activity implements RadioGroup.OnCheckedChangeListener
{
    RadioGroup orientation;
    RadioGroup gravity;
    
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        orientation=(RadioGroup)findViewById(R.id.orientation);
        orientation.setOnCheckedChangeListener(this);
        gravity=(RadioGroup)findViewById(R.id.gravity);
        gravity.setOnCheckedChangeListener(this);
    }
    
    public void onCheckedChanged(RadioGroup group, int checkedId)
    {
        if (group==orientation)
        {
            if (checkedId==R.id.yatay)
                orientation.setOrientation(LinearLayout.HORIZONTAL);
            else
                orientation.setOrientation(LinearLayout.VERTICAL);
        }
        else if (group==gravity)
        {
            if (checkedId==R.id.sol)
                gravity.setGravity(Gravity.LEFT);
            else if (checkedId==R.id.orta)
                gravity.setGravity(Gravity.CENTER_HORIZONTAL);
            else if (checkedId==R.id.sag) 
                gravity.setGravity(Gravity.RIGHT);
        }
    }
}

Eğer her şeyi doğru yapmışsanız programı çalıştırdığınızda aşağıdaki resimde göstermiş olduğum arayüzü görüyor olmanız gerekiyor (Sadece RadioButton'lar seçili olmayacak, onları ben seçtim). RadioButton'ları kullanarak orientation ve gravity özelliklerinin ne işe yaradığını dinamik olarak görebilirsiniz.

Emülatörde Android SDK'nın 1.6 sürümüne sahip sanal bir cihaz kullanmamın özel bir sebebi yok, siz başka versiyonlar üzerinde de çalıştırabilirsiniz. Ancak bu durumda arayüz aynı kalsa da tabi ki simülatörün görünüm değişecektir.