Android实现视频播放引导页功能-技术圈

看着别人家的App有的打开是视频引导页，那是一个羡慕啊，特别是有美女的情况下，这样的直播App能不常常打开看看吗。我也想要这样的效果。那就来吧，来就来吧，就顺手写了一个。

先上效果图，由于gif限制5M大小，所以只裁剪了部分演示：

制作流程：

1、使用3个fragment播放对应的视频，从主页面将视频ResId传过去。

    private void init() {        vpGuide.setOffscreenPageLimit(4);        for (int i = 0; i < videoRes.length; i++) {            GuidePagerFragment fragment = new GuidePagerFragment();            Bundle bundle = new Bundle();            bundle.putInt("res", videoRes[i]);            bundle.putInt("page", i);            fragment.setArguments(bundle);            fragments.add(fragment);        }        pagerAdapter = new FmPagerAdapter(fragments, getSupportFragmentManager());        vpGuide.setAdapter(pagerAdapter);
        tvEnter.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                //进入主页面            }        });
        initDot();    }

2、大家经常写的功能，initDot()创建变化的小圆点，循环创建view添加到一个Linearlayout中;滑动viewpager切换对应小圆点。

   private void initDot() {        params1 = new LinearLayout.LayoutParams(dip2px(getApplicationContext(),7),dip2px(getApplicationContext(),7));        params1.leftMargin = dip2px(getApplicationContext(),15);        params2 = new LinearLayout.LayoutParams(dip2px(getApplicationContext(),10),dip2px(getApplicationContext(),10));        params2.leftMargin = dip2px(getApplicationContext(),15);        View dot;        for (int i = 0; i < videoRes.length; i++) {            dot = new View(this);            if (i == 0) {                dot.setLayoutParams(params2);                dot.setBackgroundResource(R.drawable.dot_focus);            } else {                dot.setLayoutParams(params1);                dot.setBackgroundResource(R.drawable.dot_unfocus);            }            llDot.addView(dot);        }    }
    private void setCurrentdot(int position) {        for (int i = 0; i < llDot.getChildCount(); i++) {            View dot = llDot.getChildAt(i);            if (i == position) {                dot.setLayoutParams(params2);                dot.setBackgroundResource(R.drawable.dot_focus);            } else {                dot.setLayoutParams(params1);                dot.setBackgroundResource(R.drawable.dot_unfocus);            }
        }    }
    private void setPageChange() {        vpGuide.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {            @Override            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            }
            @Override            public void onPageSelected(int position) {                setCurrentdot(position);            }
            @Override            public void onPageScrollStateChanged(int state) {
            }        });    }

3、打开对应fragment就进行播放视频，切换页面就停止播放。onCompletion()回调是当前视频播放完成的回调，然后自动切换到下一页。

public class GuidePagerFragment extends LazyLoadFragment implements MediaPlayer.OnPreparedListener, MediaPlayer.OnCompletionListener {
    private VideoView videoviewGuide;    private int curPage;    private boolean mHasPaused;
    @Override    protected int setContentView() {        return R.layout.fragment_guide_pager;    }
    @Override    protected void stopLoad() {        super.stopLoad();        if (videoviewGuide != null) {            videoviewGuide.stopPlayback();        }    }
    @Override    public void onDestroyView() {        super.onDestroyView();        ButterKnife.unbind(this);    }
    @Override    protected void lazyLoad() {        if (getArguments() == null) {            return;        }        videoviewGuide = findViewById(R.id.videoview_guide);        int videoRes = getArguments().getInt("res");        curPage = getArguments().getInt("page");        videoviewGuide.setOnPreparedListener(this);        videoviewGuide.setVideoPath("android.resource://" + getActivity().getPackageName() + "/" + videoRes);
    }
    @Override    public void onPrepared(MediaPlayer mp) {        if (videoviewGuide != null) {            videoviewGuide.requestFocus();            videoviewGuide.seekTo(0);            videoviewGuide.start();            videoviewGuide.setOnCompletionListener(this);        }        return;    }
    @Override    public void onResume() {        super.onResume();        if (mHasPaused) {            if (videoviewGuide != null) {                videoviewGuide.seekTo(curPage);                videoviewGuide.resume();            }        }        return;    }
    @Override    public void onPause() {        super.onPause();        if (videoviewGuide != null) {            curPage = videoviewGuide.getCurrentPosition();        }        mHasPaused = true;    }
    public void onDestroy() {        super.onDestroy();        if (videoviewGuide != null) {            videoviewGuide.stopPlayback();        }        return;    }
    @Override    public void onCompletion(MediaPlayer mp) {        ((GuidePagerActivity)getActivity()).next(curPage);    }}

这里用到了懒加载fragment，如果不用的话，刚进入多个视频就会同时播放，再切换都不知道后面进度播到天高皇帝远了。第一次进入不会同时播放多个。

调用系统方法getUserVisibleHint()，视图对当加用户是显示状态，返回true。才可以进行数据加载。

public abstract class LazyLoadFragment extends Fragment {    /**     * 视图是否已经初初始化     */    protected boolean isInit = false;    protected boolean isLoad = false;    protected final String TAG = "LazyLoadFragment";    private View view;
    @Nullable    @Override    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {        view = inflater.inflate(setContentView(), container, false);        isInit = true;        /**初始化的时候去加载数据**/        isCanLoadData();        return view;    }
    /**     * 视图是否已经对用户可见，系统的方法     */    @Override    public void setUserVisibleHint(boolean isVisibleToUser) {        super.setUserVisibleHint(isVisibleToUser);        isCanLoadData();    }
    /**     * 是否可以加载数据     * 可以加载数据的条件：     * 1.视图已经初始化     * 2.视图对用户可见     */    private void isCanLoadData() {        if (!isInit) {            return;        }
        if (getUserVisibleHint()) {            lazyLoad();            isLoad = true;        } else {            if (isLoad) {                stopLoad();            }        }    }
    /**     * 视图销毁的时候讲Fragment是否初始化的状态变为false     */    @Override    public void onDestroyView() {        super.onDestroyView();        isInit = false;        isLoad = false;
    }
    protected void showToast(String message) {        if (!TextUtils.isEmpty(message)) {            Toast.makeText(getContext(), message, Toast.LENGTH_SHORT).show();        }
    }
    /**     * 设置Fragment要显示的布局     *     * @return 布局的layoutId     */    protected abstract int setContentView();
    /**     * 获取设置的布局     *     * @return     */    protected View getContentView() {        return view;    }
    /**     * 找出对应的控件     *     * @param id     * @param <T>     * @return     */    protected <T extends View> T findViewById(int id) {
        return (T) getContentView().findViewById(id);    }
    /**     * 当视图初始化并且对用户可见的时候去真正的加载数据     */    protected abstract void lazyLoad();
    /**     * 当视图已经对用户不可见并且加载过数据，如果需要在切换到其他页面时停止加载数据，可以调用此方法     */    protected void stopLoad() {    }}

源码地址：

https://github.com/18380438200/GuideVideo

到这里就结束啦。