Ukuran apa yang paling baik digunakan untuk gambar: background.png, [email protected] dan [email protected] jika kita ingin menggunakan gambar ini misalnya untuk menutupi lebar penuh dan setengah tinggi layar pada semua resolusi untuk Aplikasi potret iPhone?
Inilah yang kita miliki sekarang:
Device Points Pixels Scale Physical Pixels PPI Ratio Size
iPhone XS Max 896x414 2688x1242 3x 2688x1242 458 19.5:9 6.5"
iPhone XR 896x414 1792x828 2x 1792x828 326 19.5:9 6.1"
iPhone X 812x375 2436x1125 3x 2436x1125 458 19.5:9 5.8"
iPhone 6 Plus 736x414 2208x1242 3x 1920x1080 401 16:9 5.5"
iPhone 6 667x375 1334x750 2x 1334x750 326 16:9 4.7"
iPhone 5 568x320 1136x640 2x 1136x640 326 16:9 4.0"
iPhone 4 480x320 960x640 2x 960x640 326 3:2 3.5"
iPhone 3GS 480x320 480x320 1x 480x320 163 3:2 3.5"
Beberapa orang mengatakan bahwa untuk gambar tepi ke tepi (seperti banner di bagian bawah dari tepi kiri ke kanan layar) untuk iPhone 6 Plus mereka akan menyiapkan [email protected] dengan lebar 1242 dan untuk iPhone 6 [email protected] dengan lebar 750 agar sesuai dengan ukuran layar iPhone 6 namun menurut saya ini bukan ide yang bagus karena 1242/3 = 414 dan 750/2 = 375 jadi menamakannya @ 2x dan @ 3x tidak masuk akal. Lalu berapa lebar yang harus dimiliki back.png - 375 atau 414?
Nama grafik menggunakan sufiks @ 2x dan @ 3x jadi jika misalnya [email protected] memiliki resolusi 30x30 maka secara logis berpikir [email protected] harus memiliki resolusi 20x20 dan image.png harus 10x10. Artinya jika kita ingin memiliki gambar lebar penuh yang tajam untuk setiap layar maka kita mungkin harus membuat [email protected] dengan lebar 414 3 = 1242px, [email protected] dengan lebar 414 2 = 828px dan back.png dengan lebar 414px . Namun ini berarti bahwa pada setiap iPhone kecuali untuk iPhone 6 Plus Anda perlu mengatur gambar Anda untuk digunakan misalnya mode konten yang sesuai aspek dan mereka akan diperkecil jadi ini sekali lagi bukan solusi perferct dan mungkin akan sangat memperlambat aplikasi jika kami menggunakan banyak scalling di perangkat lama.
Jadi menurut Anda apa solusi terbaik untuk mengatasi masalah ini?
sumber
Jawaban:
Anda tidak harus memiliki setiap gambar dalam semua skala jika tidak akan digunakan. Buatlah hanya ukuran yang Anda butuhkan dan beri nama sesuai lebarnya. Untuk gambar dengan lebar perangkat penuh potret, Anda memerlukan lebar 320 piksel pada 1x dan 2x, lebar 375 piksel pada lebar 2x dan lebar 414 piksel pada lebar 3x.
4 "perangkat menggunakan akhiran" -568h "untuk memberi nama gambar peluncurannya, jadi saya akan merekomendasikan skema penamaan yang serupa:
Kemudian cari tahu gambar apa yang Anda butuhkan saat runtime:
Ini mungkin rusak jika lebar lain ditambahkan di masa mendatang, tetapi sejauh ini Apple selalu mengharuskan membangun kembali aplikasi untuk mendukung tampilan baru, jadi saya kira cukup aman untuk berasumsi bahwa mereka akan terus melakukan itu.
sumber
Saya pribadi akan melakukan:
ImageName @ 2x iPhone 4 / 4s
ImageName-568h @ 2x iPhone 5 / 5s
ImageName-667h @ 2x iPhone 6
ImageName-736h @ 3x iPhone 6Plus
Logika di balik ini adalah bahwa ini menunjukkan perbedaan antara semua perangkat, sedangkan lebar berbagi nilai yang sama pada iPhone 5s dan iPhone 4s.
Edit:
Ini hanyalah konvensi penamaan yang saya gunakan untuk sumber daya yang bergantung pada perangkat, seperti gambar latar belakang yang mengambil seluruh layar, sebagian besar waktu yang Anda inginkan hanyalah:
ImageName @ 2x iPhone 4 / 4s / 5 / 5s / 6
ImageName @ 3x iPhone 6Plus / mode Zoom
sumber
Untuk pembahasan @ 2x dan @ 3x, Anda tidak perlu terlalu mempedulikannya. Perhatikan ukuran titik layar, dan pastikan ada aset @ 2x dengan ukuran titik dua kali lipat dan aset @ 3x dengan ukuran titik tiga kali lipat dalam piksel. Perangkat secara otomatis akan memilih yang benar. Tapi membaca posting Anda, saya rasa Anda sudah tahu ini.
Untuk gambar edge-to-edge, sayangnya Anda harus membuatnya untuk semua resolusi layar. Jadi, untuk iPhone potret, itu akan menjadi 320 poin, 375 poin dan 414 poin, di mana 414 poin harus @ 3x. Solusi yang lebih baik mungkin membuat gambar Anda dapat diskalakan dengan menyiapkan pemotongan di pembuat antarmuka (jika Anda menggunakan katalog gambar, yaitu). Tetapi, tergantung pada gambar, ini mungkin atau mungkin tidak menjadi pilihan, tergantung apakah gambar memiliki bagian yang dapat diulang atau direnggangkan. Gambar yang dapat diskalakan yang disiapkan seperti ini memiliki dampak performa yang sangat kecil.
sumber
@ 2 dan @ 3 bukanlah penskalaan gambar nyata, tetapi hanya mewakili berapa banyak piksel nyata yang mewakili satu piksel virtual di layar, semacam hdpi / xhdpi / xxhdpi / blabla dari semesta android. itu hanya menunjukkan kepada sistem gambar apa yang harus digunakan untuk beberapa layar perangkat.
jadi jika Anda perlu menggunakan gambar seluruh layar - persiapkan dengan bergantung pada ukuran layar sebenarnya.
sumber
Bergantung pada grafik dalam beberapa kasus, ini mungkin berfungsi dengan baik ketika kita hanya menggunakan satu gambar misalnya spanduk dengan ukuran lebar 414 poin x tinggi 100 poin (lebar terbesar yang mungkin dan beberapa tinggi tetap) dan meletakkannya di UIImageView yang disematkan ke tepi kiri dan kanan layar, memiliki tinggi tetap 100 dan menyetel mode pengisian aspek untuk UIImageView tersebut. Kemudian pada perangkat yang lebih kecil, sisi kiri dan kanan gambar akan dipotong dan kita hanya akan melihat bagian tengah gambar.
sumber
Saya telah membuat kategori untuk ini:
Anda dapat mengambil kode lengkap di sini: https://gist.github.com/YGeorge/e0a7fbb479f572b64ba5
sumber
Saya pikir solusi terbaik untuk gambar tepi ke tepi atau layar penuh, adalah memperhatikan ukuran layar sebenarnya dalam piksel (bukan dalam poin), dan Anda harus memeriksa pada saat runtime model perangkat dan memilih gambar yang sesuai yaitu:
image-iphone4-4s.png (640x960/2) for 1/2 screen height
,image-iphone5-5c-5s.png (640x1136/2) for 1/2 screen height
,image-iphone6-6s.png (750x1334/2) for 1/2 screen height
,image-iphone6plus-6splus.png (1242x2208/2) for 1/2 screen height
,tidak perlu @? x dalam situasi penanya ini.
sumber
Saya pikir kita harus menggunakan ukuran gambar latar belakang yang berbeda untuk perangkat yang berbeda. Cukup gunakan gambar skala @ 3x untuk latar belakang.
Anda dapat mendeteksi perangkat dengan garis di bawah ini.
sumber