VS for Mac-使用“自动布局"获得横向和纵向视图 [英] VS for Mac - Using Autolayout for landscape and portrait views

问题描述

我花了整整一天时间搜索各种youtube视频和google等，所以我需要帮助！

I need help, having spent the day searching through various youtube videos and google etc I've hit that wall!

我使用的是Visual Studio for Mac，基本上，登录"屏幕在人像"中看起来不错，但在风景"中却不太好，所以我想通过重新设计的屏幕来显示不同的视图，尤其是风景".

I'm using Visual Studio for Mac and basically, my Logon screen looks good in Portrait but not so in Landscape so I want to show a different view with a redesigned screen especially for Landscape.

Microsoft论坛建议我使用OnSizeAllocated事件来确定听上去的方向，但我只是无法弄清楚如何做到这一点.

Microsoft Forums suggest that I use the OnSizeAllocated event to work out the orientation which sounds fine but I just can't work out how you do that.

我在View Controller上没有任何事件.我有一个视图，并且没有任何事件.如果我尝试将代码手动添加到ViewControllers类中，它将不喜欢它.如果我尝试在Main.cs中添加它，则不喜欢它，或者AppDelegate.cs它不喜欢它.

I have on View Controller which doesn't have any events. I have one View and that doesn't have any events. If I try to add the code in manually into the ViewControllers class it doesn't like it. If I try and add it in Main.cs it doesn't like it or AppDelegate.cs it doesn't like it.

设计与方向匹配的屏幕必须像呼吸空气一样，但是为了我的生命，我只是无法解决问题，我在这里令人窒息！

Designing screens to match the orientation must be like breathing air but for the life of me I just can't work it out and I'm suffocating here!

我想念什么?

推荐答案

因此，从注释中，我看到您正在使用Visual Studio for Mac(VS4M)作为您的IDE，并且您正在使用单视图模板应用程序，但是试图使视图适应横向和纵向.

So from the comments, I see you're using Visual Studio for Mac (VS4M) as your IDE and you are using the single view template app but are trying to get the view to adapt to landscape and portrait.

如果在VS4M中打开情节提要，您应该会看到类似以下内容的内容:

If you open your storyboard in VS4M you should see something like this:

我在下一张图像中添加了一些控件(图像，用户名，密码和登录按钮)，目的只是为了展示如何在VS4M

I have added some controls (image, username, password, and login button) in the next image just to show how I would create the layout using the iOS designer in VS4M

这里的关键是更改为风景，然后按Edit Traits> Edits apply to Compact Height only

The key point here is to change to landscape and the press the Edit Traits > Edits apply to Compact Height only

您可以在此处上了解更多有关尺寸等级的信息.一个很好的形象可以引起您的注意:

You can read more about Size Class (Compact/Regular) here but this is a good image to get your head around it:

下一步是对用户名，密码和登录按钮进行自动布局.

The Next step is to do the Autolayout for the username, password and login button.

然后，您将获得如下视图:

You'll then have a view like this:

我已将此文件上传到我的GitHub，以便您可以查看链接是否为

I have uploaded this to my GitHub just so you can have a look if you want the link is here.

自动布局是Xamarin.iOS开发中最难解决的领域之一，因此我不会灰心.另外，此链接可以获取有关使用VS4M自动布局的更多信息

Autolayout is one of the more difficult areas to get your head round in Xamarin.iOS development so I wouldn't be disheartened. Also, this link is good for more information on Autolayout with VS4M

如果您不是在自动布局中而是在代码中进行操作，那么如果您可以发布该代码，我可以寻求帮助.

If you are not doing in Autolayout but rather in code then if you could post that code, I can take a look and help.

更新-自适应布局

因此，要实际更改/删除景观/肖像的某些限制，您必须使用已安装的属性.在这里，我将图像的中心约束更改为仅在Any宽度和Regular高度(即纵向)下安装，然后在任何"宽度和紧凑"高度下安装其左(前导)约束(又称风景)

So to actually change/remove certain constraints for landscape/portrait you have to use the installed property. Here I am changing the image's center constraint to only be installed when in Any width and Regular height (aka portrait) and then having its left(leading) constraint to be installed when in 'Any' width and 'Compact' height (aka landscape)

然后变得更好，我将登录名和密码文本框移到了它的右侧.首先，我必须使当前的用户名"文本框垂直对齐约束仅安装在宽度Any和高度Regular(纵向)上，然后在宽度Any和高度Compact中为超级视图的顶部创建一个新的顶部约束. (风景).

Then to make it nicer I moved the login and password text boxes to the right of that. Firstly I have to make the current Username textbox Vertical Alignment constraint installed only on width Any and height Regular(portrait) then create a new top constraint to the top of the super view in width Any and height Compact(landscape).

然后最后一位是仅在宽度Any和高度Regular(纵向)上安装用户名和密码文本框的前导(左)水平间距约束，并创建两个新的前导(左)水平间距约束设置为安装在宽度Any和高度Compact(横向)上的图像的尾随(右侧)，请记住使这些约束的常数为0(然后按键盘上的Enter来设置值)，如下所示:

Then the last bit is to have the leading(left) Horizontal Spacing constraints of the Username and password textboxes installed only on width Any and height Regular(portrait) and create two new leading(left) Horizontal Spacing constraints set to the trailing(right) of the image installed on width Any and height Compact(landscape), Rememeber to make the constant of those constraints 0 (and hit enter on your keyboard to set the value) like so:

然后该应用将如下所示:

Then the app will look like this:

我已通过此实现更新了 GitHub 解决方案.对不起所有图片，但我认为最好用图片来解释自动布局".

I have updated my GitHub solution with this implementation. Sorry for all the images but I think its best to explain Autolayout with images.

这篇关于VS for Mac-使用“自动布局"获得横向和纵向视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！