Bu yazımızda uygulamalarımızın görsel arayüzlerini oluştururken sık sık karşılaşacağımız değişik layout türlerinden önemli 3 tanesini inceleyeceğiz.
Layout dosyaları uygulamamızdaki etkinliklerin tasarımını oluşturan dosyalardır. Xml türünde olan bu dosyayı kullanarak etkinliklerimizin nasıl görüntüleneceğine karar verilir. Xml dosyasını elle düzenlemenin yanında bu dosyayı görsel bir şekilde düzenleme imkanına da sahibiz.
Haydi başlayalım. :)
Daha önceden nasıl proje oluşturulacağını anlattığım için o kısmı atladım. LayoutOgreniyorum isimli bir proje oluşturarak işe başlıyoruz.
Linear Layoutİlk anlatacağım layout türü
linear layout. Biz yeni bir proje oluştururken Eclipse bizim yerimize bir etkinlik oluşturuyor ve bunun içine varsayılan olarak bir linear layout yerleştiriyor.
Peki nedir bu linear layout? İsminden de anlaşılacağı gibi içerisine eklenecek nesneleri
çizgisel (linear) bir şekilde peş peşe eklemeye yarar. Aşağıdaki ekran görüntüsünde de görüldüğü gibi eklediğimiz
TextView nesneleri sırayla alt alta ekleniyorlar.
Xml görünüşüne geçerek oluşturulan kodları görebilirsiniz.
Linear layout kullanarak isterseniz eklediğiniz nesneleri alt alta yerine yan yana da yerleştirebilirsiniz. Bunun için yapmanız gereken
orientation özelliğini değiştirmektir. Yazarken
Ctrl + Boşluk tuşlarına basarsanız Eclipse'in size yardımcı olduğunu görebilirsiniz.
Tekrar görsel tasarım sekmesine geçtiğinizde eklediğiniz nesnelerin alt alta değil de yan yana eklendiğini görebilirsiniz.
Relative Layoutİsminden de anlaşılacağı gibi bu türden layout içerisine eklediğiniz nesneleri
göreceli bir biçimde konumlandırabilirsiniz. Peki bu ne demek? Uygulamamızdaki layout'u
relative layout'a çevirerek bir örnek yapalım.
Xml görünümündeki kodları yukarıdaki ekran görüntüsünde görüldüğü hale getiriyoruz. Artık etkinliğimizde linear değil
relative layout var.
Görsel tasarım kısmına geçip bir düğme ekleyelim. Ekleme işlemi sırasında farenizi ekranın değişik noktalarına hareket ettirince hizalama bilgileri görünecektir. Bu şekilde relative layout kullanarak hem
yatayda hem de
dikeyde kenarlara ve ortalara hizalı şekilde nesneler ekleyebilirsiniz.
Mesela ben bir tane ekranın sol üst köşesine, bir tane de ekranın tam ortasına gelecek şekilde düğme ekledim.
Uygulamanın son halinin xml'i yukarıdaki ekran görüntüsündekine benzer bir şey olmalı.
Table LayoutBu tür ile ekleyeceğiniz nesneleri bir
tabloya yerleştirebilirsiniz. İlk önce relative layout kısmında yaptığımız gibi xml dosyasının içeriğini değiştiriyoruz. Aşağıdaki görüntüdeki kodlarla etkinliğin layout'unu
table layout olarak belirliyoruz.
Table layout içine
satır eklemek için layout'umuza sol taraftaki nesnelerden
Layouts kısmından
TableRow nesnesini ekliyoruz.
İki satır ekledikten sonra bu satırlar içine
TextView nesneleri ekleyelim.
Gördüğünüz gibi satırlar içine eklenen nesneler yeni bir
sütuna yerleştiriliyor. İlk satıra 2 tane, ikinci satıra da 3 tane TextView nesnesi ekledim ben örnek olarak.
Xml tarafında da gördüğünüz gibi en dışta bir
table layout, onun içinde bir
table row, onun da içinde eklediğimiz
TextView nesneleri var.
Metinleri de değiştirince daha anlamlı oldu sanki. :)
Şimdi öğrendiklerimizden yararlanalım.
Table layout'un içine bir tane de
relative layout ekleyelim. Soldaki layouts kısmından relative layout'u tutup ekranımıza bırakıyoruz.
Yukarıdaki ekran görüntüsünde görüldüğü gibi eklediğimiz relative layout'un
yükseklik özelliğini "fill" olarak değiştirelim. Böylece ekranın aşağıya doğru kalan kısmını eklediğimiz relative layout dolduracak.
Sonra bu layout içine, ortada üstte bir TextView, tam ortada bir düğme ve sağ altta bir düğme daha olacak şekilde nesneler ekleyelim.
Xml görünümüne geçip eklediğimiz düğmelerin
id ve
text özelliklerini değiştirelim. TextView nesnesinin de
id'sini değiştirip,
text özelliğini silelim çünkü birazdan bu düğmelere tıklanıldığında biz kendimiz yazı yazdıracağız bu nesneye.
Düğmelere tıklanınca iş yaptırmayı daha önce
Figen arkadaşımız anlatmıştı ama bu daha değişik (ve bence daha kolay) bir yöntem. Yukarıda görüldüğü gibi düğmelere
onClick özelliği ekleyip içine de tıklantığında
çağrılacak metodun adını yazıyoruz.
Şimdi
AnaEtkinlik.java dosyamızı düzenleyelim. Eklediğimiz bir nesneye etkinlik kodları içinden nasıl erişeceğimizi
Figen arkadaşımızın yazdığı yazıda öğrenebilirsiniz.
Düğmelere tıklanınca bilgi verecek TextView (relative layout içine eklediğimiz) ve iki adet düğmemizi tanımlıyoruz. Daha sonra
findViewById metodu sayesinde nesneleri buluyoruz.
Düğmelere eklediğimiz
onClick özelliklerinde belirtilen metodları yazmakta sıra. Bir düğme nesnesinin tıklanma metodu için
2 şey önemlidir; metodun erişim değiştiricisinin
public olması ve metodun
View türünde bir parametresinin olması.
Yukarıda göründüğü gibi 2 düğmemiz için de tıklama metodlarını yazıyoruz. Bu iki metod da yukarıda tanımladığımız metin nesnesinin içindeki yazıyı değiştiriyorlar ve bunun için TextView türündeki nesnenin
setText metodunu kullanıyorlar. İki düğme de farklı şeyler yazıyor, bu şekilde hangi düğmeye basıldığını da görebileceğiz.
Şimdi uygulamamızı çalıştıralım.
Gördüğünüz gibi uygulamamız çalışıyor ve ekran görüntüsünü almadan önce ben 2. düğmeye tıklamışım. :)
Bu yazıda anlatacaklarım bu kadar.
İnşallah anlaşılır olmuştur.
Kolay gelsin. :)