Android 视频滑到中间浮窗展示

原创

mob64ca12f3496a 2024-01-22 06:43:41 ©著作权

文章标签 ide 自定义 Android 文章分类 Android 移动开发

©著作权归作者所有：来自51CTO博客作者mob64ca12f3496a的原创作品，请联系作者获取转载授权，否则将追究法律责任

Android视频滑到中间浮窗展示

介绍

在Android开发中，我们常常需要在视频播放过程中展示一些浮窗信息，以提供更好的用户体验。本文将介绍如何实现在Android应用中，当用户滑动视频到中间位置时，展示一个浮窗来显示相关的信息。

实现原理

我们可以通过监听视频滑动事件，判断视频滑动到中间位置的时机，然后在指定位置展示一个浮窗。具体的实现步骤如下：

创建一个自定义ViewGroup，用于包含视频播放器和浮窗视图。
在自定义ViewGroup的dispatchTouchEvent方法中监听滑动事件，判断视频是否滑动到了中间位置。
如果视频滑动到了中间位置，显示浮窗视图；否则隐藏浮窗视图。
在浮窗视图中展示相关的信息。

代码实现

下面是一个简单的示例代码，用于演示如何实现视频滑动到中间展示浮窗的功能。

// 自定义ViewGroup
public class VideoFloatViewGroup extends FrameLayout {

    private View floatView;

    // 构造方法
    public VideoFloatViewGroup(Context context) {
        super(context);
        init();
    }

    // 初始化方法
    private void init() {
        // 创建浮窗视图
        floatView = LayoutInflater.from(getContext()).inflate(R.layout.layout_float_view, this, false);
        addView(floatView);
        floatView.setVisibility(View.GONE);
    }

    @Override
    public boolean dispatchTouchEvent(MotionEvent ev) {
        // 获取视频播放器的位置信息
        Rect videoRect = new Rect();
        getHitRect(videoRect);

        // 判断视频是否滑动到了中间位置
        if (videoRect.contains((int) ev.getX(), (int) ev.getY())) {
            floatView.setVisibility(View.VISIBLE);
        } else {
            floatView.setVisibility(View.GONE);
        }

        return super.dispatchTouchEvent(ev);
    }
}

在上述代码中，我们创建了一个自定义的VideoFloatViewGroup类，继承自FrameLayout。在init方法中，我们通过LayoutInflater来加载浮窗视图，并将其添加到自定义ViewGroup中。在dispatchTouchEvent方法中，我们根据视频播放器的位置信息判断视频是否滑动到了中间位置，如果是，则显示浮窗视图；否则隐藏浮窗视图。

注意： 以上代码仅为示例代码，实际开发中需要根据具体需求进行适当的修改和扩展。

浮窗视图设计

浮窗视图可以根据实际需求进行设计，可以展示视频相关的信息，比如视频标题、进度条等。下面是一个浮窗视图的布局示例：

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="#80000000"
    android:orientation="vertical"
    android:padding="16dp">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="视频标题"
        android:textColor="#ffffff"
        android:textSize="18sp" />

    <ProgressBar
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:progress="50"
        android:max="100"
        android:progressDrawable="@drawable/progress_bar_bg" />
</LinearLayout>

上述布局中包含一个LinearLayout作为容器，内部包含一个TextView用于显示视频标题，以及一个ProgressBar用于显示视频播放进度。你可以根据实际需求进行布局设计。