【Android】 从头搭建视频播放器(3)——手势检测 & 控制

转载请注明出处http://www.jianshu.com/p/2ea493532d2c

项目代码地址:https://github.com/Android-Jungle/android-jungle-mediaplayer
 

1、解决思路

        我们希望我们的播放器有基本的手势操作,可以在用户触摸滑动屏幕的时候,支持屏幕亮度、音量、播放进度的调节。同时,快速双击屏幕的时候可以支持暂停/恢复播放。

        抽离出思路如下:

  • 手指在播放区域左侧上下滑动时,分别增加/减小屏幕亮度;
  • 手指在播放区域右侧上下滑动时,分别增加/减小播放声音;
  • 手指在播放器内部水平左右滑动时,分别向前/向后快进一段进度;
  • 手指在播放器内部双击时,分别暂停/恢复视频的播放。

        通过对功能点的解析分离,我们发现可以使用 Android 系统 SDK 提供的 GestureDetector 来帮助我们完成。GestureDetector.SimpleOnGestureListener 回调支持了我们所有需要用到的基础手势检测,我们只需要在检测的时候进行判断处理即可。

2、MediaPlayerGestureController 接口

        我们希望把所有的手势处理都封装在 MediaPlayerGestureController 这个类中,在外部可以很方便的调用它并响应它的一些事件。

MediaPlayerGestureController 接口 特性
MediaPlayerGestureController(context, playerRootView, helper) 构造函数
handleTouchEvent(event) 处理触摸事件 MotionEvent
setMediaPlayer(baseMediaPlayer) 设置手势关联的播放器

3、检测 & 处理

        首先我们在 SimpleOnGestureListener 中看到 onScroll 方法声明如下,我们可以根据 distanceX、distanceY 来进行基本的判断进而处理事件。

onScroll

        为了避免多个手势识别造成的干扰——比如我们按下手指后,水平滑动一段距离,然后在 不松开 手指的情况下再垂直滑动一段距离,如果不进行特殊处理,就会造成既调节进度,有调节音量/亮度的问题,用户体验非常差。

        所以,我们特意用一个 type 变量来记录当前正在进行的手势,如果 type 有值,表明当前的手势已经触发了,直接根据相应的 distance 进行控制。否则,先根据 distanceX、distanceY 结合第一个触摸点的位置来确定出 type,再进行控制。

        这个 type 是一个枚举变量,各个枚举值分别表示了当前正在进行的手势。具体定义如下:

AdjustType

        根据上面的描述以及控制逻辑,我们抽离出整个手势识别+控制处理的流程如下:

识别+处理流程

        该流程图表述的一些细节如下:

  • Math.abs(distanceX) > Math.abs(distanceY):判断这个滑动主要是水平滑动还是竖直滑动;
  • e1.getX() < rootViewWidth / 2:根据第一个触摸落点的 X 坐标,再结合整个视频窗口 rootView 的宽度,来判断这个手势是在左半区域还是右半区域触发的,进而用于分支调节屏幕亮度或者播放声音;
  • DeviceUtils.setBrightness(...):是我们提供的一个帮助函数,主要用于修改屏幕亮度;
  • audioMgr.setStreamVolume(...):是使用 Android 系统的 android.media.AudioManager 来修改媒体音量。

3.1、亮度处理

        我们首先需要获取屏幕亮度,然后再按 distanceY 算出增量,可以得到新的亮度。获取和设置屏幕亮度的方法如下:

亮度处理

        屏幕亮度的增量获取方法如下:

计算并更新亮度

        其中我们在 percent 上面乘了增量因子 5,用于修正增量值,优化用户体验。

3.2、音量处理

        音量的处理也比较简单,只需要获取当前音量,并且得到音量增量,再通过 AudioManager.setStreamVolume 重新设置进去即可,其中为了优化体验,也针对增量进行了一系列的微调。

音量处理

3.3、双击屏幕处理

        双击的处理非常简单,只需要在 SimpleOnGestureListener.onDoubleTap 中进行处理即可:

双击屏幕处理

4、代码片段

        整个代码片段如下:

/**
 * MediaPlayerGestureController.java
 *
 * @author arnozhang
 * @email  zyfgood12@163.com
 * @date   2015.9.25
 */
public class MediaPlayerGestureController {

    public static interface GestureOperationHelper {
        void onSingleTap();
    }


    private static enum AdjustType {
        None,
        Volume,
        Brightness,
        FastBackwardOrForward,
    }


    private Context mContext;
    private View mPlayerRootView;
    private AdjustType mAdjustType = AdjustType.None;
    private AdjustPanel mAdjustPanel;
    private ProgressAdjustPanel mProgressAdjustPanel;
    private FrameLayout mAdjustPanelContainer;
    private FrameLayout mProgressAdjustPanelContainer;
    private BaseMediaPlayer mMediaPlayer;
    private GestureDetector mGestureDetector;
    private GestureOperationHelper mOperateHelper;


    public MediaPlayerGestureController(
            Context context, View playerRootView, GestureOperationHelper helper) {

        mContext = context;
        mOperateHelper = helper;
        mPlayerRootView = playerRootView;
        initGestureDetector();
    }

    public void handleTouchEvent(MotionEvent event) {
        mGestureDetector.onTouchEvent(event);

        int action = event.getActionMasked();
        if (action == MotionEvent.ACTION_UP || action == MotionEvent.ACTION_CANCEL) {
            mAdjustType = AdjustType.None;
            mAdjustPanel.hidePanel();
            mProgressAdjustPanel.hidePanel();
        }
    }

    public void setMediaPlayer(BaseMediaPlayer mediaPlayer) {
        mMediaPlayer = mediaPlayer;
    }

    public void setAdjustPanelContainer(FrameLayout layout) {
        mAdjustPanelContainer = layout;

        mAdjustPanel = new AdjustPanel(mContext);
        mAdjustPanelContainer.addView(mAdjustPanel, new ViewGroup.LayoutParams(
                ViewGroup.LayoutParams.MATCH_PARENT,
                ViewGroup.LayoutParams.MATCH_PARENT));
    }

    public void setProgressAdjustPanelContainer(FrameLayout layout) {
        mProgressAdjustPanelContainer = layout;

        mProgressAdjustPanel = new ProgressAdjustPanel(mContext);
        mProgressAdjustPanel.setVisibility(View.GONE);
        mProgressAdjustPanelContainer.addView(mProgressAdjustPanel, new ViewGroup.LayoutParams(
                ViewGroup.LayoutParams.MATCH_PARENT,
                ViewGroup.LayoutParams.MATCH_PARENT));
    }

    private Runnable mSwitchTitleRunnable = new Runnable() {
        @Override
        public void run() {
            mOperateHelper.onSingleTap();
        }
    };

    private void initGestureDetector() {
        mGestureDetector = new GestureDetector(mContext,
                new GestureDetector.SimpleOnGestureListener() {
                    @Override
                    public boolean onSingleTapUp(MotionEvent e) {
                        ThreadManager.getInstance().postOnUIHandlerDelayed(
                                mSwitchTitleRunnable, 200);
                        return true;
                    }

                    @Override
                    public boolean onDoubleTap(MotionEvent e) {
                        ThreadManager.getInstance().getUIHandler().removeCallbacks(
                                mSwitchTitleRunnable);

                        if (!mMediaPlayer.isLoading()) {
                            if (mMediaPlayer.isPlaying()) {
                                mMediaPlayer.pause();
                            } else {
                                mMediaPlayer.resume();
                            }
                        }

                        return true;
                    }

                    @Override
                    public boolean onScroll(MotionEvent e1, MotionEvent e2,
                            float distanceX, float distanceY) {

                        if (mAdjustType == AdjustType.None) {
                            if (Math.abs(distanceX) > Math.abs(distanceY)) {
                                mAdjustType = AdjustType.FastBackwardOrForward;
                            } else {
                                if (e1.getX() < mPlayerRootView.getMeasuredWidth() / 2) {
                                    mAdjustType = AdjustType.Brightness;
                                } else {
                                    mAdjustType = AdjustType.Volume;
                                }
                            }
                        }

                        return adjustInternal(e1, e2, distanceX, distanceY);
                    }
                });
    }

    private boolean adjustInternal(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {
        if (mAdjustType == AdjustType.FastBackwardOrForward) {
            // Adjust Progress.
            if (mMediaPlayer == null || !mMediaPlayer.isPlaying()) {
                return false;
            }

            float percent = distanceX / (float) mPlayerRootView.getMeasuredWidth();
            int total = mMediaPlayer.getDuration();
            int currPosition = mMediaPlayer.getCurrentPosition();
            int seekOffset = (int) (total * percent * -1);

            currPosition += seekOffset;
            if (currPosition < 0) {
                currPosition = 0;
            } else if (currPosition > total) {
                currPosition = total;
            }

            mMediaPlayer.seekTo(currPosition);

            if (seekOffset > 0) {
                mProgressAdjustPanel.adjustForward(currPosition, total);
            } else {
                mProgressAdjustPanel.adjustBackward(currPosition, total);
            }
        } else if (mAdjustType == AdjustType.Brightness) {
            // Adjust Brightness.
            float percent = distanceY / (float) mPlayerRootView.getMeasuredHeight();
            float brightness = DeviceUtils.getBrightnessPercent(mContext);
            float brightnessOffset = percent * 5;

            brightness += brightnessOffset;
            if (brightness < 0) {
                brightness = 0;
            } else if (brightness > 1) {
                brightness = 1;
            }

            DeviceUtils.setBrightness(mContext, brightness);
            mAdjustPanel.adjustBrightness(brightness);
        } else if (mAdjustType == AdjustType.Volume) {
            // Adjust Volume.
            float percent = distanceY / (float) mPlayerRootView.getMeasuredHeight();

            AudioManager manager = (AudioManager)
                    mContext.getSystemService(Context.AUDIO_SERVICE);
            int maxVolume = manager.getStreamMaxVolume(AudioManager.STREAM_MUSIC);
            int currVolume = manager.getStreamVolume(AudioManager.STREAM_MUSIC);
            float volumeOffsetAccurate = maxVolume * percent * 5;
            int volumeOffset = (int) volumeOffsetAccurate;

            if (volumeOffset == 0 && Math.abs(volumeOffsetAccurate) > 0.2f) {
                if (distanceY > 0) {
                    volumeOffset = 1;
                } else if (distanceY < 0) {
                    volumeOffset = -1;
                }
            }

            currVolume += volumeOffset;
            if (currVolume < 0) {
                currVolume = 0;
            } else if (currVolume >= maxVolume) {
                currVolume = maxVolume;
            }

            manager.setStreamVolume(AudioManager.STREAM_MUSIC, currVolume, 0);

            float volumePercent = (float) currVolume / (float) maxVolume;
            mAdjustPanel.adjustVolume(volumePercent);
        }

        return true;
    }
}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,185评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,445评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,684评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,564评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,681评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,874评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,025评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,761评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,217评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,545评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,694评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,351评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,988评论 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,778评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,007评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,427评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,580评论 2 349

推荐阅读更多精彩内容