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，因为我的页面可能没有必然是同质的元素。它可以有文本字段，下拉列表等的组合。

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 :

• View1


• View2


• View3

您在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. 将scrollview添加到你的viewController

1. Add scrollview to your viewController

第一步是将scrollview添加到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）。
注意将scrollview的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. 向scrollView添加约束（自动布局）

1. Add constraint (autolayout) to your scrollView

您需要确保布局会根据每个不同进行调整iPhone屏幕，所以只需使用auotlayout将scrollView固定到viewController主视图（是下一个代码示例中使用的View）：

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;

这样你的scrollView固定在主视图的边界上。

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

1. 创建要添加的视图

1. Create the view to be added

您需要创建要添加到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。宽度）所以它不会水平滚动，并且具有任意高度（样本中为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. 将视图添加到scrollView

1. Add the view to the scrollView

下一步是将我们的新视图添加到scrollView，如下所示：

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

scrollView.AddSubview(view);

还有更多。

1. 为与scrollView相关的视图设置约束

1. Set constraint for the view added in relation to the scrollView

添加视图后，您必须说出她的行为与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.

第一视图

重要的是第一个视图必须固定在scrollView的顶部，我们这样做如下：

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;

因此，第二个视图的顶部固定在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;

上次查看

最后一个视图（在我们的例子中是第三个视图）需要固定到previousView的底部（在我们的例子中是secondView）和scrollView的底部。

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;

宽度和8的通常其他约束：

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将适应添加的八个视图，因为事实上，内部视图固定在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屋！