代码实现AutoLayout与UIScrollView：Xamarin iOS滚动视图布局异常

嘿，我太懂你遇到的这个坑了——纯代码创建ScrollView和ContentView后，只看到绿色的ScrollView，红色ContentView死活不显示，这在Xamarin iOS里是个超级常见的问题，核心原因就是ScrollView的AutoLayout逻辑和普通视图完全不一样！

问题根源 #

ScrollView不像普通视图那样，子视图的约束只需要和自身对齐就行。它需要明确知道自己的ContentSize（内容区域大小），而这个大小是由它的子视图（也就是你的ContentView）的约束来决定的。你之前的代码应该是没给ContentView设置足够的尺寸约束，导致系统计算出ContentView的宽高都是0，自然就看不到红色背景了。

完整解决方案代码 #

下面是可以直接运行的纯代码实现，我会一步步解释每个约束的作用：

首先声明视图变量：

private UIScrollView _scrollView;
private UIView _contentView;

然后在ViewDidLoad里完成初始化、视图层级添加和约束设置：

public override void ViewDidLoad()
{
    base.ViewDidLoad();

    // 1. 初始化ScrollView并关闭自动约束转换
    _scrollView = new UIScrollView();
    _scrollView.BackgroundColor = UIColor.Green;
    // 关键：必须设置为false，不然系统会自动生成基于frame的约束，和我们手动加的冲突
    _scrollView.TranslatesAutoresizingMaskIntoConstraints = false;
    View.AddSubview(_scrollView);

    // 2. 初始化ContentView并关闭自动约束转换
    _contentView = new UIView();
    _contentView.BackgroundColor = UIColor.Red;
    _contentView.TranslatesAutoresizingMaskIntoConstraints = false;
    _scrollView.AddSubview(_contentView);

    // 3. 设置ScrollView的约束：和ViewController的View四边完全对齐
    NSLayoutConstraint.ActivateConstraints(new[]
    {
        _scrollView.LeadingAnchor.ConstraintEqualTo(View.LeadingAnchor),
        _scrollView.TrailingAnchor.ConstraintEqualTo(View.TrailingAnchor),
        _scrollView.TopAnchor.ConstraintEqualTo(View.TopAnchor),
        _scrollView.BottomAnchor.ConstraintEqualTo(View.BottomAnchor)
    });

    // 4. 设置ContentView的核心约束（重点！）
    NSLayoutConstraint.ActivateConstraints(new[]
    {
        // 让ContentView和ScrollView的内容区域四边对齐
        _contentView.LeadingAnchor.ConstraintEqualTo(_scrollView.ContentLayoutGuide.LeadingAnchor),
        _contentView.TrailingAnchor.ConstraintEqualTo(_scrollView.ContentLayoutGuide.TrailingAnchor),
        _contentView.TopAnchor.ConstraintEqualTo(_scrollView.ContentLayoutGuide.TopAnchor),
        _contentView.BottomAnchor.ConstraintEqualTo(_scrollView.ContentLayoutGuide.BottomAnchor),
        
        // 关键：让ContentView的宽度和ScrollView的可视宽度一致（避免横向滚动，不需要的话可以去掉）
        _contentView.WidthAnchor.ConstraintEqualTo(_scrollView.FrameLayoutGuide.WidthAnchor),
        
        // 测试用：给ContentView一个固定高度，方便看到滚动效果；实际开发中可以由内部子视图撑开高度
        _contentView.HeightAnchor.ConstraintEqualTo(1000)
    });
}

关键细节解释 #

• TranslatesAutoresizingMaskIntoConstraints = false：这是纯代码AutoLayout的必备操作，关闭系统自动生成的约束，否则会和我们手动添加的约束冲突，导致布局异常。
• ContentLayoutGuide & FrameLayoutGuide：iOS 11之后引入的两个Guide，分别代表ScrollView的内容区域和可视区域。ContentView和ContentLayoutGuide对齐，ScrollView才能根据ContentView的尺寸计算出ContentSize；而ContentView的宽度和FrameLayoutGuide对齐，是为了保证它的宽度和ScrollView的可视宽度一致，避免出现不必要的横向滚动。
• ContentView的高度：如果你的ContentView里有子视图（比如Label、Button等），只需要给这些子视图设置好上下左右的约束，ContentView的高度会自动被撑开，这时候就可以去掉手动设置的HeightAnchor约束了。比如你在ContentView里加一个占满整个区域的Label，那么Label的高度就会决定ContentView的高度，ScrollView也会自动支持纵向滚动。

效果验证 #

运行上面的代码后，你就能看到红色的ContentView在绿色的ScrollView里，而且可以纵向滚动（因为我们设置了1000的高度）。如果不需要滚动，只需要把HeightAnchor改成和ScrollView的FrameLayoutGuide.HeightAnchor对齐就行。

内容的提问来源于stack exchange，提问作者bobek