慕课网视频启动导航的炫酷简单完美实现

导航的形式很多，然后我来实现慕课网的视频导航功能，以后不定项目中用到了，个人感觉效果还是不错的。

先看效果图：




视频导航页

登录注册页和体验也是加载的网页，看图：





1、在Android 中播放视频的方式有两种：


第一种方式是使用MediaPlayer 结合SurfaceView 来播放，通过MediaPlayer来控制视频的播放、暂停、进度等；

通过SurfaceView 来显示视频内容；

优点：灵活性高，可以进行自定义；

缺点：难度比较大；


第二种方式是使用VideoView 来播放，这个类其实也是继承了SurfaceView 类，并且实现了MediaController.



我这里实现的原理就是利用videoView来实现本地Raw文件下的视频播放。然后我们用viewPager来实现videoView的轮播，这里使用的是FragmentPagerAdapter来实现的。

videoView实现视频的播放

VideoView播放视频的步骤：

在界面布局文件中定义VideoView组件，或在程序中创建VideoView组件

调用VideoView的如下两个方法来加载指定的视频

setVidePath(String path)：加载path文件代表的视频

setVideoURI(Uri uri)：加载uri所对应的视频

调用VideoView的start()、stop()、psuse()方法来控制视频的播放

定制自己的VideoView

[code]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;
            }
        });
    }

}

写导航布局文件：

[code]<?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>

我们单个的导航页布局：

[code]<?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的代码：

[code]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)//根据传过来的参数设置raw下播放视频的不同url
                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();
    }
}

接下来我们来看导航代码的处理：这里我们使用FragmentPagerAdapter，好久没有使用了顺便温习下。

[code]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) {
        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);

            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);//点动态加入
        }
    }
}

基本主要的代码都差不多了，就写到这里吧。想要完整的代码已经上传到github上了，你可以移步https://github.com/zilianliuxue/MoocGuide去下载,欢迎大家star or fork。也可以去downMoocGuide.zip