Bu yazımda Layout tiplerinden bahsetmeye çalışacağım.

Layoutlar uygulamanızın tasarımınızı geliştirmenize yarayan önemli elementlerdir.

Layout tiplerinden sırasıyla bahsedelim. İlk olarak yeni bir proje açalım ve adını Layout olarak atayalım.

Projeniz ilk açıldığında resimdeki gibi görünecektir.

Linear Layout

main.xml dosyamızı açtığımızda kod kısmı aşağıdaki gibi görünecektir.

xml dosyasında gördüğümüzü üzere, LinearLayout zaten tanımlanmış gözükmektedir. Linear Layout u kullanarak, kullanıcılar dikey ve yatay olarak istedikleri öğeleri koyabilirler.

Burada kodda görünen orientation=”vertical”, kullanıcının ekrana koyduğu bütün öğelerin dikey olarak ekranda yerleştirileceği anlamına gelmektedir.

Örnek olarak, ekrana yerleştirmiş olduğumuz buton ve checkbox öğeleri dikey olarak gözükecektir.

Orientation ı horizontal yapalım. Bunu main.xml dosyasında vertical yerine horizontal yazarak yapabileceğimiz gibi, resimde gösterildiği gibi “Set Horizontal Orientation” butonuna da tıklayarak yapabiliriz.

Horizontal orientation butonuna tıkladıktan sonra öğelerin görünümü aşağıdaki gibi olacaktır.

Resimde de görüldüğü gibi sadece Hello World, LayoutsActivity! yazısının bulunduğu TextView öğesi gözükmekte sadece. Bunun sebebi ise TextView öğesinin “Toggle Fill Width” butonu tıklanmış olmasıdır.

Toggle Fill Width butonunun seçilmiş olması kaldırıldığında  resimdeki gibi bütün öğelerimiz gözükecektir. Bu arada ekranda düzgün gözüksün diye TextView öğesinin text özelliğini Hello World olarak değiştirdim.

Burada bilmeniz gereken iki şey var. Toggle Fill Width butonu seçili durumda iken TextView öğesinni Layout_Width özelliği match_parent olarak gözükecektir.

Eğer Toggle Fill Width butonu seçili değilse Layout_Width özelliği wrap_content olarak gözükecektir.

Match_parent özelliği layoutun genişliği ne ise eklediğiniz öğenin de genişliğini o kadar yapar.

Wrap_content özelliği ise layoutun genişliği eklemiş olduğunuz öğenin içeriğine bağlı olacağını gösterir.

 

Relative Layout

Diğer bir layout tipi ise Relative Layout. Var olan LinearLayout u Relative Layout a çevirmek için resimdeki gibi LinearLayout yazısını silip yerine Relative Layout yazalım. Ayrıca önceden eklemiş olduğumuz öğeleri de silelim.

Burada dikkatinizi çeken şeylerden biri Linear Layoutta kullandığımız orientation kodu Relative Layout ta geçerli değildir. Relative Layout un anlamı öğelerin yerleştirme işlemi birbirlerinin konumuna göre yapılır.

İlk olarak Relative Layout umuza bir buton ekleyelim. Buton ekleme işlemi yaparken, resimde de görüldüğü gibi bazı yönlendirme çizgileri gözükecektir.

Eklemiş olduğumuz butonun gravity özelliğini değiştirebiliriz. Bunu resimdeki gibi change the gravity seçeneği ile yapabiliriz.

Butonumuzun gravity özelliğini center yaptıktan sonra görüntüsü resimdeki gibi olacaktır.

Gravity özelliğini ayrıca resimdeki gibi Properties penceresinden de yapabilirsiniz.

Gravity özelliğini tekrar Top yapalım.

Ekranımıza bir tane RadioButton öğesi ekleyelim. Biz bu öğeyi eklemeye çalıştığımızda, resimdeki gibi bazı yönlendirme çizgileri karşımıza çıkacaktır.

RadioButton öğemizin yerini toRightOf=button1 olarak seçtiğimizde görüntüsü aşağıdaki resimdeki gibi olacaktır.

 

Frame Layout

Frame Layout her zaman kullanılan bir Layout tipi değildir. main.xml dosyamızda RelativeLayout yerine Frame Layout yazalım.

Layout tipimizi Frame Layout olarak değiştirdiğimizde ekranımızda yüklü olan öğelerin üstüste geldiğini görmekteyiz.

Frame Layout kullandığınız ekrana yerleştirdiğiniz öğelerin ayrı yerlerde kullanılması sorun olacaktır.

Frame Layout çok kullanılan bir Layout tipi olmasa da bazı yerlerde tercih edilebilir. Örneğin üst üste resimlerinizin gösterildiği bir fotoğraf albümünüz olsun. Bu resimlerin visibility özelliği ile oynarak sırayla gösterimini yapabilmeniz için Frame Layout u kullanabilirsiniz.

 

Table Layout

Table Layout en çok kullanılan layout tipidir. Çalışması temel olarak Excel ve HTML de ki tablo konsepti ile aynıdır.

main.xml dosyasındaki FrameLayout u TableLayout olarak değiştirelim ve sahip olduğumuz öğeleri silelim.

Eklemiş olduğumuz Table Layouta, satır eklemek için TableRow öğesini kullanıyoruz. Resimdeki gibi TableRow öğesini ekleyebiliriz.

Ekranımıza üç tane TableRow ekleyelim ve tasarımını resimdeki gibi yapalım.

Resimde görüldüğü gibi form oluşturma işlemlerinde çok rahat şekilde Table Layout kullanılmaktadır. Burada birinci ve ikinci satırda TextView ve EditText öğelerini son satırda ise buton öğesini görmekteyiz.

xml kodumuz aşağıdaki gibi olacaktır.

 

Bu yazımda Layout Tiplerinden bahsetmeye çalıştım. Layoutların yardımı ile çok rahat bir şekilde güzel ekran tasarımları yapabilirsiniz. Örnek olarak resimdeki temel bir hesap makinesi layoutların yardımı ile oluşturulmuştur :)