ios - Xamarin iOS 自动布局 : Resize width and vertical scroll automatically for various devices while keeping the horizontal scroll disabled

Question

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

与此类似的东西:



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

Answer 1

前面的答案是完全正确的，但一点也不正确。确实，我尝试使用之前描述的方法解决这个问题，但为了让它发挥作用，我做了一些调整。

您的 View 的层次结构必须如下:

UIScrollview:

查看1

查看2

查看3

你 UIScrollview 内不需要容器 ，因为除了这将是一个您不需要的额外 View 之外，还有一个问题是，如果您使用此容器 View ，您将在添加的 View 中获取触摸事件时遇到问题。

所以，让我们一步一步来:

将 ScrollView 添加到您的 viewController

第一步是将 ScrollView 添加到您的 viewController，我们可以通过以下方式简单地以编程方式执行此操作:

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

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

将约束(自动布局)添加到您的 ScrollView

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

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 被固定到主 View 的边界。

创建要添加的 View

您需要创建将添加到 ScrollView 的 View :

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

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

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

将 View 添加到 ScrollView

下一步是将我们的新 View 添加到 ScrollView 中，如下所示:

scrollView.AddSubview(view);

而已。

为与 ScrollView 相关的 View 设置约束

一旦你添加了你的 View ，你必须说她的行为与 ScrollView 相关。我们假设我们将向 scrollView 添加几个 View ，因此我们必须对 FIRST View 、IN-BETWEEN View 和 LAST View 的行为进行区分。

为了清楚起见，我们假设我们只添加了 3 个 View ，所以我们将有三种不同的情况。

第一视角

重要的是第一个 View 必须固定在 ScrollView 的顶部，我们这样做如下:

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

然后我们设置其他约束:

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

中间 View

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

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

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

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

最后查看

最后一个 View (在我们的例子中是第三个 View )需要固定到前一个 View 的底部(在我们的例子中是第二个 View )和 ScrollView 的底部。

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

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

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

这样 ScrollView 的八个将适应添加的八个 View ，因为里面的 View 被固定在 ScrollView 的顶部和底部。

结论

如果您按照这些简单的说明进行操作，您将一切正常。请记住禁用 autoResizingMask，因为这是常见的错误。

希望对您有所帮助。
干杯