Yoğunluktan bağımsız pikseller (dp) ve ölçeklenebilir pikseller (sp), düzen oluşturmak ve Android cihazları oluşturan çok çeşitli ekran yoğunluklarına, boyut sınıflarına, form faktörlerine ve en boy oranlarına eşit şekilde yanıt veren yazı tipleri sunmak için çok önemlidir.
Çalmalar
- Referans ızgarası kullanıyorsanız 4 ve 8'lik ölçülere bağlı kalın.
- Teknik özellikleri piksel yerine dp ve sp cinsinden belirtin.
- Tüm paketler için bit eşlem/kafes grafiklerini dışa aktarın.
- Farklı boyut sınıflarını, çözünürlükleri ve en boy oranlarını göz önünde bulundurarak duyarlı bir zihniyetle tasarım yapın.
- Yoğunluktan bağımsız pikseller (dp): Yoğunluktan bağımsız pikseller, herhangi bir ekranda tek tip boyutlara sahip olacak şekilde ölçeklenen esnek birimlerdir. Ekranın fiziksel yoğunluğuna göre yönlendirilirler. Bu birimler, 1 dp'nin yaklaşık 1 piksele eşit olduğu 160 dpi (inç başına nokta sayısı) boyutundaki ekranlara göre belirlenir.
- Ölçeklenebilir pikseller (sp): Ölçeklenebilir pikseller, dp ile aynı işlevi görür ancak yazı tipleri için kullanılır. Bir sp'nin varsayılan değeri, dp'nin varsayılan değeriyle aynıdır. Android sistemi, kullanılacak gerçek yazı tipi boyutunu cihaza ve kullanıcının Android cihazının Ayarlar uygulamasında belirlenen tercihine göre hesaplar.
Bu ölçü birimleri arasındaki temel fark, ölçeklenebilir piksellerin kullanıcının yazı tipi ayarlarını korumasıdır. Erişilebilirlik için daha büyük metin ayarlarına sahip olan kullanıcılar, metin boyutu tercihleriyle eşleşen yazı tipi boyutlarını görür. Compose'da yazı tipi boyutunu nasıl değiştireceğinizi öğrenin.
Android, bu birimleri kullanarak çeşitli cihazlar ve çözünürlükler genelinde ölçekleme ve çeviri yapma imkanına sahip olur.
Yoğunluk paketleri
Yüksek yoğunluklu ekranlarda, düşük yoğunluklu ekranlarda inç başına daha fazla piksel bulunur. Sonuç olarak, aynı piksel boyutlarına sahip kullanıcı arayüzü öğeleri düşük yoğunluklu ekranlarda daha büyük, yüksek yoğunluklu ekranlarda ise daha küçük görünür. Bu nedenle ölçümleri piksel cinsinden bildirmemeniz gerekir.
Android, ekran yoğunlukları aralıklarını "paketler" halinde gruplandırır ve cihazınıza en uygun öğe grubunu yayınlamak için bunları kullanır. En yaygın kullanılan yoğunluk paketleri şunlardır: mdpi, hdpi, xhdpi, xxhdpi ve xxxhdpi (nodpi ve anydpi, cihaz çözünürlüğüne göre ölçeklenmeyen, genellikle vektör çekilebilir birimleri için kullanılan bir paket anlamına gelir). Her biri, uygulamanızın kaynak dosyasına karşılık gelir.
dp'yi hesaplamak için:
dp = (piksel cinsinden genişlik * 160) / ekran yoğunluğu
Izgaralar
Referans ızgara
Temel bir ızgara ile derleme, kullanıcı arayüzünüz genelinde tutarlı boşluklar ve hizalama oluşturmanıza yardımcı olur. Android kullanıcı arayüzü; düzen, bileşenler ve boşluk için 8 dp'lik bir ızgara kullanır.
Bileşenlerin içindeki simgeler, tür gibi küçük öğeler ve bazı öğeler 4 dp'lik bir ızgarayla en iyi şekilde hizalanır.
Sütun tablosu
Sütunlar, içeriği gövde alanı içinde bölerek bir düzene dikey tanım sağlamak için bir ızgara yapısı oluşturur. İçerik, ekranda sütun içeren alanlara yerleştirilir. İçeriği hizalamak için alttaki ızgarayla hizalayın ancak boyutu esnek tutmalısınız. Düzenle ilgili temel bilgiler sayfasında sütun ızgarası ayarlama ve içerik uygulama ile ilgili temel bilgileri öğrenin.
Form faktörlerinde esnek düzenler oluşturmayla ilgili ayrıntılar için Materyal 3 Standart düzenler sayfasına göz atın.
Beden sınıfları
Pencere boyutu sınıfları, duyarlı ve uyarlanabilir uygulama düzenlerini tasarlamanıza, geliştirmenize ve test etmenize yardımcı olan dikkatli görüntü alanı ayrılma noktalarıdır. Android, pencere boyutu sınıflarını 3'e ayırır: Kompakt, Orta ve Genişletilmiş. Pencere boyutu sınıfları hakkında daha fazla bilgi edinin.
En boy oranları
En boy oranı, bir öğenin genişliğinin yüksekliğine oranıdır. En boy oranları, genişlik:yükseklik şeklinde yazılır.
Düzeninizde tutarlılığı sağlamak için resim, yüzey ve ekran boyutu gibi öğelerde tutarlı bir en boy oranı kullanın.
Kullanıcı arayüzünüzde kullanmanız için aşağıdaki en boy oranları önerilir:
- 16:9
- 3:2
- 4:3
- 1:1
- 3:4
- 2:3