Görünümler ile kullanıcı arayüzü geliştirme

Jetpack Compose uygulaması

Layout Editor, düzen XML'i yazmak yerine kullanıcı arayüzü öğelerini görsel tasarım düzenleyicisine sürükleyerek hızlıca View tabanlı düzenler oluşturmanızı sağlar. Tasarım düzenleyici, düzeninizin farklı Android cihazlarda ve sürümlerdeki önizlemesini gösterebilir. Ayrıca, düzeni farklı ekran boyutlarında düzgün çalıştığından emin olmak için dinamik olarak yeniden boyutlandırabilirsiniz.

Layout Editor, özellikle ConstraintLayout ile düzen oluştururken çok kullanışlıdır.

Bu sayfada Layout Editor'a genel bir bakış sunulmaktadır. Düzenlerle ilgili temel bilgiler hakkında daha fazla bilgi edinmek için Düzenler başlıklı makaleyi inceleyin.

Layout Editor'a giriş

XML düzen dosyası açtığınızda Layout Editor görünür.

Şekil 1. Layout Editor

1. Palet: Düzeninize sürükleyebileceğiniz çeşitli görünümler ve görünüm gruplarını içerir.
2. Bileşen Ağacı: Düzeninizdeki bileşenlerin hiyerarşisini gösterir.
3. Araç çubuğu: Düzeninizin görünümünü düzenleyicide yapılandıran ve düzen özelliklerini değiştiren düğmeler içerir.
4. Tasarım düzenleyici: Düzeninizi tasarım görünümünde, şema görünümünde veya her ikisinde de düzenlemenize olanak tanır.
5. Özellikler: Seçilen görünümün özellikleriyle ilgili kontrolleri içerir.
6. Görünüm modu: Düzeninizi Kod , Bölünmüş veya Tasarım modlarında görüntülemenizi sağlar. Bölünmüş modda Kod ve Tasarım pencereleri aynı anda gösterilir.
7. Yakınlaştırma ve kaydırma kontrolleri: Önizlemenin boyutunu ve düzenleyicideki konumunu kontrol edin.

Bir XML düzen dosyası açtığınızda, Şekil 1'de gösterildiği gibi tasarım düzenleyici varsayılan olarak açılır. Düzen XML'sini metin düzenleyicide düzenlemek için pencerenin sağ üst köşesindeki Kod düğmesini tıklayın. Kod görünümünde düzeninizi düzenlerken Palet, Bileşen Ağacı ve Özellikler panellerinin kullanılamadığını unutmayın.

İpucu: Tasarım ve metin düzenleyiciler arasında geçiş yapmak için Alt (macOS'te Control) artı Shift ve sağ veya sol ok tuşuna basın.

Önizlemenin görünümünü değiştirme

Tasarım düzenleyicinin üst satırındaki düğmeler, düzenleyicideki düzeninizin görünümünü yapılandırmanıza olanak tanır.

Şekil 2. Layout Editor araç çubuğundaki düzen görünümünü yapılandıran düğmeler.

1. Tasarım ve Plan: Düzeninizi düzenleyicide nasıl görüntülemek istediğinizi seçin. Bu görünüm türleri arasında geçiş yapmak için B tuşuna da basabilirsiniz.
   • Düzeninizin oluşturulmuş önizlemesini görmek için Tasarım'ı seçin.
   • Her görünümün yalnızca ana hatlarını görmek için Plan'ı seçin.
   • Her iki görünümü yan yana görmek için Tasarım + Plan'ı seçin.
2. Ekran yönü ve düzen varyantları: Yatay veya dikey ekran yönü arasında seçim yapın ya da uygulamanızın alternatif düzenler sunduğu diğer ekran modlarını (ör. gece modu) seçin. Bu menüde, bu sayfadaki bir bölümde açıklandığı gibi yeni bir düzen varyantı oluşturmaya yönelik komutlar da bulunur. Yönü değiştirmek için klavyenizdeki O harfine de basabilirsiniz.

3. Sistem Arayüzü Modu: Uygulamanızda dinamik rengi etkinleştirdiyseniz duvar kağıtları arasında geçiş yapın ve düzenlerinizin farklı kullanıcıların seçtiği duvar kağıtlarına nasıl tepki verdiğini görün. Önce temayı bir Materyal dinamik renk temasıyla değiştirmeniz, ardından duvar kağıdını değiştirmeniz gerektiğini unutmayın.

4. Cihaz türü ve boyutu: Cihaz türünü (telefon/tablet, Android TV veya Wear OS) ve ekran yapılandırmasını (boyut ve yoğunluk) seçin. Çeşitli önceden yapılandırılmış cihaz türleri ve kendi AVD tanımlarınız arasından seçim yapabilirsiniz. Ayrıca, Şekil 3'te gösterildiği gibi listeden Add Device Definition'ı (Cihaz Tanımı Ekle) seçerek yeni bir AVD oluşturabilirsiniz.

   • Cihazı yeniden boyutlandırmak için düzenin sağ alt köşesini sürükleyin.
   • Cihaz listesinde gezinmek için D simgesine basın.

   Bu menüdeki Referans Cihazlar'a göre düzeninizi test etmek, uygulamanızın gerçek cihazlardaki düzen durumlarına iyi şekilde ölçeklenmesine yardımcı olur.

   

   Şekil 3. Referans Cihazları gösteren cihaz listesi.

5. API sürümü: Düzeninizin önizlemesini yapmak için Android sürümünü seçin. Kullanılabilir Android sürümlerinin listesi, SDK Yöneticisi'ni kullanarak yüklediğiniz SDK platformu sürümlerine bağlıdır.

6. Uygulama teması: Önizlemeye hangi kullanıcı arayüzü temasının uygulanacağını seçin. Bu özellik yalnızca desteklenen düzen stillerinde çalışır. Bu nedenle, listedeki birçok tema hataya neden olur.

7. Dil: Kullanıcı arayüzü dizelerinizde gösterilecek dili seçin. Bu listede yalnızca dize kaynaklarınızda bulunan diller gösterilir. Çevirilerinizi düzenlemek isterseniz menüden Çevirileri Düzenle'yi tıklayın. Çevirilerle çalışma hakkında daha fazla bilgi için Çeviri Düzenleyici ile kullanıcı arayüzünü yerelleştirme başlıklı makaleyi inceleyin.

Not: Layout Variants'tan yeni bir düzen dosyası eklemediğiniz sürece bu yapılandırmalar uygulamanızın kodunu veya manifestini etkilemez. Bu ayarlar yalnızca düzen önizlemesini etkiler.

Yeni düzen oluşturma

Uygulamanıza yeni bir düzen eklerken öncelikle projenizin varsayılan layout/ dizininde varsayılan bir düzen dosyası oluşturun. Böylece bu düzen, tüm cihaz yapılandırmaları için geçerli olur. Varsayılan bir düzene sahip olduğunuzda, bu sayfadaki bir bölümde açıklandığı gibi belirli cihaz yapılandırmaları (ör. büyük ekranlar) için düzen varyasyonları oluşturabilirsiniz.

Aşağıdaki yöntemlerden birini kullanarak yeni bir düzen oluşturabilirsiniz:

Android Studio'nun ana menüsünü kullanma

1. Proje penceresinde, düzen eklemek istediğiniz modülü tıklayın.
2. Ana menüde File > New > XML > Layout XML File'ı (Dosya > Yeni > XML > Düzen XML Dosyası) seçin.
3. Görüntülenen iletişim kutusunda dosya adını, kök düzen etiketini ve düzenin ait olduğu kaynak grubunu girin.
4. Düzeni oluşturmak için Bitir'i tıklayın.

Proje görünümünü kullanma

1. Proje penceresinde Proje görünümünü seçin.
2. Düzeni eklemek istediğiniz düzen dizinini sağ tıklayın.
3. Görüntülenen bağlam menüsünde New > Layout Resource File'ı (Yeni > Düzen Kaynak Dosyası) tıklayın.

Android görünümünü kullanma

1. Proje penceresinde Android görünümünü seçin.
2. layout klasörünü sağ tıklayın.
3. Görüntülenen içerik menüsünde Yeni > Düzen Kaynak Dosyası'nı seçin.

Kaynak yöneticisini kullanma

1. Kaynak Yöneticisi'nde Düzen sekmesini seçin.
2. + düğmesini ve ardından Layout Resource File'ı (Düzen Kaynak Dosyası) tıklayın.

Farklı ekranlar için optimizasyon yapmak üzere düzen varyantlarını kullanma

Düzen varyantı, belirli bir ekran boyutu veya yönü için optimize edilmiş mevcut bir düzenin alternatif sürümüdür.

Önerilen bir düzen varyantını kullanma

Android Studio, projenizde kullanabileceğiniz yaygın düzen varyantları içerir. Önerilen bir düzen varyantını kullanmak için aşağıdakileri yapın:

1. Varsayılan düzen dosyanızı açın.
2. Pencerenin sağ üst köşesindeki Tasarım simgesini tıklayın.
3. Düzen dosyasının adı, Düzen dosyaları için niteleyicileri değiştirme ve oluşturma işlemi açılır listesinde görünür. Açılır menüyü seçin.
4. Açılır listede Yatay Niteleyici Oluştur veya Tablet Niteleyici Oluştur gibi bir varyant seçin.

   

   Şekil 4. Düzen niteleyicilerinin açılır listesi.

Yeni bir düzen dizini oluşturulur.

Kendi düzen varyantınızı oluşturma

Kendi düzen varyantınızı oluşturmak istiyorsanız aşağıdakileri yapın:

1. Varsayılan düzen dosyanızı açın.
2. Pencerenin sağ üst köşesindeki Tasarım simgesini tıklayın.
3. Düzen dosyasının adı, Düzen dosyaları için niteleyicileri değiştirme ve oluşturma işlemi açılır listesinde görünür. Açılır menüyü seçin.

4. Açılır listede Kaynak Nitelendiricisi Ekle'yi seçin. (Yukarıdaki Şekil 4'e bakın.)

   Kaynak dizini seçin iletişim kutusu gösterilir.

5. Kaynak Dizini Seç iletişim kutusunda varyant için kaynak niteleyicilerini tanımlayın:

   1. Kullanılabilir niteleyiciler listesinden bir niteleyici seçin.
   2. Ekle düğmesini tıklayın.
   3. Gerekli değerleri girin.
   4. Diğer niteleyicileri eklemek için bu adımları tekrarlayın.

6. Tüm niteleyicilerinizi ekledikten sonra Tamam'ı tıklayın.

Aynı düzenin birden fazla varyasyonu olduğunda, Düzen dosyaları için niteleyicileri değiştirme ve oluşturma işlemi açılır listesinden bir varyant seçerek bunlar arasında geçiş yapabilirsiniz.

Farklı ekranlar için düzen oluşturma hakkında daha fazla bilgi edinmek istiyorsanız Farklı ekran boyutlarını destekleme başlıklı makaleyi inceleyin.

Görünümü veya düzeni dönüştürme

Bir görünümü başka bir görünüm türüne, bir düzeni de başka bir düzen türüne dönüştürebilirsiniz:

1. Düzenleyici penceresinin sağ üst köşesindeki Tasarım düğmesini tıklayın.
2. Bileşen Ağacı'nda görünümü veya düzeni sağ tıklayın, ardından Görünümü dönüştür'ü tıklayın.
3. Açılan iletişim kutusunda yeni görünüm veya düzen türünü seçip Uygula'yı tıklayın.

Düzeni ConstraintLayout'a dönüştürme

Düzen performansını artırmak için eski düzenleri ConstraintLayout biçimine dönüştürün. ConstraintLayout, çoğu düzeni iç içe yerleştirilmiş görünüm grupları olmadan oluşturmanıza olanak tanıyan kısıtlamaya dayalı bir düzen sistemi kullanır.

Mevcut bir düzeni ConstraintLayout dönüştürmek için aşağıdakileri yapın:

1. Android Studio'da mevcut bir düzeni açın.
2. Düzenleyici penceresinin sağ üst köşesindeki Tasarım simgesini tıklayın.
3. Component Tree'de (Bileşen Ağacı) düzene sağ tıklayın ve Convert your-layout-type to ConstraintLayout'u (your-layout-type ConstraintLayout'a Dönüştür) tıklayın.

ConstraintLayout hakkında daha fazla bilgi edinmek için ConstraintLayout ile Duyarlı Kullanıcı Arayüzü Oluşturma başlıklı makaleyi inceleyin.

Palet'teki öğeleri bulma

Palet'te bir görünümü veya görünüm grubunu ada göre aramak için paletin üst kısmındaki Ara düğmesini tıklayın. Alternatif olarak, Palet penceresi odaklandığında öğenin adını yazabilirsiniz.

Palet'teki Genel kategorisinde sık kullanılan öğeleri bulabilirsiniz. Bu kategoriye öğe eklemek için Palet'te bir görünümü veya görünüm grubunu sağ tıklayın, ardından içerik menüsünde Favori'yi tıklayın.

Paletten dokümanları açma

Bir görünüm veya görünüm grubu için Android Developers referans dokümanlarını açmak üzere Palet'te kullanıcı arayüzü öğesini seçip Shift+F1 tuşlarına basın.

Bir görünüm veya görünüm grubu için Material Guidelines dokümanlarını görüntülemek üzere Palet'teki kullanıcı arayüzü öğesini sağ tıklayın ve bağlam menüsünden Material Guidelines'ı seçin. Öğe için belirli bir giriş yoksa komut, Material Guidelines dokümanlarının ana sayfasını açar.

Düzene görünüm ekleme

Düzeninizi oluşturmaya başlamak için Palet'teki görünümleri ve görünüm gruplarını tasarım düzenleyiciye sürükleyin. Düzenin içine bir görünüm yerleştirdiğinizde düzenleyici, görünümün düzenin geri kalanıyla ilişkisi hakkında bilgi gösterir.

ConstraintLayout kullanıyorsanız Infer Constraints (Kısıtlamaları Çıkar) ve Autoconnect (Otomatik Bağlan) özelliklerini kullanarak kısıtlamaları otomatik olarak oluşturabilirsiniz.

Düzenleme Görünümü özelliklerini düzenleme

Şekil 5. Özellikler paneli.

Görünüm özelliklerini, Layout Editor'daki Özellikler panelinden düzenleyebilirsiniz. Bu pencere yalnızca tasarım düzenleyici açıkken kullanılabilir. Bu nedenle, kullanmak için düzeninizi Tasarım veya Bölünmüş modda görüntüleyin.

Bileşen Ağacı'nda veya tasarım düzenleyicide bir görünümü tıkladığınızda Özellikler panelinde, Şekil 5'te gösterildiği gibi aşağıdakiler gösterilir:

1. Bildirilmiş Özellikler: Düzen dosyasında belirtilen özellikleri listeler. Özellik eklemek için bölümün üst kısmındaki Ekle düğmesini tıklayın.
2. Düzen: Görünümün genişliği ve yüksekliğiyle ilgili kontrolleri içerir. Görünüm bir ConstraintLayout içindeyse bu bölümde kısıtlama yanlılığı da gösterilir ve görünümün kullandığı kısıtlamalar listelenir. ConstraintLayout ile görünümlerin boyutunu kontrol etme hakkında daha fazla bilgi için Görünüm boyutunu ayarlama başlıklı makaleyi inceleyin.
3. Sık Kullanılan Özellikler: Seçilen görünümün sık kullanılan özelliklerini listeler. Kullanılabilir tüm özellikleri görmek için pencerenin alt kısmındaki Tüm Özellikler bölümünü genişletin.
4. Arama: Belirli bir görünüm özelliğini aramanıza olanak tanır.

5. Her özellik değerinin sağındaki simgeler, özellik değerlerinin kaynak referansları olup olmadığını gösterir. Bu göstergeler, değer bir kaynak referansı olduğunda dolu , değer sabit kodlanmış olduğunda ise boş olur. Böylece, sabit kodlanmış değerleri bir bakışta tanıyabilirsiniz.

   İlgili özelliğin kaynak referansını seçebileceğiniz Kaynaklar iletişim kutusunu açmak için her iki durumdaki göstergeleri tıklayın.

6. Bir özellik değerinin etrafındaki kırmızı vurgu, değerle ilgili bir hata olduğunu gösterir. Örneğin, bir hata, düzeni tanımlayan bir özellik için geçersiz bir giriş olduğunu gösterebilir.

   Turuncu vurgu, değerle ilgili bir uyarı olduğunu gösterir. Örneğin, kaynak referansının beklendiği bir yerde sabit kodlanmış bir değer kullandığınızda uyarı gösterilebilir.

Görünümünüze örnek veriler ekleme

Birçok Android düzeni çalışma zamanı verilerine dayandığından, uygulamanızı tasarlarken düzenin görünümünü ve tarzını görselleştirmek zor olabilir. Düzen Düzenleyici'den TextView, ImageView veya RecyclerView öğesine örnek önizleme verileri ekleyebilirsiniz.

Not: Bir View'ye örnek veri eklediğinizde Android Studio, projenizde kendi verilerinizi kullanıyormuş gibi değişiklikler yapar. Ardından bu değişiklikleri gerektiği gibi düzenleyebilirsiniz.

Tasarım Zamanı Görüntüleme Özellikleri penceresini görüntülemek için bu görünüm türlerinden birini sağ tıklayın ve Şekil 6'da gösterildiği gibi Örnek Verileri Ayarla'yı seçin.

Şekil 6. Tasarım zamanı Görünüm Özellikleri penceresi.

TextView için farklı örnek metin kategorileri arasından seçim yapabilirsiniz. Örnek metin kullanırken Android Studio, TextView öğesinin text özelliğini seçtiğiniz örnek verilerle doldurur. Örnek metni yalnızca text özelliği boşsa Tasarım Zamanı Görünüm Özellikleri penceresinden seçebileceğinizi unutmayın.

Şekil 7. Örnek veriler içeren bir TextView.

ImageView için farklı örnek resimler arasından seçim yapabilirsiniz. Bir örnek resim seçtiğinizde Android Studio, ImageView (veya AndroidX kullanılıyorsa tools:srcCompat) öğesinin tools:src özelliğini doldurur.

Şekil 8. Örnek veriler içeren bir ImageView.

RecyclerView için örnek resimler ve metinler içeren bir dizi şablon arasından seçim yapabilirsiniz. Bu şablonları kullanırken Android Studio, res/layout dizininize recycler_view_item.xml bir dosya ekler. Bu dosya, örnek verilerin düzenini içerir. Android Studio, örnek verileri düzgün şekilde göstermek için RecyclerView öğesine meta veriler de ekler.

Şekil 9. Örnek veriler içeren bir RecyclerView.

Düzen uyarılarını ve hatalarını göster

Layout Editor, hatalar için kırmızı daire ünlem simgesi , uyarılar için ise turuncu üçgen ünlem simgesi kullanarak Bileşen Ağacı'ndaki ilgili görünümün yanında düzenle ilgili sorunlar hakkında sizi bilgilendirir. Daha fazla ayrıntı görmek için simgeyi tıklayın.

Bilinen tüm sorunları düzenleyicinin altındaki bir pencerede görmek için araç çubuğunda Uyarıları ve Hataları Göster'i ( veya ) tıklayın.

Yazı tiplerini indirip metne uygulama

Android 8.0 (API düzeyi 26) veya Jetpack Core kitaplığını kullanırken aşağıdaki adımları uygulayarak yüzlerce yazı tipi arasından seçim yapabilirsiniz:

1. Layout Editor'da, düzeninizi tasarım düzenleyicide görüntülemek için Tasarım simgesini tıklayın.
2. Bir metin görünümü seçin.
3. Özellikler panelinde textAppearance'ı ve ardından fontFamily kutusunu genişletin.
4. Listenin en altına gidin ve Kaynaklar iletişim kutusunu açmak için Diğer Yazı Tipleri'ni tıklayın.
5. Kaynaklar iletişim kutusunda bir yazı tipi seçmek için listeye göz atın veya üstteki arama çubuğuna yazın. İndirilebilir bölümünde bir yazı tipi seçerseniz yazı tipini çalışma zamanında indirilebilir yazı tipi olarak yüklemek için İndirilebilir yazı tipi oluştur'u veya TTF yazı tipi dosyasını APK'nıza paketlemek için Projeye yazı tipi ekle'yi tıklayabilirsiniz. Android altında listelenen yazı tipleri Android sistemi tarafından sağlanır. Bu nedenle, indirilmesi veya APK'nıza paketlenmesi gerekmez.
6. İşlemi tamamlamak için Tamam'ı tıklayın.

Düzen Doğrulama

Düzen Doğrulama, farklı cihazlar ve ekran yapılandırmaları için düzenleri aynı anda önizlemeye yönelik görsel bir araçtır. Bu araç, düzenlerinizdeki sorunları sürecin daha erken aşamalarında yakalamanıza yardımcı olur. Bu özelliğe erişmek için IDE penceresinin sağ üst köşesindeki Düzen Doğrulama sekmesini tıklayın:

Şekil 10. Düzen Doğrulama sekmesi.

Mevcut yapılandırma kümeleri arasında geçiş yapmak için Düzen Doğrulama penceresinin üst kısmındaki Referans Cihazlar açılır listesinden aşağıdakilerden birini seçin:

• Referans Cihazlar
• Özel
• Renk Görme Engelli
• Yazı Tipi Boyutları

Şekil 11. Referans Cihazlar açılır listesi.

Referans Cihazlar

Referans cihazlar, test etmenizi önerdiğimiz bir dizi cihazdır. Telefon, katlanabilir cihaz, tablet ve masaüstü arayüzleri bu kapsamdadır. Düzeninizin bu referans cihaz grubunda nasıl göründüğünü önizlemelisiniz:

Şekil 12. Düzen Doğrulama aracında referans cihaz önizlemelerini kullanın.

Özel

Önizlemek için bir ekran yapılandırmasını özelleştirmek üzere dil, cihaz veya ekran yönü gibi çeşitli ayarlar arasından seçim yapın:

Şekil 16. Düzen Doğrulama aracında özel bir görüntülü reklam yapılandırın.

Renk Görme Engelli

Uygulamanızı renk körü olan kullanıcılar için daha erişilebilir hale getirmek amacıyla düzeninizi yaygın renk körlüğü türlerinin simülasyonlarıyla doğrulayın:

Şekil 13. Düzen doğrulama aracında renk körlüğü simülasyonu önizlemeleri.

Yazı Tipi Boyutları

Düzenlerinizi çeşitli yazı tipi boyutlarında doğrulayın ve düzenlerinizi daha büyük yazı tipleriyle test ederek uygulamanızın görme engelli kullanıcılar için erişilebilirliğini iyileştirin:

Şekil 14. Düzen Doğrulama aracında değişken yazı tipi boyutu önizlemeleri.