app动态引导页的制作

有一些app的引导页有些特别,不是常规的那种静态图。比如慕课网的引导页

PS:博客上传图片限制在2M以下,只能减少帧数了，所以有点快



我一开始想,这个不就是个gif吗,然后网上看了下Android实现gif的资料,基本都是自定义view然后解码gif,一帧一帧，效果也不是很 理想.于是我就反编译了app,发现这是三个短视频.







那么就好办了,直接用MediaPlayer类来实现.

这里用viewPager来实现滑动,先初始化控件,3个view对应三个布局,每个布局里放一个SurfaceView

guide_viewpager = (ViewPager) findViewById(R.id.guide_viewpager);
viewcontaniers = new ArrayList<View>();
view1 = View.inflate(this, R.layout.guide_view1, null);
view2 = View.inflate(this, R.layout.guide_view2, null);
view3 = View.inflate(this, R.layout.guide_view3, null);

sf1 = (SurfaceView) view1.findViewById(R.id.sf1);
sf2 = (SurfaceView) view2.findViewById(R.id.sf2);
sf3 = (SurfaceView) view3.findViewById(R.id.sf3);

viewcontaniers.add(view1);
viewcontaniers.add(view2);
viewcontaniers.add(view3);

然后获取三个SurfaceHolder实例,并实现接口

// 获取SurfaceHolder实例
holder1 = sf1.getHolder();
holder2 = sf2.getHolder();
holder3 = sf3.getHolder();

// 实现接口
holder1.addCallback(this);
holder2.addCallback(this);
holder3.addCallback(this);

给ViewPager设置适配器

guide_viewpager.setAdapter(new PagerAdapter() {

@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0 == arg1;
}

@Override
public int getCount() {
return viewcontaniers.size();
}

@Override
public Object instantiateItem(ViewGroup container, int position) {
container.addView(viewcontaniers.get(position));

return viewcontaniers.get(position);
}

@Override
public void destroyItem(ViewGroup container, int position,
Object object) {

container.removeView((View) object);
}
});

重载三个方法, 在surfaceCreated里进行如下操作

记住:一定要在surfaceCreated里获取MediaPlayer对象,不然无法播放asasdd

重 调用setDisplay方法播放在SurfaceView上,设置PreparedListener监听,调用setLooping(true)设置为循环播放,接下来调用setDataSource()传入路径,最后调用prepareAsync()进行播放准备。

<pre name="code" class="java">@Override
public void surfaceCreated(SurfaceHolder holder) {

// 下面开始实例化MediaPlayer对象
player = new MediaPlayer();
// 设置播放在surfaceview上
player.setDisplay(holder);
player.setOnPreparedListener(this);
// 设置循环播放
player.setLooping(true);

if (holder1.equals(holder)) {
Path = Environment.getExternalStorageDirectory().getPath()+ "/1.mp4";
}

if (holder2.equals(holder)) {
Path = Environment.getExternalStorageDirectory().getPath()+ "/2.mp4";
}
if (holder3.equals(holder)) {
Path = Environment.getExternalStorageDirectory().getPath()+ "/3.mp4";
}

// 设置文件的路径
try {
player.setDataSource(Path);

} catch (IllegalArgumentException e) {
e.printStackTrace();
} catch (IllegalStateException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}

// 准备播放
try {
player.prepareAsync();
} catch (IllegalStateException e) {

e.printStackTrace();
}
}

之后在Prepared方法中开始播放

@Override
public void onPrepared(MediaPlayer mp) {
//开始播放
mp.start();
}

这样就可以实现效果了。PS:别忘了在manifest中加上读写SD卡的权限

附上Demo地址:点击打开链接