Interface Builder: Wozu dient das Layout iOS 6/7 Deltas von UIView?


111

Ich habe gerade die Delta-Eigenschaft von iOS 6/7 bemerkt, die sich im Strukturlayout von UIView befindet.

Wofür ist das und warum fehlt dies in AutoLayout?

Geben Sie hier die Bildbeschreibung ein

Antworten:


83

Dies bezieht sich tatsächlich auf das Delta zwischen der Layoutposition von iOS6 bis iOS7.

In iOS7 können einige Ansichten die Statusleiste ausblenden oder transparent machen. Tatsächlich wird sie Ihrer Ansicht überlagert. Wenn Sie also ein UI-Element unter iOS6 auf (0.0, 0.0) setzen, wird es unter der Statusleiste angezeigt, unter iOS7 jedoch teilweise unter der Statusleiste. In diesem Fall möchten Sie ein Delta, das der Höhe der Statusleiste (20,0 Punkte) entspricht, damit das Layout in iOS6 und iOS7 gleich aussieht.

Ich glaube, dass dies nicht benötigt wird, wenn Sie Autolayout verwenden, aber dann verlieren Sie natürlich die iPad1-Unterstützung, die viele von uns zu diesem Zeitpunkt nicht zugeben möchten.


27
Für mich war es das Delta von iOS 7 auf iOS 6. Ich habe meine Elemente um 20 Punkte gesenkt und dann für Delta Y einen
Wert von

Dies ist besonders nützlich bei UIProgressView, das in iOS 7 viel schlanker ist
Lee Probert

108

Hinweis: Ich habe diese Frage vor einiger Zeit bemerkt, aber ich poste meine Antwort jetzt nur, weil die NDA aufgehoben wurde

Warum wird es für AutoLayout nicht angezeigt?

Wie Sie vielleicht bemerkt haben, bringt iOS 7 ein ganz neues Aussehen. Das Aussehen von UI-Elementen hat sich geändert, aber auch einige ihrer Größen (oder Metriken im Allgemeinen). Dies kann dazu führen, dass das Interface-Design sowohl für iOS 7 als auch für seine Vorgänger ein wenig schmerzhaft ist.

Apples offizielle Linie ist die Verwendung von AutoLayout, um dieses Problem zu lösen. Dies sollte den Aufwand für das Layout von UI-Elementen für Sie erheblich verringern. Manchmal ist es nicht einfach, dies zu integrieren, insbesondere wenn Sie iOS 5 aus geschäftlichen Gründen weiterhin unterstützen müssen oder Ihre Schnittstellen so verwaltet werden, dass die Implementierung von AutoLayout schwierig wird. Als solches scheint Apple eine Möglichkeit geboten zu haben, Ihre Arbeit ein bisschen einfacher zu machen, wenn Sie in diese Nischenkategorie fallen, und sie haben dies iOS 6/7 Deltas genannt.

Ok, was macht es dann?

Während die Bezeichnung in Interface Builder etwas unklar ist, was 'Delta' in diesem Zusammenhang bedeutet, ist der in der .xib-Datei enthaltene Code, der dieser Funktion entspricht, etwas klarer:

<inset key="insetFor6xAndEarlier" minX="-50" minY="-100" maxX="-50" maxY="300"/>

Der Schlüsselname gibt insetFor6xAndEarlierexplizit an, was dies bewirkt. Sie können alternative Einfügungen für UI-Elemente bereitstellen, wenn diese auf den Vorgängern von iOS 7 ausgeführt werden. Das Obige definiert beispielsweise die folgende Deltaänderung:

x: 50
y: 100
width: -100
height: 200

Während die in der .xib gespeicherten Werte nicht direkt den angegebenen Werten entsprechen, besteht eine Korrelation zwischen ihnen.

x: -minX
y: -minY
width: minX + maxX
height: minY + maxY

Die folgenden Bilder zeigen diese Änderung visuell. Es ist ein ziemlich extremes Beispiel, aber es soll seine Fähigkeit demonstrieren. In der Praxis würde ich nur Delta-Änderungen von nur wenigen Pixeln erwarten.

iOS7-Ansicht

iOS6-Ansicht

Möglicherweise stellen Sie fest, dass die Werte für die iOS 6-Ansicht umgekehrt sind. Dies liegt daran, dass die Deltas relativ zu der Art der Ansicht sind, mit der Sie arbeiten. Wenn Sie für iOS 6 bearbeiten, sind die Deltas vorhanden, um das Element für iOS 7 korrekt zu transformieren (die Umkehrung des obigen Beispiels).

Um die verschiedenen Stile anzuzeigen, können Sie die Darstellung von Interface Builder basierend auf dem Betriebssystem ändern, auf dem es ausgeführt wird. Dies ist im File Inspector-> Interface Builder-Dokument (1. Registerkarte in der rechten Leiste) wie folgt enthalten:

Interface Style Switch

Existiert dies, wenn ich meine Schnittstelle von Hand codieren möchte?

Nicht direkt, aber Sie können den gleichen Effekt leicht erzielen, indem Sie die Betriebssystemversion in Ihrem Code bedingt überprüfen und die richtige Position / Größe entsprechend einstellen. Die Delta-Fähigkeit ist in Interface Builder vorhanden, da es keine einfache Möglichkeit gibt, eine bedingte Positionierung ohne Code durchzuführen, und der Zweck von Interface Builder darin besteht, möglichst viel Code für die Benutzeroberfläche aus dem Weg zu räumen.

Insgesamt...

Apple empfiehlt dringend, AutoLayout zu verwenden. Dies erleichtert Ihnen in den meisten Fällen das Leben. Wenn Sie es nicht verwenden können (aus den oben genannten Gründen), bieten Ihnen Deltas die Flexibilität, Ihre UI-Elemente basierend auf den Metriken des aktuellen Betriebssystems entsprechend zu positionieren, ohne sie manuell im Code neu positionieren zu müssen. Ein gutes Beispiel ist die Anpassung an das Fehlen einer Statusleiste, aber es gibt viele andere Anwendungsfälle.

Wenn Sie nur für iOS7 und höher entwickeln, müssen Sie diese Funktion natürlich nicht kennen / werden sie nicht entdecken. Nur wenn iOS6-Geräte Ihre Anwendung ausführen müssen, wenn sie mit dem iOS7 SDK ohne Autolayout erstellt werden, benötigen Sie Deltas.

Zum Zeitpunkt des Schreibens (21. August) kann ich keine Dokumentation zu dieser Funktion oder Erwähnungen im WWDC-Material finden. Ich habe herumgespielt und nach ein wenig Recherche habe ich das entdeckt.


2
Vielen Dank WDUK
Kamar Shad

Bisher keine Eigenschaften, das musste ich wissen
Jasper

30

Ich weiß, dass dies bereits beantwortet wurde. Ich füge nur eine kleine Variante hinzu, in der Hoffnung, dass dies auch denjenigen helfen kann, die kein automatisches Layout verwenden und dennoch iOS 6.1 und frühere Versionen unterstützen möchten.

Lesen Sie das Apple Transition Guide - Unterstützung früherer Versionen

Wählen Sie "Anzeigen als" für "iOS 7.0 und höher".

Geben Sie hier die Bildbeschreibung ein

Basis-Benutzeroberfläche für iOS 7. Geben Sie für iOS 6 einen geeigneten Delta-Wert an. Verwenden Sie die Vorschau, um zu sehen, wie dies auf iOS 7- und iOS 6-Geräten gerendert wird.

Geben Sie hier die Bildbeschreibung ein

Schnelle Schritte:

Wählen Sie jedes unmittelbare untergeordnete Element der Stammansicht einzeln aus und addieren Sie 20 Pixel zu seinem Y-Wert.

Geben Sie hier die Bildbeschreibung ein

Wählen Sie dann alle unmittelbaren Kinder gemeinsam aus und geben Sie Delta Y als -20px an. Sie können dies auch im Batch oder einzeln tun.

Geben Sie hier die Bildbeschreibung ein


9

AutoLayout erfordert mindestens iOS 6.0. Wenn Sie iOS 5.0 unterstützen möchten, können Sie AutoLayout nicht verwenden.

Diese Deltas werden verwendet, um die Ansichtsposition bei verschiedenen iOS-Versionen anzupassen (hauptsächlich iOS 7 und iOS-Versionen unter 7).

Ich benutze diesen Wert, um mir zu helfen, dieses Bild zu mögen. Geben Sie hier die Bildbeschreibung ein


1
Wenn ich diese ändere, passiert überhaupt nichts. Ist ein weiterer Schritt erforderlich?
Recycelter Stahl

@RecycledSteel siehe meine Antwort hier: Link
Riskov

3

Um iOS 6/7 Delta in Aktion zu sehen, werde ich eine Demo mit einem SegmentedControl durchführen, das sowohl auf iOS 6- als auch auf iOS 7-Geräten ordnungsgemäß angezeigt wird.

Wählen Sie zunächst Ihre .Xib oder ViewController im Storyboard aus. Deaktivieren Sie "Autolayout verwenden" und wählen Sie " Als iOS 7 und höher anzeigen ".

Geben Sie hier die Bildbeschreibung ein

Platzieren Sie Ihr SegmentedControl im Bereich des Interface Builder so, dass sein Ursprung.y 20 ist. Wählen Sie in iOS 6/7 Delta -20 für DeltaY

Geben Sie hier die Bildbeschreibung ein

Dadurch wird das SegmentedControl sowohl auf iOS 6- als auch auf iOS 7-Geräten unter der Statusleiste angezeigt

Geben Sie hier die Bildbeschreibung ein Geben Sie hier die Bildbeschreibung ein

Weitere nützliche Zitate aus dem Entwicklerhandbuch zur iOS 7-Statusleiste

Deltas können für jede Ansicht individuell eingestellt werden und funktionieren wie erwartet. Wenn Ihr Storyboard oder Ihre Schreibfeder auf iOS 6 eingestellt ist, wird beim Festlegen der Deltas die Ansicht verschoben und / oder die Größe um den festgelegten Delta-Betrag geändert, wenn sie in iOS 7 ausgeführt wird. Alternativ, wenn Ihr Storyboard oder Ihre Schreibfeder angezeigt wird In iOS 7 werden die Deltas angewendet, wenn sie in iOS 6 ausgeführt werden


0

Wenn Sie AutoLayout verwenden, ist Delta nicht verfügbar. Versuchen Sie dies (getestet in iPhone 4s mit iOS6):

- (void) viewWillLayoutSubviews {

//iOS 6 workaround offset
if ([[[UIDevice currentDevice] systemVersion] floatValue] < 7) {

    self.view.clipsToBounds = YES;
    CGRect screenRect = [[UIScreen mainScreen] bounds];
    CGFloat screenHeight = 0.0;
    screenHeight = screenRect.size.width;
    CGRect screenFrame = CGRectMake(0, -20, self.view.frame.size.width,self.view.frame.size.height+10);

    self.view.frame = screenFrame;
}
}
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.