酷炫的Android交互動畫和視覺效果：高仿音悅臺播放頁面
新版的音悅臺 APP 播放頁面交互非常有意思，可以把播放器往下拖動，這個頁面透明漸變，然后到底部可以左右拖動關閉播放器，然后點擊視頻列表有個頁面彈出來的效果，十分炫酷，于是我自己動手實現了這個交互炫酷的播放器頁面。
1.廢話不多說，直接演示實現效果
1.1.點擊某個視頻，然后手指上下拖動，播放器做尺寸比例的漸變，視頻相關信息做透明度漸變
1.2.播放器只有在底部的時候，才能左右拖動，此時播放器做透明度漸變，拖動一定范圍可以關閉播放器;然后它只有在原始位置的一小段距離內可以往上拖動
1.3.點擊視頻列表的時候，若是上次視頻是左右拖動關閉的話，會有個彈起播放頁面的效果;若是返回鍵和返回箭頭則無效果
2.實現的思路講解
毫無疑問，需要自定義一個容器，然后處理它的觸摸事件，對它的子 View 進行不同的處理。觸摸事件的處理使用 ViewDragHelper 是再適合不過了，然后你需要實現容器 onMeasure 和 onLayout，由于使用了 ViewDragHelper，有些坑在代碼解析的時候就會講解。
播放頁面是用新的 Activity 還僅僅是當前 Activity 的View的問題，由于播放器縮小到底部的時候，用戶是可以滑動視頻列表的，所以我個人認為就是在當前 Activity 放置一個自定義容器即可，因此為了效率考慮你可以用 ViewStub 來懶加載處理，這里方便演示我就直接 View 的形式了。
3.代碼解析
3.1.需要的變量
3.2.初始化做 ViewDragHelper 的初始化，然后 post 拿到兩個子 View，這里強制規定只能有兩個子元素
3.3. ViewDragHelper 的回調需要做的事情比較多，在 mFlexView 拖動的時候需要同時設置 mFlexView 和 mFollowView 的相應變化效果，在 mFlexView 釋放的時候需要處理關閉或收起等效果
3.4.接下來是處理測量和定位，我們實現的排列效果類似 LinearLayout 垂直排列的效果，這里被 measureChildWithMargins 的 heightUse 擺了一道;onLayout 的時候在位置緩存不為空的時候直接定位是因為 ViewDragHelper 在處理觸摸事件子元素在做一些平移之類的，若是有元素更新了 UI 會導致重新 Layout，例如我的播放器在更新時間的 TextView 時就會如此，因此在 FlexCallback 的 onViewPositionChanged 方法記錄位置，在重新 Layout 時恢復位置即可，這個也坑了好久
3.5.觸摸事件的處理，由于縮放不會影響 mFlexView 真實寬高，ViewDragHelper 仍然會阻斷 mFlexView 的真實寬高的區域，所以這里判斷手指是否落在 mFlexView 視覺上的范圍內，在才去調 ViewDragHelper 的 shouldInterceptTouchEvent 方法
3.6.在 computeScroll 中，若是 mIsClosing 為 true，即關閉的整個平移執行完畢了，通知回調事件
3.7.容器實現了，接下來我們繼承 YytLayout 實現播放器頁面的組合控件即可，再封裝一些常用的方法，這里使用的是大名鼎鼎的 Ijkplayer 實現的播放器，屏蔽了 IjkVideoView 的觸摸事件自己處理了;順帶一提，為了實現播放器 Controller 跟隨拖動縮放的效果，放棄了常用的 PopupWindow 實現的思路，IjkController 直接是添加到 IjkVideoView 中的，要不彈窗實現跟隨播放器太麻煩了
- /**
- * Created by Oubowu on 2016/12/27 17:32.<p>
- * 仿音悅臺播放頁面的具體實現，組合控件的形式
- */
- public class YytPlayer extends YytLayout {
- private IjkController mIjkController;
- private IjkVideoView mIjkVideoView;
- private ImageView mIvAvatar;
- private TextView mTvName;
- private TextView mTvTime;
- private TextView mTvTitle;
- private TextView mTvDesc;
- private RecyclerView mYytRecyclerView;
- private VideoListAdapter mVideoListAdapter;
- public YytPlayer(Context context, AttributeSet attrs) {
- super(context, attrs);
- init(context, attrs);
- }
- private void init(Context context, AttributeSet attrs) {
- // 繼承YytLayout并且通過merge標簽減少層級來實現組合控件
- LayoutInflater.from(context).inflate(R.layout.yyt_player, this, true);
- setOnLayoutStateListener(new OnLayoutStateListener() {
- @Override
- public void onClose() {
- setVisibility(View.INVISIBLE);
- mIjkVideoView.release(true);
- }
- });
- mIjkVideoView = (IjkVideoView) findViewById(R.id.ijk_player_view);
- final int scaledTouchSlop = ViewConfiguration.get(getContext()).getScaledTouchSlop();
- mIjkVideoView.setOnTouchListener(new OnTouchListener() {
- float mDownX = 0;
- float mDownY = 0;
- boolean mClickCancel;
- @Override
- public boolean onTouch(View v, MotionEvent event) {
- float x = event.getX();
- float y = event.getY();
- switch (event.getAction()) {
- case MotionEvent.ACTION_DOWN:
- mDownX = x;
- mDownY = y;
- break;
- case MotionEvent.ACTION_MOVE:
- if (Math.abs(mDownX - x) > scaledTouchSlop || Math.abs(mDownY - y) > scaledTouchSlop) {
- mClickCancel = true;
- }
- break;
- case MotionEvent.ACTION_UP:
- if (!mClickCancel && Math.abs(mDownX - x) <= scaledTouchSlop && Math.abs(mDownY - y) <= scaledTouchSlop) {
- // 點擊事件偶爾失效，只好這里自己解決了
- if (isHorizontalDragEnable()) {
- expand();
- } else {
- mIjkVideoView.toggleMediaControlsVisibility();
- }
- }
- mClickCancel = false;
- break;
- case MotionEvent.ACTION_CANCEL:
- mClickCancel = false;
- break;
- }
- return true;
- }
- });
- mIvAvatar = (ImageView) findViewById(R.id.iv_avatar);
- mTvName = (TextView) findViewById(R.id.tv_name);
- mTvTime = (TextView) findViewById(R.id.tv_time);
- mTvTitle = (TextView) findViewById(R.id.tv_title);
- mTvDesc = (TextView) findViewById(R.id.tv_desc);
- mVideoListAdapter = new VideoListAdapter();
- mVideoListAdapter.setOnItemClickCallback(new OnItemClickCallback() {
- @Override
- public void onClick(View view, int position) {
- int pos = (Integer) view.getTag();
- VideoSummary summary = mVideoListAdapter.getData().get(pos);
- playVideo(mVideoListAdapter.getData(), summary);
- }
- });
- mYytRecyclerView = (RecyclerView) findViewById(R.id.yyt_recycler_view);
- GridLayoutManager gridLayoutManager = new GridLayoutManager(context, 2, LinearLayoutManager.VERTICAL, false);
- mYytRecyclerView.setLayoutManager(gridLayoutManager);
- mYytRecyclerView.setNestedScrollingEnabled(false);
- mYytRecyclerView.addItemDecoration(new VideoListItemDecoration(context));
- mYytRecyclerView.setAdapter(mVideoListAdapter);
- }
- // 播放視頻
- private void playVideo(String path, String name) {
- try {
- if (mIjkController == null) {
- IjkMediaPlayer.loadLibrariesOnce(null);
- IjkMediaPlayer.native_profileBegin("libijkplayer.so");
- mIjkController = new IjkController(mIjkVideoView, name);
- mIjkController.setOnViewStateListener(new IjkController.OnViewStateListener() {
- @Override
- public void onBackPress() {
- stop();
- }
- });
- mIjkVideoView.setMediaController(mIjkController);
- mIjkVideoView.setOnPreparedListener(new IMediaPlayer.OnPreparedListener() {
- @Override
- public void onPrepared(IMediaPlayer mp) {
- mIjkVideoView.start();
- }
- });
- mIjkVideoView.setOnErrorListener(new IMediaPlayer.OnErrorListener() {
- @Override
- public boolean onError(IMediaPlayer mp, int what, int extra) {
- Toast.makeText(getContext(), "視頻播放出錯了╮(╯Д╰)╭", Toast.LENGTH_SHORT).show();
- return true;
- }
- });
- } else {
- // 重新設置視頻名字
- mIjkController.setVideoName(name);
- }
- // 設置這個TextureView播放器縮放就正常了
- mIjkVideoView.setRender(IjkVideoView.RENDER_TEXTURE_VIEW);
- // 因為每次setRender都會移除view再添加，為了縮放效果這里控制器是添加到IjkVideoView中的，所以這里也要重新添加才能在IjkVideoView的最上面
- mIjkController.updateControlView();
- // 顯示加載條
- mIjkController.showProgress();
- // 播放視頻
- mIjkVideoView.setVideoURI(Uri.parse(path));
- } catch (UnsatisfiedLinkError e) {
- e.printStackTrace();
- Toast.makeText(getContext(), "你的CPU是" + Build.CPU_ABI + ",當前播放器使用的編譯版本" + BuildConfig.FLAVOR + "不匹配！", Toast.LENGTH_LONG).show();
- }
- }
- /**
- * 顯示布局，并且播放視頻
- *
- * @param data 視頻列表，用于播放頁面下面的列表布局
- * @param summary 播放的視頻信息
- */
- public void playVideo(List<VideoSummary> data, VideoSummary summary) {
- // 拿到數據，設置到播放的布局的相關信息
- Glide.with(getContext()).load(summary.mTopicImg).transform(new GlideCircleTransform(getContext())).into(mIvAvatar);
- mTvName.setText(summary.mTopicName);
- mTvTime.setText(summary.mPtime);
- mTvTitle.setText(Html.fromHtml(summary.mTitle));
- if (summary.mDescription.isEmpty()) {
- mTvDesc.setText(summary.mTopicDesc);
- } else {
- mTvDesc.setText(Html.fromHtml(summary.mDescription));
- }
- // 設置YytLayout可見，并且展開
- setVisibility(View.VISIBLE);
- expand();
- mVideoListAdapter.setData(data);
- mVideoListAdapter.setItemWidth(mYytRecyclerView.getWidth() / 2);
- mVideoListAdapter.notifyDataSetChanged();
- // 播放視頻
- playVideo(summary.mMp4HdUrl == null ? summary.mMp4Url : summary.mMp4HdUrl, summary.mTitle);
- }
- // 開始播放
- public void start() {
- if (mIjkVideoView != null && !mIjkVideoView.isPlaying()) {
- mIjkVideoView.start();
- }
- }
- // 暫停播放
- public void pause() {
- if (mIjkVideoView != null && mIjkVideoView.isPlaying()) {
- mIjkVideoView.pause();
- }
- }
- // 停止播放
- public void stop() {
- setVisibility(View.INVISIBLE);
- if (mIjkVideoView != null) {
- mIjkVideoView.release(true);
- }
- }
- public boolean isShowing() {
- return getVisibility() == VISIBLE;
- }
- }
4.總結
說難也不難，就是各種摳細節需要腦洞，各位不妨看到好玩的交互自己打開腦洞一下，接下來可能要實現下 UC 瀏覽器播放器的效果，感覺也是非常有意思。
