如何实现YouTube视频在自定义圆形视图中播放并裁剪？

你遇到的问题很典型——给容器加圆形背景只是让背景变成圆形，但YouTubePlayerView本身还是矩形，它会完全覆盖在圆形背景上，所以看起来还是方的。要真正实现圆形播放视图，得直接裁剪播放器视图本身，这里给你两种靠谱的实现方式：

方法一：使用ViewOutlineProvider（Android 5.0+ 推荐） #

Android 5.0及以上版本支持通过ViewOutlineProvider来裁剪视图的轮廓，代码简洁且性能高效：

步骤1：调整布局（可以去掉LinearLayout的背景，因为我们要直接裁剪播放器） #

<LinearLayout 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:gravity="center" >

    <com.google.android.youtube.player.YouTubePlayerView
        android:id="@+id/youtube_view"
        android:layout_width="150dp"
        android:layout_height="150dp" />
</LinearLayout>

步骤2：在代码中设置轮廓裁剪 #

如果用Kotlin：

val youtubeView = findViewById<YouTubePlayerView>(R.id.youtube_view)
youtubeView.clipToOutline = true
youtubeView.outlineProvider = object : ViewOutlineProvider() {
    override fun getOutline(view: View, outline: Outline) {
        // 以视图中心为圆心，取宽高中的最小值一半作为半径，创建圆形轮廓
        val radius = min(view.width, view.height) / 2f
        outline.setOval(
            (view.width / 2 - radius).toInt(),
            (view.height / 2 - radius).toInt(),
            (view.width / 2 + radius).toInt(),
            (view.height / 2 + radius).toInt()
        )
    }
}

如果用Java：

YouTubePlayerView youtubeView = findViewById(R.id.youtube_view);
youtubeView.setClipToOutline(true);
youtubeView.setOutlineProvider(new ViewOutlineProvider() {
    @Override
    public void getOutline(View view, Outline outline) {
        float radius = Math.min(view.getWidth(), view.getHeight()) / 2f;
        outline.setOval(
                (int) (view.getWidth() / 2 - radius),
                (int) (view.getHeight() / 2 - radius),
                (int) (view.getWidth() / 2 + radius),
                (int) (view.getHeight() / 2 + radius)
        );
    }
});

方法二：自定义裁剪容器（兼容低版本） #

如果需要适配Android 5.0以下的设备，可以创建一个自定义ViewGroup，通过裁剪画布实现圆形效果：

步骤1：创建自定义CircularClipView #

public class CircularClipView extends FrameLayout {
    private Path mClipPath = new Path();

    public CircularClipView(Context context) {
        super(context);
        init();
    }

    public CircularClipView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    private void init() {
        setWillNotDraw(false); // 必须开启自定义绘制
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        // 创建圆形裁剪路径
        mClipPath.reset();
        mClipPath.addCircle(w / 2f, h / 2f, Math.min(w, h) / 2f, Path.Direction.CW);
        mClipPath.close();
    }

    @Override
    protected void dispatchDraw(Canvas canvas) {
        canvas.save();
        canvas.clipPath(mClipPath); // 把画布裁剪成圆形
        super.dispatchDraw(canvas);
        canvas.restore();
    }
}

步骤2：修改布局，用自定义容器包裹播放器 #

<com.yourpackage.CircularClipView
    android:layout_width="150dp"
    android:layout_height="150dp"
    android:gravity="center">

    <com.google.android.youtube.player.YouTubePlayerView
        android:id="@+id/youtube_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</com.yourpackage.CircularClipView>

注意事项 #

• 确保YouTubePlayerView的宽高一致，这样裁剪出来的才是标准正圆形；
• 方法一中的clipToOutline不需要依赖视图背景，只要设置了OutlineProvider并开启该属性就会生效；
• 裁剪后播放器的控制栏也会变成圆形，这是正常的视觉效果。

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