手把手教你炫酷慕课网视频启动导航的完美实现

看了慕课网的视频启动导航真心感觉不错，然后呢试着去做了个一模一样的效果，个人感觉效果还是不错的。 

先来看效果：

整体感觉效果还是非常不错的吧。

实现思路

看上面那个GIF图，分析可知。首先是一个显示慕课网LOGO的Activity，然后跳转到了今天我们要讲的引导效果的Activity

• 根据它滑动的效果，可猜测是由ViewPager实现的。
• ViewPager中有三个播放着动画或者视频的Fragment。
• 底部有标识滑动到哪一页的小圆点。
• 当滑动到第三页时，出现登录、注册按钮。

实现的技术分析：

打开慕课网App的引导页面，以为是用gif图片做的，后来发现每个引导页面都是加载的一段视频。 既然我们知道每个页面都是视频的话，那么就很好做了有木有，既然是几个引导页我就想到了轮播图那就使用viewPager来实现是比较轻松的，每个视频用Fragment这样的话复用率比较高，所以就选择用FragmentPagerAdapter，然后播放视频呢本来想用Vitamio然后呢发现videoView来实现比较简单，所以果断使用，然后还加上登录注册和首页，这里为了简单直观直接使用webView加载的效果是不是特别的炫，如果是第一次也会去慕课网那样的提示页，是不是感觉非常棒。

Android三种播放视频的方式

在Android中，我们有三种方式来实现视频的播放：

1、使用其自带的播放器。指定Action为ACTION_VIEW,Data为Uri，Type为其MIME类型。

2、使用VideoView来播放。在布局文件中使用VideoView结合MediaController来实现对其控制。

3、使用MediaPlayer类和SurfaceView来实现，这种方式很灵活。

videoView的使用

Android支持播放网络上的视频。在播放网络上的视频时，牵涉到视频流的传输，往往有两种协议，

一种是HTTP，一种是RTSP。这 
两种协议最大的不同是，HTTP协议，不支持实时流媒体的播放，而RTSP协议就支持。 
Android中自带的播放器，以及VideoView等都支持上述两种协议，因此，可以直接播放网络上的视频，唯一不同的就是URI。

VideoView播放视频的步骤：

1、在界面布局文件中定义VideoView组件，或在程序中创建VideoView组件 
2、调用VideoView的如下两个方法来加载指定的视频 
setVidePath(String path)：加载path文件代表的视频 
setVideoURI(Uri uri)：加载uri所对应的视频 
3、调用VideoView的start()、stop()、psuse()方法来控制视频的播放

VideoView使用注意:

1.先把要播放的视频放到res/raw目录下,注明我这里要播放的是Android项目中的资源文件，而不是访问SD卡播放视频。 
2.视频格式必须是Android支持的格式（3gp,mp4,wmv），据说swf不支持，暂未试过。并且视频文件命名不能有大写字母，必须是小写字母、数字或下划线。 
3.布局文件中添加VideoView组件 
4.创建个String类型对象保存uri 
5.调用VideoView的setVideoURI方法设置URI，参数为上面的uri 
6.调用start()方法播放。

准备工作

1 .准备3个mp4格式的启动页视频 
2.准备2个图片（白点） 
3.准备几个webView需要加载的URL

代码解说

不多说看代码: 
先来布局：(导航页)

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"     android:layout_width="match_parent"    android:layout_height="match_parent"    tools:showIn="@layout/activity_main" tools:context=".MainActivity">    <android.support.v4.view.ViewPager        android:id="@+id/id_viewpager"        android:layout_width="match_parent"        android:layout_height="match_parent"        />    <LinearLayout        android:id="@+id/button_layout"        android:layout_width="fill_parent"        android:layout_height="wrap_content"        android:layout_alignParentBottom="true"        android:layout_marginBottom="50dp"        android:gravity="center_horizontal"        android:orientation="horizontal"        android:visibility="gone">        <TextView            android:id="@+id/login"            android:layout_width="140dp"            android:layout_height="48dp"            android:background="@drawable/guide_login_btn_bg"            android:gravity="center"            android:text="登录/注册"            android:textColor="@color/black_000000"            android:textSize="18dp" />        <TextView            android:id="@+id/enter"            android:layout_width="140dp"            android:layout_height="48dp"            android:layout_marginLeft="20dp"            android:background="@drawable/guide_enter_btn_bg"            android:gravity="center"            android:text="立即体验"            android:textColor="@color/white_66FFFFFF"            android:textSize="18sp" />    </LinearLayout>    <LinearLayout        android:id="@+id/dot_layout"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_centerHorizontal="true"        android:layout_alignParentBottom="true"        android:layout_marginBottom="10dp"        android:orientation="horizontal" /></RelativeLayout>

然后ViewPager里面使用的是Fragment里面使用的是VideoView来播放视频。所以自定义videoView便于视频的播放管理，看代码：

package com.richerpay.videoview.moocguide.view;import android.annotation.TargetApi;import android.content.Context;import android.media.MediaPlayer;import android.net.Uri;import android.os.Build;import android.util.AttributeSet;import android.widget.VideoView;@TargetApi(Build.VERSION_CODES.LOLLIPOP)public class MCVideoView extends VideoView {    public MCVideoView(Context context) {        super(context,null);    }    public MCVideoView(Context context, AttributeSet attrs) {        super(context, attrs,0);    }    public MCVideoView(Context context, AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr, 0);    }    public MCVideoView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {        super(context, attrs, defStyleAttr, defStyleRes);    }    @Override    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {       setMeasuredDimension(MeasureSpec.getSize(widthMeasureSpec), MeasureSpec.getSize(heightMeasureSpec));    }    public void playVideo(Context context, Uri paramUri)    {        if (paramUri == null)            throw new IllegalArgumentException("Uri can not be null");        setVideoURI(paramUri);        start();        setOnPreparedListener(new MediaPlayer.OnPreparedListener() {            @Override            public void onPrepared(MediaPlayer mp) {                mp.setLooping(true);            }        });        setOnErrorListener(new MediaPlayer.OnErrorListener() {            @Override            public boolean onError(MediaPlayer mp, int what, int extra) {                return true;            }        });    }}

其实不封装也是差不多的，代码很简单我们来看下Fragment的布局：

<?xml version="1.0" encoding="utf-8"?><FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical">    <com.richerpay.videoview.moocguide.view.MCVideoView        android:id="@+id/videoview"        android:layout_width="match_parent"        android:layout_height="match_parent" />    <View        android:id="@+id/guide_bg"        android:layout_width="match_parent"        android:layout_height="match_parent" /></FrameLayout>

接下来我们来看Fragment里面的代码，也是很简单：

package com.richerpay.videoview.moocguide.fragmnet;import android.content.Context;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;import com.richerpay.videoview.moocguide.R;import com.richerpay.videoview.moocguide.view.MCVideoView;public class GuideFragment extends Fragment {    private View mBgView;    private Context mContext;    private MCVideoView mVideoView;    @Override    public void onAttach(Context context) {        super.onAttach(context);        this.mContext=context;    }    @Nullable    @Override    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {        View localView = inflater.inflate(R.layout.guide_item_layout, null);        initView(localView);        return localView;    }    @Override    public void onActivityCreated(@Nullable Bundle savedInstanceState) {        super.onActivityCreated(savedInstanceState);        initData();    }    private void initView(View localView) {        mVideoView = ((MCVideoView)localView.findViewById(R.id.videoview));        mBgView = localView.findViewById(R.id.guide_bg);    }    private void initData() {        Bundle localBundle = getArguments();        int i = 0;        int j = 0;        int k = 0;        if ((localBundle != null) && (localBundle.containsKey("index")))            i = localBundle.getInt("index");        try        {            String str = "guide_" + i;            j = R.raw.class.getDeclaredField(str).getInt(this);            int l = R.mipmap.class.getDeclaredField(str).getInt(this);            k = l;            if (j != 0)                this.mVideoView.playVideo(mContext, Uri.parse("android.resource://" + this.mContext.getPackageName() + "/" + j));            if (k != 0)                this.mBgView.setBackgroundResource(k);            return;        }        catch (Exception localException)        {        }    }    @Override    public void onDestroy() {        super.onDestroy();        if (this.mVideoView == null)            return;        this.mVideoView.stopPlayback();    }}

上面这段代码无非就是为了公用一个Fragment所以无非就是播放Raw文件下的不同视频而已。好了我们来看下导航的代码：

package com.richerpay.videoview.moocguide;import android.animation.AnimatorSet;import android.animation.ObjectAnimator;import android.content.Intent;import android.os.Build;import android.os.Bundle;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentPagerAdapter;import android.support.v4.view.ViewPager;import android.support.v7.app.AppCompatActivity;import android.view.View;import android.widget.ImageView;import android.widget.LinearLayout;import android.widget.TextView;import com.richerpay.videoview.moocguide.fragmnet.GuideFragment;import java.util.ArrayList;import java.util.List;public class MainActivity extends AppCompatActivity implements View.OnClickListener {    private ViewPager viewpager;    private FragmentPagerAdapter mAdapter;    private List<Fragment> mFragments;    private ImageView[] images;    private GuideFragment mTab01;    private GuideFragment mTab02;    private GuideFragment mTab03;    private TextView login, enter;    private LinearLayout button_layout, dot_layout;    private ObjectAnimator mAnim;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        //   requestWindowFeature(Window.FEATURE_NO_TITLE);        setContentView(R.layout.activity_main);        initView();        setSelect(0);        initDot(0);    }    private void initEvent() {        login.setOnClickListener(this);        enter.setOnClickListener(this);    }    private void initView() {        login = (TextView) findViewById(R.id.login);        enter = (TextView) findViewById(R.id.enter);        button_layout = (LinearLayout) findViewById(R.id.button_layout);        dot_layout = (LinearLayout) findViewById(R.id.dot_layout);        viewpager = (ViewPager) findViewById(R.id.id_viewpager);        mFragments = new ArrayList<Fragment>();        Bundle bundel = new Bundle();        mTab01 = new GuideFragment();        bundel.putInt("index", 1);        mTab01.setArguments(bundel);        mTab02 = new GuideFragment();        Bundle bunde2 = new Bundle();        bunde2.putInt("index", 2);        mTab02.setArguments(bunde2);        mTab03 = new GuideFragment();        Bundle bunde3 = new Bundle();        bunde3.putInt("index", 3);        mTab03.setArguments(bunde3);        mFragments.add(mTab01);        mFragments.add(mTab02);        mFragments.add(mTab03);        mAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {            @Override            public int getCount() {                // TODO Auto-generated method stub                return mFragments.size();            }            @Override            public Fragment getItem(int arg0) {                // TODO Auto-generated method stub                return mFragments.get(arg0);            }        };        viewpager.setAdapter(mAdapter);        viewpager.setOnPageChangeListener(new android.support.v4.view.ViewPager.OnPageChangeListener() {            @Override            public void onPageSelected(int pos) {                int currentItem = viewpager.getCurrentItem();                setTab(currentItem);                initDot(pos);                images[pos].setEnabled(true);            }            @Override            public void onPageScrolled(int arg0, float arg1, int arg2) {            }            @Override            public void onPageScrollStateChanged(int arg0) {            }        });    }    private void setSelect(int i) {        setTab(i);        viewpager.setCurrentItem(i);    }    private void setTab(int i) {        switch (i) {            case 0:                button_layout.setVisibility(View.GONE);                fadeInAnim(button_layout);                break;            case 1:                button_layout.setVisibility(View.GONE);                fadeInAnim(button_layout);                break;            case 2:                button_layout.setVisibility(View.VISIBLE);                initEvent();                break;            default:                break;        }    }    @Override    public void onClick(View v) {        if (v.getId() == R.id.login) {            goLoginActivity();        }        if (v.getId() == R.id.enter) {            if (Constant.isFrist)                goIndexActivity();            else                goInitActivity();        }    }    private void goInitActivity() {        startActivity(new Intent(this, InitActivity.class));        finish();    }    private void goIndexActivity() {        startActivity(new Intent(this, IndexActivity.class));        finish();    }    private void goLoginActivity() {        startActivity(new Intent(this, LoginActivity.class));        finish();    }    private void fadeInAnim(View paramView) {        if (Build.VERSION.SDK_INT < 11)            return;        float[] arrayOfFloat = new float[2];        arrayOfFloat[0] = 0.0F;        arrayOfFloat[1] = 1.0F;        mAnim = ObjectAnimator.ofFloat(paramView, "alpha", arrayOfFloat).setDuration(1000L);        AnimatorSet localAnimatorSet = new AnimatorSet();        localAnimatorSet.play(mAnim);        localAnimatorSet.start();    }    /**    *初始化下面的点    */    private void initDot(int select) {        //设置点的个数为fragment的数量        images = new ImageView[mFragments.size()];        //先移除所有的点        dot_layout.removeAllViews();        for (int i = 0; i < mFragments.size(); i++) {            ImageView localImageView = new ImageView(this);            LinearLayout.LayoutParams localLayoutParams = new LinearLayout.LayoutParams(-2, -2);            //左边距为30            localLayoutParams.leftMargin = 30;            localImageView.setLayoutParams(localLayoutParams);            localImageView.setImageResource(R.drawable.dot_bg);            if (i == select)  //如果选中则图片变为白点                localImageView.setEnabled(true);            else    //否者就为暗一点的白点                localImageView.setEnabled(false);            images[i] = localImageView;            dot_layout.addView(localImageView);        }    }}

上面这代码无非就是把fragment适配到viewPager里面，并且根据选择到第几页来控制下面的白点，当到第三页时让登录注册按钮显示，和点击按钮执行相关的操作。

为了让效果更加好点，点击登录注册用的web

 package com.richerpay.videoview.moocguide.view;import android.content.Context;import android.graphics.Bitmap;import android.view.KeyEvent;import android.webkit.WebSettings;import android.webkit.WebSettings.RenderPriority;import android.webkit.WebSettings.ZoomDensity;import android.webkit.WebView;import android.webkit.WebViewClient;/** * 自定义WebView，长按图片获取图片url * */public class CustomWebView extends WebView{    private Context context;    public CustomWebView(Context context) {        super(context);        this.context = context;        initSettings();    }    private void initSettings() {        // 初始化设置        WebSettings mSettings = this.getSettings();        mSettings.setJavaScriptEnabled(true);//开启javascript        mSettings.setDomStorageEnabled(true);//开启DOM        mSettings.setDefaultTextEncodingName("utf-8");//设置字符编码        //设置web页面        mSettings.setAllowFileAccess(true);//设置支持文件流        mSettings.setSupportZoom(true);// 支持缩放        mSettings.setBuiltInZoomControls(true);// 支持缩放        mSettings.setUseWideViewPort(true);// 调整到适合webview大小        mSettings.setLoadWithOverviewMode(true);// 调整到适合webview大小        mSettings.setDefaultZoom(ZoomDensity.FAR);// 屏幕自适应网页,如果没有这个，在低分辨率的手机上显示可能会异常        mSettings.setRenderPriority(RenderPriority.HIGH);        //提高网页加载速度，暂时阻塞图片加载，然后网页加载好了，在进行加载图片        mSettings.setBlockNetworkImage(true);        mSettings.setAppCacheEnabled(true);//开启缓存机制        setWebViewClient(new MyWebViewClient());    }    private class MyWebViewClient extends WebViewClient {        /**         * 加载过程中 拦截加载的地址url         * @param view         * @param url  被拦截的url         * @return         */        @Override        public boolean shouldOverrideUrlLoading(WebView view, String url) {            return super.shouldOverrideUrlLoading(view, url);        }        /**         * 页面加载过程中，加载资源回调的方法         * @param view         * @param url         */        @Override        public void onLoadResource(WebView view, String url) {            super.onLoadResource(view, url);        }        /**         * 页面加载完成回调的方法         * @param view         * @param url         */        @Override        public void onPageFinished(WebView view, String url) {            super.onPageFinished(view, url);            // 关闭图片加载阻塞            view.getSettings().setBlockNetworkImage(false);        }        /**         * 页面开始加载调用的方法         * @param view         * @param url         * @param favicon         */        @Override        public void onPageStarted(WebView view, String url, Bitmap favicon) {            super.onPageStarted(view, url, favicon);        }        @Override        public void onReceivedError(WebView view, int errorCode,                                    String description, String failingUrl) {            super.onReceivedError(view, errorCode, description, failingUrl);        }        @Override        public void onScaleChanged(WebView view, float oldScale, float newScale) {            super.onScaleChanged(view, oldScale, newScale);            CustomWebView.this.requestFocus();            CustomWebView.this.requestFocusFromTouch();        }    }    @Override    // 设置回退    // 覆盖Activity类的onKeyDown(int keyCoder,KeyEvent event)方法    public boolean onKeyDown(int keyCode, KeyEvent event) {        if ((keyCode == KeyEvent.KEYCODE_BACK) && this.canGoBack()) {            this.goBack(); // goBack()表示返回WebView的上一页面            return true;        }        return super.onKeyDown(keyCode,event);    }}

View加载，顺便对webView进行了简单的封装。

ok，案例到此结束，大家有疑问可以留言~~

越努力，越幸运！！！