如何为iOS以编程方式正确地将UI元素添加到视图中？

Question

I am using Xamarin.iOS in Visual Studio 2013 to build a simple user interface programmatically in C#. I know it's much easier to use the designer view, but it's not working for me right now.

So far, I have managed to get the MPMoviePlayerController and the TextView showing, but the TextView won't scroll, even though I added requirements to do so.

The TextView overlaps the video as I can hear audio playing in the background. And the UILabel is no where to be seen.

I thought adding each UI element as a subView of the main View, will show the elements in a stack order displaying the video at the top, label right under the video and textview with scroll.

In a way, I want them to sort of stack each other layer by layer. What am I not doing right or am missing something?

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

Im guessing you want it like this:

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);

        }
    }
}

Basically you were almost there, when you are setting the frame for the view with a CGRect its new CGRect(x-coord, y-coord, width, height) . As all of the views were 0,0 they were place on top of each other. Also the UITextView wont scroll as you have made its height three times the height of the screen. If you want it to scroll the content(text) needs to extend past the frame.

iOS9 introduced UIStackView See this video from WWDC 2015: https://developer.apple.com/videos/wwdc/2015/?id=218 but if you are supporting iOS7/8 there are some third party implementations. Xamarin.Forms has a stacklayout so that might be an option too.

An improved solution would be to not set the frame of your views and rather use auto layout constraints like so:

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)
            });

        }
    }
}

This then lets your view adapt to the screen size, eg layout on iphone4,5,6,6+ iPad properly. and your UITextView will scroll if its too big.

A Good tutorial on auto layout here