如何以编程方式为iOS正确添加UI元素？

Question

我在Visual Studio 2013中使用Xamarin.iOS在C＃中以编程方式构建一个简单的用户界面。我知道使用设计器视图要容易得多，但它现在对我不起作用。

到目前为止，我已经设法获得MPMoviePlayerController和TextView显示，但TextView不会滚动，即使我添加了要求。

TextView重叠视频，因为我可以听到在后台播放的音频。 UILabel无处可见。

我认为将每个UI元素添加为主视图的子视图，将以堆栈顺序显示元素，在顶部显示视频，在视频和文本视图下方标记滚动。

在某种程度上，我希望它们可以逐层堆叠。我做得不对或错过了什么？

using System;
using System.Drawing;

using Foundation;
using UIKit;
using MediaPlayer;

public partial class VideoViewController : UIViewController
    {
        MPMoviePlayerController moviePlayer;
        UILabel label;
        UITextView textView;
        public VideoViewController() : base("VideoViewController", null)
        {
        }

        public override void DidReceiveMemoryWarning()
        {
            // Releases the view if it doesn't have a superview.
            base.DidReceiveMemoryWarning();

            // Release any cached data, images, etc that aren't in use.
        }

        public override void ViewDidLoad()
        {
            base.ViewDidLoad();

            // Perform any additional setup after loading the view, typically from a nib.
            moviePlayer = new MPMoviePlayerController(NSUrl.FromString("http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4")); // Use FromString() to play video directly from web.
            moviePlayer.View.Frame = new CoreGraphics.CGRect(0, 20, this.View.Frame.Size.Width, 180); // size of the video frame
            moviePlayer.ScalingMode = MPMovieScalingMode.AspectFit; // show the video relative to the video size dimensions
            moviePlayer.PrepareToPlay();
            moviePlayer.Play();
            this.View.AddSubview(moviePlayer.View); // add the view after video starts playing to display it

            // UILabel
            label = new UILabel();
            label.Text = "Tutorial";
            label.Font.WithSize(36);
            this.View.AddSubview(label.ViewForBaselineLayout);

            // UITextView
            textView = new UITextView();
            textView.Editable = false;
            textView.ScrollEnabled = true;
            textView.UserInteractionEnabled = true;
            textView.ViewForBaselineLayout.Frame = new CoreGraphics.CGRect(0, 0, this.View.Frame.Size.Width, this.View.Frame.Size.Height*3);
            textView.Text = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. [shorten text for this post] "; // shorten text for this post
            this.View.AddSubview(textView);

        }
    }
}

Answer 1

我猜你想要这样：

using System;
using System.Drawing;

using Foundation;
using UIKit;
using MediaPlayer;
using CoreGraphics;

namespace CHANGE_THIS_TO_YOUR_NAME_SPACE
{
    public partial class VideoViewController : UIViewController
    {
        MPMoviePlayerController moviePlayer;
        UILabel label;
        UITextView textView;

        public VideoViewController () : base ("VideoViewController", null)
        {
        }

        public override void DidReceiveMemoryWarning ()
        {
            // Releases the view if it doesn't have a superview.
            base.DidReceiveMemoryWarning ();

            // Release any cached data, images, etc that aren't in use.
        }

        public override void ViewDidLoad ()
        {
            base.ViewDidLoad ();

            // Perform any additional setup after loading the view, typically from a nib.
            moviePlayer = new MPMoviePlayerController (NSUrl.FromString ("http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4")); // Use FromString() to play video directly from web.
            moviePlayer.View.Frame = new CGRect (0, 20, View.Frame.Size.Width, 180); // size of the video frame
            moviePlayer.ScalingMode = MPMovieScalingMode.AspectFit; // show the video relative to the video size dimensions
            moviePlayer.PrepareToPlay ();
            moviePlayer.Play ();
            View.Add (moviePlayer.View); // add the view after video starts playing to display it

            // UILabel
            label = new UILabel (new CGRect(0,200, View.Frame.Size.Width, 50));
            label.Text = "Tutorial";
            label.Font.WithSize (36);
            View.Add (label.ViewForBaselineLayout);

            // UITextView
            textView = new UITextView ();
            textView.Editable = false;
            textView.ScrollEnabled = true;
            textView.UserInteractionEnabled = true;
            textView.ViewForBaselineLayout.Frame = new CGRect (0, 250, View.Frame.Size.Width, View.Frame.Size.Height * 3);
            textView.Text = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. [shorten text for this post] "; // shorten text for this post
            View.Add (textView);

        }
    }
}

当您使用CGRect new CGRect(x-coord, y-coord, width, height)为视图设置框架时，基本上您几乎就在那里。由于所有观点均为0,0，因此它们位于彼此之上。 UITextView也不会滚动，因为它的高度是屏幕高度的三倍。如果你想要它滚动，内容（文本）需要延伸到框架之外。

iOS9推出UIStackView 观看来自WWDC 2015的视频：https://developer.apple.com/videos/wwdc/2015/?id=218但如果您支持iOS7 / 8，则会有一些第三方实施。 Xamarin.Forms有一个stacklayout，所以也可能是一个选项。

改进的解决方案是不设置视图的框架，而是使用自动布局约束，如下所示：

using System;
using System.Drawing;

using Foundation;
using UIKit;
using MediaPlayer;
using CoreGraphics;

namespace CHANGE_THIS_TO_YOUR_NAME_SPACE
{
    public partial class VideoViewController : UIViewController
    {
        MPMoviePlayerController moviePlayer;
        UILabel label;
        UITextView textView;

        public VideoViewController () : base ("VideoViewController", null)
        {
        }

        public override void DidReceiveMemoryWarning ()
        {
            // Releases the view if it doesn't have a superview.
            base.DidReceiveMemoryWarning ();

            // Release any cached data, images, etc that aren't in use.
        }

        public override void ViewDidLoad ()
        {
            base.ViewDidLoad ();

            // Perform any additional setup after loading the view, typically from a nib.
            moviePlayer = new MPMoviePlayerController (NSUrl.FromString ("http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4")); // Use FromString() to play video directly from web.
            moviePlayer.View.TranslatesAutoresizingMaskIntoConstraints = false;
//          moviePlayer.View.Frame = new CGRect (0, 20, View.Frame.Size.Width, 180); // size of the video frame
            moviePlayer.ScalingMode = MPMovieScalingMode.AspectFit; // show the video relative to the video size dimensions
            moviePlayer.PrepareToPlay ();
            moviePlayer.Play ();
            View.Add (moviePlayer.View); // add the view after video starts playing to display it

            // UILabel
//          label = new UILabel (new CGRect(0,200, View.Frame.Size.Width, 50));
            label = new UILabel ();
            label.TranslatesAutoresizingMaskIntoConstraints = false;
            label.Text = "Tutorial";
            label.Font.WithSize (36);
            View.Add (label.ViewForBaselineLayout);

            // UITextView
            textView = new UITextView ();
            textView.TranslatesAutoresizingMaskIntoConstraints = false;
            textView.Editable = false;
            textView.ScrollEnabled = true;
            textView.UserInteractionEnabled = true;
//          textView.ViewForBaselineLayout.Frame = new CGRect (0, 250, View.Frame.Size.Width, View.Frame.Size.Height * 3);
            textView.Text = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. [shorten text for this post] "; // shorten text for this post
            View.Add (textView);

            SetUpAutoLayoutConstraints ();
        }

        private void SetUpAutoLayoutConstraints()
        {
            View.AddConstraints (new [] {
                NSLayoutConstraint.Create(moviePlayer.View, NSLayoutAttribute.Width, NSLayoutRelation.Equal, View, NSLayoutAttribute.Width, 1, 0),
                NSLayoutConstraint.Create(moviePlayer.View, NSLayoutAttribute.Height, NSLayoutRelation.Equal, View, NSLayoutAttribute.Width, 0.5625f, 0), // setting it to this to keep your aspect ratio
                NSLayoutConstraint.Create(moviePlayer.View, NSLayoutAttribute.Top, NSLayoutRelation.Equal, View, NSLayoutAttribute.Top, 1, 20),
                NSLayoutConstraint.Create(moviePlayer.View, NSLayoutAttribute.Left, NSLayoutRelation.Equal, View, NSLayoutAttribute.Left, 1, 0)
            });

            View.AddConstraints (new [] {
                NSLayoutConstraint.Create(label, NSLayoutAttribute.Width, NSLayoutRelation.Equal, View, NSLayoutAttribute.Width, 1, 0),
                NSLayoutConstraint.Create(label, NSLayoutAttribute.Height, NSLayoutRelation.Equal, null, NSLayoutAttribute.NoAttribute, 1, 50),
                NSLayoutConstraint.Create(label, NSLayoutAttribute.Top, NSLayoutRelation.Equal, moviePlayer.View, NSLayoutAttribute.Bottom, 1, 0),
                NSLayoutConstraint.Create(label, NSLayoutAttribute.Left, NSLayoutRelation.Equal, View, NSLayoutAttribute.Left, 1, 0)
            });

            View.AddConstraints (new [] {
                NSLayoutConstraint.Create(textView, NSLayoutAttribute.Width, NSLayoutRelation.Equal, View, NSLayoutAttribute.Width, 1, 0),
                NSLayoutConstraint.Create(textView, NSLayoutAttribute.Bottom, NSLayoutRelation.Equal, View, NSLayoutAttribute.Bottom, 1, 0),
                NSLayoutConstraint.Create(textView, NSLayoutAttribute.Top, NSLayoutRelation.Equal, label, NSLayoutAttribute.Bottom, 1, 0),
                NSLayoutConstraint.Create(textView, NSLayoutAttribute.Left, NSLayoutRelation.Equal, View, NSLayoutAttribute.Left, 1, 0)
            });

        }
    }
}

然后，您的视图会适应屏幕大小，例如在iphone4,5,6,6 + iPad上正确布局。如果它太大，你的UITextView会滚动。

关于自动布局的好教程here