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

Herkese merhaba.

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 Layout

Bu 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. :)