如何调整Xamarin Flyout页面尺寸，实现Android端Flyout占1/3屏、Detail占2/3屏？

实现思路 #

Android端Xamarin.Forms的Shell Flyout底层依赖DrawerLayout控件实现，我们可以通过自定义Shell渲染器修改Flyout容器的布局参数，强制设置其宽度为屏幕宽度的1/3，即可实现和iOS端一致的布局比例。

具体实现步骤 #

• 第一步：在Android平台项目中创建自定义Shell渲染器

using Android.Content;
// 若项目已迁移到AndroidX，请替换为 using AndroidX.DrawerLayout.Widget;
using Android.Support.V4.Widget;
using Android.Util;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;

[assembly: ExportRenderer(typeof(Shell), typeof(YourAppNamespace.Droid.CustomShellRenderer))]
namespace YourAppNamespace.Droid
{
    public class CustomShellRenderer : ShellRenderer
    {
        public CustomShellRenderer(Context context) : base(context) { }

        protected override IShellFlyoutRenderer CreateShellFlyoutRenderer()
        {
            return new CustomShellFlyoutRenderer(Context);
        }
    }

    public class CustomShellFlyoutRenderer : ShellFlyoutRenderer
    {
        public CustomShellFlyoutRenderer(Context context) : base(context) { }

        protected override void OnAttachedToWindow()
        {
            base.OnAttachedToWindow();
            if (Parent is DrawerLayout drawerLayout)
            {
                // 获取当前屏幕宽度
                var screenWidth = Resources.DisplayMetrics.WidthPixels;
                // 设置Flyout宽度为屏幕的1/3
                var flyoutView = GetChildAt(0);
                if (flyoutView != null)
                {
                    var layoutParams = (DrawerLayout.LayoutParams)flyoutView.LayoutParameters;
                    layoutParams.Width = screenWidth / 3;
                    flyoutView.LayoutParameters = layoutParams;
                }
            }
        }

        // 适配屏幕旋转场景，横竖屏切换时自动重新计算宽度
        protected override void OnSizeChanged(int w, int h, int oldw, int oldh)
        {
            base.OnSizeChanged(w, h, oldw, oldh);
            if (w != oldw && Parent is DrawerLayout drawerLayout)
            {
                var flyoutView = GetChildAt(0);
                if (flyoutView != null)
                {
                    var layoutParams = (DrawerLayout.LayoutParams)flyoutView.LayoutParameters;
                    layoutParams.Width = w / 3;
                    flyoutView.LayoutParameters = layoutParams;
                }
            }
        }
    }
}

• 第二步：替换命名空间
  将代码中的YourAppNamespace替换为你实际项目的根命名空间即可。
• 第三步：验证效果
  编译运行后，Flyout会固定占用屏幕1/3宽度，Detail部分自动占用剩余2/3宽度，和iOS端实现的效果完全对齐。

注意事项 #

• 如果你使用的是旧版MasterDetailPage而非Shell，只需要在MasterDetailPage的自定义渲染器中拿到DrawerLayout的Flyout容器，按照上述相同逻辑设置宽度即可。
• 该方案兼容Android 5.0及以上版本，不需要额外权限配置。

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