作者: 杜冷丁
github: https://github.com/watire/
一个酷炫的闪屏页, 瞬间可以抓住用户的心.
实现动画闪屏页一般有4种方式:
| 方式 | 优点 | 缺点 |
|---|---|---|
| Gif | 简单 | 帧率高时容易OOM |
| VectorDrawable/SVG/PATH动画 | 速度快,内存小 | 动画内容不丰富 |
| 系统动画 | 适合简单场景 | 复杂动画实现起来麻烦 |
| 视频 | 表现内容丰富 | mp4尺寸略大 |
下面介绍怎么用"视频" 来做闪屏页 :
先上效果图, 很帅有木有~
相关素材来自虾米音乐
下面来教大家如何烧制这道菜：
主料：
VideoView 适量
辅料：
ViewPager 少许
ImageView 若干
TextView 适量
视频文件 若干
做法：
1、将VideoView去皮洗净后切块备用；
2、额...我只是个想做厨师的程序猿，但菜谱就到这里，我已经看到围观群众已经不耐烦的咬瓜皮了。
正经做法
- 由VideoView(全屏)+ImageView组成ViewPager的Item,绑定至Fragment；
- 将Fragment装入FragmentStatePagerAdapter
- 将adapter装载至viewPager；
- 放入适量视频文件、图片素材等佐料后起锅...（好像又跑偏了啊喂），对于viewpager fragment这些基本组件，大家应该信手拈来了，我就说说视频文件如何播放的,翻开fragment，来看看每个item都有什么（敲黑板，这个是重点）：
布局：
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<com.watire.xiamivd.FullScreenVideoView
android:id="@+id/vvSplash"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
<ImageView
android:id="@+id/ivSlogan"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="20dp"
android:src="@drawable/slogan_1"
android:scaleType="fitEnd"
android:layout_alignParentEnd="true" />
</RelativeLayout>
fragment：
mVideoView = findViewById(R.id.vvSplash);
mvSlogan = findViewById(R.id.ivSlogan);
mVideoView.setOnErrorListener(this);
mVideoView.setOnPreparedListener(this);
mVideoView.setVideoPath("android.resource://" + getActivity().getPackageName() + "/" + R.raw.xxx);
mvSlogan.setImageResource(imgRes);
给videoView setVideoPath即可设置视频路径，此处加载raw文件夹中资源，实现MediaPlayer.OnPreparedListener进行播放。
@Override
public void onPrepared(MediaPlayer mediaPlayer) {
if (mVideoView != null) {
mVideoView.requestFocus();
mVideoView.setOnCompletionListener(this);
mVideoView.seekTo(0);
mVideoView.start();
}
return;
}
然后实现MediaPlayer.OnCompletionListener, MediaPlayer.OnErrorListener来处理播放完成(控制viewpager跳转至下一页或已是最后一页，则关闭页面)和播放失败时的情况。
@Override
public void onCompletion(MediaPlayer mediaPlayer) {
FragmentActivity localFragmentActivity = getActivity();
if ((localFragmentActivity != null) && ((localFragmentActivity instanceof FullscreenActivity))) {
((FullscreenActivity) localFragmentActivity).next(position);
}
}
@Override
public boolean onError(MediaPlayer mediaPlayer, int i, int i1) {
FragmentActivity localFragmentActivity = getActivity();
if ((localFragmentActivity != null) && ((localFragmentActivity instanceof FullscreenActivity))) {
((FullscreenActivity) localFragmentActivity).next(position);
}
return true;
}
另外，需要实现onPause() 和onResume(),在页面中断时停止播放、恢复时继续播放:
public void onResume() {
super.onResume();
if (mHasPaused) {
if (mVideoView != null) {
mVideoView.seekTo(mVideoPosition);
mVideoView.resume();
}
}
return;
}
public void onPause() {
super.onPause();
if (mVideoView != null) {
mVideoPosition = mVideoView.getCurrentPosition();
}
mHasPaused = true;
}
在onDestroy()时停止播放（敲黑板，这个必考啊）:
public void onDestroy() {
super.onDestroy();
if (mVideoView != null) {
mVideoView.stopPlayback();
}
return;
}
重点就是这些了.
源码请前往github-demo!
ps. 推荐个github demo 运行神器：dryrun ，食用方法:
- 连接手机；
- 执行命令：dryrun https://github.com/watire/xiamivd.git；
- 等待下载、安装。
是不是很简单呢，当然要先安装dryrun~~~~~！
更多文章请关注公众号
