Xamarin iOS Autolayout:自动调整各种设备的宽度和垂直滚动，同时保持禁用水平滚动 [英] Xamarin iOS Autolayout: Resize width and vertical scroll automatically for various devices while keeping the horizontal scroll disabled

问题描述

我想创建一个有垂直但没有水平滚动的页面.它必须根据屏幕大小自动调整内容的宽度和垂直滚动.

I want to create a page which has a vertical but no horizontal scroll. It must adjust width of the content and vertical scroll automatically as per screen size.

类似的东西:

我不能使用 UITableView，因为我的页面可能不一定有同质的元素.它可以有 textfields 、 dropdown 等的组合.

I can not use UITableView since, my page may not have necessarily homogenous elements. It could have a combination of textfields , dropdown etc.

推荐答案

前面的回答很对，但一点也不对.确实我尝试过使用之前描述的方法来解决这个问题，但是为了让它发挥作用，我做了一些调整.

The previous answer was quite right, but not right at all. Indeed I tried to solve this problem using the method described before, but to make it work, I made some adjustments.

您的视图的层次结构必须如下:

Your view's hierarchy has to be as follow :

UIScrollview:

UIScrollview :

• 查看1
• 查看2
• 查看3

您不需要 UIScrollview 内的容器，因为除了它将是您不需要的额外视图之外，如果您使用此容器视图，则会出现问题在添加的视图中获取触摸事件时会遇到问题.

You don't need a container inside the UIScrollview, because apart the fact that it will be an extraview that you don't need, there is the problem that if you use this container-view you will get problem getting touch events in the views added.

那么，让我们一步一步来:

So, let's make a step-by-step process:

1. 将滚动视图添加到您的 viewController

第一步是将滚动视图添加到您的 viewController，我们可以通过以下方式简单地以编程方式完成此操作:

The first step is to add the scrollview to your viewController, and we can simply do this programmatically in the following way:

UIScrollView scrollView = new UIScrollView();
scrollView.TranslatesAutoresizingMaskIntoConstraints = false;
View.AddSubview(scrollView);

View 是您正在使用的 viewController(又名 Self.View)的主视图.注意将滚动视图的 TranslateAutoResizionMaskIntoConstrains 属性设置为 false，否则自动调整大小会弄乱您的约束.

View is the main-view of the viewController you are working in (aka Self.View). Put attention to set TranslateAutoResizionMaskIntoConstrains property of the scrollview to false, otherwise autoresizing will mess your constraints.

1. 向您的滚动视图添加约束(自动布局)

您需要确保您的布局会针对每个不同的 iPhone 屏幕进行调整，因此只需使用 auotlayout 将您的 scrollView 固定到 viewController 主视图(是下一个代码示例中使用的视图):

You need to ensure that you layout will adjust for every different iPhone-screen, so simply use auotlayout to pin your scrollView to the viewController main-view (is the View used in the next code sample):

scrollView.TopAnchor.ConstraintEqualTo(View.TopAnchor, 0).Active = true;
scrollView.BottomAnchor.ConstraintEqualTo(View.BottomAnchor, 0).Active = true;
scrollView.LeadingAnchor.ConstraintEqualTo(View.LeadingAnchor, 0).Active = true;
scrollView.TrailingAnchor.ConstraintEqualTo(View.TrailingAnchor, 0).Active = true;

通过这种方式，您的滚动视图被固定到主视图的边界.

In this way your scrollView is pinned to the bound of the main-view.

1. 创建要添加的视图

您需要创建将添加到 scrollView 的视图:

You need to create the view that you will add to the scrollView:

UIView viewToBeAdded = new UIView();
viewToBeAdded.TranslatesAutoresizingMaskIntoConstraints = false;
viewToBeAdded.Frame = new CGRect(0, 0, UIScreen.MainScreen.Bounds.Width, 200);

我们创建了一个新的 UIView，将其框架设置为与屏幕一样大 (UIScreen.MainScreen.Bounds.Width)，因此它不会水平滚动，并且具有任意高度(示例中为 200).

We have created a new UIView that setting its frame large as the screen (UIScreen.MainScreen.Bounds.Width) so it won't scroll horizontally, and with an arbitrary height (200 in the sample).

注意:即使在这种情况下，您也必须将 TranslateAutoResizingMaskProperty 设置为 false，否则会一团糟.

NOTE : even in this case you have to set TranslateAutoResizingMaskProperty to false, otherwise you will get a mess.

1. 将视图添加到滚动视图

下一步是将我们的新视图添加到滚动视图中，如下所示:

Next step is to add our new view to the scrollView as follow:

scrollView.AddSubview(view);

仅此而已.

1. 为添加的与滚动视图相关的视图设置约束

添加视图后，您必须说明与滚动视图相关的她的行为.我们假设我们将向 scrollView 添加几个视图，因此我们必须对 FIRST 视图、IN-BETWEEN 视图和 LAST 视图的行为进行区分.

Once you have added your view you have to said which will her behavior related to the scrollView. We assume that we will add several view to the scrollView, so we have to made a distinction, to the behavior of the FIRST view, the IN-BETWEEN views, and the LAST view.

为了清楚起见，我们假设我们只添加了 3 个视图，因此我们将拥有三种不同的情况.

So to be clear we assume that we are adding only 3 views, so we will have the three different cases.

第一视角

重要的是第一个视图必须固定到滚动视图的顶部，我们这样做如下:

The important thing is that the first view has to be pinned to the top of the scrollView, we do this as follow :

firstView.TopAnchor.ConstraintEqualTo(scrollView.TopAnchor, 0).Active = true;

然后我们设置其他约束:

and then we set the others constraints:

firstView.WidthAnchor.ConstraintEqualTo(firstView.Bounds.Width).Active = true;
firstView.HeightAnchor.ConstraintEqualTo(firstView.Bounds.Height).Active = true;

中间视图

中间视图(在我们的示例中为 secondView)需要固定到添加的前一个视图(在我们的示例中为第一个视图).所以我们这样做:

The in between views (in our sample the secondView) need to be pinned to the previous view added (in our case the first view). So we do as follow:

secondView.TopAnchor.ConstraintEqualTo(firstView.BottomAnchor).Active = true;

所以 secondView 的顶部固定在 firstView 的底部.然后我们添加其他约束:

So the top of the secondView is pinned to the bottom of the firstView. And then we add the others constraints:

secondView.WidthAnchor.ConstraintEqualTo(secondView.Bounds.Width).Active = true;
secondView.HeightAnchor.ConstraintEqualTo(secondView.Bounds.Height).Active = true;

最后一次查看

最后一个视图(在我们的例子中是第三个视图)需要固定到前一个视图的底部(在我们的例子中是第二个视图)和滚动视图的底部.

The last view (in our case the third view) instead needs to be pinned to the bottom of the previousView (in our case the secondView) and to the bottom of the scrollView.

thirdView.TopAnchor.ConstraintEqualTo(secondView.BottomAnchor).Active = true;
thirdView.BottomAnchor.ConstraintEqualTo(scrollView.BottomAnchor).Active = true;

以及宽度和八的通常其他约束:

And the usual other constraints for width and eight:

thirdView.WidthAnchor.ConstraintEqualTo(thirdView.Bounds.Width).Active = true;
thirdView.HeightAnchor.ConstraintEqualTo(thirdView.Bounds.Height).Active = true;

这样8个scrollView会适应添加的8个view，因为里面的view是固定在scrollView的顶部和底部的.

In this way the eight of the scrollView will adapt to the eight of the views added, due to the fact that the views inside are pinned to the top and the bottom of the scrollView.

结论

如果您按照这些简单的说明进行操作，一切都会顺利进行.记得禁用 autoResizingMask，因为这是常见的错误.

If you follow these simple instruction you will get everything work. Remember to disable autoResizingMask, as this is on of the common mistake.

希望对您有所帮助.干杯

Hope it was helpful. Cheers

这篇关于Xamarin iOS Autolayout:自动调整各种设备的宽度和垂直滚动，同时保持禁用水平滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！