仿製慕課網app實現鬥魚，全民k歌視頻引導頁（ViewVideoViewPaper）炫酷效果

在幾個月前，我第一次玩全民k歌，下載完app，它彈出來的引導頁吸引了我，不像以前的引導頁一樣千篇一律，而是用了視頻的方式，用一種動態的方式來實現。在今天，我突然又想起了這個效果，就抽出了一點時間在網上也借鑑了一些人的想法自己寫了一下這個炫酷的視頻引導頁。

現在我們先來看一下項目的結構，這樣看代碼來也比較清晰明朗。（我會在結尾把代碼下載鏈接發出來）

。

頁面超級簡單，我就不貼代碼出來，我們等會直接拿demo瞧一眼就好了。

我們理一下邏輯，在我們一般下載一個app的時候，只有第一次安裝纔會彈出引導頁，第二次登錄的話直接就是從 app的首頁封面到app的主頁面去了。所以我們肯定要有個東西要來記住我們是不是第一次打開這個app。所以這個類我們思路就好了。

start_activity.class

package com.android.mooc.activity;

import com.android.mooc.R;

import android.app.Activity;
import android.content.Intent;
import android.content.SharedPreferences;
import android.content.SharedPreferences.Editor;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.support.annotation.Nullable;

public class start_activity extends Activity {
	private boolean isFirstIn = false;// 判斷是否是第一次啓動
	private static final int Time = 2000;
	private static final int Go_Home = 1000;
	private static final int Go_Guide = 1001;
	 //在主線程中做 延時操作是不合理的，可以使用handler
    Handler mHandler = new Handler(){
        public void handleMessage(Message msg) {
            switch (msg.what) {
            case Go_Home:
            	gotoMainActivity();
            	finish();
                break;
            case Go_Guide:
            	gotoGuideActivity();
            	finish();
                break;
            }
        };
    };
	protected void onCreate(@Nullable Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onCreate(savedInstanceState);
		setContentView(R.layout.start_activity);
		initData();
	}

	private void initData() {
		 SharedPreferences preferences = getSharedPreferences("nzx", MODE_PRIVATE);
	        //先去取isFirstI的值，如果沒有，表明是第一次取，第一次取肯定是true
	        isFirstIn = preferences.getBoolean("isFirstIn", true); 
	        //通過isFirstIn選擇啓動哪個頁面，再將新boolean值存入SharedPreferences
	        if(isFirstIn){
	            mHandler.sendEmptyMessageDelayed(Go_Guide, Time);  //制定多少毫秒後發送空消息，第一個參數是一個int what值
	            Editor editor = preferences.edit();
	            editor.putBoolean("isFirstIn", false);
	            editor.commit();
	        }else{
	            mHandler.sendEmptyMessageDelayed(Go_Home, Time);
	        }
	}

	private void gotoMainActivity() {

		Intent intent = new Intent(start_activity.this, appActivity.class);
		startActivity(intent);
		finish();
	}

	private void gotoGuideActivity() {
		start_activity.this.startActivity(new Intent(start_activity.this,
				MainActivity.class));
		finish();
	}
}

發現字有點小。

這個時候，我們就需要跳到我們的視頻引導頁去了。我們首先把每個引導頁寫到一個適配器纔好一起管理。我們先貼出一個視頻引導頁的代碼了，因爲其他兩個也是一樣，爲了不繁冗，一個就好了。

GuideOneFragmen.class

package com.android.mooc.fragment;
import com.android.mooc.R;
import com.android.mooc.view.MCVideoView;

import android.net.Uri;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class GuideOneFragment extends Fragment{
	private MCVideoView videoView;
	@Override
	public View onCreateView(LayoutInflater inflater,
			@Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
		View view=inflater.inflate(R.layout.fragment_guideone, null, false);
		initView(view);
		return view;
	}

	@Override
	public void onActivityCreated(@Nullable Bundle savedInstanceState) {
		super.onActivityCreated(savedInstanceState) if(videoView!=null){
			videoView.playVideo(getActivity(), Uri.parse("android.resource://"+getActivity().getPackageName()+"/"+R.raw.guide_1));
		}
	}

	private void initView(View view) {
		videoView=(MCVideoView) view.findViewById(R.id.videoView);
	}

	@Override//重複播放
	public void onDestroy() {
		super.onDestroy();
		if(videoView!=null){
			videoView.stopPlayback();
		}
	}
}

videoView.playVideo(getActivity(), Uri.parse("android.resource://"+getActivity().getPackageName()+"/"+R.raw.guide_1));

這段代碼就是我們從我們的res 目錄下解析我們的視頻文件下來

適配器方面就跟我們平常寫listview適配器一樣繼承重寫方法。

GuideFragmentPagerAdapter （適配器類）

package com.android.adapter.Adapter;
import java.util.List;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
public class GuideFragmentPagerAdapter extends FragmentPagerAdapter{
	public List<Fragment> list;
	public GuideFragmentPagerAdapter(FragmentManager fm, List<Fragment> list) {
		super(fm);
		this.list=list;
	}

	@Override
	public Fragment getItem(int arg0) {
		return list.get(arg0);
	}

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

}

很多人在想，那視頻類呢在哪裏呢，它是怎麼實現的呢，很簡單。

MCVideoView.Class

package com.android.mooc.view;

import android.content.Context;
import android.media.MediaPlayer;
import android.media.MediaPlayer.OnErrorListener;
import android.media.MediaPlayer.OnPreparedListener;
import android.net.Uri;
import android.util.AttributeSet;
import android.view.View;
import android.widget.VideoView;

public class MCVideoView extends VideoView{

	public MCVideoView(Context context) {
		this(context,null);
	}

	public MCVideoView(Context context, AttributeSet attrs) {
		super(context, attrs,0);
	}

	public MCVideoView(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);
	}

	@Override
	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
		super.onMeasure(widthMeasureSpec, heightMeasureSpec);
		setMeasuredDimension(View.MeasureSpec.getSize(widthMeasureSpec), View.MeasureSpec.getSize(heightMeasureSpec));
	}

	public void playVideo(Context context,Uri uri){
		if(uri==null){
			throw new IllegalArgumentException("Uri can not be null");
		}
		//設置播放路徑
		setVideoURI(uri);
		//開始播放
		start();
		setOnPreparedListener(new OnPreparedListener() {

			@Override
			public void onPrepared(MediaPlayer mp) {
				//設置循環播放
				mp.setLooping(true);	
			}
		});
		setOnErrorListener(new OnErrorListener() {

			@Override
			public boolean onError(MediaPlayer mp, int what, int extra) {
				return true;
			}
		});
	}
}

衝的來說就是繼承VideoView 實現他的構造方法，設置播放路徑設置一些基本屬性就ok了

現在就是有一點邏輯的時候了，怎麼讓每個視頻頁下面有一個紅點，不是當前播放的頁就沒有紅點呢。

MainActivity.class

package com.android.mooc.activity;

import java.util.ArrayList;
import java.util.List;
import android.app.Activity;
import android.content.Intent;
import android.content.SharedPreferences;
import android.os.Bundle;
import android.os.Handler;

import com.android.adapter.Adapter.GuideFragmentPagerAdapter;
import com.android.mooc.R;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.support.v7.app.AppCompatActivity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.WindowManager;
import android.widget.Button;
import android.widget.ImageView;

import com.android.mooc.fragment.GuideOneFragment;
import com.android.mooc.fragment.GuideThreeFragment;
import com.android.mooc.fragment.GuideTwoFragment;

/**
 * 高仿慕課網動畫
 * 
 * @author nzx
 * 
 */
public class MainActivity extends AppCompatActivity implements View.OnClickListener{
	private ViewPager viewPager;
	private List<Fragment> list = new ArrayList<>();
	private GuideOneFragment guideOneFragment;
	private GuideTwoFragment guideTwoFragment;
	private GuideThreeFragment guideThreeFragment;
	private GuideFragmentPagerAdapter adapter;
	private Button btn_login;
	 private ImageView[] indicationPoint;//指示點控件
	private boolean isFirst;//判斷是否是第一次啓動
	private Handler handler;
	private int[] points = {R.id.point1,R.id.point2,R.id.point3};
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
				WindowManager.LayoutParams.FLAG_FULLSCREEN);
		/**
		 * 設置窗體全屏getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN
		 * , WindowManager.LayoutParams.FLAG_FULLSCREEN);
		 */
		/***
		 * //設置窗體始終點亮
		 * getWindow().setFlags(WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON,
		 * WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON); //設置窗體背景模糊
		 * getWindow().setFlags(WindowManager.LayoutParams.FLAG_BLUR_BEHIND,
		 * WindowManager.LayoutParams.FLAG_BLUR_BEHIND);
		 */
		setContentView(R.layout.activity_main);
		init();
		initView();
		initDots();

	}

	public void init() {
		btn_login = (Button) findViewById(R.id.btn_login);
		viewPager = (ViewPager) findViewById(R.id.viewPager);
		btn_login.setOnClickListener(this);
        indicationPoint = new ImageView[list.size()];
        //實例化每個指示點控件
        for (int i=0; i<list.size(); i++) {
            indicationPoint[i] = (ImageView) findViewById(points[i]);
        }
	}

	public void initView() {
		// 設置viewpaper的頁數
		viewPager.setOffscreenPageLimit(3);
		//加載我們的視頻頁
		if (guideOneFragment == null) {
			guideOneFragment = new GuideOneFragment();
			list.add(guideOneFragment);
		}
		if (guideTwoFragment == null) {
			guideTwoFragment = new GuideTwoFragment();
			list.add(guideTwoFragment);
		}
		if (guideThreeFragment == null) {
			guideThreeFragment = new GuideThreeFragment();
			list.add(guideThreeFragment);
		}
		adapter = new GuideFragmentPagerAdapter(getSupportFragmentManager(),
				list);
		viewPager.setAdapter(adapter);
	}
		//初始化dots方法中，找到了每一個dots的對象，相當於一個個find出來，但對於大型數據用兩個數組的方式更好
	    private void initDots(){
	    	indicationPoint = new ImageView[list.size()];
	        for(int i =0; i<list.size(); i++){
	        	indicationPoint[i]= (ImageView) findViewById(points[i]);
	        }
	    
		viewPager.setOnPageChangeListener(new OnPageChangeListener() {

			@Override
			public void onPageSelected(int position) {
				if (position == 2) {
					btn_login.setVisibility(View.VISIBLE);
				} else {
					btn_login.setVisibility(View.GONE);
				}
				for (int i = 0; i < indicationPoint.length; i++) {
					if (position==i) {
						/**被選中是紅點*/
						indicationPoint[i].setImageResource(R.drawable.msg_update);
					}else {
						indicationPoint[i].setImageResource(R.drawable.person_item_point);
					}
					
				}
				
			}

			@Override
			public void onPageScrolled(int arg0, float arg1, int arg2) {

			}

			@Override
			public void onPageScrollStateChanged(int arg0) {
			}
		});
	}

		@Override
		public void onClick(View v) {
			// TODO Auto-generated method stub
			switch (v.getId()) {
			case R.id.btn_login:
				MainActivity.this.startActivity(new Intent(MainActivity.this, appActivity.class));
				finish();
				break;

			default:
				break;
			}
		}

    

}

這些就是我們大概的代碼了，大家先看一下大概的邏輯在來看代碼。在去拿demo去看，然後跟着自己的邏輯走一遍代碼，有時間的可以自己敲一下，也可以直接套過去使用。

不懂的地方可以加我674939877也可以加羣 166120952 有什麼不懂有大神可以教你。demo就在下面。http://download.csdn.net/detail/ningzhouxu/9618216

仿製慕課網app實現鬥魚，全民k歌視頻引導頁（ViewVideoViewPaper）炫酷效果

如何使用 JS 判斷用戶是否處於活躍狀態

通過HPA+CronHPA組合應對業務複雜彈性伸縮場景

android 支付寶第三方支付

用print在canvas自定義View實現飄雪花，多色雪花功能。

仿製慕課網app實現鬥魚，全民k歌視頻引導頁（ViewVideoViewPaper）炫酷效果

android intent的跳轉,頁面傳值

基於SlipButton教你如何實現ios7的選擇器效果

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結