Xamarin iOS 自动布局:自动调整各种设备的宽度和垂直滚动，同时禁用水平滚动 [英] 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 :

UI滚动视图:

• 视图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. 将滚动视图添加到您的视图控制器

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

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 屏幕进行调整，因此只需使用自动布局将您的滚动视图固定到 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 添加的视图设置约束

一旦你添加了你的视图，你必须说明她的行为与滚动视图相关.我们假设我们将向 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;

中间视图

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

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;

这样scrollView的8个就会适应添加的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.

希望对你有帮助.干杯

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