Wie gehe ich mit der Bildskalierung bei allen verfügbaren iPhone-Auflösungen um?

Welche Größen eignen sich am besten für Bilder: background.png, background@2x.png und background@3x.png, wenn wir dieses Bild beispielsweise verwenden möchten, um die volle Breite und halbe Höhe des Bildschirms bei allen Auflösungen für abzudecken iPhone Porträt App?

Das haben wir jetzt:

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"

Einige Leute sagen, dass sie für ein Bild von Kante zu Kante (wie ein Banner am unteren Rand vom linken zum rechten Bildschirmrand) für das iPhone 6 Plus back@3x.png mit der Breite 1242 und für das iPhone 6 back@2x.png mit vorbereiten würden Breite 750, um der Bildschirmgröße des iPhone 6 zu entsprechen, aber ich halte dies nicht für eine gute Idee, da 1242/3 = 414 und 750/2 = 375, so dass es keinen Sinn macht, sie als @ 2x und @ 3x zu bezeichnen. Und welche Breite sollte dann back.png - 375 oder 414 haben?

Grafiknamen verwenden die Suffixe @ 2x und @ 3x. Wenn beispielsweise image@3x.png eine Auflösung von 30x30 hat, sollte logisch denken, dass image@2x.png eine Auflösung von 20x20 und image.png eine Auflösung von 10x10 haben sollte. Dies bedeutet, dass wir, wenn wir für jeden Bildschirm ein scharfes Bild in voller Breite haben möchten, wahrscheinlich back@3x.png mit der Breite 414 3 = 1242px, back@2x.png mit der Breite 414 2 = 828px und back.png mit der Breite 414px erstellen sollten . Dies bedeutet jedoch, dass Sie auf jedem iPhone mit Ausnahme des iPhone 6 Plus Ihre Benutzerbilder so einrichten müssen, dass sie beispielsweise den Aspektanpassungs-Inhaltsmodus verwenden, und sie werden verworfen, sodass dies wiederum keine perfekte Lösung ist und die Anwendung wahrscheinlich wirklich verlangsamen würde, wenn Wir verwenden viel Scalling auf älteren Geräten.

Was wäre Ihrer Meinung nach die beste Lösung, um dieses Problem zu lösen?

Sie müssen nicht jedes Bild in allen Maßstäben haben, wenn es nicht verwendet wird. Machen Sie nur die Größen, die Sie benötigen, und benennen Sie sie entsprechend ihrer Breite. Für Hochformatbilder mit voller Gerätebreite benötigen Sie eine Breite von 320 Pixel bei 1x und 2x, eine Breite von 375 Pixel bei 2x und eine Breite von 414px bei 3x.

4 Suffixe "Geräte verwendet" -568h "zum Benennen ihrer Startabbilder, daher würde ich ein ähnliches Benennungsschema empfehlen:

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

Finden Sie dann heraus, welches Image Sie zur Laufzeit benötigen:

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

Dies kann zu Problemen führen, wenn in Zukunft andere Breiten hinzugefügt werden. Bisher musste Apple die App jedoch immer neu erstellen, um neue Displays zu unterstützen. Daher kann man davon ausgehen, dass dies weiterhin möglich ist.

Ich persönlich werde tun:

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

Die Logik dahinter ist, dass es einen Unterschied zwischen allen Geräten zeigt, während die Breite auf dem iPhone 5s und dem iPhone 4s den gleichen Wert hat

Bearbeiten:

Dies ist nur die Namenskonvention, die ich für geräteabhängige Ressourcen verwende, z. B. ein Hintergrundbild, das den gesamten Bildschirm einnimmt. Meistens ist alles, was Sie möchten, Folgendes:

ImageName @ 2x iPhone 4 / 4s / 5 / 5s / 6
ImageName @ 3x iPhone 6Plus / Zoom-Modus

Für die @ 2x- und @ 3x-Diskussion müssen Sie sich nicht wirklich darum kümmern. Achten Sie auf die Punktgröße des Bildschirms und stellen Sie sicher, dass @ 2x Assets mit der doppelten Punktgröße und @ 3x Assets mit der dreifachen Punktgröße in Pixel vorhanden sind. Das Gerät wählt automatisch das richtige aus. Aber wenn Sie Ihren Beitrag lesen, wissen Sie das wahrscheinlich schon.

Für Rand-zu-Rand-Bilder müssen Sie diese leider für alle Bildschirmauflösungen festlegen. Für ein Porträt-iPhone wären es also 320 Punkte, 375 Punkte und 414 Punkte, wobei die 414 Punkte @ 3x sein müssten. Eine bessere Lösung könnte darin bestehen, Ihre Bilder skalierbar zu machen, indem Sie das Slicing im Interface Builder einrichten (wenn Sie also Bildkataloge verwenden). Abhängig vom Bild kann dies jedoch eine Option sein oder auch nicht, je nachdem, ob das Bild einen wiederholbaren oder dehnbaren Teil hat. Auf diese Weise eingerichtete skalierbare Bilder haben nur sehr geringe Auswirkungen auf die Leistung.

Das @ 2 und @ 3 ist nicht die reale Bildskalierung, sondern repräsentiert nur, wie viel reales Pixel ein virtuelles Pixel auf dem Bildschirm darstellt, eine Art hdpi / xhdpi / xxhdpi / blabla aus dem Android-Universum. Es zeigt dem System nur an, welches Bild für einen Gerätebildschirm verwendet werden soll.

Wenn Sie also ein Vollbild verwenden müssen, bereiten Sie es abhängig von der tatsächlichen Bildschirmgröße vor.

Abhängig von den Grafiken funktioniert es in einigen Fällen möglicherweise einwandfrei, wenn wir nur ein einzelnes Bild verwenden, z. B. ein Banner mit einer Größe von 414 Punkten Breite x 100 Punkte Höhe (größtmögliche Breite und eine feste Höhe) und es in eine UIImageView einfügen, die angesteckt ist Der linke und rechte Bildschirmrand hat eine feste Höhe von 100 und einen Seitenfüllmodus für diese UIImageView. Dann werden auf kleineren Geräten die linke und rechte Seite des Bildes geschnitten und wir sehen nur den mittleren Teil des Bildes.

Ich habe eine Kategorie dafür erstellt:

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

Den vollständigen Code finden Sie hier: https://gist.github.com/YGeorge/e0a7fbb479f572b64ba5

Ich denke, die beste Lösung für Rand-zu-Rand- oder Vollbild-Bilder besteht darin, sich um die tatsächliche Bildschirmgröße in Pixel (nicht in Punkt) zu kümmern. Sie müssen zur Laufzeit das Modell des Geräts überprüfen und das entsprechende Bild auswählen, dh:

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,

In dieser Situation des Fragestellers ist @? x nicht erforderlich.

Ich denke, wir sollten unterschiedliche Größen von Hintergrundbildern für verschiedene Geräte verwenden. Verwenden Sie einfach Bilder im Maßstab 3x als Hintergrund.

Sie können Geräte mit folgenden Zeilen erkennen.

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