app 动态引导页的制作

5,036 阅读2分钟

          有一些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();
		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()进行播放准备。 

     @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地址:点击打开链接