it-swarm.com.de

Wie handhabt man die Bildskala bei allen verfügbaren iPhone-Auflösungen?

Welche Größen wären am besten für Bilder geeignet: background.png, [email protected] und [email protected], wenn wir dieses Bild verwenden möchten, um beispielsweise die volle Breite und halbe Höhe des Bildschirms in allen Auflösungen abzudecken iPhone Portrait-App?

Das haben wir jetzt:

Device          Points    Pixels     Scale  Physical Pixels   Physical PPI  Size
iPhone X        812x375   2436x1125  3x     2436x1125         458           5.8"
iPhone 6 Plus   736x414   2208x1242  3x     1920x1080         401           5.5"
iPhone 6        667x375   1334x750   2x     1334x750          326           4.7"
iPhone 5        568x320   1136x640   2x     1136x640          326           4.0"
iPhone 4        480x320   960x640    2x     960x640           326           3.5"
iPhone 3GS      480x320   480x320    1x     480x320           163           3.5"

iPhone resolutions

Einige Leute sagen, dass für ein Edge-to-Edge-Bild (wie ein Banner am unteren Rand von links nach rechts am Bildschirmrand) für das iPhone 6 Plus [email protected] mit der Breite 1242 und für das iPhone 6 [email protected] mit vorbereitet würde Breite 750, um die Bildschirmgröße des iPhone 6 anzupassen. Ich denke jedoch nicht, dass dies eine gute Idee ist, da 1242/3 = 414 und 750/2 = 375, also die Benennung als @ 2x und @ 3x keinen Sinn hat. Und welche Breite sollte dann back.png - 375 oder 414 haben?

Grafiknamen verwenden @ 2x und @ 3x-Suffixe. Wenn [email protected] beispielsweise eine Auflösung von 30x30 hat, sollte logisch denkendes [email protected] eine Auflösung von 20x20 haben und image.png sollte 10x10 betragen. Das bedeutet, wenn wir ein scharfes Bild in voller Breite für jeden Bildschirm haben möchten, sollten wir wahrscheinlich [email protected] mit Breite 414 * 3 = 1242px, [email protected] mit Breite 414 * 2 = 828px und back.png mit erstellen Breite 414px. Dies bedeutet jedoch, dass Sie auf jedem iPhone außer iPhone 6 Plus Ihre Uiimages so einrichten müssen, dass sie beispielsweise den Modus für den anpassungsfähigen Inhalt verwenden, und dass diese heruntergefahren werden, sodass dies wiederum keine perfekte Lösung ist und die Anwendung wahrscheinlich verlangsamt Auf älteren Geräten verwenden wir viel Scalling.

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

97
Leszek Szary

Sie müssen nicht jedes Bild in allen Skalen haben, wenn es nicht verwendet wird. Stellen Sie nur die gewünschten Größen ein und benennen Sie sie nach ihrer Breite. Für Hochformatbilder mit voller Gerätebreite benötigen Sie 320xx Breite bei 1x und 2x, 375px Breite bei 2x und 414 Pixel Breite bei 3x.

4 "Geräte benutzten das Suffix" -568h "zum Benennen ihrer Startbilder, daher würde ich ein ähnliches Namensschema empfehlen:

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

Finden Sie dann heraus, welches Bild 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 könnte zu einem Bruch führen, wenn in der Zukunft weitere Breiten hinzugefügt werden. Bisher musste Apple die App jedoch neu erstellen, um neue Displays zu unterstützen. Es kann also davon ausgegangen werden, dass sie dies weiterhin tun.

49
Filip Radelic

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 gibt, während width bei iPhone 5s und iPhone 4s den gleichen Wert hat

Bearbeiten:

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

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

41
thewormsterror

Für die Diskussion @ 2x und @ 3x 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 Edge-to-Edge-Bilder müssen Sie es leider für alle Bildschirmauflösungen machen. Für ein Portrait-iPhone wären es also 320 Punkte, 375 Punkte und 414 Punkte, wobei die 414 Punkte bei 3x liegen müssten. Eine bessere Lösung kann sein, Ihre Bilder skalierbar zu machen, indem Sie das Slicing im Interface Builder einrichten (wenn Sie Image-Kataloge verwenden). Je nach Bild kann dies jedoch eine Option sein oder nicht, je nachdem, ob das Bild einen wiederholbaren oder dehnbaren Teil hat. Skalierbare Bilder, die auf diese Weise eingerichtet wurden, haben nur einen geringen Einfluss auf die Leistung.

8
Emiel

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 erhalten Sie hier: https://Gist.github.com/YGeorge/e0a7fbb479f572b64ba5

2
George

@ 2 und @ 3 sind nicht die tatsächliche Bildskalierung, sondern repräsentieren nur, wie viel Pixel ein virtuelles Pixel auf dem Bildschirm darstellt, eine Art hdpi/xhdpi/xxhdpi/blabla aus dem Android-Universum. Es zeigt nur dem System an, welches Bild für einige Gerätebildschirme verwendet werden soll.

wenn Sie also das gesamte Bildschirmbild verwenden müssen, bereiten Sie es abhängig von der tatsächlichen Bildschirmgröße vor.

2
Denis Kozhukhov

Abhängig von der Grafik kann es in einigen Fällen gut funktionieren, 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 einige feste Höhe), und es in eine festgelegte UIImageView-Datei einfügen Am linken und rechten Rand des Bildschirms ist die Höhe 100 festgelegt und der Seitenfüllmodus für diesen UIImageView festgelegt. Bei kleineren Geräten wird dann die linke und rechte Seite des Bildes geschnitten, und wir sehen nur den mittleren Teil des Bildes.

2
Leszek Szary

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

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 Hintergrundbilder unterschiedlicher Größe für verschiedene Geräte verwenden. Verwenden Sie einfach @ 3-fach Skalierungsbilder für den Hintergrund.

Sie können das Gerät mit den 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) 
0
user2024885