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

99

Welche Größen eignen sich am besten für Bilder: background.png, [email protected] und [email protected], 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"

iPhone Auflösungen

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 [email protected] mit der Breite 1242 und für das iPhone 6 [email protected] 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 [email protected] eine Auflösung von 30x30 hat, sollte logisch denken, dass [email protected] 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 [email protected] mit der Breite 414 3 = 1242px, [email protected] 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?

Leszek Szary
quelle
1
iPhone 6 Bildschirme Entmystifizierter Link: bit.ly/1qHEBKk Der ultimative Leitfaden für iPhone-Auflösungen Link: bit.ly/1paVXLd
King-Wizard
iPhone 6 Plus 414 x 736 Punkte 1242 x 2208 Pixel 3x Maßstab 1080 x 1920 physische Pixel 401 physische ppi 5,5 "iPhone 6 375 x 667 Punkte 750 x 1334 Pixel 2x Maßstab 750 x 1334 physische Pixel 326 physische ppi 4,7" iPhone 5 320 x 568 Punkte 640 x 1136 Pixel 2x Maßstab 640 x 1136 physische Pixel 326 physische ppi 4,0 "
King-Wizard
iPhone 4 320 x 480 Punkte 640 x 960 Pixel 2x Maßstab 640 x 960 physische Pixel 326 physische ppi 3,5 "iPhone 3GS 320 x 480 Punkte 320 x 480 Pixel 1x Maßstab 320 x 480 physische Pixel 163 physische ppi 3,5"
King-Wizard

Antworten:

49

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.

Filip Radelic
quelle
Nun, das ist einer der Gründe, warum Apple die 32-GB-Version des neuen iPhones nicht eingeführt hat. 16-GB-Version als Testgeräte und 64-GB-Version für die Verwendung. Die Anwendungsgröße wird aufgrund von Grafiken dramatisch zunehmen.
Ilker Baltaci
1
@IlkerBaltaci Ich würde verstehen, wenn Entwickler nur eine 16-GB-Version kaufen könnten, aber auf diese Weise wird es viele Leute geben, die aufgrund fehlenden Speicherplatzes nicht einmal in der Lage sind, ihr Betriebssystem zu aktualisieren.
Filip Radelic
das stimmt sogar mit 32 GB musste ich eine Woche warten, um aufzuräumen und 5 GB Speicherplatz für IOS 8 zu schaffen.
Ilker Baltaci
2
Wie verwende ich diese in IB?
Khawar
@FilipRadelic was ist mit iPhone5? Die Breite beträgt 640, aber die Höhe unterscheidet sich von der für iPhones 4
MeV
41

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

thewormsterror
quelle
1
Was ist mit dem "Zoom-Modus" in iPhone 6 plus? Sollten wir nicht auch einen ImageName-667h @ 3x bereitstellen müssen?
François Verry
@thewormsterror Ich denke, die letzte Ihrer Bildnamenskonvention ist abgenutzt
Hades
@ thewormsterror tolle Antwort, Sie könnten auch hinzufügen, wie iPad-Bilder benannt werden sollen.
Lukas
Wenn das von einer API stammende Bild 1024 x 768 ist, bedeutet dies, dass ich maximal 256 @ 3x verwenden kann?
Mirko
8

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.

Emiel
quelle
1
Ich muss die Bildschirmbreite mit einem Bild in einer uicollectionviewcell anpassen (offensichtlich in einer uicollectionview, die für alle Bildschirme geeignet ist). Für das iPhone 6 Plus löse ich für das 3x a (414x3 = 1242 px), das 2x welche Größe muss ich verwenden? Es muss das iPhone4s / 5 / 5s und auch 6 Bildschirm passen ...
Jerrygdm
1
Ich habe ein Symbol mit einer Größe von 222 x 260 Pixel, das perfekt auf den iPhone5 / 5s-Bildschirm passt. Nun, während die App mit iPhone6 ​​und 6plus kompatibel gemacht wird 1) Wie groß sollte dieses Symbol sein? sollte es nach dreimaliger Regel 333px x 390px sein? 2) Sollte ich eine automatische Größenänderung auf das Bild in xib anwenden müssen?
Ans
@ jerrygdm, ich habe fast das gleiche Szenario wie deins. Was hast du am Ende des Tages gemacht? Kannst du mir das bitte mitteilen?
Tulon
@Ans, hast du 3x Symbol für iphone6 ​​und iphone6Plus verwendet.
JiteshW
@Jitesh Ich stelle die gleiche Frage ... bei welcher Größe sollte ich das x3x-Symbol erstellen? Ich möchte hinzufügen, aber was sollte die Größe sein ... das war meine Frage ..
Ans
2

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.

Denis Kozhukhov
quelle
2

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.

Leszek Szary
quelle
2

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

George
quelle
0

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.

ناصر عبده عبده محمد
quelle
0

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) 
user2024885
quelle