慕课网视频启动导航的炫酷简单完美实现
导航的形式很多，然后我来实现慕课网的视频导航功能，以后不定项目中用到了，个人感觉效果还是不错的。
先看效果图：
视频导航页
登录注册页和体验也是加载的网页，看图：
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
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;
}
});
}
}
写导航布局文件：
<?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>我们单个的导航页布局：
<?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)//根据传过来的参数设置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，好久没有使用了顺便温习下。
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