Linear Layout Kullanımı

​

Bu eğitim içeriğimizin yazarı sevgili Yasin Kafadar'a teşekkürü bir borç biliriz.

 

Hatırlatma: Bu eğitim ileri seviye olduğundan, belirli bir örnek üzerinden uygulamalı olarak anlatılmıştır.

---

Linear Layout kullanımı Android'de, tüm nesneleri tek bir yönde kullanmamızı sağlar. Linear layout sayesinde nesneleri android:orientation özelliğini kullanarak, tamamen yatay veya dikey olarak konumlandırabiliriz.

Android Studio'da yeni bir proje oluşturarak başlayalım. Adını LayoutsDemo yapalım.

İlk olarak activity_main.xml'in içine bir tane düğme ekliyoruz. Daha sonra bu XML'in içine diğer layout ekranlarını açacak düğmeleri de ekleyeceğiz.

<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:orientation="vertical" >

<Button
    android:id="@+id/btn_show_linear_layouts"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Linear Layout" />
</LinearLayout>

 

XML kodunu yazdıktan sonra MainActivity'ye setContentView metodu ile bu layout sınıfını veriyoruz. MainActivity'nin içinden btn_show_linear_layouts id'li düğmeyi findViewById metodu ile referansını alıp, OnClickListener set ediyoruz. Listener'ın onClick metoduna LinearLayoutDemoActivity isimli activity'i açacak kodu yazıyoruz:

public class MainActivity extends Activity {
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        Button showLinearLayoutDemo = (Button) (findViewById(R.id.btn_show_linear_layouts));
        showLinearLayoutDemo.setOnClickListener(new OnClickListener() {
            public void onClick(View v) {
                startActivity(new Intent(MainActivity.this, LinearLayoutDemoActivity.class));
            }
        });
    }
 
} //Eklenen her activity sınıfının AndroidManifest.xml dosyasına ekleneceğini unutmayın. Yoksa hata alırsınız

İkinci aşama olarak activity_linear_layout_demo.xml isimli layout'u oluşturuyoruz. Layout'un içine dört tane düğme ekliyoruz:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
 
    <Button
        android:id="@+id/btn_show_horizantal_example"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Horizantal Example" />
 
    <Button
        android:id="@+id/btn_show_vertical_example"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Vertical Example" />
 
    <Button
        android:id="@+id/btn_show_weight_example"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Weight Example" />
 
    <Button
        android:id="@+id/btn_show_gravity_example"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Gravity Example" />
 
</LinearLayout>

Oluşturduğumuz bu dört düğmenin yardımıyla örnek layout'ları açacak şekilde LinearLayoutDemoActivity sınıfı içine gerekli kodları yazıyoruz:

public class LinearLayoutDemoActivity extends Activity {
 
    public static final int HORIZANTAL_EXAMPLE = 0;
    public static final int VERTICAL_EXAMPLE = 1;
    public static final int WEIGHT_EXAMPLE = 2;
    public static final int GRAVITY_EXAMPLE = 3;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_linear_layout_demo);
 
        Button showHorizantalExample = (Button) findViewById(R.id.btn_show_horizantal_example);
        showHorizantalExample.setOnClickListener(new OnClickListener() {
            public void onClick(View v) {
                showExample(HORIZANTAL_EXAMPLE);
            }
        });
 
        Button showVerticalExample = (Button) findViewById(R.id.btn_show_vertical_example);
        showVerticalExample.setOnClickListener(new OnClickListener() {
            public void onClick(View v) {
                showExample(VERTICAL_EXAMPLE);
            }
        });
 
        Button showWeightExample = (Button) findViewById(R.id.btn_show_weight_example);
        showWeightExample.setOnClickListener(new OnClickListener() {
            public void onClick(View v) {
                showExample(WEIGHT_EXAMPLE);
            }
        });
 
        Button showGravityExample = (Button) findViewById(R.id.btn_show_gravity_example);
        showGravityExample.setOnClickListener(new OnClickListener() {
            public void onClick(View v) {
                showExample(GRAVITY_EXAMPLE);
            }
        });
    }
 
    private void showExample(int exampleId) {
        Intent intent = new Intent(LinearLayoutDemoActivity.this, LinearLayoutExampleActivity.class);
        intent.putExtra("exampleId", exampleId);
        startActivity(intent);
    }
}

Yukarıda bulunan bütün düğmeler aynı activity'i açmaktadır. Activity'nin içine geçilen parametre tipine göre setContentView metoduna verilen layout id'si değişmektedir. Açılan LinearLayoutExamplActivity'nin örnek kodu aşağıdaki gibidir:

public class LinearLayoutExampleActivity extends Activity {
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        int exampleId = getIntent().getIntExtra("exampleId", 0);
 
        switch (exampleId) {
            case LinearLayoutDemoActivity.HORIZANTAL_EXAMPLE:
            setContentView(R.layout.activity_linear_layout_horizantal);
            break;
            case LinearLayoutDemoActivity.VERTICAL_EXAMPLE:
            setContentView(R.layout.activity_linear_layout_vertical);
            break;
            case LinearLayoutDemoActivity.WEIGHT_EXAMPLE:
            setContentView(R.layout.activity_linear_layout_weight);
            break;
            case LinearLayoutDemoActivity.GRAVITY_EXAMPLE:
            setContentView(R.layout.activity_linear_layout_gravity);
            break;
 
            default:
            break;
        }
    }
}

Buraya kadar anlatılan kısım genel özellikleri yansıtmaktadır. Bundan sonraki kısımda Linear Layout da bulunan yeteneklere bakalım.

 

Yatay örnek

Linear Layout'un içine eklediğiniz view'ları yatay bir şekilde göstermek için aslında herhangi bir şey belirtmemize gerek yok. Öntanımlı olarak android:orientation="horizontal" olarak gelmektedir. Burada dikkat edilmesi gereken nokta, eğer yatayda çok fazla view eklemek istiyorsak Linear Layout'u bir Scroll View içine koymamızın gerekmesidir. Aksi takdirde son olarak eklediğimiz view'lara yer kalmadığı zaman bunu sistem ekrana doğru düzgün bir şekilde çizemeyecektir.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" >
 
    <Button
        android:id="@+id/btn_blue"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/blue_color"
        android:text="Blue"
        android:textColor="@color/white_color" />
 
    <Button
        android:id="@+id/btn_purple"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/purple_color"
        android:text="Purple"
        android:textColor="@color/white_color" />
 
    <Button
        android:id="@+id/btn_green"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/green_color"
        android:text="Green"
        android:textColor="@color/white_color" />
 
    <Button
        android:id="@+id/btn_orange"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/orange_color"
        android:text="Orange"
        android:textColor="@color/white_color" />
 
</LinearLayout>

 

Dikey örnek

Layout içine koyduğumuz view'ları dikey bir sırada göstermek istiyorsak, Linear Layout'un orientation özelliğini vertical olarak belirtmemiz gerekmektedir.

android:orientation="vertical"

 

 

Aynı yükseklik ya da genişliğe sahip örnekler

Birçok projede aynı genişliğe veya aynı yüksekliğe sahip view'ları görebilirsiniz. Bunları yapmak için LinearLayout'un weightSum ve viewların layout_weight özelliğini kullanmalısınız. Linear Layout içine iki tane view koymuşsak ve bunların aynı genişliğe sahip olmasını istiyorsak; o zaman Linear Layout'un orientation özelliğini horizontal yapıp weightSum özelliğini 1 yapmalıyız (Eğer Linear Layout'un weightSum özelliğini herhangi bir değer vermezsek, içine koyulan layout_weight'lerin toplam değeri otomatik olarak hesaplanıp set edilecektir). Layout'un içine koyulan view'larında layout_weight değerlerini eşit yapmalıyız.

Bu örnek için her iki view'ın da ilgili değeri 0.5 olacaktır. Aslında layout_weight değeri o view'ın ekranda yüzdesel olarak ne kadar yer kaplayacağını verebilmemizi sağlar. Bu oran ekran genişliğinden bağımsız bütün genişliklerde düzgün bir şekilde çalışmaktadır: (Daha fazla bilgi ve örnek için bu adresteki örnekte incelenebilir).

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:weightSum="1" >
 
    <Button
        android:id="@+id/btn_blue"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:background="@color/blue_color"
        android:layout_weight="0.5"
        android:text="Blue Button"
        android:textColor="@color/white_color" />
 
    <Button
        android:id="@+id/btn_green"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:background="@color/green_color"
        android:layout_weight="0.5"
        android:text="Green Button"
        android:textColor="@color/white_color" />
 
</LinearLayout>

Eğer dikey düzlemde eşit görüntü vermek istiyorsak bu sefer orientation değerini vertical yapmamız gerekmektedir.

Performans Hatırlatması: Örneğin yatay düzlemde weight değerlerini veriyorsak, viewların layout_width değerlerini 0dp yapmamız performans açısından daha verimli sonuçlar verir.

 

Gravity örneği

Linear Layout'un içine koyduğumuz view'ları nerede konumlanacağını gravity değeri ile verebiliriz. Aşağıda örnekte tam ortaya gelecek şekilde değer verilmiştir:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center" >
    <!--
        android:gravity="left"
        android:gravity="right"   
        android:gravity="center_vertical"
        android:gravity="center_horizontal"
        android:gravity="center"
     -->
 
    <Button
        android:id="@+id/btn_blue"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/blue_color"
        android:text="Blue Button"
        android:textColor="@color/white_color" />
 
    <Button
        android:id="@+id/btn_purple"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/purple_color"
        android:text="Purple"
        android:textColor="@color/white_color" />
 
    <Button
        android:id="@+id/btn_green"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/green_color"
        android:text="Green Button"
        android:textColor="@color/white_color" />
 
    <Button
        android:id="@+id/btn_orange"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/orange_color"
        android:text="Orange"
        android:textColor="@color/white_color" />
 
</LinearLayout>

                    Center

                     Right

 

 

 

Alıştırma

İndirebileceğiniz örnek kodlarda, projeye birden fazla özelliğin bir arada kullanıldığı bir örnek daha ekli. Üzerinde gerekli çalışmaları yaparak aşağıdaki ekran görüntüsünü elde edebilirsiniz.