自定义TabBar中间按钮在小屏设备上尺寸不适配问题排查

我实现了一个带中间操作按钮的自定义TabBar，通过添加空Tab来预留按钮位置：

<custom:MiddleViewTabBar x:Name="MiddleViewTabBar" FlyoutItemIsVisible="False">
    ...
    <Tab Title="{Binding SomeTitle}" Icon="icon.png">
        <ShellContent Title="{Binding SomeTitle}" ContentTemplate="{DataTemplate something:SomePage}" Route="SomeRoute" />
    </Tab>
    <Tab>
        <ShellContent ContentTemplate="{DataTemplate accountOperations:AccountOperationAddPage}" Route="AddAccountOperation" />
    </Tab> <!-- 此处为按钮预留空白位置 -->
    <Tab Title="{Binding AccountOperationsTitle}" Icon="ic_operations.png">
        ...
    </Tab>
    ...
</custom:MiddleViewTabBar>

我为iOS和Android创建了结构一致的CustomShellRenderer：

public class CustomShellHandler : ShellRenderer {
    protected override IShellItemRenderer CreateShellItemRenderer(ShellItem shellItem) {
        return new MiddleShellItemRenderer(this);
    }
}

以下是iOS端ShellItemRenderer的实现，我将渲染元素放在Grid中：

public class MiddleShellItemRenderer : ShellItemRenderer {
    private UIView? _middleView;

    public MiddleShellItemRenderer(IShellContext context) : base(context) { }

    public override void ViewDidLoad() {
        base.ViewDidLoad();
        Shell.Current.PropertyChanged += UpdateMiddleViewVisibility;
    }

    private void UpdateMiddleViewVisibility(object? sender, System.ComponentModel.PropertyChangedEventArgs e) {
        if (_middleView is null || Shell.Current.CurrentPage is null) {
            return;
        }

        var tabBarIsVisible = Shell.GetTabBarIsVisible(Shell.Current.CurrentPage);
        _middleView.Hidden = !tabBarIsVisible;
    }

    public override async void ViewWillLayoutSubviews() {
        base.ViewWillLayoutSubviews();
        if (View is not null && ShellItem is MiddleViewTabBar tabBar) {
            if (_middleView is not null) {
                _middleView.RemoveFromSuperview();
            }

            if (_middleView is null) {
                var grid = new Grid() {
                    ColumnDefinitions = [
                        new ColumnDefinition { Width = GridLength.Star }
                    ],
                    RowDefinitions = [
                        new RowDefinition { Height = GridLength.Star }
                    ]
                };
                var middleViewSize = 50;
                var imageButton = new ImageButton {
                    Source = tabBar.MiddleViewIconSource,
                    Command = tabBar.MiddleViewCommand,
                    Margin = new Thickness(0),
                    Padding = new Thickness(0),
                    BackgroundColor = Colors.Green,
                    Aspect = Aspect.AspectFit
                };
                grid.Children.Add(imageButton);
                _middleView = grid.ToPlatform(App.Current.MainPage.Handler.MauiContext);
                _middleView.Frame = new CGRect(CGPoint.Empty, new CGSize(middleViewSize, middleViewSize));
                _middleView.AutoresizingMask = UIViewAutoresizing.FlexibleRightMargin | UIViewAutoresizing.FlexibleLeftMargin |
                                               UIViewAutoresizing.FlexibleBottomMargin; 
                _middleView.Layer.CornerRadius = _middleView.Frame.Width / 2;
                _middleView.Layer.MasksToBounds = false;
            }

            _middleView.Center = new CGPoint(View.Bounds.GetMidX(), TabBar.Frame.Top + 4 + _middleView.Frame.Height / 2);
            View.AddSubview(_middleView);
        }
    }
}

这段代码在iPhone 15上显示正常，但在iPhone SE上出现了按钮被裁剪的问题，Android端也存在同样的适配问题。请问哪里处理有误？

问题分析与解决方案 #

核心问题

• 固定尺寸导致适配失效：直接给中间按钮设置固定的50尺寸，未考虑不同设备的屏幕密度与尺寸差异，小屏设备上按钮易超出可视区域被裁剪。
• 位置计算未适配安全区域：iPhone SE等设备的底部安全区域（Home Indicator）会占用空间，现有位置计算未考虑该区域，导致按钮位置偏移被遮挡。
• 重复操作浪费性能：每次ViewWillLayoutSubviews都移除再添加_middleView，不仅消耗性能，还可能引发布局不稳定。

修复步骤

1. 用相对尺寸替代固定值

基于TabBar的高度计算按钮尺寸，保证不同屏幕上的比例一致性：

// 替换固定的middleViewSize，按钮高度设为TabBar的1.2倍，可按需调整
var middleViewSize = TabBar.Frame.Height * 1.2;

2. 适配iOS安全区域

获取安全区域底部间距，调整按钮垂直位置：

// 获取安全区域底部间距
var safeAreaBottom = View.SafeAreaInsets.Bottom;
// 重新计算垂直位置，避免被安全区域遮挡
_middleView.Center = new CGPoint(
    View.Bounds.GetMidX(),
    TabBar.Frame.Top - (_middleView.Frame.Height / 2) + safeAreaBottom
);

3. 优化视图创建逻辑

仅在_middleView为null时创建视图，避免重复操作：

public override void ViewWillLayoutSubviews() {
    base.ViewWillLayoutSubviews();
    if (View is null || ShellItem is not MiddleViewTabBar tabBar) return;

    if (_middleView is null) {
        var middleViewSize = TabBar.Frame.Height * 1.2;
        var grid = new Grid {
            ColumnDefinitions = [new ColumnDefinition { Width = GridLength.Star }],
            RowDefinitions = [new RowDefinition { Height = GridLength.Star }]
        };
        var imageButton = new ImageButton {
            Source = tabBar.MiddleViewIconSource,
            Command = tabBar.MiddleViewCommand,
            Margin = new Thickness(0),
            Padding = new Thickness(0),
            BackgroundColor = Colors.Green,
            Aspect = Aspect.AspectFit
        };
        grid.Children.Add(imageButton);
        _middleView = grid.ToPlatform(App.Current.MainPage.Handler.MauiContext);
        _middleView.Layer.CornerRadius = middleViewSize / 2;
        _middleView.Layer.MasksToBounds = false;
        // 设置自动调整掩码保持水平居中
        _middleView.AutoresizingMask = UIViewAutoresizing.FlexibleLeftMargin | UIViewAutoresizing.FlexibleRightMargin;
        View.AddSubview(_middleView);
    }

    // 每次布局时更新尺寸和位置
    var middleViewSize = TabBar.Frame.Height * 1.2;
    _middleView.Frame = new CGRect(CGPoint.Empty, new CGSize(middleViewSize, middleViewSize));
    var safeAreaBottom = View.SafeAreaInsets.Bottom;
    _middleView.Center = new CGPoint(
        View.Bounds.GetMidX(),
        TabBar.Frame.Top - (_middleView.Frame.Height / 2) + safeAreaBottom
    );

    // 更新可见性
    var tabBarIsVisible = Shell.GetTabBarIsVisible(Shell.Current.CurrentPage);
    _middleView.Hidden = !tabBarIsVisible;
}

4. Android端适配思路

Android端需做类似调整：

• 基于BottomNavigationView的高度计算按钮尺寸
• 通过WindowInsets获取系统导航栏的底部间距
• 避免固定尺寸，用dp转换或相对比例设置按钮大小

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