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ı bir şekilde 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ış sağlar. Düzen hakkında temel bilgiler için Layouts 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ü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, Şema 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 denetimler içerir.
6. Görüntüleme modu: Düzeninizi Kod , Bölünmüş veya Tasarım modlarında görüntüleyebilmenizi sağlar. Bölünme modu, Kod ve Tasarım pencerelerini aynı anda gösterir.
7. Yakınlaştırma ve kaydırma kontrolleri: Düzenleyicide ö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'ini düzenlemek için pencerenin sağ üst köşesindeki Kod düğmesini tıklayın. Palet, Bileşen Ağacı ve Özellikler panellerinin, Kod görünümünde düzeninizi düzenlerken kullanılamayacağı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üzenleyicinin üst satırındaki düğmeler, düzeninizin düzenleyicideki görünümünü yapılandırmanıza olanak tanır.

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 + Şema'yı seçin.
2. Ekran yönü ve düzeni 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ı (gece modu gibi) 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ı bir Materyal dinamik renk teması ile 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. Ö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.

   

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 Manager'ı kullanarak yüklediğiniz SDK platformu sürümlerine bağlıdır.

6. Uygulama teması: Önizlemeye uygulanacak kullanıcı arayüzü temasını seçin. Bu özellik yalnızca desteklenen düzen stilleri için işe yarar. Bu nedenle, bu listedeki birçok temanın bulunması hatayla sonuçlanır.

7. Dil: Kullanıcı arayüzü dizeleriniz için gösterilecek dili seçin. Bu liste yalnızca dize kaynaklarınızda bulunan dilleri gösterir. Ç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ında geçerli olur. Varsayılan düzeni belirledikten sonra, büyük ekranlar gibi belirli cihaz yapılandırmaları için bu sayfanın bir bölümünde açıklandığı gibi 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. Görünen 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 Kaynağı 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 Kaynağı Dosyası'nı seçin.

Resource Manager'ı kullanma

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

Farklı ekranlar için optimizasyon yapmak üzere 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ı 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. Orijinal düzen dosyanızı açın.
2. Pencerenin sağ üst köşesindeki Tasarım simgesini tıklayın.
3. Araç çubuğunda Önizleme için yön'ü () tıklayın.

4. Şekil 4'te gösterilen listeden, önerilen bir varyantı (ör. Yatay Niteleyici Oluştur) seçin.

   

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

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

1. Orijinal düzen dosyanızı açın.
2. Pencerenin sağ üst köşesindeki Tasarım simgesini tıklayın.
3. Araç çubuğunda Önizleme için yön'ü tıklayın.
4. Listede Kaynak Niteleyici Ekle'yi seçin.

5. Açılan iletişim kutusunda, varyant için kaynak niteleyicileri tanımlayın:

   1. Kullanılabilir niteleyiciler listesinden bir niteleyici seçin.
   2. Ekle düğmesini tıklayın.
   3. Gerektiğinde diğer niteleyicileri eklemek için bu adımı tekrarlayın.

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

Aynı düzenin birden fazla varyasyonu olduğunda Düzen Varyantları'nı tıklayıp görüntülenen listeden seçim yaparak bunlar arasında geçiş yapabilirsiniz.

Farklı ekranlar için düzen oluşturma hakkında daha fazla bilgi edinmek üzere 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 bir görünüm türüne ve bir düzeni başka bir düzen türüne 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ıp Görünümü dönüştür'ü tıklayın.
3. Görüntülenen iletişim kutusunda yeni görünüm veya düzen türünü seçin ve ardından Uygula'yı tıklayın.

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

Düzen performansını iyileştirmek 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 adına göre bir görünüm veya görünüm grubu aramak için paletin üst kısmındaki Ara 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, 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 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 belgelerini 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 görünümleri ve grupları Palet'ten 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örüntüler.

ConstraintLayout kullanıyorsanız Kısıtlamaları 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, özelliği kullanmak için düzeninizi 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 panelinde Şekil 5'te belirtildiği gibi aşağıdakiler gösterilir:

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 denetimleri içerir. Görünüm bir ConstraintLayout içindeyse bu bölümde kısıtlama sapması da gösterilir ve görünümün kullandığı kısıtlamalar listelenir. ConstraintLayout ile görüntüleme boyutunu kontrol etme hakkında daha fazla bilgi için Görünüm boyutunu ayarlama bölümüne bakın.
3. Common Attributes (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 arayabilmenizi sağlar.

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 sabit ve sabit kodlu değerleri bir bakışta tanımanıza yardımcı olmak için sabit bir şekilde kodlandığında boş olur.

   Her iki durumdaki göstergeleri tıklayarak ilgili özellik için bir kaynak referansı seçebileceğiniz Kaynaklar iletişim kutusunu açı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üzeni 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ının beklendiği sabit kodlu bir değer kullandığınızda bir uyarı görebilirsiniz.

Görünümünüze örnek veri 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. Layout Editor'dan bir TextView, ImageView veya RecyclerView öğesine örnek önizleme verileri 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ılırken, Android Studio TextView öğesinin text özelliğini seçtiğiniz örnek verilerle doldurur. Tasarım Zamanı Görünüm Özellikleri penceresinden örnek metni, yalnızca text özelliği boşsa seçebileceğinizi unutmayın.

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

RecyclerView için, örnek resim ve metinler içeren bir dizi şablon arasından seçim yapabilirsiniz. Android Studio bu şablonları kullanırken res/layout dizininize, örnek verilerin düzenini içeren bir dosya (recycler_view_item.xml) ekler. Android Studio, örnek verileri düzgün bir şekilde görüntülemek için meta verileri RecyclerView öğesine 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 tüm düzen sorunlarını size bildirir. Daha fazla ayrıntı görmek için simgeyi tıklayın.

Düzenleyicinin altındaki bir pencerede bilinen tüm sorunları 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 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 simgesini tıklayın.
2. Bir metin görünümü seçin.
3. Özellikler panelinde textGörünüm öğesini 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 bölümünde 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 başlığı altında listelenen yazı tipleri Android sistemi tarafından sağlandığından, bunların indirilmiş veya APK'nızda paketlenmiş olmasına gerek yoktur.
6. İşlemi tamamlamak için Tamam'ı tıklayın.