Layoutoptionen in Xamarin.iOS

  • Artikel

Es gibt zwei verschiedene Mechanismen zum Steuern des Layouts, wenn die Größe einer Ansicht geändert oder gedreht wird:

  • Autosizing : Der Inspektor für die Autosizing im Designer bietet eine Möglichkeit, die AutoresizingMask Eigenschaften festzulegen. Dadurch kann ein Steuerelement an den Rändern des Containers verankert und/oder dessen Größe korrigiert werden. Die Autosizing funktioniert in allen Versionen von iOS. Dies wird unten ausführlicher beschrieben.
  • Automatisches Layout : Ein Feature, das in iOS 6 eingeführt wurde und eine differenzierte Steuerung der Beziehungen der Ui-Steuerelemente ermöglicht. Es ermöglicht die Steuerung der Positionen von Elementen relativ zu anderen Elementen auf der Entwurfsoberfläche. Dieses Thema wird im Leitfaden "Automatisches Layout" mit dem Xamarin iOS-Designer ausführlicher behandelt.

Automatische Größenanpassung

Wenn ein Benutzer die Größe eines Fensters ändert, z. B. wenn das Gerät gedreht wird und sich die Ausrichtung ändert, ändert das System automatisch die Größe der Ansichten innerhalb dieses Fensters gemäß ihren Regeln für die automatische Größenanpassung. Diese Regeln können in C# mit der AutoresizingMask Eigenschaft oder UIView im Eigenschaftenpad der iOS-Designer festgelegt werden, wie unten dargestellt:

Screenshot: Eigenschaftenpad des I O S-Designers

Wenn ein Steuerelement ausgewählt ist, können Sie die Position und die Dimensionen des Steuerelements manuell angeben und das Verhalten der automatischen Skalierung auswählen. Wie im folgenden Screenshot dargestellt, können wir die Federn und Streben im Autoizing-Steuerelement verwenden, um die Beziehung der ausgewählten Ansicht zum übergeordneten Element zu definieren:

Screenshot: Autoizing-Steuerelement im Eigenschaftenpad des I O S-Designers

Durch das Anpassen einer Feder wird die Größe der Ansicht basierend auf der Breite oder Höhe der übergeordneten Ansicht geändert. Durch das Anpassen einer Streben behält die Ansicht einen konstanten Abstand zwischen sich selbst und ihrer übergeordneten Ansicht an diesem bestimmten Rand bei.

Diese Einstellungen können auch im Code festgelegt werden:

textfield1.Frame = new RectangleF(15, 277, 79, 27);
textfield1.AutoresizingMask = UIViewAutoresizing.FlexibleRightMargin | UIViewAutoresizing.FlexibleBottomMargin;

Um die Autosizing-Einstellungen zu testen, aktivieren Sie verschiedene Unterstützte Geräteausrichtungen in den Projektoptionen:

Autosizing Settings

Im Code behind können wir den folgenden Code verwenden, wodurch die größe der beiden Textsteuerelemente horizontal geändert wird:

textview1.AutoresizingMask = UIViewAutoresizing.FlexibleWidth;
textfield1.AutoresizingMask = UIViewAutoresizing.FlexibleWidth;
imageview1.AutoresizingMask = UIViewAutoresizing.FlexibleTopMargin | UIViewAutoresizing.FlexibleLeftMargin;

Wir können die Steuerelemente auch mithilfe der Designer anpassen. Wenn Sie die Streben wie unten dargestellt auswählen, bleibt das Bild rechtsbündig, ohne am unteren Rand der Ansicht abgeschnitten zu werden:

Screenshot: Autoizing-Steuerelement mit ausgewählter Links- und Unterseite

Diese Screenshots zeigen, wie die Steuerelemente die Größe ändern oder sich neu positionieren, wenn der Bildschirm gedreht wird:

Screenshot: Anzeige eines mobilen Geräts im Hoch- und Querformat mit angepasstem Text und Grafik

Beachten Sie, dass sich die Textansicht und das Textfeld aufgrund der FlexibleWidth Einstellung so erstrecken, dass sie den linken und rechten Rand beibehalten. Das Bild hat den oberen und linken Rand flexibel, was bedeutet, dass der untere und rechte Rand beibehalten wird, sodass das Bild im Blick bleibt, wenn der Bildschirm gedreht wird. Komplexe Layouts erfordern in der Regel eine Kombination dieser Einstellungen für jedes sichtbare Steuerelement, um die Benutzeroberfläche konsistent zu halten und zu verhindern, dass steuerelemente sich überlappen, wenn sich die Grenzen der Ansicht ändern (aufgrund von Drehung oder einem anderen Größenänderungsereignis).