Mevcut tüm iPhone çözünürlüklerinde görüntü ölçeği nasıl kullanılır?

Resimler için kullanılacak en iyi boyutlar hangileridir: background.png, background@2x.png ve background@3x.png eğer bu resmi, örneğin tüm çözünürlüklerde ekranın tam genişliğini ve yarım yüksekliğini kapsamak için kullanmak istiyorsak iPhone portre uygulaması?

Şu anda sahip olduğumuz şey bu:

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"

Bazı insanlar iPhone 6 Plus için kenardan kenara görüntü için (ekranın sol altından sağ kenarına bir afiş gibi) 1242 genişliğinde back@3x.png ve iPhone 6 için back@2x.png ile iPhone 6 ekran boyutuna uyacak şekilde genişlik 750 ancak bunun iyi bir fikir olduğunu düşünmüyorum çünkü 1242/3 = 414 ve 750/2 = 375 bu yüzden @ 2x ve @ 3x olarak adlandırmanın bir anlamı yok. Ve sonra back.png - 375 veya 414'ün genişliği ne olmalıdır?

Grafik isimleri @ 2x ve @ 3x soneklerini kullanıyor, bu nedenle örneğin image@3x.png 30x30 çözünürlüğe sahipse, mantıksal olarak düşünen image@2x.png 20x20 çözünürlüğe ve image.png 10x10 olmalıdır. Bu, her bir ekran için keskin tam genişlikte bir resim elde etmek istiyorsak, o zaman muhtemelen 414 3 = 1242px genişliğinde back@3x.png, 414 2 = 828px genişliğinde back@2x.png ve 414px genişliğinde back.png oluşturmamız gerektiği anlamına gelir. . Ancak bu, iPhone 6 Plus dışındaki her iPhone'da uiimages'inizi, örneğin en-boy oranına uygun içerik modunu kullanacak şekilde ayarlamanız gerekeceği ve bunların taranacağı anlamına gelir, böylece bu yine bir sorun çözümü değildir ve muhtemelen uygulamayı gerçekten yavaşlatacaktır. eski cihazlarda çok fazla taraklama kullanıyoruz.

Peki sizce bu sorunu çözmek için en iyi çözüm nedir?

Kullanılmayacaksa her bir görüntüye her ölçekte sahip olmanız gerekmez. Yalnızca ihtiyacınız olan boyutları yapın ve genişliklerine göre adlandırın. Tam cihaz genişliğinde dikey görüntüler için, 1x ve 2x'te 320 piksel genişliğe, 2x'te 375 piksel genişliğe ve 3x'te 414 piksel genişliğe ihtiyacınız vardır.

4 "aygıt, başlatma görüntülerini adlandırmak için" -568h "son ekini kullandı, bu nedenle benzer bir adlandırma şeması öneririm:

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

Ardından çalışma zamanında hangi görüntüye ihtiyacınız olduğunu belirleyin:

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

Gelecekte başka genişlikler eklenirse bu kırılabilir, ancak şimdiye kadar Apple her zaman yeni ekranları desteklemek için uygulamayı yeniden oluşturmayı zorunlu kıldı, bu yüzden bunu yapmaya devam edeceklerini varsaymak biraz güvenli.

Şahsen yapacağım:

ImageName @ 2x iPhone 4 / 4s
ImageName-568h @ 2x iPhone 5 / 5s
ImageName-667h @ 2x iPhone 6
ImageName-736h @ 3x iPhone 6Plus

Bunun arkasındaki mantık, tüm cihazlar arasında bir fark göstermesi, ancak genişliğin iPhone 5s ve iPhone 4s'de aynı değeri paylaşmasıdır.

Düzenle:

Bu yalnızca, tüm ekranı alan bir arka plan görüntüsü gibi cihaza bağlı kaynaklar için kullandığım adlandırma kuralı, çoğu zaman tüm istediğiniz:

ImageName @ 2x iPhone 4 / 4s / 5 / 5s / 6
ImageName @ 3x iPhone 6Plus / Yakınlaştırma modu

@ 2x ve @ 3x tartışması için, bunu gerçekten önemsemenize gerek yok. Ekranın nokta boyutuna dikkat edin ve iki katı nokta boyutuna sahip @ 2x varlıkların ve piksel olarak nokta boyutunun üç katı olan @ 3x varlıkların olduğundan emin olun. Cihaz otomatik olarak doğru olanı seçecektir. Ama gönderinizi okurken bunu zaten biliyorsunuzdur.

Kenardan kenara görüntüler için, ne yazık ki bunu tüm ekran çözünürlükleri için yapmanız gerekiyor. Yani, portre iPhone için, 320 nokta, 375 nokta ve 414 nokta olacaktır; burada 414 nokta @ 3x olmalıdır. Arayüz oluşturucudaki dilimlemeyi ayarlayarak resimlerinizi ölçeklenebilir hale getirmek daha iyi bir çözüm olabilir (yani, resim katalogları kullanıyorsanız). Ancak, görüntüye bağlı olarak, görüntünün tekrarlanabilir veya uzatılabilir bir parçası olup olmamasına bağlı olarak bu bir seçenek olabilir veya olmayabilir. Bunun gibi ayarlanan ölçeklenebilir görüntülerin performans üzerinde çok az etkisi vardır.

@ 2 ve @ 3 gerçek görüntü ölçeklemesi değildir, ancak yalnızca ekranda ne kadar gerçek pikselin bir sanal pikseli temsil ettiğini, bir tür hdpi / xhdpi / xxhdpi / blabla'yı temsil eder. sadece sisteme bazı cihaz ekranlarında hangi görüntünün kullanılması gerektiğini gösterir.

yani tam ekran görüntüsünü kullanmanız gerekiyorsa - gerçek ekran boyutuna bağlı olarak hazırlayın.

Bazı durumlarda grafiklere bağlı olarak, yalnızca tek bir resim kullandığımızda, örneğin 414 punto genişliğinde x 100 punto yüksekliğinde (mümkün olan en büyük genişlik ve bir miktar sabit yükseklik) bir banner kullandığımızda ve onu sabitlenmiş bir UIImageView'a koyduğumuzda düzgün çalışabilir. ekranın sol ve sağ kenarı sabit yüksekliğe 100 sahiptir ve o UIImageView için en boy doldurma modunu ayarlar. Daha sonra daha küçük cihazlarda görüntünün sol ve sağ tarafı kesilecek ve görüntünün sadece orta kısmını göreceğiz.

Bunun için kategori oluşturdum:

+ (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;
}

tam kodu buradan alabilirsiniz: https://gist.github.com/YGeorge/e0a7fbb479f572b64ba5

Bence uçtan uca veya tam ekran görüntüler için en iyi çözüm, piksel cinsinden gerçek ekran boyutuna dikkat etmektir (nokta olarak değil) ve çalışma zamanında cihazın modelini kontrol etmeli ve uygun görüntüyü seçmelisiniz, yani:

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,

Soruyu soranın bu durumunda @? x'e gerek yoktur.

bence farklı cihazlar için farklı boyutlarda arka plan resimleri kullanmalıyız. Arka plan için sadece 3x ölçekli resimleri kullanın.

Aşağıdaki satırlar ile cihazı tespit edebilirsiniz.

#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)