px: özü, mobil geliştirmede fiziksel pikseller
px — fiziksel bir piksel, bir cihaz ekranındaki görüntünün en küçük öğesi. Mobil geliştirmede, px ekran çözünürlüğü ve piksel yoğunluğunun (PPI) temel birimi olarak kullanılır, ancak arayüz düzeni için pratikte kullanılmaz — bunun yerine mantıksal birimler pt, dp ve sp kullanılır. Bu makale, px'in mantıksal birimlerden nasıl farklı olduğunu, çözünürlük ve PPI'ın nasıl ilişkili olduğunu ve kodda doğrudan px kullanmanın neden bir anti-desen olduğunu açıklar.
Önemli Noktalar
- px — ekran yoğunluğunu (PPI) hesaba katmayan fiziksel bir ekran pikseli
- Ekran çözünürlüğü px cinsinden — genişlik ve yükseklikteki piksel sayısı, örneğin 1179 × 2556 px
- PPI — inç başına piksel, görüntü netliğinin ana göstergesi
- Mantıksal birimler (dp, pt, sp) px'i soyutlar ve arayüzü farklı ekranlara uyarlar
- Kodda px kullanmak bir anti-desendir çünkü arayüz farklı yoğunluktaki cihazlarda doğru görüntülenmez
px nedir?
px (piksel, resim öğesi) — raster bir görüntünün veya ekranın en küçük adreslenebilir öğesi. Her piksel, RGB modelinde (kırmızı, yeşil, mavi) kanal başına 8 ila 10 bit renk derinliğiyle renk bilgisi depolar. Modern mobil cihaz ekranları milyonlarca piksel içerir: iPhone 15 Pro — 3 milyon, iPad Pro 12.9" — 5,6 milyon piksel.
Bir pikselin fiziksel boyutu ekran yoğunluğuna (PPI) bağlıdır. 326 PPI (iPhone 11) olan bir cihazda, bir piksel yaklaşık 0,078 mm'dir. 460 PPI (iPhone 15 Pro) olan bir ekranda — 0,055 mm. Pikselin fiziksel boyutu ne kadar küçükse, görüntünün netliği o kadar yüksek olur. Aynı zamanda, piksel yoğunluğu işleme performansını doğrudan etkiler: daha fazla piksel = GPU için daha fazla iş.
Apple'a göre, iPhone 15 Pro'nun ekran çözünürlüğü 460 PPI'da 1179 × 2556 px'dir. Karşılaştırma için, iPhone SE (3. nesil) — 326 PPI'da 750 × 1334 px. Toplam piksel sayısındaki fark neredeyse 3 katıdır ve bu, Pro modellerdeki daha yüksek GPU gereksinimlerini açıklar.
Piksel cinsinden ekran çözünürlüğü
Ekran çözünürlüğü — yatay ve dikey olarak fiziksel piksel sayısı. Genişlik × yükseklik biçiminde yazılır, örneğin 1179 × 2556 px. Çözünürlük, programlı olarak değiştirilemeyen temel bir ekran özelliğidir — donanım ve matris düzeyinde sabitlenmiştir.
| Cihaz | Çözünürlük (px) | PPI | En-boy oranı |
|---|---|---|---|
| iPhone SE (3. nesil) | 750 × 1334 | 326 | 16:9 |
| iPhone 14 | 1170 × 2532 | 460 | 19.5:9 |
| iPhone 15 Pro Max | 1290 × 2796 | 460 | 19.5:9 |
| Samsung Galaxy S24 Ultra | 1440 × 3120 | 505 | 19.5:9 |
| Google Pixel 8 Pro | 1344 × 2992 | 490 | 20:9 |
| iPad Pro 12.9" | 2048 × 2732 | 264 | 4:3 |
Piksel cinsinden çözünürlük, ekranın mantıksal boyutuyla (iOS için pt veya Android için dp) karıştırılmamalıdır. Örneğin, iPhone 14'ün mantıksal boyutu 390 × 844 pt'dir, ancak fiziksel çözünürlüğü 1170 × 2532 px'dir — ölçek faktörü 3 olduğu için tam olarak 3 kat daha büyüktür.
PPI ve piksel yoğunluğu
PPI (inç başına piksel) — ekranın inç başına düşen piksel sayısı. Formülle hesaplanır: PPI = √(genişlik² + yükseklik²) / köşegen. PPI ne kadar yüksekse, tek tek pikseller o kadar küçük ve görüntü o kadar pürüzsüz görünür. Apple, tipik bir izleme mesafesinde 300'ün üzerinde PPI'ye sahip bir ekranı Retina ekran olarak kabul eder.
Farklı cihaz kategorileri farklı yoğunluklara sahiptir: Apple Watch — 326 PPI, iPhone — 326–460 PPI, iPad — 264 PPI, MacBook Pro — 254–264 PPI. Android cihazlar, yoğunluğu Density Buckets aracılığıyla sınıflandırır: mdpi (160 dpi), hdpi (240), xhdpi (320), xxhdpi (480), xxxhdpi (640). Bu kovalar, cihaz için hangi kaynağın (görüntü, dimens) yükleneceğini belirler.
PPI'ın geliştirmeye etkisi: yoğunluk ne kadar yüksekse, dokuları ve görüntüleri depolamak için o kadar fazla bellek gerekir. 500 PPI'lık bir ekrandaki bir piksel, aynı mantıksal öğe boyutu için 320 PPI'lık bir ekrana göre 2,5 kat daha fazla GPU belleği gerektirir. Varlıkları belirli yoğunluk kovaları için optimize etmek, Android geliştirmede standart bir uygulamadır.
px vs mantıksal birimler: pt, dp, sp
Fiziksel pikseller (px), mantıksal birimlerden (pt, dp, sp) donanım çözünürlüğüne bağlı olmaları ve ölçeklenmemeleri açısından farklılık gösterir. Mantıksal birimler ise geliştiriciyi belirli ekrandan soyutlayarak 100 pt'lik tek bir değerin farklı cihazlarda aynı fiziksel boyutta görüntülenmesini sağlar.
| Birim | Platform | PPI'ya bağlı | Ölçeklenir | Amaç |
|---|---|---|---|---|
| px | Tümü | Evet (fiziksel piksel) | Hayır | Görüntüler, tamponlar, Metal |
| pt | iOS/macOS | Hayır (mantıksal nokta) | ölçek faktörü | Düzen, UIKit, SwiftUI |
| dp | Android | Hayır (yoğunluk bağımsız) | yoğunluk kovası | Düzen, öğe boyutları |
| sp | Android | Hayır (ölçek bağımsız) | yoğunluk + yazı tipi ölçeği | Metin (textSize) |
Dönüşüm formülleri: iOS için — px = pt × scale (scale = 1, 2 veya 3). Android için — px = dp × (dpi / 160). Kodda doğrudan px kullanımı, arayüzün farklı yoğunluktaki cihazlarda farklı görüneceği anlamına gelir: yüksek PPI'lı bir ekranda öğe çok küçük, düşük PPI'da ise çok büyük olur.
Kodda px neden kullanılmaz
Bir mobil uygulamanın kaynak kodunda px kullanmak, farklı piksel yoğunluğuna sahip cihazlarda arayüzün yanlış görüntülenmesine yol açan bir anti-desendir. Modern çerçeveler (UIKit, SwiftUI, Jetpack Compose, XML Layouts), boyutların piksel cinsinden belirtilmesini yasaklar veya önermez.
- iOS UIKit — tüm frame, bounds ve constraint constant'ları pt cinsinden ayarlanır. Pikseller yalnızca UIGraphicsImageRenderer aracılığıyla rasterleştirme aşamasında ortaya çıkar
- SwiftUI — px cinsinden boyut ayarlamak için API yoktur. Tüm değerler Font, frame, padding aracılığıyla pt'dir
- Android XML — dimens.xml'de px belirtirseniz, Android Studio bir lint uyarısı gösterir: "Metin boyutları için `px` yerine `sp` kullanın"
- Jetpack Compose — metin için TextUnit, öğeler için Dp. Derleyici türlerin karıştırılmasına izin vermez
Kodda px kullanmanın tek meşru yolu rasterlerle çalışmaktır: Bitmap yükleme, görüntü işleme için Canvas oluşturma, Metal veya OpenGL ile çalışma. Bu durumlarda px, hedef tamponun fiziksel pikselleridir ve doğru işleme için dikkate alınmalıdır. Diğer tüm durumlarda mantıksal birimler kullanılır.
Görsellerde ve varlıklarda pikseller
Görseller ve simgeler piksel cinsinden depolanır, ancak her ekran türü için farklı sürümler sağlanır. iOS, Assets.xcassets'te @1x, @2x, @3x soneklerini kullanır. Android, drawable-mdpi (1×), drawable-hdpi (1,5×), drawable-xhdpi (2×), drawable-xxhdpi (3×), drawable-xxxhdpi (4×) klasörlerini kullanır. Sistem, ekran yoğunluğuna göre otomatik olarak doğru dosyayı seçer.
| iOS ölçeği | Android kovası | Faktör | Örnek (48 pt/dp) |
|---|---|---|---|
| @1x | mdpi (160 dpi) | 1× | 48 × 48 px |
| @2x | xhdpi (320 dpi) | 2× | 96 × 96 px |
| @3x | xxhdpi (480 dpi) | 3× | 144 × 144 px |
| — | xxxhdpi (640 dpi) | 4× | 192 × 192 px |
Varlık sağlama kuralı: görüntüyü vektör biçiminde (PDF, SVG) oluşturun ve gerekli boyutlarda raster kopyalara aktarın. Vektör varlıklar kalite kaybı olmadan ölçeklenir ve depoda daha az yer kaplar. Android'de vektör kaynakları VectorDrawable aracılığıyla doğrudan kullanılabilir, bu da birden çok raster kopya ihtiyacını ortadan kaldırır.
Sıkça Sorulan Sorular
px ve dp arasındaki fark nedir?
px — fiziksel bir ekran pikseli. dp (yoğunluk bağımsız piksel) — 160 dpi yoğunluğa sahip bir ekranda 1 px'e eşit olan mantıksal bir Android birimidir. Farklı yoğunluklarda, dp otomatik olarak farklı sayıda px'e dönüşür ve öğenin fiziksel boyutunu korur.
Kodda neden px cinsinden boyutlar belirtilemez?
Çünkü px ekran yoğunluğunu hesaba katmaz. 100 px'lik bir öğe, farklı PPI'ya sahip cihazlarda farklı görünür: 326 PPI'lık bir ekranda 460 PPI'dan daha büyük olur. Mantıksal birimler (dp, pt, sp) bu sorunu otomatik olarak çözer.
PPI nedir ve nasıl hesaplanır?
PPI (inç başına piksel) — ekranın inç başına düşen piksel sayısı. Formülle hesaplanır: PPI = √(g² + y²) / d, burada g ve y px cinsinden çözünürlük, d inç cinsinden köşegendir. PPI ne kadar yüksekse görüntü o kadar nettir. Apple Retina ekranı 300 PPI'den başlar.
px kullanımı ne zaman haklıdır?
px, raster tamponlarla çalışırken haklıdır: Bitmap oluşturma, Canvas'ta işleme, Metal/OpenGL gölgelendirici programlama, kameradan görüntü işleme. Düzen ve tipografide px kullanılmaz — pt (iOS), dp ve sp (Android) uygulanır.
Ekran çözünürlüğü px cinsinden nasıl öğrenilir?
iOS'ta: UIScreen.main.nativeBounds px cinsinden boyutu döndürür. Android'de: DisplayMetrics.widthPixels ve heightPixels context.resources.displayMetrics'ten alınır. SwiftUI'de: GeometryReader pt cinsinden boyutu döndürür, px için displayScale ile çarpılması gerekir.
Özet
- px — ekranın fiziksel bir pikseli, ekran çözünürlüğünün temel birimi
- Çözünürlük — yatay ve dikey piksel sayısı, donanım düzeyinde sabitlenmiş
- PPI — inç başına piksel, görüntü netliğini ve GPU gereksinimlerini belirler
- Mantıksal birimler (pt, dp, sp) px'i soyutlar ve arayüzü her ekrana uyarlar
- Anti-desen — düzen ve tipografide px kullanımı; doğru alan raster tamponlardır
- Varlıklar farklı çözünürlüklerde sağlanır (iOS için @1x/@2x/@3x, Android için density buckets)
- Vektör biçimleri (PDF, SVG, VectorDrawable) birden çok raster kopyaya tercih edilir
Anahtar teslim bir mobil uygulama geliştireceğiz
IT Sectr, 2017'den beri girişimler ve işletmeler için iOS ve Android uygulamaları oluşturmaktadır. Size danışmanlık yapacak ve en iyi çözümü önereceğiz.
Ayrıca okuyun