求解决MAUI Community Toolkit MediaPlayer安卓端开启控件后右滑返回手势失效问题

问题背景 #

在Android平台上，MAUI Community Toolkit的MediaPlayer（底层基于ExoPlayer）开启播放控件（ShouldShowPlaybackControls=True）时，页面的右滑返回手势会被拦截失效；关闭播放控件后手势恢复正常。ExoPlayer官方说明此拦截为有意设计，现需保留播放控件的同时，恢复右滑手势，且右滑时停止视频并返回上一页。

解决方案 #

通过自定义Android平台的MediaPlayerHandler，拦截触摸事件并处理右滑逻辑，绕过ExoPlayer的手势拦截。

步骤1：创建自定义MediaPlayerHandler（Android平台项目）

在Android项目中添加以下类，继承自Community Toolkit的MediaPlayerHandler，并实现自定义触摸监听器：

using CommunityToolkit.Maui.Core.Handlers;
using CommunityToolkit.Maui.Views;
using Android.Views;
using AndroidX.Media3.UI;

namespace NerdNewsNavigator2.Platforms.Android;

public class CustomMediaPlayerHandler : MediaPlayerHandler
{
    protected override void ConnectHandler(MediaPlayerView platformView)
    {
        base.ConnectHandler(platformView);
        
        if (platformView is PlayerView playerView)
        {
            // 设置自定义触摸监听器
            playerView.SetOnTouchListener(new CustomTouchListener(playerView, this));
        }
    }
}

// 自定义触摸监听器，处理右滑返回逻辑
public class CustomTouchListener : Java.Lang.Object, View.IOnTouchListener
{
    private readonly PlayerView _playerView;
    private readonly CustomMediaPlayerHandler _handler;
    private float _startX;

    public CustomTouchListener(PlayerView playerView, CustomMediaPlayerHandler handler)
    {
        _playerView = playerView;
        _handler = handler;
    }

    public bool OnTouch(View v, MotionEvent e)
    {
        switch (e.Action)
        {
            case MotionEventActions.Down:
                // 记录触摸起始X坐标
                _startX = e.RawX;
                break;
            case MotionEventActions.Move:
                var currentX = e.RawX;
                var deltaX = currentX - _startX;
                
                // 转换100dp为像素作为滑动阈值，可根据需求调整
                var swipeThreshold = TypedValue.ApplyDimension(ComplexUnitType.Dip, 100, v.Resources.DisplayMetrics);
                
                if (deltaX > swipeThreshold)
                {
                    // 停止视频播放
                    (_handler.VirtualView as MediaPlayer)?.Stop();
                    
                    // 执行页面返回
                    Application.Current?.MainPage?.Navigation?.PopAsync();
                    
                    return true; // 消费事件，阻止ExoPlayer继续处理
                }
                break;
        }
        
        // 非右滑事件交给ExoPlayer原生处理
        return _playerView.OnTouchEvent(e);
    }
}

步骤2：注册自定义Handler

在MauiProgram.cs中配置MAUI handlers，注册自定义的Android平台处理类：

using NerdNewsNavigator2.Platforms.Android;

builder.ConfigureMauiHandlers(handlers =>
{
#if ANDROID
    handlers.AddHandler<MediaPlayer, CustomMediaPlayerHandler>();
#endif
});

步骤3：修改页面XAML

移除原页面中FlexLayout上的SwipeGestureRecognizer，因为手势逻辑已在自定义触摸监听器中处理：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:viewmodel="clr-namespace:NerdNewsNavigator2.ViewModel"
             xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
             x:Class="NerdNewsNavigator2.View.PlayPodcastPage"
             x:DataType="viewmodel:PlayPodcastViewModel"
             Shell.NavBarIsVisible="False"
             Title="">
    <Shell.BackButtonBehavior>
        <BackButtonBehavior IsEnabled="True" IsVisible="{OnPlatform Android=False,iOS=False, WinUI=True}">
        </BackButtonBehavior>
    </Shell.BackButtonBehavior>
    <FlexLayout>
        <toolkit:MediaPlayer
            IsVisible="True"
            ShouldAutoPlay="True"
            ShouldKeepScreenOn="True"
            ShouldShowPlaybackControls="True"
            Source="{Binding Url}">
        </toolkit:MediaPlayer>
    </FlexLayout>
</ContentPage>

说明 #

• 滑动阈值（100dp）可根据实际需求调整，避免误触。
• 此方案仅针对Android平台，Windows、iOS等其他平台不受影响。
• 触摸事件处理中，仅拦截符合条件的右滑手势，其他交互仍保留ExoPlayer原生逻辑。

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