ComposeUI/UX

Compose Tasarım Araç ve Özellikleri

Yazılım geliştirme süreçlerini kolaylaştırmak ve hızlandırmak için birçok araç tavsiye edilmektedir.

Bu makale Android Stduio’da Compose ile tasarım geliştirme aşamasında kolaylık ve hızlılık sağlayan araç ve özellikleri anlatacağım.

Live Templates

Live templates, klavye tuş vuruşlarından tasarruf etmenize yardımcı olmak için bazı kısaltma kalıplarını kullanarak kolayca kod parçalarını eklemenizi sağlar. Örneğin, “comp” kalıbını yazdığınızda @Composable fonksiyonunu oluşturur.

Compose’da Row eklemek isterseniz, “WR” kısaltmasını yazıp, enter tuşuna basmanız yeterlidir. Örnek;

Tüm kısaltma şablonlarını öğrenmek için File -> Settings seçip, arama alanına Live templates yazarak Android compose tıklamanız yeterlidir.

Gutter icons

Gutter icons, satır numaralarının yanında görünen yardımcı ikonlardır. Compose ile tasarım yaparken kullanmak istediğimiz rengi, resmi vb. özellikleri seçmemizde kolaylık sağlar.

Örneğin, tasarımda bir Image kullandınız ve bu resmi değiştirip başka bir resim kullanmak istiyorsunuz. Bu durumda yapmanız gereken satır numaralarının yanında görünen resim ikonuna tıklayarak istediğiniz resmi seçebilirsiniz.

Dilerseniz Compose Color elementi ile tanımladığınız renk kodunu, solda görünen renk alanını seçerek hızlıca renk paletinden değiştirebilirsiniz.

Composable Preview

Composable Preview, uygulamayı cihazda çalıştırmak zorunda kalmadan, geliştirme anında yapılan tasarımı görüntülememizi sağlar. Live template’de bulununan “prev” kısaltmasını kullanarak hızlıca Composable Preview oluşturabilirsiniz.

Editorün üst kısmında Split tabına tıklayarak kodu ve tasarımı aynı anda görüntüleyiniz. ‘Build & Refresh’ tıkladığınız koddaki değişiklikleri anlık tasarımda görebilirsiniz.

Örnek resim için tıkla

@Preview yapısını yazdığınızda, satır numaralarının yanında görünen gutter icon (⚙️) oluşur. Bu ikona tıklayarak, preview olarak anlık arka plan rengini değiştirerek görüntüleyebilirsiniz. Örnek resim;

Farklı özellikleri ekleyip preview olarak anlık göstermek isterseniz yeni @Preview ekleyerek yapılabilir. Örneğin “Spark” font boyutunu değiştirelim.

Emulatörde Preview Kullanımı

Preview yapısında bulunan kodları cihazda ya da emülatörde önizlemek istediğimizde soldaki  ikonuna tıklamınız yeterli olacaktır. Böylelikle sadece ilgili Preview fonksiyonunu çalıştırabilirsiniz.

Layout Inspector

Bazen hazırladığınız composable yapılarında hatalar oluşabilir ve bu hataların tespiti için Android Studio’da Layout Inspector kullanılır. Layout Inspector, UI hiyerarşisindeki tüm düğümleri keşfetmenize olanak tanır. Bir öğenin vurgulanması, belirli bir öğe için ayarlanan tüm nitelikleri de gösterir. Örneğin, tasarımda kullandığınız RadioButton vurgulayarak onClick özelliğinin hangi kod satırında çalıştığını görebilirsiniz.

 

Kaynaklar

1- https://developer.android.com/jetpack/compose/tooling#live-templates

2- https://medium.com/androiddevelopers/compose-tooling-42621bd8719b

Bülten
Bültene abone ol

Bültene abone olarak yeni makalelerimden haberdar olun.

Bir cevap yazın

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