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"
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?
quelle
Antworten:
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:
Finden Sie dann heraus, welches Image Sie zur Laufzeit benötigen:
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.
quelle
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
quelle
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.
quelle
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.
quelle
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.
quelle
Ich habe eine Kategorie dafür erstellt:
Den vollständigen Code finden Sie hier: https://gist.github.com/YGeorge/e0a7fbb479f572b64ba5
quelle
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
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.
quelle