Erstellen eines prozentualen iOS-Layouts

Ich versuche zu replizieren, ein layout, das ich derzeit habe in einem Android-Anwendung, aber ich weiß nicht, wie man es in iOS, vor allem wegen den großen des iPhone 5.

Ich wissen, wie dies zu erklären in "Android" Bedingungen, aber ich habe versucht die letzten Tage zu tun, diese in iOS, aber ich kann es nicht ganz verstanden, um zu arbeiten.

Beste Weg, es zu erklären:

Möchte ich zwei layouts. Die top layout nehmen muss, bis 40% - und der bottom muss, dauert bis 60%.
Im top-layout, müssen Sie drei Schaltflächen, füllen Sie alle Platz möglich (im Wesentlichen 1/3 des Raumes)
In der unteren layout, ich will eine Bildansicht, und dann ein textView.

Dies ist eine Farbe mockup. Ist das möglich zu tun in iOS? Ich fühle, dass layouts sind viel schwerer zu erstellen als bei android.

Erstellen eines prozentualen iOS-Layouts

InformationsquelleAutor der Frage EGHDK | 2013-08-11

70

Mit Xcode 6.0 können Sie nun bestimmen, die proportional der Breite oder Höhe in den Interface Builder.
Schritte für die prozentuale Höhe von superview:

Während sowohl das Kind ansehen und seine superview ausgewählt sind, fügen Sie eine "gleiche Höhe" - Einschränkung (oder "gleich Breite", wenn Sie möchten, eine proportionale Breite).

Dann ändern Sie den "Multiplikator" von der Einschränkung, die Sie gerade Hinzugefügt, um den Anteil, den Sie benötigen. Zum Beispiel, um 50%, es zu ändern 2.

Wenn Sie mögen, geben Sie den Blick nach innen als Prozentsatz der superview, können Sie rückgängig machen, die Elemente, die in der Einschränkung:

Nun kann man mit einem Multiplikator von 0.5 (oder jede andere Anteil, den Sie brauchen):

In Ihrem spezifischen Fall haben, können Sie definieren, auf "gleicher Höhe" constraint zwischen dem 2 Kind Ansichten, und ändern Sie den Multiplikator auf 1,5 (unten als 1.5 die Größe von oben) oder 0.6667, wenn die Positionen vertauscht sind.

InformationsquelleAutor der Antwort GK100
37

Im Gegensatz zu den anderen Antworten, ich denke, du solltest wenigstens daran denken, die auto-layout-system. Es wurde entwickelt, um es einfacher zu bauen, vorhersagbaren layouts, wie Sie Sie beschrieben haben. Autolayout ist beherrscht von Einschränkungendass Sie auf die Ansichten im layout. Können Sie erstellen, die diese Einschränkungen visuell oder programmgesteuert. Optisch erste Ansicht würden z.B. so Aussehen:

Den blauen Linien, die Sie sehen, es gibt eine Reihe von Randbedingungen, die angeben, dass die inter-Schaltfläche Abstand, der Raum um die Tasten, und die Höhen und breiten der Tasten. Sie können sehen, ein paar Einschränkungen, die eine = auf Sie-die ich ausgewählt habe, alle drei Tasten und gab Ihnen eine "gleiche Höhe" - Einschränkung.

Gibt es ein nettes visual format-syntax , können Sie beschreiben Einschränkungen als strings. Nehmen Sie sich eine minute, um Blick auf das verknüpfte Dokument-es wird nicht viel länger dauern als das lernen genug, dass Sie Lesen können die Saiten. Zum Beispiel, die Ihre top-layout kann angegeben werden, wie diese:
```
V:[button1]-[button2(==button1)]-[button3(==button1)]
```
Die eingeklammerten ==button1 sagt, dem layout system machen button2 und button3 die gleiche Höhe wie button1. Die - zeigt an, dass der standard-Zeilenabstand sollte verwendet werden, zwischen den Tasten, können Sie angeben, in welchem Abstand, wenn Sie wollen. Für 10-Punkt-Abstand, dies zu tun:
```
V:|-10-[button1]-10-[button2(==button1)]-10-[button3(==button1)]-10-|
```
Sobald man so einen string, Sie können schalten Sie es in einen constraint mit der Methode: +[NSLayoutConstraint constraintsWithVisualFormat:options:metrics:views:]

Einige Einschränkungen können nicht angegeben werden, entweder visuell oder mit den Saiten wie oben beschrieben. Chief unter diesen sind diejenigen, wo Sie wollen, um eine Konstante (aber ungleiche) Beziehung zwischen zwei Ansichten, wie Sie mit Ihren oberen und unteren layouts. Sie wollen eine von denen nehmen bis zu 40% der verfügbaren vertikalen Raum, und die andere zu 60%. Verwenden Sie dazu die Methode: +[NSLayoutConstraint constraintWithItem:attribute:relatedBy:toItem:attribute:multiplier:constant:]. Zum Beispiel:
```
NSLayoutConstraint *c = [NSLayoutConstraint constraintWithItem:bottomView
                                                     attribute:NSLayoutAttributeHeight
                                                     relatedBy:NSLayoutRelationEqual
                                                        toItem:topView
                                                    multiplier:1.5
                                                      constant:0];
```
Die Ihnen eine Einschränkung, setzt die Höhe von bottomView bis 1,5-fache der Höhe der topView (das ist, was Sie wollen, da 60/40 = 1.5).

Wenn Sie Einschränkungen programmgesteuert, können Sie Sie in die entsprechende Ansicht beim erstellen (oder laden) die view-Hierarchie. Ihr view-controller ist -viewDidLoad Methode ist ein schöner Ort, das zu tun.

InformationsquelleAutor der Antwort Caleb

Ich weiß nicht, über die Verwendung von autolayout, wie ich dont verwenden Sie es, aber im code ohne Sie könnte man erstellen Sie zwei UIViews und Ihre frames zu:

CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height * 0.4f);
CGRectMake(0, self.view.frame.size.height * 0.4f, self.view.frame.size.width, self.view.frame.size.width * 0.6f);

Und dann in der Ansicht von oben, können Sie die Schaltflächen mit Rahmen (vorausgesetzt, die Sicht ist genannt view1):

CGRectmake(0, 0, self.view.frame.size.width, view1.frame.size.height * (1.0f/3.0f));
CGRectmake(0, view1.frame.size.height * (1.0f/3.0f), self.view.frame.size.width, view1.frame.size.height * (1.0f/3.0f));
CGRectmake(0, view1.frame.size.height * (2.0f/3.0f), self.view.frame.size.width, view1.frame.size.height * (1.0f/3.0f));

InformationsquelleAutor der Antwort Jsdodgers

1

Müssen Sie ein paar Einschränkungen machen, damit es funktioniert. Also hier ist eine kurze Beschreibung, was Sie brauchen:
1. Müssen Sie den horizontalen Abstand Einschränkungen. Wenn für die Ansicht von oben, denn es hat null Abstand an die Spitze. Ein weiteres für die Ansicht von unten, weil die Entfernung zu den unten null ist. Eine weitere Einschränkung zwischen den beiden Ansichten, denn Sie haben auch null Abstand zwischen einander.
2. Das gleiche Prinzip wird angewendet, um die Schaltflächen in der Ansicht von oben. Setzen Sie Ihre buttons mit der richtigen Größe in der oberen Ansicht, und fügen Sie ähnliche Einschränkungen, aber jetzt haben Sie drei Elemente, die (anstelle von zwei). Also Einschränkungen für null-Abstand nach oben, unten und zwischen den Tasten.
Wenn Sie Komponenten hinzufügen, um Ihre anzeigen, erstellt es ein paar Einschränkungen für Sie. Hinzufügen eines oben und das andere unten, wird es schaffen beide Abstand oben und Abstand zwischen einander. Um Sie zu Bearbeiten, gehen Sie einfach zu Inspektor, der fünfte Reiter (Lineal) und Sie werden sehen, die Liste der Einschränkungen. Schließlich, möchten Sie vielleicht, um zu versuchen, um Einschränkungen-Menü (ich weiß nicht, ob es ein bekannter name für diese). Es ist auf der unteren rechten Ecke des Interface Builder Leinwand. Siehe Bild:

Bitte, lassen Sie mich wissen, wenn Sie weitere Hilfe benötigen.

InformationsquelleAutor der Antwort rocir
0

Dies kann automatisch durchgeführt werden, wenn die Verwendung von Storyboards (müssen Sie möglicherweise eine Einstellung ändern, oder zwei hier und dort). Beim erstellen der GUI ist, können Sie Umschalten zwischen Bildschirm-Größen (3,5 und 4 Zoll), um sicherzustellen, dass es gut Aussehen wird auf beide. Finden Sie die Antwort auf diese Frage.

Sie könnten auch dieses tutorial. Das sollte Ihnen eine Idee, wie man die Arbeit mit dem GUI-layouts.

InformationsquelleAutor der Antwort CaptJak

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.