UI/UX

Android Studio 2.2′ de ConstraintLayout Yapısı

Arayüze sahip yazılımsal projelerde  (Web Yazılım,Ios ve Android Yazılımlar vb.) ,  projenin  en az backend yazılım bölümü  kadar arayüz yazılım kısmının da düzgün hazırlanması büyük önem arz etmektedir.

Arayüz yazılımın doğru yapılandırılabilmesinin en önemli şartlarından biri, tasarım taslağı ile arayüz yazılımının sonucunda çıkarılacak arayüzün aynı olmasıdır. Bu noktada arayüz yazılımcıları en çok elementlerin boyutlandırılması, birbirleri arasında hizalandırılmaları gibi konularda çok sıkıntı yaşarlar.

Android Studio 2.2  versiyonu ile Android Uygulama Geliştiricilerinin arayüz hakkında  yaşadıkları bu sıkıntıları çözmek için yeni bir layout yapısı olan ConstraintLayout bu makalemde anlatacağım.

ConstraintLayout Nedir?

ConstraintLayout, Android uygulamalarda kullanabileceğimiz yeni bir layout tipidir. API 9 ve üstündeki tüm API’lerde kullanılabilir bir yapıdır. Constraint Layout karmaşık tasarımları birbirine bağımlı layout’lar olmadan kolay bir şekilde tasarlamamıza imkan sağlar. View’lar birbirine göre konumlandırıldığında herhangi bir view’ın konumu değiştirildiğinde diğer view’da konumunu değiştiriyor. Diğer bir yandan ConstraintLayout ile birlikte iç içe bağımlı layout’lara gerek olmadığı için ekstra performans artışı sağlamaktadır.

ConstraintLayout Kullanımı

ConstraintLayout kullanabilmeniz için ilk öncelikle  Adroid Studio 2.2 Preview 3 versiyonu indirmelisiniz.

Kurduğumuz  yeni Android Studio Ide ile oluşturduğum projemin app dizinin altındaki build.gradle dosyasını açıyoruz. Dependencies kod bloklarının arasına aşağıdaki kodları yerleştirerek constraint kütüphanesini  yüklüyoruz.

Daha sonra  proje klasöründe var olan res dizinin içindeki layout klasörüne sağ tıklayıp, New > Layout Resource Folder seçerek yeni bir layout oluşturun.Yeni layout  xml içine  aşağıdaki örnek ConstraintLayout  kodunu koyuyoruz.

ConstraintLayout  ile yeni layout oluşturduğunuzda,  Blueprint mode Blueprint Mode ve  Design Mode Design Mode bölümlerini oluşturmuş olduk.

Screen-Shot-2016-05-24-at-1.13.35-PM

Yeni Layout Builder Nasıl Çalışır?

Constraints

Constraints, arayüz elementlerini hizalamak, boyutlandırma, konumlandırma gibi özelliklerini barındıran kurallara sahiptir. Örneğin,  RelativeLayouts’un  “toLeftOf , toRightOf” özelliklerini barındırması gibi düşünebilirsiniz.

Constraints Tipleri

  • Resize Handle  Resize Handle -Constraint Layout 

Arayüz elementinin üzerindeki  kare simgesi ile köşelerini sürükleyerek yeniden boyutlandırmayı sağlar.

resizehandle

  • Size Constraint Handle Size Constraint Handle

Arayüz elementinin konumunu belirtmek için, her elementin çevresinde yuvarlak araçlar vardır. Bu araçları kullanarak, elementin konumu kolaylıkla değiştirebilirsiniz.
constraint

Diğer bir yandan elementinin margin değerlerini kolaylıkla değiştirme imkanıda sağlar. Aşağıdaki resimde kırmızı oklarla örneklendirdim.

margin

  • Baseline Constraint Handle

2 elementin sınır çizgilerini(Baseline) birbirine bağlayarak, elementlerin kendi aralarında hizalanmasını  basit bir şekilde  sağlamaktadır. Örneğin, Bir textview ile buton elementini hizalamak istediğinizde aşağıdaki resimdeki gibi yapmalısınız.

baseline

  • Bias

Elementi özellilikler bölümündeki bias (scroll bar gibi görünen araç) ile aşağıya yukarı ya da sağ sola çekerek yükseklik(height) ve genişliği(width) değiştirmenizde kolaylık sağlar.

bias

Arayüz Elementini Boyutlandırma

Özellikler alanındaki, resimli ikonları kullanarak  arayüz elementini hızlı bir şekilde  nasıl boyutlandıracağınızı göstereceğim.İlgili resimli iconlar ve anlamları:

  • Any Size

ConstraintLayout - Any Size
– Bu ikona tıklarsanız constraints, match_parent özelliği gösterir. Layout_width ya da Layout_height ‘ı 0dp yapar.

  • Wrap Content 

Wrap Content - ConstraintLayout– Bu ikona tıklarsanız arayüz elementi içindeki tüm içerik olması gereken kadar büyük olacaktır.

  • Fixed Size

Fixed Size - Constraint Layout
– Bu ikona tıklarsanız , istenilen dp değeri ile elementin Layout_width ve Layout_height özelliklerinin boyutlandırılması sağlanır.Bu ikonlarla alakalı örnek;

viewproperties

Autoconnect

Autoconnect, arayüze yeni konulan elementlerin otamatik olarak yerleşmesini sağlar.  Autoconnect özelliği aktifken, layout içine bir element sürükleyip bıraktığınız zaman, arayüz elementinin yanlarından otomatik olarak başlama çizgisi çizildiğini göreceksiniz.

Autoconnect özelliği aktif etmek için, mıknatıs şeklindeki ikonu seçmeniz yeterli olacaktır. Autoconnect ConstraintLayout . Autoconnect ile ilgili örnek aşağıda bulunmaktadır.

miknatis

Manual Constraints

Bu özelliği bir örnekle açıklayacağım. Örneğin, kendi Constraint oluşturacaksınız, elementi istediğiniz yöne çekebilmek için ilgili daireyi tıklayabilirsiniz. Elementinizi, diğer arayüz elementleri ile hizalamak istiyorsanız, daireye tıkladığınızda yeşile dönmesini sağlayın. Sonra elementinizi, diğer arayüz elementlerine doğru çekip hizalayabilirsiniz. Aşağıda resimli örnek bulunmaktadır.

manualconstraints

Inference

Inference, farklı tüm elementler arasında constraints oluşturmanı sağlar. Autoconnect’ a benzer.Fakat arayüz elementi konumlandırırken sadece kendi konumu değil diğer elementlerin konumlarıyla senkronize hizalama yapar. Birden fazla element arasında konumlandırma sağladığı için ciddi bir matematiksel işlem yapmaktadır.

Layout’da Inference kullanabilmek için, ampul şeklindeki iconu seçerek çalışmalısınız. Inference - ConstraintLayout
Untitled

Not:

“ConstraintLayout   yapısıyla yapılmamış eski layout yapılarım hakkında ne yapmalıyım? ConstraintLayout ‘a hepsini taşımalıyım mı?” gibi sorularınızı duyar gibiyim.

Eğer gerekli değilse, her şeyi birden bire değiştirerek yeni trende ayak uydurmak doğru olmaz.Eğer layout elementlerinizi  ararken yavaş çalışıyorsanız ya da  layout elementlerinizi  düzenlemek konusunda savaşıyorsanız, zorlanıyorsanız, Layout yapınızı ConstraintLayout ‘a taşıyarak değişiklik yapmak doğru bir hareket olacaktır.

Android Studio yeni özelliklerinden biride otomatik olarak eski layout’ları  ConstraintLayout  yapısına kolayca çevirebilmesidir. Bunu şu şekilde yapabilirsiniz.

  • Mevcut layout’u açın.Sonra Android Studio’da Editor window bölümündeki Design sekmesini açın.
  • Component Tree window’da layout elementine sağ tıklayıp,  Convert <layout> to ConstraintLayout adımını seçiniz

convertlayout

Kaynaklar:

  1. http://android-developers.blogspot.com.tr/2016/05/android-studio-22-preview-new-ui.html
  2. https://riggaroo.co.za/constraintlayout-101-new-layout-builder-android-studio
  3. https://www.youtube.com/watch?v=ngH5Oj0_elo
Bülten
Bültene abone ol

Bültene abone olarak yeni makalelerimden haberdar olun.

2 Yorumlar

Hüseyin Serkan Özaydin için bir cevap yazın Cevabı iptal et

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir