px: mohiyati, mobil ishlanmada fizik piksellar
px — fizik piksel, qurilma ekranidagi tasvirning eng kichik elementi. Mobil ishlanmada px ekran o'lchami va piksel zichligining (PPI) asosiy birligi sifatida ishlatiladi, lekin interfeyslarni yig'ish uchun amalda qo'llanilmaydi — uning o'rniga pt, dp va sp mantiqiy birliklari ishlatiladi. Maqola px ning mantiqiy birliklardan farqini, o'lcham va PPI qanday bog'liqligini va kodda to'g'ridan-to'g'ri px ishlatish nima uchun antipattern ekanligini tushuntiradi.
Asosiy ma'lumotlar
- px — ekran zichligini (PPI) hisobga olmaydigan displeyning fizik pikseli
- Ekran o'lchami px da — eni va bo'yi bo'yicha piksellar soni, masalan 1179 × 2556 px
- PPI — dyuymdagi piksel zichligi, tasvir ravshanligining asosiy ko'rsatkichi
- Mantiqiy birliklar (dp, pt, sp) px ni abstraksiyalaydi va interfeysni turli ekranlarga moslashtiradi
- Kodda px ishlatish — antipattern, chunki interfeys har xil zichlikdagi qurilmalarda to'g'ri ko'rinmaydi
px nima?
px (pixel, picture element) — rastr tasvir yoki displeyning eng kichik manzillanadigan elementi. Har bir piksel RGB (qizil, yashil, ko'k) modelida rang ma'lumotini kanal uchun 8 dan 10 bitgacha rang chuqurligida saqlaydi. Zamonaviy mobil qurilma displeylari millionlab piksellarni o'z ichiga oladi: iPhone 15 Pro — 3 mln, iPad Pro 12.9" — 5.6 mln piksel.
Pikselning fizik o'lchami displey zichligiga (PPI) bog'liq. 326 PPI (iPhone 11) bo'lgan qurilmada bitta piksel taxminan 0.078 mm o'lchamga ega. 460 PPI (iPhone 15 Pro) displeyda — 0.055 mm. Pikselning fizik o'lchami qanchalik kichik bo'lsa, tasvir ravshanligi shunchalik yuqori bo'ladi. Piksel zichligi to'g'ridan-to'g'ri renderlash unumdorligiga ta'sir qiladi: ko'proq piksel = GPU uchun ko'proq ish.
Apple ma'lumotlariga ko'ra, iPhone 15 Pro displeyining o'lchami 460 PPI zichligida 1179 × 2556 px ni tashkil qiladi. Taqqoslash uchun, iPhone SE (3rd gen) — 326 PPI da 750 × 1334 px. Umumiy piksel sonidagi farq taxminan 3 barobar, bu Pro modellarida GPUga yuqori talablarni tushuntiradi.
Piksellarda ekran o'lchami
Ekran o'lchami — gorizontal va vertikal fizik piksellar soni. Kenglik × balandlik formatida yoziladi, masalan 1179 × 2556 px. O'lcham displeyning asosiy xarakteristikasi bo'lib, uni dasturiy ravishda o'zgartirib bo'lmaydi — apparat va matritsa darajasida belgilangan.
| Qurilma | O'lcham (px) | PPI | Aspekt nisbati |
|---|---|---|---|
| iPhone SE (3rd gen) | 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 |
Piksellardagi o'lchamni ekranning mantiqiy o'lchami (iOS uchun pt yoki Android uchun dp) bilan aralashtirmaslik kerak. Masalan, iPhone 14 mantiqiy o'lchami 390 × 844 pt, lekin fizik o'lchami 1170 × 2532 px — roppa-rosa 3 barobar katta, chunki scale factor 3 ga teng.
PPI va piksel zichligi
PPI (pixels per inch) — displeyning bir dyuymiga to'g'ri keladigan piksellar soni. Formula bo'yicha hisoblanadi: PPI = √(kenglik² + balandlik²) / diagonal. PPI qanchalik yuqori bo'lsa, alohida piksellar shunchalik kichik va tasvir silliqroq ko'rinadi. Apple odatdagi ko'rish masofasida PPI 300 dan yuqori bo'lgan ekranni Retina displey deb hisoblaydi.
Turli qurilma toifalari turli zichlikka ega: Apple Watch soatlari — 326 PPI, iPhone — 326–460 PPI, iPad — 264 PPI, MacBook Pro — 254–264 PPI. Android qurilmalari zichlikni Density Buckets orqali tasniflaydi: mdpi (160 dpi), hdpi (240), xhdpi (320), xxhdpi (480), xxxhdpi (640). Ushbu chelaklar qurilma uchun qaysi resurs (tasvir, dimens) yuklanishini aniqlaydi.
PPI ning ishlanmaga ta'siri: zichlik qanchalik yuqori bo'lsa, tekstura va tasvirlarni saqlash uchun shunchalik ko'p xotira talab qilinadi. 500 PPI displeydagi piksel bir xil mantiqiy element o'lchamida 320 PPI displeyga nisbatan 2.5 barobar ko'proq GPU xotirasini talab qiladi. Aktivlarni muayyan zichlik chelaklari ostida optimallashtirish Android ishlanmasida standart amaliyotdir.
px va mantiqiy birliklar: pt, dp, sp
Fizik piksellar (px) mantiqiy birliklardan (pt, dp, sp) shu bilan farqlanadiki, ular apparat o'lchamiga bog'langan va masshtablanmaydi. Mantiqiy birliklar esa, aksincha, dasturchini aniq displeydan abstraksiyalaydi va bir xil 100 pt qiymatining turli qurilmalarda bir xil fizik o'lchamda ko'rsatilishiga imkon beradi.
| Birlik | Platforma | PPI ga bog'liq | Masshtablanadi | Nima uchun |
|---|---|---|---|---|
| px | Barchasi | Ha (fizik piksel) | Yo'q | Tasvirlar, buferlar, Metal |
| pt | iOS/macOS | Yo'q (mantiqiy nuqta) | scale factor | Layout, UIKit, SwiftUI |
| dp | Android | Yo'q (zichlikka bog'liq emas) | density bucket | Layout, element o'lchamlari |
| sp | Android | Yo'q (masshtabga bog'liq emas) | density + font scale | Matn (textSize) |
Qayta hisoblash formulalari: iOS uchun — px = pt × scale (scale = 1, 2 yoki 3). Android uchun — px = dp × (dpi / 160). Kodda to'g'ridan-to'g'ri px ishlatish interfeys turli zichlikdagi qurilmalarda turlicha ko'rinishini anglatadi: yuqori PPI ekranda element juda kichik, past PPI da esa juda katta bo'ladi.
Nima uchun px kodda ishlatilmaydi
Mobil ilova manba kodida px ishlatish — antipattern bo'lib, piksel zichligi har xil bo'lgan qurilmalarda interfeysning noto'g'ri ko'rinishiga olib keladi. Zamonaviy freymvorklar (UIKit, SwiftUI, Jetpack Compose, XML Layouts) o'lchamlarni piksellarda belgilashni taqiqlaydi yoki tavsiya etmaydi.
- iOS UIKit — barcha frame, bounds va constraint constant-lar pt da beriladi. Piksellar faqat UIGraphicsImageRenderer orqali rastrlashtirish bosqichida paydo bo'ladi
- SwiftUI — px da o'lcham berish uchun API mavjud emas. Barcha qiymatlar Font, frame, padding orqali pt dir
- Android XML — dimens.xml da px ko'rsatsangiz, Android Studio lint ogohlantirishini chiqaradi: "Use \`sp\` instead of \`px\` for text sizes"
- Jetpack Compose — matn uchun TextUnit, elementlar uchun Dp. Kompilyator turlarni aralashtirishga ruxsat bermaydi
Kodda px ning yagona qonuniy ishlatilishi — rastr buferlari bilan ishlash: Bitmap yuklash, tasvirlarni renderlash uchun Canvas yaratish, Metal yoki OpenGL bilan ishlash. Bu hollarda px — maqsadli buferning fizik piksellari bo'lib, to'g'ri renderlash uchun ularni hisobga olish kerak. Boshqa barcha hollarda mantiqiy birliklar ishlatiladi.
Tasvirlar va aktivlarda piksellar
Tasvirlar va ikonkalar piksellarda saqlanadi, lekin har bir ekran turi uchun turli versiyalar taqdim etiladi. iOS Assets.xcassets da @1x, @2x, @3x suffikslaridan foydalanadi. Android drawable-mdpi (1×), drawable-hdpi (1.5×), drawable-xhdpi (2×), drawable-xxhdpi (3×), drawable-xxxhdpi (4×) papkalaridan foydalanadi. Tizim ekran zichligiga asoslanib avtomatik ravishda kerakli faylni tanlaydi.
| iOS scale | Android chelagi | Koeffitsient | Misol (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 |
Aktivlarni yetkazib berish qoidasi: tasvirni vektor formatida (PDF, SVG) yarating va kerakli o'lchamdagi rastr nusxalarga eksport qiling. Vektor aktivlari sifat yo'qotmasdan masshtablanadi va repozitoriyda kamroq joy egallaydi. Android da vektor resurslari VectorDrawable orqali to'g'ridan-to'g'ri ishlatilishi mumkin, bu ko'plab rastr nusxalarga ehtiyojni yo'q qiladi.
Tez-tez beriladigan savollar
px va dp o'rtasidagi farq nima?
px — ekranning fizik pikseli. dp (density-independent pixel) — 160 dpi zichlikdagi ekranda 1 px ga teng bo'lgan Android mantiqiy birligi. Turli zichliklarda dp avtomatik ravishda turli miqdordagi px ga aylanadi, elementning fizik o'lchamini saqlaydi.
Nima uchun kodda o'lchamlarni px da belgilash mumkin emas?
Chunki px ekran zichligini hisobga olmaydi. 100 px o'lchamdagi element turli PPI li qurilmalarda turlicha ko'rinadi: 326 PPI ekranda 460 PPI dagidan kattaroq bo'ladi. Mantiqiy birliklar (dp, pt, sp) bu muammoni avtomatik hal qiladi.
PPI nima va u qanday hisoblanadi?
PPI (pixels per inch) — displey dyuymidagi piksellar soni. Formula bo'yicha hisoblanadi: PPI = √(w² + h²) / d, bu yerda w va h — px dagi o'lcham, d — dyuymdagi diagonal. PPI qanchalik yuqori bo'lsa, tasvir shunchalik ravshan. Apple Retina displeyi 300 PPI dan boshlanadi.
Qachon px ishlatish asosli?
px rastr buferlari bilan ishlashda asosli: Bitmap yaratish, Canvas da renderlash, Metal/OpenGL shaderlarini dasturlash, kamera tasvirlarini qayta ishlash. Layout va tipografikada px ishlatilmaydi — pt (iOS), dp va sp (Android) qo'llaniladi.
Ekran o'lchamini px da qanday bilish mumkin?
iOS da: UIScreen.main.nativeBounds o'lchamni px da qaytaradi. Android da: DisplayMetrics.widthPixels va heightPixels context.resources.displayMetrics dan. SwiftUI da: GeometryReader o'lchamni pt da qaytaradi, px uchun displayScale ga ko'paytirish kerak.
Xulosa
- px — displeyning fizik pikseli, ekran o'lchamining fundamental birligi
- O'lcham — eni va bo'yi bo'yicha piksellar soni, apparat darajasida belgilangan
- PPI — dyuymdagi piksel zichligi, tasvir ravshanligi va GPU talablarini belgilaydi
- Mantiqiy birliklar (pt, dp, sp) px ni abstraksiyalaydi va interfeysni istalgan ekranga moslashtiradi
- Antipattern — layout va tipografikada px ishlatish; to'g'ri soha — rastr buferlari
- Aktivlar turli o'lchamlarda yetkazib beriladi (@1x/@2x/@3x iOS uchun, density buckets Android uchun)
- Vektor formatlari (PDF, SVG, VectorDrawable) ko'plab rastr nusxalardan afzal
Biz kalit topshirig'i bilan mobil ilovani ishlab chiqamiz
IT Sectr 2017-yildan beri startaplar va korxonalar uchun iOS va Android ilovalarini yaratadi. Biz sizga maslahat beramiz va eng yaxshi yechimni taklif qilamiz.
Shuningdek o'qing