使用Xamarin版Material Design组件：MDCTabBar致MDCNavigationBar上推求助

嘿，我来帮你搞定这个布局问题！这种情况大概率是自动布局约束配置不当或者和系统默认布局逻辑冲突导致的，下面给你一步步排查和解决的方案：

可能的问题根源 #

• 没有禁用控件的TranslatesAutoresizingMaskIntoConstraints属性，导致Auto Layout和旧的自动调整mask冲突，控件位置被系统自动篡改。
• TabBar和MDCNavigationBar之间没有正确建立约束关系，布局引擎无法正确计算两者的位置。
• 可能误将TabBar的布局和系统底部安全区域或其他视图冲突，间接推高了导航栏。

具体解决步骤 #

1. 禁用自动调整Mask #

在初始化MDCNavigationBar和MDCTabBar时，一定要把TranslatesAutoresizingMaskIntoConstraints设为false，这样才能完全由Auto Layout控制它们的位置：

navigationBar.TranslatesAutoresizingMaskIntoConstraints = false;
tabBar.TranslatesAutoresizingMaskIntoConstraints = false;

2. 添加明确的布局约束 #

给两个控件添加清晰的约束，让导航栏固定在顶部安全区域下方，TabBar紧贴导航栏底部，同时TabBar底部绑定到页面的安全区域底部。以下是修改后的ViewDidLoad()示例代码：

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

    // 初始化并配置MDCNavigationBar
    var navigationBar = new MDCNavigationBar();
    navigationBar.TranslatesAutoresizingMaskIntoConstraints = false;
    navigationBar.Title = "我的应用";
    // 可按需添加导航按钮等其他配置
    View.AddSubview(navigationBar);

    // 初始化并配置MDCTabBar
    var tabBar = new MDCTabBar();
    tabBar.TranslatesAutoresizingMaskIntoConstraints = false;
    // 设置TabBar选项
    tabBar.Items = new UITabBarItem[]
    {
        new UITabBarItem("首页", UIImage.FromBundle("home_icon"), 0),
        new UITabBarItem("我的", UIImage.FromBundle("profile_icon"), 1)
    };
    tabBar.SelectedItem = tabBar.Items[0];
    tabBar.BarStyle = UIBarStyle.Default;
    View.AddSubview(tabBar);

    // 激活约束，明确控件位置关系
    NSLayoutConstraint.ActivateConstraints(new[]
    {
        // 导航栏：顶部绑定安全区域顶部，左右贴屏幕边缘
        navigationBar.TopAnchor.ConstraintEqualTo(View.SafeAreaLayoutGuide.TopAnchor),
        navigationBar.LeadingAnchor.ConstraintEqualTo(View.LeadingAnchor),
        navigationBar.TrailingAnchor.ConstraintEqualTo(View.TrailingAnchor),

        // TabBar：顶部贴导航栏底部，左右贴屏幕边缘，底部绑定安全区域底部
        tabBar.TopAnchor.ConstraintEqualTo(navigationBar.BottomAnchor),
        tabBar.LeadingAnchor.ConstraintEqualTo(View.LeadingAnchor),
        tabBar.TrailingAnchor.ConstraintEqualTo(View.TrailingAnchor),
        tabBar.BottomAnchor.ConstraintEqualTo(View.SafeAreaLayoutGuide.BottomAnchor)
    });
}

3. 排查额外冲突点 #

• 如果你之前使用了系统的UINavigationController，请确保没有同时叠加MDC的导航栏，两者共存会导致布局混乱。
• 检查页面中是否有其他视图的约束干扰了这两个控件的布局，比如某个视图的底部约束错误绑定到了导航栏上。

按照这个方式配置后，导航栏会稳稳固定在顶部，TabBar紧贴它的下方，不会再出现导航栏被上推的情况啦！

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