仿制慕课网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 stubsuper.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;@Overridepublic View onCreateView(LayoutInflater inflater,@Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {View view=inflater.inflate(R.layout.fragment_guideone, null, false);initView(view);return view;}@Overridepublic 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;}@Overridepublic Fragment getItem(int arg0) {return list.get(arg0);}@Overridepublic 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);}@Overrideprotected 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() {@Overridepublic void onPrepared(MediaPlayer mp) {//设置循环播放mp.setLooping(true);}});setOnErrorListener(new OnErrorListener() {@Overridepublic 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() {@Overridepublic 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);}}}@Overridepublic void onPageScrolled(int arg0, float arg1, int arg2) {}@Overridepublic void onPageScrollStateChanged(int arg0) {}});}@Overridepublic void onClick(View v) {// TODO Auto-generated method stubswitch (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