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

Ukuran apa yang paling baik digunakan untuk gambar: background.png, background@2x.png dan background@3x.png 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 back@3x.png dengan lebar 1242 dan untuk iPhone 6 back@2x.png 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 image@3x.png memiliki resolusi 30x30 maka secara logis berpikir image@2x.png 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 back@3x.png dengan lebar 414 3 = 1242px, back@2x.png 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?

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.

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

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.

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

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.

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

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.

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)