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

Düzen Düzenleyici, kullanıcı arayüzü öğelerini düzen XML'i yazmak yerine bir görsel tasarım düzenleyiciye sürükleyerek hızlıca View tabanlı düzenler oluşturmanızı sağlar. Tasarım düzenleyici, düzeninizi farklı Android cihazlarda ve sürümlerinde önizleyebilir ve farklı ekran boyutlarında düzgün çalışması için düzeni dinamik olarak yeniden boyutlandırabilirsiniz.

Düzen Düzenleyici, özellikle ConstraintLayout ile bir düzen oluştururken güçlüdür.

Bu sayfa, Düzen Düzenleyici'ye genel bir bakış sunar. Düzenlerle ilgili temel bilgiler hakkında daha fazla bilgi edinmek için Düzenler konusuna bakın.

Düzen Düzenleyici'ye Giriş

Bir XML düzen dosyasını açtığınızda Düzen Düzenleyici görüntülenir.

1. Palet: Düzeninize sürükleyebileceğiniz çeşitli görünümleri 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üzenleyicideki düzen görünümünüzü 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, Taslak görünümünde veya her ikisinde düzenlemenizi sağlar.
5. Özellikler: Seçili görünümün özellikleriyle ilgili denetimler içerir.
6. Görüntüleme modu: Düzeninizi Kod , Bölünme veya Tasarım modlarından birinde 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: Düzenleyici içindeki önizleme boyutunu ve konumunu kontrol edin.

Bir XML düzen dosyasını açtığınızda, Şekil 1'de gösterildiği gibi varsayılan olarak tasarım düzenleyici açılır. Metin düzenleyicide düzen XML'sini 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) ve Shift ile sağ veya sol ok tuşuna basın.

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

Tasarım düzenleyicisinin üst satırındaki düğmeler, düzeninizin düzenleyicideki görünümünü yapılandırmanızı sağlar.

1. Tasarım ve Şema: Düzenleyicide düzeninizi 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 Tasarla'yı seçin.
   • Her bir görünümün yalnızca ana hatlarını görmek için Şema'yı 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üzeni varyantları: Yatay veya dikey ekran yönü arasından seçim yapın ya da uygulamanızın alternatif düzenler sağladığı gece modu gibi diğer ekran modlarını seçin. Bu menü, bu sayfanın bir bölümünde açıklandığı gibi, yeni bir düzen varyantı oluşturma komutları da içerir. Yönü değiştirmek için klavyenizdeki O harfine de basabilirsiniz.

3. Sistem Kullanıcı Arayüzü Modu: Uygulamanızda dinamik rengi etkinleştirdiyseniz duvar kağıtlarını değiştirin ve düzenlerinizin, kullanıcıların seçtiği duvar kağıdına nasıl tepki verdiğini görün. Önce temayı Materyal dinamik renk temasıyla, 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. Önceden yapılandırılmış birkaç cihaz türü ve kendi ortalama görüntüleme süreniz arasından seçim yapabilir ve Şekil 3'te gösterildiği gibi listeden Cihaz Tanımı Ekle'yi seçerek yeni bir ortalama görüntüleme süresi oluşturabilirsiniz.

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

   Düzeninizi bu menüdeki Referans Cihazlar ile test etmek, uygulamanızın gerçek cihazlardaki düzen durumlarına göre iyi ölçeklenmesine yardımcı olur.

   

5. API sürümü: Düzeninizi önizlemek için Android'in sürümünü seçin. Kullanılabilir Android sürümlerinin listesi, SDK Yöneticisi'ni kullanarak hangi SDK platformu sürümlerini yüklediğinize bağlıdır.

6. Uygulama teması: Önizlemeye uygulanacak kullanıcı arayüzü temasını seçin. Bu işlem yalnızca desteklenen düzen stilleri için çalışır. Bu nedenle, bu listede çok sayıda tema bulunması hataya neden olur.

7. Dil: Kullanıcı arayüzü dizeleriniz için gösterilecek dili seçin. Bu liste, yalnızca dize kaynaklarınızda kullanılabilen dilleri görüntüler. Ç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 bölümüne bakın.

Yeni düzen oluşturma

Uygulamanıza yeni bir düzen eklerken, önce projenizin varsayılan layout/ dizininde varsayılan bir düzen dosyası oluşturun. Böylece bu dosya tüm cihaz yapılandırmalarına uygulanır. Varsayılan düzeniniz olduğunda, bu sayfadaki bir bölümde açıklandığı gibi, büyük ekranlar gibi belirli cihaz yapılandırmaları 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 Dosya > Yeni > XML > Layout XML Dosyası'nı seçin.
3. Açılan iletişim kutusunda dosya adını, kök düzen etiketini ve düzenin ait olduğu kaynak grubunu belirtin.
4. Düzeni oluşturmak için Son'u tıklayın.

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

1. Proje penceresinden 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 içerik menüsünde Yeni > Düzen Kaynak Dosyası'nı tıklayın.

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

1. Proje penceresinden 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.

Resource Manager'ı kullanma

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

Farklı ekranlara göre optimizasyon yapmak için düzen varyantlarını kullanma

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

Önerilen bir düzen varyantını kullanın

Android Studio, projenizde kullanabileceğiniz yaygın düzen varyantlarını içerir. Önerilen 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 niteleyiciler oluşturma ve değiştirme işlemi açılır menüsünde görünür. Açılır menüyü seçin.
4. Açılır listeden Yatay Niteleyici Oluştur veya Tablet Niteleyicisi Oluştur gibi bir varyant seçin.

   

Yeni bir düzen dizini oluşturulur.

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

Kendi düzen varyantınızı oluşturmak isterseniz 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 niteleyiciler oluşturma ve değiştirme işlemi açılır menüsünde görünür. Açılır menüyü seçin.

4. Açılır listeden Kaynak Niteleyicisi Ekle'yi seçin. (Yukarıdaki şekil 4'e bakın.)

   Kaynak Dizini Seçin iletişim kutusu görünür.

5. Kaynak Dizini Seçin 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. Başka niteleyiciler eklemek için bu adımları tekrarlayın.

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

Aynı düzenin birden fazla varyasyonunuz olduğunda, Geçiş yapma ve düzen dosyaları için niteleyiciler oluşturma işlemi açılır menüsünden bir varyant seçerek bunlar arasında geçiş yapabilirsiniz.

Farklı ekranlar için düzen oluşturma hakkında daha fazla bilgi edinmek için Farklı ekran boyutlarını destekleme bölümüne bakın.

Bir görünümü veya düzeni dönüştürme

Bir görünümü başka tür bir görünüme ve bir düzeni başka tür bir düzene dönüştürebilirsiniz:

1. Düzenleyici penceresinin sağ üst köşesindeki Tasarla 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. Görüntülenen iletişim kutusunda, yeni görünüm türünü veya düzeni seçin ve ardından, Uygula'yı tıklayın.

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

Daha iyi düzen performansı için eski düzenleri ConstraintLayout biçimine dönüştürün. ConstraintLayout, çoğu düzeni iç içe geçmiş 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 biçimine 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. Bileşen Ağacı'nda düzeni sağ tıklayın ve ardından your-layout-type öğesini 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 bölümüne bakın.

Paletteki öğ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 penceresinde odak belirlendiğinde öğenin adını yazabilirsiniz.

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

Paletteki belgeleri açın

Bir görünüm veya görünüm grubuna ilişkin Android Developers referans belgelerini açmak için Palet'de kullanıcı arayüzü öğesini seçin ve Shift+F1 tuşlarına basın.

Bir görünüme veya görünüm grubuna ilişkin Malzeme Yönergeleri dokümanlarını görüntülemek için Palet'teki kullanıcı arayüzü öğesini sağ tıklayın ve içerik menüsünden Malzeme Yönergeleri'ni seçin. Öğe için belirli bir giriş yoksa komut, Malzeme Yönergeleri dokümanlarının ana sayfasını açar.

Düzeninize görünüm ekleme

Düzeninizi oluşturmaya başlamak için Palet'ten görünümleri ve görünüm gruplarını tasarım düzenleyiciye sürükleyin. Düzene bir görünüm yerleştirdiğinizde, düzenleyici, görünümün diğer düzenle ilişkisi hakkında bilgileri görüntüler.

ConstraintLayout kullanıyorsanız Kısıtlamaları Anlama ve Otomatik Bağlantı özelliklerini kullanarak otomatik olarak kısıtlamalar oluşturabilirsiniz.

Görünüm özelliklerini düzenle

Görünüm özelliklerini, Düzen Düzenleyici'deki Özellikler panelinden düzenleyebilirsiniz. Bu pencere yalnızca tasarım düzenleyici açıkken kullanılabilir. Bu nedenle, düzeninizi kullanmak için Tasarım veya Bölünme modunda görüntüleyin.

Bir görünüm seçtiğinizde, Bileşen Ağacı'ndaki veya tasarım düzenleyicideki görünümü tıklayarak Özellikler paneli Şekil 5'te belirtildiği gibi aşağıdakileri gösterir:

1. Bildirilen Ö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 denetimler 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 bölümüne bakın.
3. Genel Özellikler: Seçilen görünüm için ortak özellikleri 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ızı sağlar.

5. Her bir ö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 sabit ve değer sabit bir şekilde kodlanmış değerleri bir bakışta tanımanıza yardımcı olmak için kodlandığında boş görünür.

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

6. Bir özellik değerinin çevresindeki kırmızı vurgu, değerle ilgili bir hata olduğunu gösterir. Örneğin bir hata, düzen tanımlayan bir özellik için geçersiz bir giriş olduğuna işaret edebilir.

   Turuncu vurgu, değer için bir uyarı olduğunu gösterir. Örneğin, bir kaynak başvurusunun beklendiği, sabit kodlu bir değer kullandığınızda bir uyarı görüntülenebilir.

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

Birçok Android düzeni çalışma zamanı verilerine dayalı olduğundan, uygulamanızı tasarlarken bir düzenin görünümünü görselleştirmek zor olabilir. Örnek önizleme verilerini Düzen Düzenleyici içinden TextView, ImageView veya RecyclerView öğesine ekleyebilirsiniz.

Tasarım Zamanı Görünümü Ö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.

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 Süresi Görünümü Özellikleri penceresinden seçebilirsiniz.

ImageView için farklı örnek resimler arasından seçim yapabilirsiniz. Örnek bir resim seçtiğinizde, Android Studio ImageView (veya AndroidX kullanıyorsanız tools:srcCompat) özelliğinin tools:src özelliğini doldurur.

RecyclerView için örnek resimler ve metinler içeren bir şablon kümesinden seçim yapabilirsiniz. Android Studio bu şablonları kullanırken res/layout dizininize (recycler_view_item.xml) örnek verilerin düzenini içeren bir dosya ekler. Android Studio, örnek verileri düzgün bir şekilde görüntülemek için RecyclerView öğesine meta veri de ekler.

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

Düzen Düzenleyici, hatalar için kırmızı daire ünlem simgesi , uyarılar için ise turuncu bir üçgen ünlem simgesi kullanarak Bileşen Ağacı'nda ilgili görünümün yanındaki düzen sorunlarını size bildirir. 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ğundaki Uyarıları ve Hataları Göster'i ( veya ) tıklayın.

Yazı tiplerini indirme ve metne uygulama

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

1. Düzeninizi tasarım düzenleyicide görüntülemek için Düzen Düzenleyici'de Tasarım simgesini tıklayın.
2. Bir metin görünümü seçin.
3. Öznitelikler panelinde textGörünüm'ü ve ardından, fontFamily kutusunu genişletin.
4. Listenin alt kısmına gidin ve Kaynaklar iletişim kutusunu açmak için Diğer Yazı Tipleri'ni tıklayın.
5. Kaynaklar iletişim kutusunda, yazı tipi seçmek için listeye göz atın veya metni üstteki arama çubuğuna yazın. İndirilebilir altında bir yazı tipi seçerseniz çalışma zamanında yazı tipini indirilebilir yazı tipi olarak yüklemek için İndirilebilir yazı tipi oluştur'u veya TTF yazı tipi dosyasını APK'nızda paketlemek için Projeye yazı tipi ekle'yi tıklayabilirsiniz. Android altında listelenen yazı tipleri Android sistemi tarafından sağlandığı için APK'nızda indirilmelerine veya paket halinde eklenmelerine gerek yoktur.
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 önizleyen görsel bir araçtır. Bu sayede, düzeninizdeki sorunları sürecin daha erken bir aşamasında yakalayabilirsiniz. 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.

Kullanılabilir yapılandırma grupları 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 Körlüğü
• Yazı Tipi Boyutları

Şekil 11. Referans Cihazlar açılır menüsünü açın.

Referans Cihazlar

Referans cihazlar, test yapmanızı önerdiğimiz cihazlar grubudur. Bunlar arasında telefon, katlanabilir, tablet ve masaüstü arayüzleri yer alır. Düzeninizin bu referans cihazları grubunda nasıl göründüğünü önizlemeniz gerekir:

Şekil 12. Düzen Doğrulama aracında cihaz önizlemelerine referans verme.

Özel

Önizleme yapmak üzere bir ekran yapılandırmasını özelleştirmek için 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ü yapılandırın.

Renk Körlüğü

Renk körlüğü olan kullanıcılar için uygulamanızın daha erişilebilir olmasını sağlamak üzere düzeninizi yaygın renk körlüğü türlerinin simülasyonlarıyla doğrulayın:

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

Yazı Tipi Boyutları

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

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