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地址:點擊打開鏈接