最近要写一个广告页展示，开始只要图片，可现在要视频也能轮播，所以就去网上找。 想着能Copy坚决不手写的原则，经过一天苦战，终于决定自己去实现了。
话不多说，直接开始上实现方式。
写功能之前，先引入第三方的框架
implementation 'com.shuyu:GSYVideoPlayer:7.1.3'
implementation 'com.github.bumptech.glide:glide:4.11.0'
GSYVideoPlayer 是一个基于IJKPlayer（兼容系统MediaPlayer与EXOPlayer2），实现了多功能的视频播放器，想了解更多的可以去百度下，我用这个的目的就是它里面自带缓存。Glide不多说了。
首先想好思路，要实现Video和Image ，肯定要分不同的界面布局，所以用ViewPage和Fragment来实现。Vp2没有用，大家可以自己去替换着试试。
ImageFragment ，代码里面有注释
public class ImageFragment extends Fragment {
private String url; // 传过来的路径
private PagerListener finishListener; //回调监听
private ImageView imageView;
private static final int IMAGETIME = 4000; // 默认图片4s切换
public ImageFragment(String imageRes, PagerListener listener) {
this.url = imageRes;
this.finishListener = listener;
}
public void imgStart(){
if (imageView!=null) {
finishListener.currentItem(IMAGETIME);
}
}
@Override
public void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
}
@Nullable
@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.layout_image, null);
view.setOnClickListener(v->finishListener.onClick());
imageView = view.findViewById(R.id.image);
Glide.with(getActivity()).load(url).centerCrop()
.diskCacheStrategy(DiskCacheStrategy.ALL).into(imageView);
imgStart();
return view;
}
@Override
public void onDestroy() {
super.onDestroy();
}
}
VideoFragment ，代码里面有注释
public class VideoFragment extends Fragment {
private StandardGSYVideoPlayer player;
private String url; // 传过来的路径
private PagerListener finishListener; //回调监听
public VideoFragment(String url, PagerListener listener) {
this.url = url;
this.finishListener = listener;
}
@Override
public void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
}
/**
* 开始播放
*/
public void startVideo() {
if (player != null) {
player.startPlayLogic();
// 这块用的是GSYVideoPlayer 里面的方法 ，下面做判断是因为有的视频时间太短，不饿能准确的回调
player.setGSYVideoProgressListener((progress, secProgress, currentPosition, duration) -> {
if (duration < 30*1000) {//总时长小于40S
if (progress == 96){
finishListener.currentItem(0);
}
}else if (duration < 50*1000) {//总时长小于40S
if (progress == 97){
finishListener.currentItem(0);
}
}else if (duration < 90*1000){//总时长小于90S
if (progress == 98){
finishListener.currentItem(0);
}
}else {
if (progress == 99){
finishListener.currentItem(0);
}
}
});
}
}
@Nullable
@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.layout_video, null);
player = view.findViewById(R.id.video_item_player);
player.setUp(url, true, "");
player.getTitleTextView().setVisibility(View.GONE);
player.getBackButton().setOnClickListener(v -> finishListener.onClick());
player.getFullscreenButton().setVisibility(View.GONE);
player.getStartButton().setVisibility(View.GONE);
ImageView imageView = new ImageView(getContext());
imageView.setImageResource(R.drawable.image8);
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
player.setThumbImageView(imageView);
startVideo();
return view;
}
@Override
public void onPause() {
super.onPause();
}
@Override
public void onResume() {
super.onResume();
}
@Override
public void onDestroy() {
super.onDestroy();
GSYVideoManager.releaseAllVideos();
}
}
PagerListener很简单，还是放上吧
interface PagerListener {
// 监听 这里可以回调一些数据进行处理
void onClick();
// 切换，同样的根据需求回调fragment数据
void currentItem(int time);
}
DataBean是数据 ，里面看下就好了，来自https://www.jianshu.com/p/9db0fd1579b6
public class DataBean {
public Integer imageRes;
public String imageUrl;
public String title;
public int viewType;
public DataBean(Integer imageRes, String title, int viewType) {
this.imageRes = imageRes;
this.title = title;
this.viewType = viewType;
}
public DataBean(String imageUrl, String title, int viewType) {
this.imageUrl = imageUrl;
this.title = title;
this.viewType = viewType;
}
public static List MainActivity() {
List list = new ArrayList<>();
list.add(new DataBean("http://vfx.mtime.cn/Video/2019/03/18/mp4/190318231014076505.mp4", "", 2));
list.add(new DataBean("http://vfx.mtime.cn/Video/2019/03/12/mp4/190312083533415853.mp4", "", 2));
list.add(new DataBean("https://img.zcool.cn/community/011ad05e27a173a801216518a5c505.jpg", null, 1));
list.add(new DataBean("https://img.zcool.cn/community/0148fc5e27a173a8012165184aad81.jpg", null, 1));
list.add(new DataBean("https://img.zcool.cn/community/013c7d5e27a174a80121651816e521.jpg", null, 1));
list.add(new DataBean("https://img.zcool.cn/community/01b8ac5e27a173a80120a895be4d85.jpg", null, 1));
list.add(new DataBean("http://vfx.mtime.cn/Video/2019/03/09/mp4/190309153658147087.mp4", "", 2));
list.add(new DataBean("http://vfx.mtime.cn/Video/2019/03/19/mp4/190319222227698228.mp4", "", 2));
list.add(new DataBean("https://img.zcool.cn/community/01a85d5e27a174a80120a895111b2c.jpg", null, 1));
list.add(new DataBean("https://img.zcool.cn/community/01085d5e27a174a80120a8958791c4.jpg", null, 1));
list.add(new DataBean("https://img.zcool.cn/community/01f8735e27a174a8012165188aa959.jpg", null, 1));
return list;
}
public static List getColors(int size) {
List list = new ArrayList<>();
for(int i = 0; i < size; i++) {
list.add(getRandColor());
}
return list;
}
}
下面就是实现功能了，因为开始代码感觉不会太多，所以我都写在了一页，感觉不够漂亮的可以自己去分下。
public class MainActivity extends AppCompatActivity implements PagerListener {
// 指示器相关的
private List mImgList;
private int img_select;
private int img_unSelect;
private static final int IMAGESIZE = 15;
// 界面相关的
private ViewPager viewpager;
private LinearLayout linearLayout;
private List dataBeans;
private List fragments;
private MyFragmentAdapter adapter;
private boolean mIsChanged = false;
private int mCurrentPagePosition = FIRST_ITEM_INDEX;
private static final int FIRST_ITEM_INDEX = 1;
// 需要的可以在这块设置成静态内部类，避免内存泄漏
private Handler handler = new Handler() {
@Override
public void handleMessage(@NonNull Message msg) {
super.handleMessage(msg);
viewpager.setCurrentItem(mCurrentPagePosition + 1);
}
};
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_vpw);
viewpager = findViewById(R.id.viewpager);
linearLayout = findViewById(R.id.dot_horizontal);
dataBeans = DataBean.MainActivity();
fragments = new ArrayList<>();
int size = dataBeans.size();
mImgList = new ArrayList<>();
img_select = R.drawable.dot_select;
img_unSelect = R.drawable.dot_unselect;
for (int i = 0; i < size; i++) {
ImageView imageView = new ImageView(this);
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(new ViewGroup.LayoutParams(
ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT));
//为小圆点左右添加间距
params.leftMargin = 10;
params.rightMargin = 10;
//给小圆点一个默认大小
params.height = IMAGESIZE;
params.width = IMAGESIZE;
// 默认第一个开始
if (i == 0) {
imageView.setBackgroundResource(img_select);
} else {
imageView.setBackgroundResource(img_unSelect);
}
//为LinearLayout添加ImageView
linearLayout.addView(imageView, params);
mImgList.add(imageView);
}
// 为了实现无限轮播 在fragment的第一个加入dataBeans的最后一个
if (dataBeans.get(size - 1).viewType == 1) {
fragments.add(new ImageFragment(dataBeans.get(size - 1).imageUrl, MainActivity.this));
} else {
fragments.add(new VideoFragment(dataBeans.get(size - 1).imageUrl, MainActivity.this));
}
// 这里是正常创建
for (DataBean dataBean : dataBeans) {
if (dataBean.viewType == 2) {
fragments.add(new VideoFragment(dataBean.imageUrl, MainActivity.this));
} else {
fragments.add(new ImageFragment(dataBean.imageUrl, MainActivity.this));
}
}
// 为了实现无限轮播 在fragment的末尾一个加入dataBeans的第一个
if (dataBeans.get(0).viewType == 1) {
fragments.add(new ImageFragment(dataBeans.get(0).imageUrl, MainActivity.this));
} else {
fragments.add(new VideoFragment(dataBeans.get(0).imageUrl, MainActivity.this));
}
adapter = new MyFragmentAdapter(getSupportFragmentManager(), fragments);
viewpager.setAdapter(adapter);
viewpager.setCurrentItem(FIRST_ITEM_INDEX, false);
viewpager.setOffscreenPageLimit(3); //设置预加载的个数
viewpager.setPageTransformer(false, new ScaleTransformer());
viewpager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
handler.removeCallbacksAndMessages(null);
mIsChanged = true;
if (position >= fragments.size() - 1) {// 末位之后，下次切换跳转到首位（1）
mCurrentPagePosition = FIRST_ITEM_INDEX;
} else if (position <= FIRST_ITEM_INDEX) {// 首位之前，下次切换跳转到末尾（N）
mCurrentPagePosition = fragments.size() - 1;
} else {
mCurrentPagePosition = position;
}
// 开启自动轮播
Fragment fragment = fragments.get(position);
if (fragment instanceof VideoFragment) {
//视频自动播放
VideoFragment videoFragment = (VideoFragment) fragment;
videoFragment.startVideo();
} else {
//图片自动倒计时
ImageFragment imageFragment = (ImageFragment) fragment;
imageFragment.imgStart();
}
for (int i = 0; i < size; i++) {
//选中的页面改变小圆点为选中状态，反之为未选中
if (i == mCurrentPagePosition-1) {
(mImgList.get(i)).setBackgroundResource(img_select);
} else {
(mImgList.get(i)).setBackgroundResource(img_unSelect);
}
}
}
@Override
public void onPageScrollStateChanged(int state) {
if (ViewPager.SCROLL_STATE_IDLE == state) {
if (mIsChanged) {
mIsChanged = false;
viewpager.setCurrentItem(mCurrentPagePosition, false);
}
}
}
});
// 每次开始先切换一次，保障fragment里面的监听回调获取到，这块可以去了解一下viewpage + fragment切换时 fragment的生命周期
currentItem(0);
}
/**
* 切换viewpage
*/
Runnable runnable = () -> handler.sendEmptyMessage(0);
@Override
public void currentItem(int time) {
handler.postDelayed(runnable, time);
}
@Override
public void onClick() {
// 点击处理
Log.e("TAG", "onClick: 点击了界面" );
}
/**
* Adapter 简单使用
*/
public static class MyFragmentAdapter extends FragmentPagerAdapter {
private List list;
public MyFragmentAdapter(FragmentManager fm, List list) {
super(fm);
this.list = list;
}
@NonNull
@Override
public Fragment getItem(int arg0) {
return list.get(arg0);
}
@Override
public int getCount() {
return list.size();
}
}
/**
* ViewPager 切换效果
*/
public static class ScaleTransformer implements ViewPager.PageTransformer {
private static final float MIN_SCALE = 0.70f;
private static final float MIN_ALPHA = 0.5f;
@Override
public void transformPage(View page, float position) {
if (position < -1 || position > 1) {
page.setAlpha(MIN_ALPHA);
page.setScaleX(MIN_SCALE);
page.setScaleY(MIN_SCALE);
} else if (position <= 1) { // [-1,1]
float scaleFactor = Math.max(MIN_SCALE, 1 - Math.abs(position));
if (position < 0) {
float scaleX = 1 + 0.3f * position;
Log.d("google_lenve_fb", "transformPage: scaleX:" + scaleX);
page.setScaleX(scaleX);
page.setScaleY(scaleX);
} else {
float scaleX = 1 - 0.3f * position;
page.setScaleX(scaleX);
page.setScaleY(scaleX);
}
page.setAlpha(MIN_ALPHA + (scaleFactor - MIN_SCALE) / (1 - MIN_SCALE) * (1 - MIN_ALPHA));
}
}
}
}
好了，这样功能就能跑起来了。效果图就不上了，懒得动的直接取源码获取运行
我的源码
布局在下面
activity_vpw
layout_image
layout_video
这只是一个Demo，在实际应用时还需要完善，里面还有一些小问题，需要根据自己的需求去更改。