ViewPage实现图片和视频轮播

最近要写一个广告页展示，开始只要图片，可现在要视频也能轮播，所以就去网上找。 想着能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<DataBean> MainActivity() {
    List<DataBean> 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<String> getColors(int size) {
    List<String> list = new ArrayList<>();
    for(int i = 0; i < size; i++) {
        list.add(getRandColor());
    }
    return list;
}
}

下面就是实现功能了，因为开始代码感觉不会太多，所以我都写在了一页，感觉不够漂亮的可以自己去分下。

public class MainActivity extends AppCompatActivity implements PagerListener {

// 指示器相关的
private List<ImageView> mImgList;
private int img_select;
private int img_unSelect;
private static final int IMAGESIZE = 15;

// 界面相关的
private ViewPager viewpager;
private LinearLayout linearLayout;
private List<DataBean> dataBeans;
private List<Fragment> 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<Fragment> list;

    public MyFragmentAdapter(FragmentManager fm, List<Fragment> 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

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <androidx.viewpager.widget.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
    <LinearLayout
        android:id="@+id/dot_horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:layout_marginBottom="32dp"
        android:gravity="center"
        android:orientation="horizontal" />
</FrameLayout>
</LinearLayout>

layout_image

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
    android:id="@+id/image"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>

layout_video

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/root_ll"
android:layout_width="match_parent"
android:layout_height="match_parent">

<com.shuyu.gsyvideoplayer.video.StandardGSYVideoPlayer
    android:id="@+id/video_item_player"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />
</LinearLayout>

这只是一个Demo，在实际应用时还需要完善，里面还有一些小问题，需要根据自己的需求去更改。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 199,271评论 5赞 466
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 83,725评论 2赞 376
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 146,252评论 0赞 328
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 53,634评论 1赞 270
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 62,549评论 5赞 359
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 47,985评论 1赞 275
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,471评论 3赞 390
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,128评论 0赞 254
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,257评论 1赞 294
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,233评论 2赞 317
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,235评论 1赞 328
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 32,940评论 3赞 316
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,528评论 3赞 302
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,623评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,858评论 1赞 255
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,245评论 2赞 344
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 41,790评论 2赞 339