Xamarin iOS Autolayout：自动调整各种设备的宽度和垂直滚动，同时保持水平滚动禁用演示链接

Posted 2021-04-25

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

与此类似的东西：

我不能使用UITableView，因为我的页面可能没有必然是同质的元素。它可以有文本字段，下拉列表等组合。

答案

在Xamarin.Forms的自定义渲染器中，我编写了我的UITableViewController，如下所示：

_controller = new InfoFieldItemsTableViewController();
_controller.TableView.SeparatorStyle = UITableViewCellSeparatorStyle.None;
_controller.TableView.SeparatorColor = UIColor.Clear;
_controller.TableView.AllowsSelection = false;
// http://useyourloaf.com/blog/self-sizing-table-view-cells/
_controller.TableView.RowHeight = UITableView.AutomaticDimension;

在我的控制器中，我这样做是为了注册所有潜在的候选细胞：

    private void RegisterCells()
    {
        foreach (var tuple in InfoFieldCellMapping.Map)
        {
            this.TableView.RegisterNibForCellReuse(tuple.Value.Item1, tuple.Value.Item2);
        }
    }

    public override void ViewDidLoad()
    {

        RegisterCells();

        base.ViewDidLoad();
    }

我在我的控制器中执行此操作，因此细胞根据所需的高度自行调整大小：

    public override nfloat EstimatedHeight(UITableView tableView, NSIndexPath indexPath)
    {
        return 100;
    }

现在您需要做的就是从IDE中创建单元文件，该文件应该是.xib文件，并使用autolayout在编辑器中设计它们（这样它们就可以自动适应方向更改）。

在您的TableViews数据源中，剩下要做的就是在您的数据项和它的相应单元格之间进行映射，类似于：

public override UICollectionViewCell GetCell(UICollectionView collectionView, NSIndexPath indexPath) 
{
    var dataItem = Items[indexPath.Row];
    var key = ""; // use info from data item to figure out which key identifies your table cell to dequeue the correct kind of cell
    var cell = collectionView.DequeueReusableCell(key, indexPath) as UICollectionViewCell;
}

这就是你真正需要的。在我的场景中，我映射的字段可能包含日期条目，数字条目，长文本，短文本等的不同控件。

我希望有所帮助

另一答案

1.在scrollView上添加前导，尾随，顶部，底部约束到它的视图。

2.将UIView添加为scrollview的containerView，并将containerView中的6个Constraints添加到scrollview，如下所示。

a）前导b）尾随c）顶部d）底部e）水平居中。

3.确保容器视图中的顶部元素必须通过添加顶部约束绑定到顶部，并通过添加底部约束将最底部元素绑定到容器视图的底部。并且容器视图中最顶部和最底部之间的所有项目必须垂直连接彼此之间因此它将定义容器视图的内容大小。

它将定义scrollview的实际内容高度。最后在代码中定义scrollview的内容大小。

另一答案

正如我提到的here。

请参阅步骤1和步骤2，在Scrollview和containerView上设置约束。

我删除了Scrollview和View之间的边距，我在containerView上添加了一些控件，所以它看起来如下所示：

Notice

1. 由于我们将containerView的宽度设置为等于scrollview的宽度，因此宽度是固定的，因此我们可以垂直滚动而不是水平滚动。
2. 应该清楚地设置控件的高度和它们之间的空格，因为contentSize是通过添加它们自动计算的。 （If contentSize is greater than the height of screen ,the scrollview can be scrolled）

我看到你在控件上设置了约束，但你无法向下滚动以查看屏幕外的控件，我认为你缺少在最后一个控件（最下面的控件）上设置底部边距。

让我们做一个测试。

1. We set the margin (between button and textfield ) to 1000 and don't set bottom margin between the textfield and containerView.

结果：无法向下滚动以查看屏幕外的文本字段。

2. Set the margin 1000 and add a bottom margin(10) between textfiled and containerView.

Result: can scroll

Demo Link

另一答案

之前的回答非常正确，但根本不对。事实上，我试图使用前面描述的方法解决这个问题，但为了使其工作，我做了一些调整。

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

UIScrollview：

• 厂景
• 视图2
• VIEW3

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

那么，让我们一步一步地进行：

1. 将scrollview添加到viewController

第一步是将scrollview添加到viewController，我们可以通过以下方式以编程方式执行此操作：

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

View是您正在使用的viewController的主视图（又名Self.View）。注意将scrollview的TranslateAutoResizionMaskIntoConstrains属性设置为false，否则自动调整会破坏您的约束。

2. 向scrollView添加约束（autolayout）

您需要确保您的布局将针对每个不同的iPhone屏幕进行调整，因此只需使用auotlayout将您的scrollView固定到viewController主视图（是下一个代码示例中使用的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固定到主视图的边界。

3. 创建要添加的视图

您需要创建要添加到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）。

注意：即使在这种情况下，你必须将TranslateAutoResizingMaskProperty设置为false，否则你会弄得一团糟。

4. 将视图添加到scrollView

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

scrollView.AddSubview(view);

而已。

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

添加视图后，您必须说出她的行为与scrollView有关。我们假设我们将向scrollView添加几个视图，因此我们必须区分FIRST视图的行为，IN-BETWEEN视图和LAST视图。

所以要清楚我们假设我们只添加了3个视图，所以我们将有三个不同的情况。

第一视图

重要的是第一个视图必须固定在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;

在视图之间

视图之间（在我们的示例中，第二个视图）需要固定到添加的上一个视图（在我们的示例中是第一个视图）。所以我们这样做：

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

所以第二个视图的顶部固定在firstView的底部。然后我们添加其他约束：

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

最后一个视图

最后一个视图（在我们的例子中是第三个视图）需要固定到previousView（在我们的例子中是secondView）的底部和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的八个将适应添加的八个视图，因为内部视图固定在scrollView的顶部和底部。

结论

如果您遵循这些简单的指示，您将获得一切正常。请记住禁用autoResizingMask，因为这是常见的错误。

希望它有所帮助。干杯