Bagaimana cara menangani skala gambar pada semua resolusi iPhone yang tersedia?

99

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"

resolusi iPhone

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?

Leszek Szary
sumber
1
Layar iPhone 6 Tautan Demystified: bit.ly/1qHEBKk Panduan Ultimate Untuk Resolusi iPhone tautan: bit.ly/1paVXLd
King-Wizard
iPhone 6 Plus 414 x 736 poin 1242 x 2208 piksel 3x skala 1080 x 1920 piksel fisik 401 fisik ppi 5,5 "iPhone 6 375 x 667 poin 750 x 1334 piksel skala 2x 750 x 1334 piksel fisik 326 fisik ppi 4,7" iPhone 5 320 x 568 poin 640 x 1136 piksel 2x skala 640 x 1136 piksel fisik 326 ppi fisik 4.0 "
King-Wizard
iPhone 4 320 x 480 poin 640 x 960 piksel 2x skala 640 x 960 piksel fisik 326 ppi fisik 3,5 "iPhone 3GS 320 x 480 poin 320 x 480 piksel 1x skala 320 x 480 piksel fisik 163 fisik ppi 3,5"
King-Wizard

Jawaban:

49

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:

  • ImageName-320w (@ 1x & @ 2x)
  • ImageName-375w (@ 2x)
  • ImageName-414w (@ 3x)

Kemudian cari tahu gambar apa yang Anda butuhkan saat runtime:

NSNumber *screenWidth = @([UIScreen mainScreen].bounds.size.width);
NSString *imageName = [NSString stringWithFormat:@"name-%@w", screenWidth];
UIImage *image = [UIImage imageNamed:imageName];

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.

Filip Radelic
sumber
itulah salah satu alasan mengapa Apple tidak memperkenalkan versi 32 GB dari iPhone baru. Versi 16 GB sebagai perangkat uji dan 64 untuk penggunaan. Ukuran aplikasi akan meningkat secara dramatis karena grafik.
Ilker Baltaci
1
@IlkerBaltaci Saya akan mengerti jika mereka hanya mengizinkan pengembang membeli versi 16 GB, tetapi dengan cara ini akan ada banyak orang yang bahkan tidak dapat memutakhirkan OS mereka karena kurangnya ruang disk.
Filip Radelic
itu benar bahkan dengan 32 GB saya harus menunggu satu minggu untuk membersihkan dan membuat ruang 5 GB untuk iOS 8.
Ilker Baltaci
2
Bagaimana cara menggunakannya di IB?
Khawar
@FilipRadelic bagaimana dengan iPhone5? lebarnya 640 tetapi tinggi berbeda dari yang digunakan untuk iPhone 4
MeV
41

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

thewormsterror
sumber
1
Bagaimana dengan "mode Zoom" di iPhone 6 plus? Bukankah kita perlu menyediakan ImageName-667h @ 3x juga?
François Verry
@thewormsterror Saya pikir yang terakhir dari konvensi penamaan gambar Anda adalah worng
Hades
@thewormsterror jawaban yang bagus, Anda juga bisa menambahkan bagaimana gambar ipad harus diberi nama.
Lukas
Jika gambar yang berasal dari api berukuran 1024 x 768, apakah itu berarti ukuran maksimal yang dapat saya gunakan adalah 256 @ 3x?
Mirko
8

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.

Emiel
sumber
1
Saya perlu menyesuaikan lebar layar dengan gambar di dalam uicollectionviewcell (jelas di dalam uicollectionview yang cocok untuk semua layar). Untuk iphone 6 plus saya pecahkan untuk menempatkan 3x a (414x3 = 1242 px), ukuran 2x yang harus saya pakai? Itu harus sesuai dengan iphone4s / 5 / 5s dan juga 6 layar ...
jerrygdm
1
Saya memiliki ikon dengan ukuran 222px x 260px, yang terlihat sangat pas di layar iPhone5 / 5s. Sekarang sementara membuat aplikasi kompatibel dengan iPhone6 ​​dan layar 6plus 1) berapa ukuran ikon itu? sesuai aturan tiga kali, haruskah 333px x 390px? 2) haruskah saya menerapkan pengubahan ukuran otomatis ke gambar di xib?
Jawab
@ jerrygdm, saya memiliki skenario yang hampir sama seperti skenario Anda. Apa yang kamu lakukan di penghujung hari? Bisakah Anda berbagi dengan saya?
Tulon
@Ans, Sudahkah Anda menggunakan ikon 3x untuk iphone6 ​​dan iphone6Plus.
JiteshW
@Jitesh Saya menanyakan pertanyaan yang sama ... pada ukuran berapa saya harus membuat ikon x3x? Saya ingin menambahkan tetapi berapa ukurannya ... ini adalah pertanyaan saya ..
Ans
2

@ 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.

Denis Kozhukhov
sumber
2

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.

Leszek Szary
sumber
2

Saya telah membuat kategori untuk ini:

+ (UIImage *)sizedImageWithName:(NSString *)name {
    UIImage *image;
    if (IS_IPHONE_5) {
        image = [UIImage imageNamed:[NSString stringWithFormat:@"%@-568h",name]];
        if (!image) {
            image = [UIImage imageNamed:name];
        }
    }
    else if (IS_IPHONE_6) {
        image = [UIImage imageNamed:[NSString stringWithFormat:@"%@-750w",name]];
    }
    else {
        image = [UIImage imageNamed:name];
    }
    return image;
}

Anda dapat mengambil kode lengkap di sini: https://gist.github.com/YGeorge/e0a7fbb479f572b64ba5

George
sumber
0

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
0

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.

#define IS_IPAD (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad)
#define IS_IPHONE (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPhone)
#define IS_RETINA ([[UIScreen mainScreen] scale] >= 2.0)

#define SCREEN_WIDTH ([[UIScreen mainScreen] bounds].size.width)
#define SCREEN_HEIGHT ([[UIScreen mainScreen] bounds].size.height)
#define SCREEN_MAX_LENGTH (MAX(SCREEN_WIDTH, SCREEN_HEIGHT))
#define SCREEN_MIN_LENGTH (MIN(SCREEN_WIDTH, SCREEN_HEIGHT))

#define IS_IPHONE_4_OR_LESS (IS_IPHONE && SCREEN_MAX_LENGTH < 568.0)
#define IS_IPHONE_5 (IS_IPHONE && SCREEN_MAX_LENGTH == 568.0)
#define IS_IPHONE_6 (IS_IPHONE && SCREEN_MAX_LENGTH == 667.0)
#define IS_IPHONE_6P (IS_IPHONE && SCREEN_MAX_LENGTH == 736.0) 
pengguna2024885
sumber