Ekran Tasarımı (Relative Layout – Mobil Uygulamalar Dersi)

Relative kelimesi “göreceli” anlamına gelir. Bu düzende kontroller salt yatay veya dikey konumdan ziyade birbirlerine göre hizalanırlar. Tasarımda esnekliğin karşılığı bu düzendir dersek abartmış olmayız. Zira kontroller birbirlerine göre hizalandığı için mükemmel bir esneklik sağlar.

İstediğiniz bir kontrolün sağına, soluna, üstüne veya altına yeni bir kontrol ekleyebilirsiniz.

Relative Layout aşağıdaki özelliklere göre kontrolleri hizalar.

(Android Programlama ve Uygulama Rehberi isimli kitabımın 6.Bölümü olan User Interface (Kullanıcı Ara yüzü) kısmından alınmıştır. )

Örnek birkaç uygulama ile bu düzeni anlamaya çalışalım.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp">
    <!--android:layout_centerInParent: true değeri verildiği için düzenin ortasına yerleşir.  -->
    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="Buton 1" />

    <!--android:layout_above: buton2 kontrolü, buton1 kontrolünün üstüne yerleştirilir.
    android:layout_centerHorizontal: true değerini aldığı için yatayda ortalanır.-->
    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/button1"
        android:layout_centerHorizontal="true"
        android:text="Buton 2" />

    <!--android:layout_below: buton3 kontrolü, buton1 kontrolünün altına yerleştirilir. -->
    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/button1"
        android:layout_centerHorizontal="true"
        android:text="Buton 3" />

    <!--android:layout_toRightOf: buton4 konrolü, buton1 kontrolünün sağına yerleştirilir.
    android:layout_centerVertical: true değeri verildiği için dikeyde ortalanır.-->
    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_toRightOf="@+id/button1"
        android:text="Buton 4" />

    <!--android:layout_toLeftOf: buton5s konrolü, buton1 kontrolünün soluna yerleştirilir.-->
    <Button
        android:id="@+id/button5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_toLeftOf="@+id/button1"
        android:text="Buton 5" />

</RelativeLayout>

Yukarıda görüleceği üzere, buton 1 kontrolü etrafında diğer kontroller hizalanmıştır. Hizalama işlemi için özellikle ID özelliğinden faydalandığımıza dikkat ediniz. Bu düzen ile daha kolay ve daha esnek tasarımlar yapılabilir.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp">

    <!--android:layout_alignParentTop: true değerini aldığı için düzenin en üstüne yerleşir. -->
    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:text="Buton 1" />

    <!--android:layout_alignParentRight: true değerini aldığı için düzenin en sağına yerleşir. -->
    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:text="Buton 2" />

    <!--android:layout_alignParentRight ve android:layout_alignParentBottom özellikleri true değerini aldığı için düzenin en sağına ve en altına yerleşir.-->
    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:text="Buton 3" />
    <!--android:layout_alignParentLeft ve android:layout_alignParentBottom özellikleri true değerini aldığı için düzenin en soluna ve en altına yerleşir.-->
    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:text="Buton 4" />
</RelativeLayout>

Burada kullandığımız özellikler ile butonları ana düzene göre hizalamayı gösterdik. “alignParent” gibi bir ifade ile başlayan özellikler ana düzene göre hizalanır.

Uygulama çıktısı aşağıdaki gibi olur.

İşte şimdilik bu kadar. Görüşmek üzere….