Jak poradzić sobie ze skalą obrazu we wszystkich dostępnych rozdzielczościach iPhone'a?

Jakich rozmiarów najlepiej użyć dla obrazów: background.png, [email protected] i [email protected], jeśli chcemy użyć tego obrazu na przykład do pokrycia pełnej szerokości i połowy wysokości ekranu we wszystkich rozdzielczościach dla Aplikacja portretowa na iPhone'a?

Oto, co mamy teraz:

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"

Niektórzy mówią, że dla obrazu od krawędzi do krawędzi (jak baner na dole od lewej do prawej krawędzi ekranu) dla iPhone'a 6 Plus przygotowaliby [email protected] o szerokości 1242, a dla iPhone'a 6 [email protected] z szerokość 750, aby dopasować rozmiar ekranu iPhone'a 6, jednak nie sądzę, aby to był dobry pomysł, ponieważ 1242/3 = 414 i 750/2 = 375, więc nazwanie ich jako @ 2x i @ 3x nie ma sensu. A jaką szerokość powinien mieć back.png - 375 czy 414?

Nazwy grafik używają przyrostków @ 2x i @ 3x, więc jeśli na przykład [email protected] ma rozdzielczość 30x30, to logicznie myśląc [email protected] powinien mieć rozdzielczość 20x20, a image.png 10x10. Oznacza to, że jeśli chcemy mieć ostry obraz o pełnej szerokości dla każdego ekranu, to prawdopodobnie powinniśmy utworzyć [email protected] o szerokości 414 3 = 1242px, [email protected] o szerokości 414 2 = 828px i back.png o szerokości 414px . Oznacza to jednak, że na każdym iPhonie z wyjątkiem iPhone'a 6 Plus będziesz musiał skonfigurować swoje uiimages, aby używały na przykład trybu dopasowywania treści i zostaną one zmniejszone, więc to znowu nie jest idealne rozwiązanie i prawdopodobnie naprawdę spowolniłoby aplikację, jeśli używamy dużo scallingu na starszych urządzeniach.

Jak myślisz, jakie byłoby najlepsze rozwiązanie tego problemu?

Nie musisz mieć każdego obrazu we wszystkich skalach, jeśli nie będzie używany. Wykonaj tylko potrzebne rozmiary i nazwij je zgodnie z ich szerokością. W przypadku obrazów portretowych o pełnej szerokości urządzenia potrzebujesz 320 pikseli szerokości przy 1x i 2x, 375 pikseli przy 2x i 414 pikseli przy 3x.

4 „urządzenia używały sufiksu„ -568h ”do nazywania obrazów uruchamiania, więc polecam podobny schemat nazewnictwa:

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

Następnie dowiedz się, jakiego obrazu potrzebujesz w czasie wykonywania:

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

Może się to zepsuć, jeśli w przyszłości zostaną dodane inne szerokości, ale do tej pory Apple zawsze wymagało przebudowy aplikacji, aby obsługiwała nowe wyświetlacze, więc myślę, że można bezpiecznie założyć, że będą nadal to robić.

Osobiście będę robił:

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

Logika tego polega na tym, że pokazuje różnicę między wszystkimi urządzeniami, podczas gdy szerokość ma tę samą wartość na iPhonie 5s i iPhonie 4s

Edytować:

To jest tylko konwencja nazewnictwa, której używam dla zasobów zależnych od urządzenia, takich jak obraz tła zajmujący cały ekran, przez większość czasu wystarczy:

ImageName @ 2x iPhone 4 / 4s / 5 / 5s / 6
ImageName @ 3x iPhone 6Plus / Tryb powiększenia

Podczas dyskusji @ 2x i @ 3x nie musisz się tym przejmować. Zwróć uwagę na rozmiar w punktach ekranu i upewnij się, że istnieją zasoby @ 2x z dwukrotnie większym rozmiarem w punktach i @ 3x zasoby trzykrotnie większe w punktach w pikselach. Urządzenie automatycznie wybierze właściwy. Ale czytając twój post, myślę, że już to wiesz.

W przypadku obrazów od krawędzi do krawędzi, niestety musisz zrobić to dla wszystkich rozdzielczości ekranu. Tak więc dla iPhone'a w orientacji pionowej byłoby to 320 punktów, 375 punktów i 414 punktów, podczas gdy 414 punktów musiałoby być @ 3x. Lepszym rozwiązaniem może być skalowanie obrazów przez skonfigurowanie podziału na fragmenty w narzędziu do tworzenia interfejsu (to znaczy, jeśli używasz katalogów obrazów). Ale w zależności od obrazu może to być opcja lub nie, w zależności od tego, czy obraz ma część powtarzalną, czy rozciągliwą. Tak skonfigurowane skalowalne obrazy mają bardzo niewielki wpływ na wydajność.

@ 2 i @ 3 nie są prawdziwym skalowaniem obrazu, ale pokazują tylko, ile rzeczywistego piksela reprezentuje jeden wirtualny piksel na ekranie, jakiś rodzaj hdpi / xhdpi / xxhdpi / blabla ze wszechświata Androida. pokazuje tylko systemowi, jaki obraz powinien być używany na ekranie niektórych urządzeń.

więc jeśli potrzebujesz użyć całego obrazu ekranu - przygotuj go w zależności od rzeczywistego rozmiaru ekranu.

W zależności od grafiki w niektórych przypadkach może działać dobrze, gdy użyjemy tylko jednego obrazu, na przykład banera o rozmiarze 414 punktów szerokości x 100 punktów wysokości (największa możliwa szerokość i pewna stała wysokość) i umieścimy go w UIImageView, który jest przypięty do lewa i prawa krawędź ekranu ma stałą wysokość 100 i ustawia tryb wypełniania proporcji dla tego UIImageView. Następnie na mniejszych urządzeniach zostanie wycięta lewa i prawa strona obrazu i zobaczymy tylko środkową część obrazu.

Stworzyłem do tego kategorię:

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

możesz pobrać pełny kod tutaj: https://gist.github.com/YGeorge/e0a7fbb479f572b64ba5

Myślę, że najlepszym rozwiązaniem w przypadku obrazów pełnoekranowych lub pełnoekranowych jest dbanie o rzeczywisty rozmiar ekranu w pikselach (a nie w punktach), a przy uruchomieniu należy sprawdzić model urządzenia i wybrać odpowiedni obraz tj:

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,

nie ma potrzeby używania @? x w tej sytuacji pytającego.

Myślę, że powinniśmy używać różnych rozmiarów obrazów tła dla różnych urządzeń. Po prostu użyj obrazów w skali @ 3x jako tła.

Możesz wykryć urządzenie za pomocą poniższych linii.

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