Korrektes Bild und die Schriftart, die Skalierung auf verschiedenen Geräten?

Habe ich eine einfache Ansicht mit einem text und einem Bild. Ich lief diese app auf iPhone6Plus und iPhone5. Dann habe ich einen screenshot gemacht von beiden und vergrößert das iPhone5 screenshot, so dass es mit der Größe von der Abbildung von iPhone6Plus. Hier ist das Ergebnis:

So können Sie die Größe des Textes die Größe des Bildes und gibt es Positionen sind nicht identisch, aber Sie sollten gleich Aussehen auf verschiedenen Bildschirm-Größen.

Hier ist ein Beispiel für eine Wetter-app laufen auf verschiedenen Bildschirmen:

Korrektes Bild und die Schriftart, die Skalierung auf verschiedenen Geräten?

Wie Sie sehen können die Größen und die Positionen von text und Bild sind identisch.

Das Bild geladen wird, aus dem asset-Katalog:

imageView.image = UIImage(named: "shower3")
self.view.addSubView(imageView)
imageView.center = self.view.center

Habe ich nur erstellt, ein 128x128 Bild und legen Sie es in die @1x version in der asset-cataloge.

Lassen Sie mich anders formulieren diese. Ich betreibe die Wetter-app auf iPhone5 machen ascreenshot und iPhone6 machen Sie einen screenshot. Dann habe ich die Größe sowohl screenshots der gleichen Größe. Dann sehe ich, dass sowohl Schriftgröße als auch die Bilder, die Abmessungen sind genau gleich auf beiden screenshots. Dies bedeutet, dass auf jedem Gerät-schriftart und ein Bild haben muss, verschiedene Dimensionen. Wie kann ich das tun?

Wie kann ich erreichen, dass text und Bild identische Proportionen auf verschiedenen Bildschirm-Größen? Wie funktioniert die Wetter-App es tun?

haben Sie eine @3x-version des Bildes?
Nein, ich habe nur die @1x version. Wie in der Wetter-app: github.com/JakeLin/SwiftWeather
Bitte poste den code, den Sie verwenden, oder eine Liste der Einschränkungen, die Sie haben.
Siehe mein update !

InformationsquelleAutor | 2015-05-28

12

Bilder

Ich bin der Schöpfer und einer der Entwickler des Swift-Wetter-app. Die app nicht drei Versionen der Bilder, weil ich nicht diese Bilder und es wurde ein Pull-Request von einem anderen Entwickler. Ich habe nicht die Herkunft der Bilder.

Als @Daniil Korotin erwähnt, iOS verwendet points zu berechnen, Bild-und Schriftgrößen. iOS verwendet let screenScale = UIScreen.mainScreen().scale zum abrufen der Bildschirm Waage und pick-up die richtige Größe (1x, 2x oder 3x) im Bild. Wenn wir nicht die richtige Größe des Bildes, zum Beispiel, in SwiftWeather app, wir haben nur 1x version des Bildes (wie der screenshot unten), iOS gehobenen Klasse das Bild, um die Anzeige auf retina-Geräte. Auf dem iPhone 6 Plus, es ist tatsächlich nicht downsampling für 3x Vermögen. Bitte haben Sie einen Blick auf iPhone 6 Bildschirme Entmystifiziert. In einigen Fällen, wenn Sie nicht 2x oder 3x Bilder auf retina-Geräten, das Bild hochskaliert von 1x kann sieht verschwommen. Wir sollten immer 1x, 2x und 3x Bilder, wenn möglich.

Schriften

iOS rendert Schriften entsprechend der angegebenen points. Es wird automatisch konvertieren Sie die Punkte, um bestimmte Pixelwerte basierend auf den Geräten' Bildschirm-Skala (wie oben erwähnt).

Wie kann ich erreichen, dass text und Bild identische Proportionen auf verschiedenen Bildschirm-Größen? Wie funktioniert die Wetter-App, es zu tun?
Die Antwort ist "Auto-Layout"

Können Sie sehen, wir legen Sie Einschränkungen für die Bild-Ansicht (für die Wetter-Symbol), wie unten beschrieben.

Die Breite und Höhe sind jeweils 150 points bitte beachten Sie es ist points noch pixels. Machen wird es die gleiche Größe (für das Aussehen und das Gefühl, nicht genau Pixel) für verschiedene Geräte. Für dein erstes Bild (iPhone 6 Plus vs. iPhone 5) sieht es anders aus, weil vielleicht Ihre Simulatoren haben eine unterschiedliche Skalierung. Einen besseren Weg, um zu überprüfen, wie die automatische layout-Elemente legen Sie auf dem Bildschirm, um mithilfe der Vorschau im Interface Builder.

Öffnen Sie das main-storyboard und klicken Sie auf Assistent Editor. Auf der rechten Seite, wählen Sie "Vorschau" (oben Links). Und klicken Sie auf das Pluszeichen ( unten Links), um verschiedene Geräte. Sie können sehen, dass Sie identische Proportionen auf verschiedenen Bildschirm-Größen.

Wenn Sie Fragen haben, bitte lassen Sie mich wissen.

Vielleicht etwas off-topic

Wenn ich das design der Bilder/assets, möchte ich einige Vektor-Basis-Tools wie Sketch zu entwerfen, die Vermögenswerte und exportieren Sie Sie in drei verschiedenen Größen. Bitte haben Sie einen Blick mein anderes Projekt iOSAnimationSample. Es hat eine Sketch-Datei für das design.

Skizze design

Exportieren von assets unterschiedlichen Größen

In diesem Fall iOS können pick-up die richtigen assets für verschiedene Geräte.
- Lassen Sie mich anders formulieren diese. Ich betreibe die Wetter-app auf iPhone5 machen ascreenshot und iPhone6 machen Sie einen screenshot. Dann habe ich die Größe sowohl screenshots der gleichen Größe. Dann sehe ich, dass sowohl Schriftgröße als auch die Bilder, die Abmessungen sind genau gleich auf beiden screenshots. Dies bedeutet, dass auf jedem Gerät-schriftart und ein Bild haben muss, verschiedene Dimensionen. Wie kann ich das tun?
- Sie nicht haben unterschiedliche Abmessungen. Auf Iphone5 ein-Punkt-Karten bis 2 Pixel und auf iphone6 ein-Punkt-Karten um 3 Pixel. Also das ist, warum Sie haben die gleichen Dimensionen in Bezug auf die Punkte. IOS befasst sich mit Punkten, nicht die Pixel.
- M Abdul Sami sagte, Sie haben die gleichen Punkte. Und machen an verschiedenen Pixel. Für Schriften, es ist der Vektor-Basis ist es nicht pixel relativ. Für das Bild, es wird automatisch abholen das richtige image (1x, 2x oder 3x) oder der gehobenen 1x zu passen. Bitte lassen Sie mich wissen, welches Teil Sie fühlen sich unklar ist, kann ich aktualisieren Sie die Antwort.
- Sie bitte haben Sie einen Blick auf stackoverflow.com/questions/12019170/... ich kann immer noch nicht bekommen, was Ihre Verwirrung ist.
InformationsquelleAutor Jake Lin
11

Die app auf die Sie sich beziehen, ist nicht korrekt-support Multi-Bildschirm-Größen. Das interface skaliert auf dem 6 und 6 plus, die ist, warum alles, was scheint, die gleiche Größe.

Blick auf die screenshots von Ihrer app - status-bar ist viel kleiner, auf dem 6 plus. Dies ist, weil es ist soll zu nehmen weniger Platz auf dem Bildschirm. Es ist 20 Punkte hoch auf alle Geräte.

Nun schau dir den screenshot von der Wetter-app der status - Balken die gleiche Größe. Weil die Wetter-app keine Unterstützung für mehrere Bildschirmgrößen, iOS nimmt einfach die kleinere Schnittstelle und skaliert es bis um den Bildschirm zu füllen.

Wenn Sie wollen, um den gleichen Effekt erzielen (was Sie nicht sollte), dann entfernen Sie die LaunchScreen.xib - Datei und verwenden Sie ein Start-Bild statt. Aber die Leute kaufen nicht, rief größeren Bildschirmen, weil Sie wollen, haben den gleichen Inhalt, aber größer. Das wäre mehr erreicht, Billig, indem Sie einfach halten Sie das Telefon näher an das Gesicht.

Sollen Sie sich um die Vorteile der größeren displays, indem Sie mehr Inhalt auf einmal angezeigt auf dem Bildschirm - mehrere Zeilen von Daten in einer Tabelle, mehr text aus einem Buch, mehrere Bilder aus der Foto-Bibliothek.

Im Falle einer Wetter-app den zusätzlichen Platz genutzt werden sollte, um mehr Zeilen anzeigen eines Stündliche Vorhersage oder etwas, nicht nur eine größere version von einer ziemlich nutzlosen Symbol, das die Art von Wetter.

Ich vermute, es ist nur das Spiel unterstützen, dass die Unterstützung von größeren Bildschirmen richtig ist nicht bereits Voraussetzung für die app store submission. Die Unterstützung der 4-Zoll-Bildschirm verpflichtend ziemlich schnell, Sie sollten erwarten, dass eine ähnliche Regel eingeführt werden, für das 6 und 6 plus vor zu lang.

Wenn Sie möchten, dass ein bestimmtes element immer bis 50% der Breite des Bildschirms, oder ein label immer die gleiche Größe wie ein Bild, dann benutzen Sie autolayout-constraints mit Multiplikatoren. Ein autolayout-Einschränkung ist die grundlegende Struktur:
```
attribute of A = (attribute of B * multiplier) + constant
```
Meiste Zeit der Multiplikator ist Links ein, Sie sind also nur zu sagen, dass diese 20 Punkte auf der linken Seite, oder was auch immer, aber man kann über den Multiplikator als auch, und sagen, dass A die Breite von B, multipliziert mit 2 oder 0,5 oder was auch immer Sie mögen.
- Aber wie kann ich erreichen, dass die Proportionen gleich sind, unabhängig von der Bildschirmgröße?
- Sie können fügen Sie Einschränkungen mit Multiplikatoren zwischen verschiedenen Ansichten (so Einer ist zweimal die Breite von B oder was auch immer)
- Diese Gleichung ist falsch. Es ist tatsächlich: attribute of A = multiplier * attribute of B + constant. siehe developer.apple.com/library/content/documentation/...
- Oh Mann, all diese Jahre und du bist der erste Hinweis! Danke, werde ich editieren
InformationsquelleAutor jrturton
8

iOS verwendet points zu berechnen, Bild-und Schriftgrößen. Auf non-retina-Bildschirm 1 Punkt entspricht 1 pixel auf retina-Bildschirmen — 2 Pixel, und für das iPhone 6 Plus-es ist gleich 3 Pixel (einige Hardware-Herunterskalierung in Echtzeit angewendet wird, obwohl). Wenn Sie möchten, um das Bild zu skalieren und die schriftart auf der Grundlage der tatsächlichen pixel Größe des Bildschirms, können Sie die Anzahl der pixel pro Punkt wie diesem:
```
CGFloat screenScale = [[UIScreen mainScreen] scale];
```
Dem iPhone 5, 6 und 6 Plus Bildschirm-Seitenverhältnisse gleich sind, während die Auflösungen unterscheiden. Wenn Sie möchten, halten Sie einfach die Proportionen, dann haben Sie, um eine 'Basis' - Bildschirm Breite oder Höhe (sagen wir, die iPhone-5-Bildschirm Breite, die 320.0 Punkte) und dann berechnen Sie den Anteil, indem das tatsächliche Bildschirm des Geräts Breite (sagen wir, iPhone 6 Plus Bildschirm Breite, die 414.0-Punkte) durch, die "Basis" Breite (414.0 /320.0 = 1.29375). Sie können die Bildschirm Größe wie dieser:
```
CGRect screenBounds = [[UIScreen mainScreen] bounds];
```
Aufteilung screenBounds's Breite durch die Breite Basis gibt Ihnen der Anteil. Dann multiplizieren Sie einfach alle Größen und Ränder mit, dass der Anteil (1.29375 in unserem Fall für iPhone 6 Plus). Hoffe, Sie bekommen die Idee.

P. S. Eine gute Anleitung für den Auflösungen ist hier.

P. P. S. Und in Ihrem Fall, als skorolkov unten erwähnt, die app nur hochqualitativen alles für größere Bildschirme (entfernen/hinzufügen von splash-screens zu aktivieren/deaktivieren dieser upscaling).

UPD: Ok, jetzt sehe ich, was dich verwirrt. Hier ist das Ding: wenn Apple zunächst freigegeben iPhone 6 und 6 Plus viele apps nicht unterstützen, Ihren größeren Bildschirmen und größeren Auflösungen. So beschlossen Sie, wenn eine app fehlt, splash-screens speziell gemacht für diejenigen, die Telefone, die Sie verwenden sollten, die iPhone 5 Auflösung.

Das ist, warum Sie erhalten exakt die gleichen Bilder, nachdem das manuelle anpassen der Größe der screenshots: das system funktioniert das auch. Es nimmt einfach das iPhone 5 - "Bild" und streckt es, so dass es passt für größere Bildschirme. Der Nachteil ist eindeutig (und sichtbar, vor allem auf dem iPhone 6 Plus): die Schriften und Bilder sind unscharf und hochskaliert (system-interface-Elemente, wie die status bar, erhalten, ausgebaut, zu). Also im Grunde erhalten Sie die iPhone-5-Bild auf allen größeren abgeschirmten Geräten (Sie können es überprüfen, indem man einen screenshot auf einem iPhone 5, Größe ändern, manuell passen iPhone 6/6 Plus-Auflösung und dem Vergleich der aktuellen iPhone 6/6 Plus screenshot, um es).

Klar zu sein: das ist das Verhalten, das Sie derzeit bekommen, aber es ist nicht gut. Um alles richtig skaliert mit der Geräte eine native Auflösung, mit der Methode die ich oben beschrieben habe (manuelle Multiplikation) oder autolayouts mit equal height/width gesetzt, um die gewünschten Verhältnisse für interface-Elemente.
- Wie wird dies getan, indem Sie die Wetter-app? github.com/JakeLin/SwiftWeather
- Es ist getan, mit der richtigen storyboard-Einstellungen. Wenn Sie es nicht bekommen, Sie brauchen, um Lesen Sie ein paar Bücher/tutorials zu autolayouts und Interface-Builder im Allgemeinen.
- Könnten Sie bitte erklären was diese app hat als storyboard-Einstellung? Wie kann ich erreichen das gleiche, wenn mit InterfaceBuilder?
- Sie können auch hier beginnen: raywenderlich.com/50317/...
- Ich weiß noch, wie AutoLayout funktioniert, aber ich weiß nicht, wie die Schriftarten und die Bilder in der Wetter-App geändert werden auf verschiedenen Bildschirmen.
InformationsquelleAutor Daniil Korotin
4

Wetter-App ist mit exklusiven Modus zu laufen auf dem iPhone 6+. Sie können es durch entfernen der Start-Bildschirme für 6/6+.

Gehen zu Katalogen, wählen Sie Ihre Start Bild und unset 'iOS 8 oder Höher" aktivieren Sie im Attribute Inspector.

Screenshot - Ihre app hat dieses set

Screenshot aus WeatherApp

InformationsquelleAutor skorolkov
4

in programmgesteuert (X und Y), die wir vorab definieren die Werte konstant :
```
#define XScale [[UIScreen mainScreen] bounds].size.width / 320.0f
#define YScale [[UIScreen mainScreen] bounds].size.height / 568.0f
```
Dann erstellen UIImageView programmatisch
```
var imageView : UIImageView
imageView  = UIImageView(frame:CGRectMake(XScale *someValue, YScale * someValue, XScale *someValue, YScale *someValue));
imageView.image = UIImage(named:"image.jpg")
self.view.addSubview(imageView)
```
basierend auf Ihrem Bildschirm Größe, die wir benötigen, um Konstante Werte. Wir verwenden für iPhone5 und 4s-Bildschirm.
- Lassen Sie mich anders formulieren diese. Ich betreibe die Wetter-app auf iPhone5 machen ascreenshot und iPhone6 machen Sie einen screenshot. Dann habe ich die Größe sowohl screenshots der gleichen Größe. Dann sehe ich, dass sowohl Schriftgröße als auch die Bilder, die Abmessungen sind genau gleich auf beiden screenshots. Dies bedeutet, dass auf jedem Gerät-schriftart und ein Bild haben muss, verschiedene Dimensionen. Wie kann ich das tun?
- Hi @stephan1001 Dimensionen unterscheiden sich von den Geräten. so können wir festlegen, Auto-layout oder programmgesteuert wir müssen es definieren.
InformationsquelleAutor Shanmugasundharam
2

Müssen Sie Layout-constraint, um alle Ansichten zu sehen auch am gleichen Orte und Größen, die in alle Bildschirme der Größen, vorausgesetzt, dass das Seitenverhältnis der Bildschirme sind die gleichen.
- Bitte posten Sie ein Beispiel, wie Sie dies machen!
- Hast du auch Lesen Sie die Fragen. Die Frage ist, wie identisch die Proportionen der Bilder und Schriften.
InformationsquelleAutor M Abdul Sami
2

Haben Sie versucht, zu entfernen autoResizingFunktionalität aus dem Blick?
Klicken Sie auf innere Pfeil zu entfernen autoResize Ansicht als pro superview

InformationsquelleAutor Sujay
-1
1. Zuerst schalten Sie auto-layout, auto-Skalierung und Größe der Klassen im storyboard.
2. Auf die Bilder klicken.xcassets-Symbol, und wählen Sie alle Ihre Grafiken. Im Attribut-inspector setzen Sie die Geräte-Eigenschaft auf "Geräte" und setzen die checkbox geprüft und mit "iPhone" und "Retina-4-inch"
3. Legen Sie alle Ihre Grafiken in 2x Bild gesetzt. Sie können ein Bild mit höherer Auflösung einstellen für bessere Ergebnisse mit dem iPhone 6/6+.
4. Design Ihrer Sicht für ein Referenz-Gerät sagen, das iPhone 5 (320x568 portrait).
5. In Ihrem viewDidLoad-Methode fügen Sie den folgenden code
self.view.transform=CGAffineTransformScale(CGAffineTransformIdentity,self.view.frame.size.width/320, self.view.frame.size.height/568);

Und Sie haben dasselbe Ergebnis auf iPhone 5/5s, iPhone 6/6+.
- Lassen Sie mich anders formulieren diese. Ich betreibe die Wetter-app auf iPhone5 machen ascreenshot und iPhone6 machen Sie einen screenshot. Dann habe ich die Größe sowohl screenshots der gleichen Größe. Dann sehe ich, dass sowohl Schriftgröße als auch die Bilder, die Abmessungen sind genau gleich auf beiden screenshots. Dies bedeutet, dass auf jedem Gerät-schriftart und ein Bild haben muss, verschiedene Dimensionen. Wie kann ich das tun?
InformationsquelleAutor user1988

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.