Android ve Tasarım #1 : Etkili Layout Seçimi ve Kullanımı
Bildiğiniz gibi tasarımlar programladığımız Android uygulamalarda büyük bir öneme sahip. Kullanıcı gözüyle uygulamalara baktığımızda, insanların tasarıma ve uygulamanın kendi içindeki akışına önem verdiğini görebiliriz. Bu sebeple, yazımda Layout kavramını ve Layout tasarımını giriş seviyesinde sizlere aktarmak istiyorum. Kullanımlarını ben de zamanla oturtmaya çalışıyorum. Bu yüzden hatalarım olacaktır fakat genel çerçevesiyle Layout mantığını kavratacak bir yazı olduğunu düşünüyorum. Yazıma sıkça rastlayacağınız “component” kavramıyla başlamak isterim.
Component Nedir?
Componentler basitçe, View tarafında kullandığımız nesnelerdir. Tasarımımızı componentler ile oluştururuz. Componentlere için “Widget” kavramı da kullanılmakta fakat ben bu yazı için component kavramını kullanacağım.
Ör: TextView, ImageView, EditText…
Layout Nedir?
Android projelerimizde, Projemizin View yani arayüz kısmını .xml formatlı olarak tasarlarız. Bu arayüzler, layout dosyaları aracılığıyla oluşturulur.
Layout, yaptığımız tasarımda View componentlerin yaşama alanıdır diyebiliriz. Tasarımlarda kalıp görevi görerek sağladığı özelliklerine göre içinde kullanılan componentlere düzen sağlar, nasıl gözükmeleri gerektiğini belirler.
Android’de farklı layoutlar vardır ve farklı amaçlar için kullanılır. Android programlamaya başlandığında sık rastlanan hizalama ve boşluk hatalarını kolayca çözmemizi sağlayan ve layoutlarda kullanmamız gereken 2 temel tasarım özelliğini göstermek istiyorum.
- wrap_context : İçerisinde bulunan componentler kadar yer kaplar.
android:layout_width="wrap_content"
android:layout_height="wrap_content"kodlarıyla xml dosyamızdan ayarlayabilirken,
Attributes kısmından da ayarlanabilmektedir.
- match_parent : İçinde bulunduğu alanı tüm doğrultusuyla kapsar.
android:layout_width="match_parent"
android:layout_height="match_parent"Şimdi Layout türlerine giriş yapabiliriz.
1) LinearLayout
Android programlamaya başlayanların, ilk zamanlarda sık sık denk geldiği layoutlardan biridir.
Linear Layout, temel olarak içinde bulunan componentleri yatay (horizontal) veya dikey (vertical) olarak sırayla hizalamaya yarar.
Bunu belirlemek için xml özelliklerimizden veya daha önce söylediğimiz “Attributes” kısmından kullanılan Layout’un orientation(yön) ayarlamasını yapabiliriz.
Yatay Hizalama:
Dikey Hizalama:
Şuan ki paylaşacağım örnek ise bir önceki projemde yaptığım sadece LinearLayout kullanarak tasarlamış olduğum basit bir CardView:
LinearLayoutlar ile yaptığımız tasarımlarda hizalamayı doğru yaparsak, uygulamamız ileride farklı boyutlardaki cihazlarda da sıkıntısız olarak çalışacaktır. Çünkü orantıyı kurmak, elle sayı girmekten her zaman daha iyidir. Sayılar değişse bile program önceden kurgulanan orantıya bağlı kalarak tasarım düzenini koruyacaktır.
2) RelativeLayout
Relative Layout, temelinde programcıya tasarımda özgürlük tanır. Componentleri istediğimiz şekilde hizalayabilir ve sürükleyebiliriz. LinearLayout’tan farkı daha özgür olması ve farklı özellikler içermesidir. İçindeki componentleri, etrafındaki bileşenlere göre sağa, sola, yukarı veya aşağı hizalayabiliriz.
Bileşenleri, ekran içerisindeki bir kenara veya köşeye hizalamak için,
- layout_alignParent özelliğini kullanabiliriz.
Örnek olarak, layout_alignParentBottom ile alt kenara, layout_alignParentRight ile sağ kenara hizalayalım.
Kenara sıkışması hoş gözükmezdi. Bu yüzden 10dp margin ayarı yaptım.
Margin anlam olarak “kenar boşluğu” demektir ve Android’de tasarım elementlerimizin birbirinden ayrılması için önem taşır.
Görselimizi layout kenarlarına göre hizaladık. Peki etrafta başka componentler olursa, tasarımımız daha karmaşık bir hale gelirse ne yapacağız?
Bunun için kullanacağımız farklı hizalama yöntemleri var.
1- Dışarıdan Hizalama
- layout_above : seçilen componenti ID’si verilen diğer componentin üstünden başlayarak dışarıya doğru hizalar.
- layout_below : seçilen componenti ID’si verilen diğer componentin altından başlayarak dışarıya doğru hizalar.
- layout_toRightOf : seçilen componenti ID’si verilen diğer componentin sağından başlayarak dışarıya doğru hizalar.
- layout_toLeftOf : seçilen componenti ID’si verilen diğer componentin solundan başlayarak dışarıya doğru hizalar.
2- İçeriden Hizalama
- layout_alignLeft : seçilen component’i ID’si verilen diğer componentin solundan başlayarak içine doğru hizalar.
- layout_alignRight : seçilen component’i ID’si verilen diğer componentin sağından başlayarak içine doğru hizalar.
- layout_alignBottom : seçilen component’i ID’si verilen diğer componentin altından başlayarak içine doğru hizalar.
- layout_alignTop : seçilen component’i ID’si verilen diğer componentin üstünden başlayarak içine doğru hizalar.
Tanımlar çok yakın değil mi ? Okuduğunuzda kafanızda karışabilir. Karmaşıklığı çözelim ve kavramları anlamaya çalışalım.
Dışarıdan hizalamada, birbirine göre hizalanması gereken 2 component iç içe çakışmaz. Above(üst) veya Below(alt)’dan başlayarak o componentin dışına doğru hizalar.
layout_alignTop ve layout_above özelliklerini karşılaştıracağımız basit bir örnekle görelim.
layout_above:
Burada TextView componentinde layout_above olarak kullandığımız ImageView’in ID’sini verdik ve artık TextView, ImageView’in üst sınırından başlayarak görselin dışarısına doğru konum almıştır. Farkın görülebilmesi açısından 10dp’lik küçük bir margin ayarı verdim.
layout_alignTop:
Burada ise, TextView componentinin alignTop özelliğine ImageView verdik. Yukarıdaki örneğe benzer olarak yerleşime yine görselin yukarısından başladı. Fakat, görselin içine doğru yerleştiğinden görsel ve yazı çakışmıştır. Aynı şekilde farkın görülebilmesi açısından 10dp’lik küçük bir margin ayarı verdim.
Ayrıca, Uygula Öğren kanalının videosunu sizlere tavsiye ediyorum.
3) GridLayout
GridLayout, TableLayout’un daha gelişmiş halidir. TableLayout veri gösterimi için kullanılabilir fakat cansızdır ve dinamik olarak kullanışsızdır. Daha gelişmiş özellikleri içeren bir tablo görünümü için GridLayout kullanmalıyız. Çünkü GridLayout aynı zamanda ListView’e yakın mantıkta çalışır. Adapter ile kullanılabilir, gezinme, sürükleme vb. imkanlar tanır. Sütun veya satırlara istediğimiz componentleri yerleştirip onları düzene sokmamıza olanak sağlar. Bazı temel özelliklerini incelemeye başlayalım.
Satır ve sütün sayılarını kendimiz belirleriz.
Bunun için
- columnCount
- rowCount özelliklerini kullanırız.
Kodunu xml dosyamıza eklediğimizde, 4x3’lük bir tablomuz oluşacaktır.
Peki, içine component eklediğimizde yerlerine nasıl karar vereceğiz?
Mesela 7 ve 8 sayılarının yerlerini değiştirebilir miyiz?
Evet. Bunun için
- layout_row
- layout_column özelliklerine indeks verebiliriz.
Örnek olarak:
ile istediğimiz bileşenin GridLayout’ta ki yerlerini x ve y koordinatları olarak düşünerek değiştirebiliriz.
Unutmamız gereken detay şudur: satır ve sütunlarda ilk indis 0’dır.
Böylece Android bize bileşenlerin yerlerini row ve column ayarları vererek değiştirme imkanı tanıyor.
Ayrıca,
android:useDefaultMargins="true"komutu ile layoutun varsayılan kenar boşluklarını kullanabilmesini sağlar.
Peki, her satırın veya sütunun kullanması gerektiği alanı değiştirmemiz gerektiğinde ne yapacağız?
Bunun için
- layout_rowSpan
- layout_columnSpan özelliklerini kullanabiliririz.
İle butonumuza 2x2’lik alan tanıyabiliriz.
rowSpan ve columnSpan kullandığımızda, doldurmanın başarılı olması için,
android:layout_gravity="fill_vertical"android:layout_gravity="fill_horizontal"
komutlarını kullanabiliriz.
Her iki yönü de dolduracaksak,
android:layout_gravity="fill"kodu yeterli olmaktadır.
Temel GridLayout kullanımını bu şekilde yapıyoruz.
Dinamik GridLayout ve gelişmiş özellikler için Alper Beyler’in anlatımını tavsiye ediyorum:
4) FrameLayout
Frame Layout, yaygın olarak componentlerin birbirlerinin yerine geçebilmesine ve üst üste kullanabilmesine olanak sağlar. Bu şekilde yapıları çakışmadan birbirinin yerine kullanmamıza ve hangisinin üstte olacağına karar vermemizi sağlar.
FrameLayout componentlerin yerleşiminde stack gibi davranır.
Stack ise Last In First Out mantığıyla çalışır. Burada da FrameLayout’a eklenen en son bileşen en önde gözükecektir.
Ayrıca FrameLayoutlar sık olarak Fragmentlar ile kullanılsa da aralarında direk bir bağlantı yoktur. Burada da aynı şekilde fragmentların üstlerine binmeden birbiri arasında geçiş yapabilmesi söz konusudur.
Fragment başka bir konuya ait olduğu için bu kısma giriş yapmayacağım. Sadece basit bir örnek göstermek istiyorum.
Gördüğünüz bu tasarımda, alt kısımda Bottom Navigation Bar bulunmaktadır ve 5 tane farklı navigation vardır.
Kenarlarını mavi olarak işaretlediğimiz alan FrameLayout’tur ve Bottom Bar’da bulunan 5 navigation fragment yapısı ile FrameLayout üzerinde değişecektir. Buda günlük hayatta kullandığımız mobil uygulamalarda yaygın bir kullanımdır.
Dinamik FrameLayout ve gelişmiş özellikler için Alper Beyler’in anlatımını tavsiye ediyorum:
5) ConstraintLayout
ConstraintLayout, Layout ailesinin yeni üyelerindendir ve Android Studio 2.2 sürümü ile gelmiştir.
Temel olarak, kullanıcıları karışık tasarımlardan kurtarmayı ve layout kullanımını minimuma indirmeyi hedefler. Sağladığı özellikler sayesinde componentleri birbirine göre hizalar ve herhangi birinin konumu, boyutu değiştiğinde diğer componentlerin de ona göre konum alabilmesine olanak tanır. Yani siz oturttuğunuz tasarımda ufak bir değişiklik yapmak istediğinizde tasarımın tamamını değiştirmek zorunda kalmazsınız. Diğer componentler haliyle konumunu düzeltecektir. Android’in ConstraintLayout ile amaçladığı budur.
Bileşenleri birbirine göre hizalamak, elle yapılabilmektedir. Fakat Android Studio’nun bunu yapmasını istediğinizde “Infer Constraints” seçeneğine tıkladığında da program tarafından gerçekleştirilebilir.
Çıkışında oldukça ses getirdiğinden hakkında çok sayıda video ve makale yapıldı. Beğendiğim 2 yazıyı paylaşmak istiyorum:
Yazıma son vermeden önce, projelerinizi parça parça yönetmenizi kolaylaştıracak olan parçalı layout mantığını basit bir örnekle anlatmak istiyorum.
Örneğin, biz bir proje yapıyoruz ve anasayfasını tasarlayacağız. Anasayfa, projeler için çok önemlidir. Kullanıcıyı karşılar ve kullanıcı ulaşabileceği seçeneklere en kolay ve en az “tık” ile ulaşmak ister. Bununla beraber, tüm seçenekleri ulaştırmak adına kullanıcıyı anasayfa butonlara boğmak pek mantıklı değildir.
Anasayfamızın üstünde toolbar olsun.
Toolbar hakkında bilgi almak isterseniz;
Toolbar’ı direk anasayfamıza monte edebiliriz fakat bunun yerine ayrı bir sayfada tasarlayıp anasayfamıza dahil etmek daha mantıklı olacaktır. İleride yapacağımız değişikliklerde de bize tasarımsal açıdan kolaylık sağlayacağı kesin.
Bir toolbar tasarlayalım.
toolbar.xml
Bunu Anasayfamıza dahil edelim.
ve taslağımızın son durumu:
Taslağımızda hem Toolbar, hem FrameLayout hem de Bottom Navigation Bar kullanmış olduk.
Parça parça anlattığım bu yapıları 2. yazı ile tek proje üstünden anlatmayı hedefliyorum.
Faydalı olması dileğiyle.
