Layout
Layout
Android uygulamalarında ekran tasarımları res klasörü altında bulunan layout dosyaları ile belirlenir. Bu dosyalar xml formatında hazırlanan dosyalardır ve Android uygulamalarına özel etiketler kullanarak görsel öğelerin yerleşimlerini ve özelliklerini bildirirler.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<ListView
android:id="@android:id/list"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
</LinearLayout>
Bir ekranın görünümü genellikle iki farklı yerleşim tipi kullanılarak belirlenir. Bunlar RelativeLayout ve LinearLayout olarak ikiye ayrılır.
LinearLayout yerleşimi kullanıldığında öğeler sırayla ekrana dizilirler ve ekrandaki yerleşimleri ekranın en tepesinden en altına doğru sırayla gerçekleşir. Yukarıdaki örnekte, ListView öğesinin altına başka bir öğe eklendiğinde ilk olarak liste ve listenin altında bu yeni öğe görüntülenir. Öğelerin uzunluk ve genişlikleri android:layout_width ve android:layout_height özellikleriyle belirlenir. Burada fill_parent (ana öğe ne kadar genişse hepsini doldurur) ve wrap_content (öğe içerisinde yer alan metin veya resim kadar yer kaplar) değerleri kullanılabileceği gibi, piksel cinsinden uzunluk da verilebilir. Eğer piksel vererek ebat belirleyeceksek, px birimi yerine dp birimini kullanmamız faydalı olacaktır. Android cihazlarda farklı ebatlarda ekranlar olduğundan, px cinsinden verilen piksellerin tasarımı her cihazda farklı oluşturacaktır. dp birimi ise ekran boyutuna göre ölçeklendirme yapmaktadır ve farklı cihazlarda benzer görünümler elde etmenizi sağlar.
RelativeLayout görsel öğeleri diğer öğelere göre referans alarak dizer. RelativeLayout tasarımında ilk eklenen öğe ekranın en tepesinde yer alır. Daha sonra eklenen öğeler android:layout_below (verilen ID’nin altında), android:layout_above (verilen ID’nin üzerinde), android:layout_toLeftOf (verilen ID’nin solunda) ve android:layout_toRightOf (verilen ID’nin sağında) şeklinde sıralanır. Bu şekilde ekranda oluşturulan bütün öğeleri bir öğeyi referans alarak dizmemiz mümkündür. Öğelerin ebatları ise android:layout_height ve android:layout_width metotlarıyla belirlenir.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<EditText
android:id="@+id/note_title"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10sp"
android:hint="Metin..." />
<EditText
android:id="@+id/note_latitude"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="@id/note_title"
android:layout_marginTop="10sp"
android:hint="Enlem..." />
<EditText
android:id="@+id/note_longitude"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="@id/note_latitude"
android:layout_marginTop="10sp"
android:hint="Boylam..." />
<Button
android:id="@+id/add_note_button"
android:layout_width="fill_parent"
android:layout_height="40sp"
android:layout_below="@id/note_longitude"
android:text="Ekle" />
</RelativeLayout>
Android: id özelliği her öğeye bir tanımlayıcı verilmesini sağlar ve öğelere kaynak kod içinden erişmemize ve müdahale etmemize yardımcı olur. Burada yaratılan id değerleri R dosyasında otomatik olarak oluşturulur ve bunlara kaynak kod içinden aşağıdaki gibi erişilir.
EditText titleView = (EditText) findViewById(R.id.note_title);
findViewById metodu, R dosyası içinden note_title id’sine sahip EditText öğesine erişmemizi sağlar. Bu şekilde ekran üzerindeki öğelerin özelliklerini değiştirebilir ya da aksiyonlar ekleyebiliriz.
((Button) findViewById(R.id.close_button)).setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { finish(); } });
Yukarıdaki örnekte close_button adlı düğmeye setOnClickListener metodu kullanılarak düğmeye basıldığında harekete geçen bir eylem eklenmiştir. Kullanıcı düğmeye bastığında finish metodu harekete geçerek ekranı kapatacaktır.
Layout dosyalarında bir öğeye id atanırken @+id yazımı kullanılır. Bu şekilde öğelere kendi belirlediğimiz isimleri verebiliriz. @id ise layout dosyasında önceden tanımlanmış bir öğeye referans vermek için kullanılır. @drawable, drawable klasörüne atılan resim dosyalarına referans verir. Bu şekilde bir resim yerleştirmek ya da arka plan belirlemek istiyorsak kaynak belirtmek için @drawable yazımını kullanmamız gerekir. Bir düğmeye ya da metin öğesine string.xml dosyasında belirttiğimiz bir yazıyı koymak istiyorsak @string yazımıyla bu dosyada bulunan değerlere erişebiliriz. @android ile işletim sisteminde tanımlanmış değerlere erişebiliriz.
Linear Layout Kullanımı
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.
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.
<?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.
Yorumlar
Yorum Gönder