Android Programlama-Layout Türleri ve Kullanımları

Herkese Merhaba, bu yazımda Android programlamadaki layout türlerine ve kullanımlarına değineceğim.

Android uygulamalarında eklediğimiz Button, TextView gibi View’leri tasarım yaparken ekranda dilediğimiz gibi konumlandırmak için layoutları kullanmamız gerekir. Örneğin TextView ve Button un alt alta olmasını veya sağa sola kaymadan belirli bir düzende olmasını istiyorsak buna uygun olan layoutları tercih etmeliyiz.

Layoutlar

1- Linear Layout

2- Relative Layout

3- Table Layout

4- Frame Layout

5- Constraint Layout

Şimdi temel layout türlerini inceleyelim.

1- Linear Layout

Linear Layoutta, eklenecek olan View’ler sıralı olarak eklenir. Eğer linear layoutu horizontal bir şekilde kullanırsak View’ler yanyana, vertical bir şekilde kullanırsak View’ler alt alta dizilirler.

İlk olarak vertical linear layout un örneğine bakalım.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:orientation="vertical">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />
</LinearLayout>

Bu örnekte linear layoutun orientation u vertical olduğu için oluşturulan 3 tane button alt alta gelecek şekilde konumlandırılmış.

İkinci olarak horizontal linear linear layoutu deneyelim.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:orientation="horizontal">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"/>
</LinearLayout>

Bu örnekte linear layoutun orientationu horizontal olduğu için oluşturulan 3 tane button yan yana gelecek şekilde konumlandırılmış.

2- Relative Layout

Bu layout türü ile eklediğimiz View’leri istenilen bir biçimde konumlandırabiliriz. Yani bir View’in sağına, soluna, üstüne veya altına yeni bir View ekleyebiliriz.

Bu layout ile çalışırken her View için mutlaka bir ID bilgisi tanımlamayı unutmamamız gerekir. View’lerin birbirlerine göre konumlandırılabilmeleri için ID bilgisine ihtiyaç duyulur.

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

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="Button 1"/>

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_above="@id/button1"
        android:text="Button 2"/>

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_below="@id/button1"
        android:text="Button 3"/>

    <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="Button 4"/>

    <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="Button 5"/>

</RelativeLayout>

Buton 1 sayfanın ortasına, Buton 2 Buton 1 in yukarısına, Buton 3 Buton 1 in aşağısına, Buton 4 Buton 1 in sağına ve Buton 5 ise Buton 1 in soluna hizalanmıştır.

3- Table Layout

Bu layout türünde ise View’lerimiz bir tablo şeklinde tutulur. Diğer layout türlerinden farklı olarak bu layout’u kullandığımızda tablomuza satır eklememiz gerekiyor. Bu satır eklemeyi de TableRow ile yapılır. Her satır ekleme için bir TableRow kullanılır.

<?xml version="1.0" encoding="utf-8"?>
<TableLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="10dp"
    tools:context=".MainActivity">
    <TableRow
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >
    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 1"/>

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 2"/>

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 3"/>
        <Button
            android:id="@+id/button4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button 4"/>
    </TableRow>
    <TableRow
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp">
    <Button
        android:id="@+id/button5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 5"/>

    <Button
        android:id="@+id/button6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 6"/>
    <Button
        android:id="@+id/button7"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 7"/>
    <Button
        android:id="@+id/button8"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 8"/>

    </TableRow>

</TableLayout>

Xmlde de görüldüğü üzere en dışta bir TableLayout, onun içinde iki tane TableRow, onların içinde de 4 tane Button View’leri var.

4- Frame Layout

Frame Layoutta nesneler üst üste gelebilir. Aynı boyutlardaki View’lerin üst üste gelip, birinin kaybolduğunda diğerinin gözükmesi için kullanılır. Örneğin bir fotoğrafımız var üzerine isim yazmasını istiyoruz işte o zaman Frame Layout kullanmamız bu iş için uygundur.

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

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="center"
        android:src="@drawable/image" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp"
        android:layout_gravity="left|bottom"
        android:padding="10dp"
        android:background="#cccc"
        android:textColor="#ffffffff"
        android:textSize="30dp"
        android:text="İstanbul" />
</FrameLayout>

Örneğimde bir ImageView ve TextView oluşturdum. FrameLayout kullandığım için ve TextView i ImageView den sonra eklediğim text , image in arkasında kalmamış ve image nin üzerine yazılmıştır. Androidde layoutlar yukarıdan aşağıda çizilir bu yüzden ilk önce image çizildi ve sonra yazı çizilip onun üstüne geldi. Eğer tam ters sıralamada yapsaydık yazı arkada kalırdı.

5- Constraint Layout

View’leri birbirine göre konumlandıran ve sınırlandıran yeni bir layout türüdür. View’leri yatay veya dikey olarak konumlandırdığımız LinearLayout yerine ConstraintLayout kullanarak her cihaz için uyumlu tasarımlar oluşturabiliriz. View’lar birbirine göre konumlandırıldığında herhangi bir View’ın konumu değiştirildiğinde diğer View’da konumunu değiştiriyor. Diğer bir yandan ConstraintLayout ile birlikte iç içe bağımlı layout’lara gerek olmadığı için ekstra performans artışı sağlamaktadır.

Constraint layoutun en temel özelliği Relative positioning dır. View’leri birbirine göre yada parent ına gore yerleştirmemizi sağlıyor. Mesela “layout_constraintLeft_toRightOf” a bakacak olursak "constraintLeft" ile View'ın sol tarafı için yön belirleyeceğimizi söylüyoruz "toRightOf” ile de View’ın yön alacağı View’in yönünü belirliyoruz. ”layout_constraintLeft_toRightOf” bir View’in sol tarafının başka bir View’in sağ tarafına bağlanacağını belirtiyor.

Alttaki constraintler ile iki View arasında bağlantı kurabiliriz.

ConstraintLayout hakkında detaylı bilgi için aşağıdaki siteyi inceleyebilsiniz.

ConstraintLayout | Android Developers

Şimdi bir örnek üzerinde konuşalım.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/mainLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingLeft="5dp"
        android:text="@string/client"
        android:textColor="@color/red"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBottom_toTopOf="@id/button1"/>
    <EditText
        android:id="@+id/button1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/clientId"
        android:inputType="textEmailAddress"
        app:layout_constraintBottom_toTopOf="@+id/button2"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="@string/authenticate"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="@id/button1"
        app:layout_constraintEnd_toEndOf="@id/button1"
         />

</androidx.constraintlayout.widget.ConstraintLayout>

TextView’in bottomunun EditTex’in Top una bağlanması için ve EditText’in bottomunun Button’un top una bağlanması için “layout_constraintBottom_toTopOf” kullandım. EditText ve Buttonun sağ ve soldan ortalanmaları için de “layout_constraintStart_toStartOf” ve “layout_constraintEnd_toEndOf” kullandım.

Özet olarak kullandığımız View’lerin belirli bir düzende olmasını istiyorsak layoutları kullanmamız gerekmektedir.

Umarım faydalı olmuştur.