Xamarin.Forms iOS端Inline UIDatePicker显示截断问题求助

问题背景 #

Xamarin.Forms的DatePicker在iOS平台默认采用「Wheel」滚轮样式的UIDatePicker，不少用户觉得该样式不够直观，希望改成和Android端一致的日历选择视图。iOS 14及以上系统支持为UIDatePicker设置「calendar」样式，可通过自定义渲染器将PreferredDatePickerStyle设为Inline实现，代码如下：

public class CustomDatePickerRenderer : DatePickerRenderer
{
    protected override void OnElementChanged(ElementChangedEventArgs<DatePicker> e)
    {
        base.OnElementChanged(e);

        if (Control != null)
        {
            if (UIDevice.CurrentDevice.CheckSystemVersion(14, 0))
            {
                UIDatePicker picker = (UIDatePicker)Control.InputView;
                picker.PreferredDatePickerStyle = UIDatePickerStyle.Inline;
            }
        }
    }
}

但该方案在大屏iPhone上显示正常，到iPhone 8这类小屏设备上却出现异常：日历最后一行被截断，且无法滚动查看完整内容。

修复方案 #

问题核心是小屏设备上UIDatePicker的默认高度不足以完整展示Inline样式的日历视图，可通过以下方式解决：

方案一：手动适配小屏设备高度 #

设置完样式后，根据屏幕高度指定合适的控件高度，适配小屏设备：

public class CustomDatePickerRenderer : DatePickerRenderer
{
    protected override void OnElementChanged(ElementChangedEventArgs<DatePicker> e)
    {
        base.OnElementChanged(e);

        if (Control != null && UIDevice.CurrentDevice.CheckSystemVersion(14, 0))
        {
            var picker = (UIDatePicker)Control.InputView;
            picker.PreferredDatePickerStyle = UIDatePickerStyle.Inline;
            
            // 针对小屏设备调整高度，340为测试适配值，可按需微调
            var screenHeight = UIScreen.MainScreen.Bounds.Height;
            picker.Frame = new CGRect(picker.Frame.X, picker.Frame.Y, picker.Frame.Width, screenHeight < 667 ? 340 : picker.Frame.Height);
        }
    }
}

方案二：开启自适应布局 #

通过设置自动调整属性，让控件自适应父容器尺寸：

public class CustomDatePickerRenderer : DatePickerRenderer
{
    protected override void OnElementChanged(ElementChangedEventArgs<DatePicker> e)
    {
        base.OnElementChanged(e);

        if (Control != null && UIDevice.CurrentDevice.CheckSystemVersion(14, 0))
        {
            var picker = (UIDatePicker)Control.InputView;
            picker.PreferredDatePickerStyle = UIDatePickerStyle.Inline;
            
            // 开启自适应高度调整
            picker.AutoresizingMask = UIViewAutoresizing.FlexibleHeight;
            picker.SizeToFit();
        }
    }
}

方案三：替换为Compact样式（备选） #

若Inline样式适配始终有问题，可改用Compact样式，它在小屏设备上会弹出带日历的弹窗，同样能实现类Android的选择体验：

picker.PreferredDatePickerStyle = UIDatePickerStyle.Compact;

说明 #

方案一、二均可有效解决iPhone 8上的截断问题，其中方案一的高度值可根据实际测试结果微调，确保在不同小屏设备上完整显示日历内容。

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