Wie erstellt man ein solches Layout in Xamarin?

Question

Ich bin neu in Xamarin und iOS-Entwicklung. Ich habe Probleme mit der Erstellung eines Layouts wie auf dem Bild unten.

http://cdn.vanillaforums.com/xamarin.vanillaforums.com/FileUpload/6f/7eb37b9abb0d8cdcef8d238d1a4b2f.png

Ich möchte oben und unten und eine flexible in der Mitte zwei Ansichten mit fester Größe haben. Ich möchte, dass die mittlere Ansicht flexibel ist, weil ich dasselbe Layout auf 3,5- und 4-Zoll-Bildschirmen haben möchte.

Können Sie mir bitte einige Hinweise geben, wie Sie das erreichen?

Answer 1

Wenn Sie die Rotation nicht unterstützen möchten, können Sie ein festes Layout erstellen, da sich die Bildschirmgröße während der Laufzeit nicht ändert. In diesem Fall platzieren Sie einfach die obere Ansicht in der oberen, unteren Ansicht in View.Bounds.Height - requiredBottomViewHeight und die mittlere Ansicht machen so hoch wie die Elternansicht minus die Summe der Höhen von unten und oben.

Wenn Sie Drehung, entweder mit:

• AutoResizingMask
• Aufschalten layoutSubviews()
• oder Auto-Layout. Um das automatische Layout zu vereinfachen, gibt es eine große Hilfsklasse von Frank Krueger named EasyLayout. Sie finden Beispiele here.

Der empfohlene Weg, um es in diesen Tagen zu tun, ist die Verwendung von Auto-Layout und Einschränkungen. In diesem einfachen Fall können Sie jedoch automatisch Größenänderungsmasken verwenden. Der folgende Code generiert das gewünschte Layout und unterstützt auch die Rotation. Sie können den gleichen Effekt im Storyboard-Designer oder im Interface Builder erzeugen, indem Sie die Masken zur automatischen Größenänderung wie unten gezeigt einstellen.

public override void ViewDidLoad() 
     { 
      var topView = new UIView { 
       BackgroundColor = UIColor.Red, 
       Frame = new RectangleF(0, 0, this.View.Bounds.Width, 50), 
       AutoresizingMask = UIViewAutoresizing.FlexibleWidth 
      }; 
      var bottomView = new UIView { 
       BackgroundColor = UIColor.Blue, 
       Frame = new RectangleF(0, this.View.Bounds.Height - 50, 320, 50), 
       AutoresizingMask = UIViewAutoresizing.FlexibleTopMargin | UIViewAutoresizing.FlexibleWidth 
      }; 
      var middleView = new UIView { 
       Frame = new RectangleF(0, topView.Frame.Bottom, this.View.Bounds.Width, this.View.Bounds.Height - topView.Bounds.Height - bottomView.Bounds.Height), 
       BackgroundColor = UIColor.Green, 
       AutoresizingMask = UIViewAutoresizing.FlexibleHeight | UIViewAutoresizing.FlexibleWidth 
      }; 
      this.View.AddSubviews (topView, middleView, bottomView); 

} 

Answer 2

Am besten wäre es, einen UINavigationController für das grundlegende Formular zu verwenden. Ich habe herausgefunden, dass dies die beste Lösung ist, um die obere Leiste und die weitere Navigation in der App zu handhaben. Rufen Sie dann die Methode SetToolbarHidden auf. Jetzt haben Sie die zwei Bars. Für den Inhaltsbereich nehmen Sie einen uiviewcontroller. Rufen Sie dann am UINavigationController die Methode PushViewController mit dem uiviewcontroller als Parameter auf. Das ist es. PS Entschuldigung für das schlechte Layout meiner Antwort Ich tat dies mit meinem Smartphone.