Android Layout Yapıları (Linear, Relative, Frame Layout)

Bu makalemizde Android uygulamalarında hazırlanan tasarımlar ile alakalı layout yapılarının nasıl oluşturulduğunu detaylı şekilde açıklayacağız. Tabiki en popüler olan layoutları anlatmak bizim için yeterli olacaktır. Birçok projede temel olarak; Linear Layout, Relative Layout, Frame Layout kullanılmaktadır. Ayrıca listelemelerde ListView ve GridView yapılarıda kullanılmaktadır.

Android kodlamada tasarımlar /res/layout dizini altına eklenen activityler icerisinde bulunan XML dosyalarında yapılmaktadır. Ayrıca tasarımlar Java kodlaması ile de yapılabilmektedir. Ancak pratik kullanımda geliştiriciler daha çok XML dosyalar üzerinde bu işlemi gerceklestirmektedir.

Şimdi her bir layout un ne amaçla ve nasıl çalıştığını anlatalım.

1. Linear Layout: 
Bu layout yapısı çoğunlukla aynı sırada ve boyutta olan içeriklerin ardarda eklenmesi amacı ile kullanılabilmektedir. Bu layoutun en önemli özelliği orientation(yön belirleme) değişkeninin bulunmasıdır. Bu değişken horizontal(yatay) veya vertical(dikey) olarak setlenebilmektedir. LinearLayout içerisine eklenen buton ve textlerin ne yönde ardarda ekleneceğinin belirlenmesinde kullanılmaktadır.

 <LinearLayout 
      android:layout_width="wrap_content"
      android:layout_height="wrap_content" 
      android:orientation="vertical">
      ....
 </LinearLayout>


Linear Layout yapısının nasıl çalıştığını en iyi şekilde betimleyen resim aşağıdaki gibidir:
Şekildeki gibi oluşturulan layout yapısında en dışta bulunan LinearLayout un vertical olarak belirlenmesi ve alt elemanlarda bulunan LinearLayout un ise horizontal olarak setlenmesi bize birçok platformda kullanılan login sistemine ait tasarımı vermektedir. Şimdi aşağıda bulunan kodlamada örnek bir tasarım hazırlanmakta ve kodsal paylaşım gerceklestirilmektedir.














  • Eclipse programını açınız ve File->New->Android Application Project linkine tıklayarak yeni proje oluşturunuz.
  • Oluşan projede /res/layout dizininde sağa tıklayarak New->Android XML File üzerinden linear_layout.xml dosyasını oluşturunuz. 
  • Oluşturduğunuz linear_layout.xml dosyasını açın ve aşağıda bulunan kod parçacığını ekleyin.
<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" 
    android:background="#359bed" android:orientation="vertical" 
    android:padding="20dp" > 

  <TextView android:id="@+id/emailTextView" android:layout_width="fill_parent" 
    android:layout_height="wrap_content" android:padding="5dp" 
    android:text="Email :" android:textColor="#FFFFFF" 
    android:textSize="18sp" /> 
  <EditText android:id="@+id/emailEditText" android:layout_width="match_parent" 
    android:layout_height="wrap_content" android:hint="Email adresinizi girin" 
    android:inputType="textEmailAddress" android:ems="10" > 
  <requestFocus /> 
  </EditText> 
  <EditText android:id="@+id/passwordEditText" android:layout_width="match_parent" 
    android:layout_height="wrap_content" android:hint="Şifrenizi girin" 
    android:inputType="textVisiblePassword" android:ems="10" > 
  <requestFocus /> 
  </EditText> 
  <Button android:id="@+id/saveButton" android:layout_width="fill_parent" 
    android:layout_height="wrap_content" android:text="Login" /> 
  <LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" 
    android:orientation="horizontal" > 
  <Button
    android:id="@+id/createAccountButton" android:layout_width="wrap_content" 
    android:layout_height="wrap_content" android:layout_weight="1" 
    android:text="Yeni Hesap" /> 
  <Button android:id="@+id/forgetpasswordButton" android:layout_width="wrap_content" 
    android:layout_height="wrap_content" android:layout_weight="1" 
    android:text="Şifremi unuttum" /> 
  </LinearLayout> 
</LinearLayout>
  • Activity dosyasına hazırlamış olduğunuz layoutu yani linear_layout.xml setlemeniz gerekmektedir. Bunu ise aşağıda bulunan kodlama ile gerçekleştirebilirsiniz.
import android.app.Activity; 
import android.os.Bundle; 

public class AndroidLayoutsActivity extends Activity { 
    @Override
    public void onCreate(Bundle savedInstanceState) { 
        super.onCreate(savedInstanceState); 
        setContentView(R.layout.linear_layout); 
    } 
}
  • Proje Explorer alanında projeniz üzerinde sağa tıklayıp Run As-> Android Application seçeneğini seçtiğiniz takdirde uygulamanın emülatörde görüntülenen arayüzü şu şekilde olacaktır. 
2. Relative Layout: 
Bu layout yapısı normal hayatta kullandığımız herhangi bir nesneyi baz alarak yaptıgımız yönlendirmelerde kullanılmaktadır. Örneğin; giriş butonunun sağına iptal butonunu eklemenizde, veya layoutun en altına herhangi bir element eklemek istediginizde kullanılır. Bu layoutun sizinde anladığınız üzere birçok yararı bulunmaktadır. Farklı ekran boyutlarında bu yönlendirmeler sorunsuz çalıştığından geliştiricilerin en çok kullandığı layout yapısı oldugunu söyleyebiliriz. Örnek kod parçası aşağıdaki gibi ayarlanmaktadır.

<Button android:id="@+id/btnLogin">
</Button>
<Button android:id="@+id/btnCancel" android:layout_toRightOf="@id/btnLogin" 
android:layout_alignTop="@id/btnLogin">
</Button>


Relative Layout yapısının nasıl çalıştığını en iyi şekilde betimleyen resim aşağıdaki gibidir:
Şekildeki gibi oluşturulan layout yapısında Cancel butonun Login butonun yanına ilişlendirilmesi ve Register New Account butonun sayfanın en altına konulması RelativeLayout kullanılarak rahatlıkla yapılmıştır. Zaten ingilizcesi az buçuk iyi olan birisi kodlamada geçen yönlendirmelerden butonların nasıl konumladırılabileceğini tahmin edebilirsiniz. Örneğin; cancel butonun login butonun yanına konulması gerektiğini android:layout_toRightOf ifadesi ile tanımlamaktadır. Şimdi aşağıda bulunan kodlamada örnek bir tasarım hazırlanmakta ve kodsal paylaşım gerceklestirilmektedir.














  • Eclipse programını açınız ve File->New->Android Application Project linkine tıklayarak yeni proje oluşturunuz.
  • Oluşan projede /res/layout dizininde sağa tıklayarak New->Android XML File üzerinden relative_layout.xml dosyasını oluşturunuz. 
  • Oluşturduğunuz relative_layout.xml dosyasını açın ve aşağıda bulunan kod parçacığını ekleyin.
<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:background="#359bed" android:orientation="vertical" 
        android:paddingLeft="20dp" android:paddingRight="20dp" android:paddingTop="20dp" > 
    <TextView android:id="@+id/emailTextView" android:layout_width="fill_parent" 
        android:layout_height="wrap_content" android:padding="5dp" 
        android:text="Email :" android:textColor="#FFFFFF" 
        android:textSize="18sp" /> 
    <EditText android:id="@+id/emailEditText" android:layout_width="match_parent"
        android:layout_height="wrap_content" android:layout_alignLeft="@+id/emailTextView" 
        android:layout_below="@+id/emailTextView" android:ems="10" 
        android:hint="Email adresinizi girin" android:inputType="textEmailAddress" > 
    <requestFocus /> </EditText> 
    <Button android:id="@+id/loginButton" android:layout_width="wrap_content" 
        android:layout_height="wrap_content" android:layout_alignLeft="@+id/emailEditText" 
        android:layout_below="@+id/emailEditText" android:layout_alignParentLeft="true" 
        android:layout_marginRight="10px" android:text="Login" /> 
    <Button android:id="@+id/cancelButton" android:layout_width="wrap_content" 
        android:layout_height="wrap_content" android:layout_below="@+id/emailEditText" 
        android:layout_toRightOf="@+id/loginButton" android:text="Cancel" /> 
    <Button android:id="@+id/registerButton" android:layout_width="wrap_content" 
        android:layout_height="wrap_content" android:layout_alignParentBottom="true" 
        android:layout_centerHorizontal="true" android:text="Register New Account" /> 
</RelativeLayout>
  • Activity dosyasına hazırlamış olduğunuz layoutu yani relative_layout.xml setlemeniz gerekmektedir. Bunu ise aşağıda bulunan kodlama ile gerçekleştirebilirsiniz.
 
import android.app.Activity; 
import android.os.Bundle; 

public class AndroidLayoutsActivity extends Activity { 
    @Override
    public void onCreate(Bundle savedInstanceState) { 
        super.onCreate(savedInstanceState); 
        setContentView(R.layout.relative_layout); 
    } 
}
  • Proje Explorer alanında projeniz üzerinde sağa tıklayıp Run As-> Android Application seçeneğini seçtiğiniz takdirde uygulamanın emülatörde görüntülenen arayüzü şu şekilde olacaktır. 
3. Frame Layout: 
Bu layout yapısında ise resimlerin veya textlerin üst üste bindirilmesi gerektiğinde kullanılmaktadır. Mesela herhangi bir resmin üzerinde text ifadenin eklenmesi isteniyorsa bu yöntem izlenmektedir. Örnek kod parçası aşağıdaki gibi ayarlanmaktadır.
 
<FrameLayout 
        xmlns:android="http://schemas.android.com/apk/res/android" 
        android:layout_width="fill_parent" android:layout_height="fill_parent"> 
    <ImageView android:layout_width="fill_parent" android:layout_height="fill_parent" 
        android:scaleType="center" android:src="@drawable/golden_gate" /> 
    <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" 
        android:layout_marginBottom="20dip" android:layout_gravity="center_horizontal|bottom" 
        android:padding="12dip" android:background="#AA000000" 
        android:textColor="#ffffffff" android:text="En altta text" /> 
</FrameLayout>
Yapılan kodlama sonucu oluşan ekran görüntüsü şu şekilde olacaktır.

comments powered by Disqus