看着别人家的App有的打开是视频引导页，那是一个羡慕啊，特别是有美女的情况下，这样的直播App能不常常打开看看吗。我也想要这样的效果。那就来吧，来就来吧，就顺手写了一个。
废话少说，放码过来 github代码地址
先上效果图，由于gif限制5M大小，所以只裁剪了部分演示：
演示
1376328-0)]
制作流程：
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() {
}
}
网友评论