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 düzen oluştururken güçlüdür.

Bu sayfa, Düzen Düzenleyici'ye genel bir bakış sunar. Düzenlerle ilgili temel bilgiler 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.

düzen düzenleyici
Şekil 1. Düzen Düzenleyici.
  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üzenleyicide 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 birden düzenlemenize olanak tanır.
  5. Özellikler: Seçili görünümün özellikleriyle ilgili kontroller içerir.
  6. Görüntüleme modu: Düzeninizi Kod kod modu simgesi, Bölün bölünmüş mod simgesi veya Tasarım tasarım modu simgesi 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: Düzenleyici içindeki önizleme boyutunu ve konumunu kontrol edin.

Bir XML düzen dosyasını açtığınızda, tasarım düzenleyici varsayılan olarak Şekil 1'de gösterildiği gibi açılır. Metin düzenleyicide düzen XML'sini düzenlemek için pencerenin sağ üst köşesindeki Kod kod modu simgesi 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ıza olanak tanır.

Düzen Düzenleyici araç çubuğunda düzen görünümünü yapılandıran düğmeler
Şekil 2. Düzen Düzenleyici araç çubuğunda, düzen görünümünü yapılandıran düğmelerdir.
  1. Tasarım ve Ayrıntılı Plan: 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 Ayrıntılı 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üzeni varyantları: Yatay veya dikey ekran yönü arasından seçim yapın ya da uygulamanızın alternatif düzenler sağladığı diğer ekran modlarını (gece modu gibi) seçin. Bu menü, sayfadaki bir bölümde 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ı arasında geçiş yapın 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üresi tanımlarınız 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'a göre test etmek, uygulamanızın gerçek cihazlardaki düzen durumlarına göre iyi ölçeklenmesine yardımcı olur.

    Referans Cihazlar'ı içeren cihaz listesi menüsü
    Şekil 3. Referans Cihazlar'ın gösterildiği cihaz listesi.
  5. API sürümü: Düzeninizi önizlemek için Android sürümünü seçin. Kullanılabilir Android sürümlerinin listesi, SDK Manager'ı kullanarak yüklediğiniz SDK platform sürümlerine bağlıdır.

  6. Uygulama teması: Önizlemeye hangi kullanıcı arayüzü temasının uygulanacağını seçin. Bu işlem yalnızca desteklenen düzen stilleri için çalışır. Bu nedenle, bu listede yer alan çok sayıda temanın hata vermesi kaçınılmazdır.

  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 bir varsayılan 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 sayfanın bir bölümünde 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 biriyle 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, ardından Düzen Kaynak Dosyası'nı tıklayın.

Farklı ekranlar için optimizasyon yapmak istiyorsanız düzen varyantlarını kullanın

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ı kullanma

Android Studio, projenizde kullanabileceğiniz yaygın düzen varyantlarını 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 tasarım modu simgesi simgesini tıklayın.
  3. Düzen dosyasının adı, Düzen dosyaları için niteleyiciler değiştirme ve oluşturma 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.
    Niteleyici oluştur açılır listesi
    Ş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 isterseniz aşağıdakileri yapın:

  1. Varsayılan düzen dosyanızı açın.
  2. Pencerenin sağ üst köşesindeki Tasarım Tasarım modu simgesi simgesini tıklayın.
  3. Düzen dosyasının adı, Düzen dosyaları için niteleyiciler değiştirme ve oluşturma 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 Niteleyici 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 niteleyici ekle düğmesi 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 niteleyicileri 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 listesinden bir varyant seçerek bunlar arasında geçiş yapabilirsiniz.

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

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 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.

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

İyileştirilmiş düzen performansı için eski düzenleri ConstraintLayout biçimine dönüştürün. ConstraintLayout, iç içe yerleştirilmiş görünüm grupları olmadan çoğu düzeni 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 tasarım modu simgesi 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 içinde bir görünümü veya görünüm grubunu ada göre aramak için paletin üst kısmındaki Ara palet arama düğmesi düğmesini tıklayın. Alternatif olarak, Palet penceresinde odaklanıldığında öğenin adını yazabilirsiniz.

Palet'in Yaygın kategorisinde sık kullanılan öğeleri 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.

Palette'den belgeleri aç

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

Bir görünüm veya görünüm grubuna ilişkin Malzeme Yönergeleri dokümanlarını görüntülemek için Palet'te kullanıcı arayüzü öğesini sağ tıklayın ve bağlam 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 ekleyin

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 düzenin geri kalanıyla ilişkisi hakkında bilgiler gösterir.

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

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

The
Şekil 5. Özellikler paneli.

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 özellik ekle düğmesi düğmesini tıklayın.
  2. Düzen: Görünümün genişliği ve yüksekliğine ilişkin denetimleri içerir. Görünüm bir ConstraintLayout içindeyse bu bölümde kısıtlama ağırlıklandırması da gösterilir ve görünümde kullanılan 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. Ortak Ö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ıza olanak tanır.
  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 gösterge simgesi sabittir ve sabit kodlu değerleri bir bakışta tanımanıza yardımcı olmak için kod gömülü olduğunda boş gösterge simgesi boş görünür.

    Her iki durumda da göstergeleri tıklayarak Kaynaklar iletişim kutusunu açın. Burada, ilgili özellik için bir kaynak referansı seçebilirsiniz.

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

    Turuncu vurgu, değer için bir uyarı olduğunu gösterir. Örneğin, kaynak referansı olması beklenen sabit bir değer kullandığınızda bir uyarı görebilirsiniz.

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ü ve tarzını görselleştirmek zor olabilir. Örnek önizleme verilerini Düzen Düzenleyici içinden TextView, ImageView veya RecyclerView öğesine ekleyebilirsiniz.

Tasarım Süresi 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.

tasarım zamanı görünüm özellikleri penceresi
Ş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. Tasarım Süresi Görüntüleme Özellikleri penceresinden örnek metni, yalnızca text özelliği boşsa seçebileceğinizi unutmayın.

örnek verilerle metin görünümü
Şekil 7. Örnek veriler içeren bir TextView.

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.

örnek verilerle resim görünümü
Şekil 8. Örnek veriler içeren bir ImageView.

RecyclerView için, örnek resim ve metin içeren bir dizi şablon arasından 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.

örnek verilerle geri dönüşüm görünümü
Şekil 9. Örnek veriler içeren bir RecyclerView.

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

Düzen Düzenleyici, hatalar için kırmızı bir daire ünlem simgesi bir düzen hatasını belirten kırmızı daire ünlem simgesi veya uyarılar için turuncu bir üçgen ünlem simgesi düzen uyarısını gösteren turuncu üç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ğunda Uyarıları ve Hataları Göster'i (bir düzen hatasını belirten kırmızı daire ünlem simgesi veya düzen uyarısını gösteren turuncu üçgen ünlem simgesi) tıklayın.

Yazı tiplerini indirme ve 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. Düzen Düzenleyici'de, düzeninizi tasarım düzenleyicide görüntülemek için Tasarım tasarım modu simgesi simgesini tıklayın.
  2. Bir metin görünümü seçin.
  3. Özellikler panelinde textViewance'ı 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 ü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 indirilmelerine veya APK'nızda paketlenmelerine gerek yoktur.
  6. İşlemi tamamlamak için Tamam'ı tıklayın.