如何以编程方式将UI元素正确添加到iOS视图中
本文关键字：添加 iOS 视图 元素 编程 方式 UI | 更新日期: 2023-09-27 17:59:24
我在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);
}
}
}
我猜你想要这样的：
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有一个堆栈，所以这可能也是一个选择。
一个改进的解决方案是不设置视图的框架，而是使用自动布局约束，如
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上的布局。如果CCD_ 5太大，它会滚动。
关于自动布局的好教程