Günümüzde teknolojinin ilerlemesi ile özellikle mobil cihazlarda tasarımsal değişimler gözlenmektedir. Cihazların ekran yüzeyinin arttırılması ve çerçeve kenarlıkların inceltilmesiyle kullanıcının daha geniş ekranda işlevlerinin gerçekleştirmesi sağlanır. Cihaz tasarımındaki değişimler, android işletim sistemine sahip cihazlar ios işletim sistemine sahip cihazlarda daha fazladır. Bu yüzden biz android uygulama geliştiricileri olarak değişen ekran boyutlarına göre tasarım yapmak zorunda kalırız.
Uygulama içerisinde responsive tasarımlar yapmak için birden fazla yol vardır. Örneğin LinearLayout kullanımı. Sahip olduğu weightSum ve layout_weight özellikleri sayesinde ekranı istediğimiz ölçülerde parçalar ve componentlere dağıtabiliriz. Bu yöntem kompleks tasarımlar için pek uygun karşılanmaz çünkü nested tasarımlarda üst üste gelen componentlerin aynı yüzeyi tekrar tekrar çizdirilmesiyle performans kaybına yol açacaktır.
Google I/O 2016 da tanıtılan ConstraintLayout sayesinde artık daha performanslı ve kompleks tasarımlar yapılabilecektir.
Yazının devamında örnek bir tasarım ile nasıl responsive tasarım yapabileceğimizi anlatacağım. Bu yüzden daha detaylı bilgi için resmi sitesine buradan erişebilirsiniz.
ConstraintLayout üzerinde yeni bir component oluşturduğunuzda aşağıdaki gibi kızacaktır.
Bunun nedeni ConstraintLayout içerisinde tanımlanan bir component yatay ve dikeyde en az birer kez sınırlandırma istemesidir.
- layout_constraintBottom_toTopOf : Imageview ın alt sınırı ile imageview ın altında bulunan edittext in üst sınırını bağlıyoruz.
- layout_constraintStart_toStartOf : Parent yani constraintLayout un başlangıcı ile imageview ın başlangıç sınırlarını bağlıyoruz.
Diğer sınır belirleme özellikleri de benzer işlevleri sağlamaktadır. Tek tek anlatıp vakit kaybı olmaması için sonraki kısma geçiyorum.
Not: Her componentin kendi sınırlarını parent layout olarak da belirleyebiliriz , çevresinde bulunan diğer component sınırları ile de belirleyebiliriz.
Her component için sabit genişlik ve yükselik ayarlamak farklı ekran çözünürlüklerinde taşmaya ya da küçük görünmeye neden olabilir. Bu durumda layout_constraintHeight_percent veya layout_constraintWidth_percent özelliklerini kullanacağız.
Sabit değerler vermek yerine artık yüzdelik değerler vermek de mümkün. Dikkat edilmesi gereken nokta ise yüzdelik değer vereceğimiz yöndeki (witdh /height ) değeri 0dp ya da match constraint olmalıdır.
- layout_constraintWidth_percent : Yatayda yüzdelik oran vermemizi sağlar.
- layout_constraintHeight_percent: Dikeyde yüzdelik oran vermemizi sağlar.
Şimdi ise yan yana 2 tane edittext componenti ekleyeceğiz.
Yukarıdaki kodun çıktısı:
Burada dikkat edilmesi gereken nokta şudur: layout_constraintWidth_percent ile iki edittext de 0.45 lik yatayda yüzde oranı verdik. Toplamda 1 e tamamlamak gerektiğinden 0.1 lik boş alan kalacaktır. Bu boşluğu constraintLayout eşit şekilde name edittext in solundan ve surname edittext in sağından verecektir.
Sırada gün, ay ve yıl için 3 ayrı edittext ekleyeceğiz.
Yukarıdaki kodun çıktısı :
Burada yeni bir özellik daha görüyoruz.
- layout_constraintHorizontal_chainStyle : Yan yana hizalanmış componentler arasındaki boşluğun nasıl dağılacağını belirtiriz. Dikeydeki boşluklar için ise layout_constraintVertical_chainStyle kullanırız. 4 tane parametresi vardır. Bunlar: packed, spread, spread_inside, Weighted.
NOT: Bu özelliği her zaman yan yana sıralı componentlerden en sağda bulunan componente vermelisiniz.
Tasarımın genelinde yatay hizadaki en sağdaki ve en soldaki componentlerin sınırlarını bir üstünden componentlerin sınırları olarak ayarlıyoruz. Görsel olarak anlatmak gerekirse şöyledir :
En soldaki component için durum böyledir. Aynı durum en sağdaki component içinde geçerlidir. Böyle sınırlandırmamızın nedeni ise alt alta oluşturduğumuz her component için sağ ve sol boşluğu sürekli vermemektir. Böylece her satırın sağ ve solundan 0.1 oranında boşluk kalacaktır.
Alt sırada ise 5 tane radio buton oluşturalım.
Yukarıdaki kodun çıktısı :
Burada yapılan tek farklı özellik layout_constraintHorizontal_chainStyle özelliğinin spread parametresini kullandık. Bu sayede 5 component in sağ ve sol kenarlarındaki boşlukları eşit dağıtmış olduk.
Sırada radio butonların altına örnek kart tasarımı ekleyelim.
Not: ConstraintLayout içerisinde cardview kullanırsanız cardview içerisinde tüm componentler ConstraintLayout özelliklerine sahip olamaz çünkü cardview framelayout un alt sınıfıdır. Bu yüzden cardview kullandığınız durumlarda içeride kompleks tasarımlar yapacaksanız tekrardan ConstraintLayout tanımlamalısınız.
Yukarıdaki kodun çıktısı :
Burada yeni bir özellikle tanışıyoruz. txtTitle ve txtDate id li textview lerde ki layout_constraintVertical_bias özelliğidir.
- layout_constraintVertical_bias : İki view ile sınırlandırılan bir componentin dikeyde orantılı olarak konumlandırma işlemi yapar. Sınırlandırma işlemlerini yaptıktan sonra ConstraintLayout aradaki componenti default olarak 0.5 oranında konumlandırmaktadır. Aşağıdaki örnek de daha iyi anlaşılacaktır.
- layout_constraintVertical_bias : Bu özelliği ise yatayda konumlandırma için kullanırız.
Son olarak buton tasarımlarımızı yapalım.
Yukarıdaki kodda yine kullandığımız özellikleri orantılarıyla oynayarak düzenlemelerini yaptık.
Örnek tasarımımızı bitirdik :) şimdi sıra TEST 😃
- Telefonumuzu portrait ya da landscape modunda kullanmak istersek :
- Farklı ekran boyutlarında tasarımı görmek istersek :
Kompleks tasarımlar için ConstraintLayout kullanmamanız için bir neden göremiyorum :) Umarım faydalı olmuştur. Kodların tamamına buradan erişebilirsiniz. Vakit ayırıp okuduğunuz için teşekkür ederim 😊
https://developer.android.com/reference/androidx/constraintlayout/widget/ConstraintLayout
https://developer.android.com/training/constraint-layout/index.html
