android的viewpager视频图片轮播实现

最新推荐文章于 2021-05-31 16:37:14 发布
最新推荐文章于 2021-05-31 16:37:14 发布
阅读量891 收藏 1
点赞数
分类专栏： android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Mocarcher/article/details/103048544
版权

项目中有类似功能，所以先写个demo ，待优化布局性能,亲测可行!，CSDN不能发录像，懒得麻烦就不贴视频了——后面项目中用的是网易提供的播放器并把player放在对象里面在创建view时绑定，极好的解决了播放问题，另外seekbar的进度放在线程更新不好，参照网易用Handler出来更好!

public class TestActivity extends AppCompatActivity {

    TextView mNumTV;
    ViewPager mViewPager;
    VpAdapter mAdapter;
    List<View> mViewList = new ArrayList<>();
    List<BannerBean> mItemList = new ArrayList<>();
    OnPagerItemClickListener mOnItemClickListener;

    int mCurrentItem = 0;
    boolean isShowVideo = false;
    boolean isThread = false;
    MediaPlayer mediaPlayer;
    BannerBean mPlayVideoBean;
    View mView;
    SurfaceView mVideoSV;
    ImageView mSwitchIV;
    SeekBar mMiniSB;
    TextView mTotalMiniTV;

    private int WHAT_AUTO_PLAY = 1000;
    private boolean isAutoPlay = true;
    private int autoPlayDuration = 4000;

    private Handler handler = new Handler(new Handler.Callback() {
        @Override
        public boolean handleMessage(Message msg) {
            if (msg.what == WHAT_AUTO_PLAY) {
                if (mViewPager != null) {
                    if (isAutoPlay) {
                        mViewPager.setCurrentItem(mViewPager.getCurrentItem() + 1, true);
                    }
                    handler.sendEmptyMessageDelayed(WHAT_AUTO_PLAY, autoPlayDuration);
                }
            }
            return false;
        }
    });


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_test);
        initView();
        initData();
        initEvent();

    }


    private void initView() {
        mViewPager = findViewById(R.id.vp_activity_test);
        mNumTV = findViewById(R.id.tv_activity_test_num);
    }

    private void initData() {
        for (int i = 0; i < 6; i++) {
            BannerBean bannerBean = new BannerBean();
            bannerBean.setId("" + i);
            if (i % 2 > 0) {
                bannerBean.setType(BannerBean.TYPE_PIC);
                bannerBean.setBeanImage("https://c-ssl.duitang.com/uploads/item/201910/31/20191031112329_rqtcw.thumb.300_300_c.jpg");
            } else {
                bannerBean.setType(BannerBean.TYPE_VIDEO);
                bannerBean.setBeanImage("http://1252492711.vod2.myqcloud.com/958d2b29vodtransgzp1252492711/0b9adbaf5285890781624263761/v.f19999.mp4");
            }
            mItemList.add(bannerBean);
        }


        for (int i = 0; i < mItemList.size(); i++) {
            mViewList.add(getView(i));
        }

        mAdapter = new VpAdapter(mViewList,true) {
            @Override
            public int getItemPosition(@NonNull Object object) {
                //重新getItemPosition，使得notifyDataSetChanged有效
                return PagerAdapter.POSITION_NONE;
            }
        };
        mViewPager.setAdapter(mAdapter);
        mViewPager.setOffscreenPageLimit(mItemList.size());

        mViewPager.setCurrentItem(0);
        mediaPlayer = new MediaPlayer();
        mediaPlayer.setAudioStreamType(AudioManager.STREAM_MUSIC);
        mNumTV.setText(getString(R.string.num_total, 1, mItemList.size()));
        startAutoPlay();
    }

    private void initEvent() {
        mOnItemClickListener = new OnPagerItemClickListener() {
            @Override
            public void onItemClick(int position, View view) {

                Toast.makeText(TestActivity.this, "点击了", Toast.LENGTH_LONG).show();
                BannerBean bean = mItemList.get(position % mItemList.size());
                mView = null;
                mView = view;
                mSwitchIV = view.findViewById(R.id.iv_item_banner_video_switch);
                mTotalMiniTV = view.findViewById(R.id.tv_item_banner_video_progress_total);
                try {
                    if (mediaPlayer != null && mediaPlayer.isPlaying()
                            && mPlayVideoBean != null && mPlayVideoBean.getId().equals(bean.getId())) {
                        mediaPlayer.pause();
                        mSwitchIV.setVisibility(VISIBLE);
                        mSwitchIV.setImageResource(R.drawable.ic_new_player_pause);
                    } else if (mediaPlayer != null
                            && !mediaPlayer.isPlaying()
                            && mPlayVideoBean != null && mPlayVideoBean.getId().equals(bean.getId())) {
                        mediaPlayer.start();
                        mSwitchIV.setVisibility(GONE);
                        mSwitchIV.setImageResource(R.drawable.ice_playing);
                    } else if (mediaPlayer != null) {
                        startMediaPlayer(bean, view);
                    }
                    if (mediaPlayer != null) {
                        mTotalMiniTV.setText(mediaPlayer.getDuration());
                    }
                    mPlayVideoBean = bean;
                } catch (Exception e) {
                    e.printStackTrace();
                    Log.e("TAG", e.toString());
                }

            }

            @Override
            public void onItemTouch(int position, View view) {
                mView = null;
                mView = view;
                mSwitchIV = view.findViewById(R.id.iv_item_banner_video_switch);
                isShowVideo = !isShowVideo;
                if (mediaPlayer != null && mediaPlayer.isPlaying()) {
                    mSwitchIV.setImageResource(R.drawable.ice_playing);
                } else {
                    mSwitchIV.setImageResource(R.drawable.ic_new_player_pause);
                }
                if (isShowVideo) {
                    mSwitchIV.setVisibility(GONE);
                } else {
                    mSwitchIV.setVisibility(VISIBLE);
                }
            }

            @Override
            public void onItemChange(int position, int progress, View view) {
                BannerBean bean = mItemList.get(position % mItemList.size());
                mVideoSV = view.findViewById(R.id.vv_item_banner_video);
                mSwitchIV = view.findViewById(R.id.iv_item_banner_video_switch);
                mMiniSB = view.findViewById(R.id.sb_item_banner_video_progress);
                mTotalMiniTV = view.findViewById(R.id.tv_item_banner_video_progress_total);
                if (mediaPlayer != null) {
                    try {
                        mediaPlayer.reset();
                        // 设置播放的视频源
                        mediaPlayer.setDataSource(bean.getBeanImage());
                        // 设置显示视频的SurfaceHolder
                        mediaPlayer.setDisplay(mVideoSV.getHolder());
                        mediaPlayer.prepare();
                        mediaPlayer.seekTo(progress);
                        mediaPlayer.start();
                        mPlayVideoBean = bean;

                        mSwitchIV.setVisibility(GONE);
                        mSwitchIV.setImageResource(R.drawable.ice_playing);
                    } catch (IOException e) {
                        e.printStackTrace();
                    }

                }

            }
        };

        mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                mCurrentItem=position % mItemList.size();
                final BannerBean bean = mItemList.get(position % mItemList.size());
                switch (bean.getType()) {
                    case BannerBean.TYPE_VIDEO:
                        Log.e("TAG", "视频类型" + position % mItemList.size());
                        if (mediaPlayer != null) {
                            View view = mViewList.get(position % mItemList.size());
                            if (mediaPlayer.isPlaying() && mPlayVideoBean != null
                                    && mPlayVideoBean.getId().equals(bean.getId())) {
                                startMediaPlayer(bean, view);
                            }
                        }
                        isAutoPlay = false;
                        break;

                    case BannerBean.TYPE_PIC:
                        if (mediaPlayer != null && mView != null) {
                            mediaPlayer.pause();
                            mSwitchIV = mView.findViewById(R.id.iv_item_banner_video_switch);
                            mSwitchIV.setVisibility(VISIBLE);
                            mSwitchIV.setImageResource(R.drawable.ic_new_player_pause);
                        }
                        isAutoPlay = true;
                        break;
                }

                mNumTV.setText(getString(R.string.num_total, position % mItemList.size() + 1, mItemList.size()));
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });

    }

    /**
     * 开始自动轮播
     */
    private void startAutoPlay() {
        stopAutoPlay(); // 避免重复消息
        if (isAutoPlay) {
            handler.sendEmptyMessageDelayed(WHAT_AUTO_PLAY, autoPlayDuration);
        }
    }

    /**
     * 停止自动轮播
     */
    private void stopAutoPlay() {
        if (isAutoPlay) {
            handler.removeMessages(WHAT_AUTO_PLAY);
        }
    }

    private View getView(final int position) {
        final BannerBean bean = mItemList.get(position);
        switch (bean.getType()) {
            case BannerBean.TYPE_PIC:
                RoundedImageView imageView = new RoundedImageView(this);
                imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
                imageView.setCornerRadius(0);
                imageView.mutateBackground(true);
                imageView.setTileModeX(Shader.TileMode.REPEAT);
                imageView.setTileModeY(Shader.TileMode.REPEAT);

                imageView.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {

                    }
                });


                imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
                Glide.with(this).load(bean.getBeanImage()).into(imageView);
                return imageView;

            case BannerBean.TYPE_VIDEO:
                final View view = LayoutInflater.from(this).inflate(R.layout.item_banner_video, null);
                final SurfaceView mVideo = view.findViewById(R.id.vv_item_banner_video);
                final RoundedImageView mRoundedImageView = view.findViewById(R.id.iv_item_banner_video);
                final ImageView mSwitch = view.findViewById(R.id.iv_item_banner_video_switch);
                final SeekBar mMini = view.findViewById(R.id.sb_item_banner_video_progress);
                final TextView mTotalMini = view.findViewById(R.id.tv_item_banner_video_progress_total);
                mRoundedImageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
                mRoundedImageView.setCornerRadius(0);
                mRoundedImageView.mutateBackground(true);
                mRoundedImageView.setTileModeX(Shader.TileMode.REPEAT);
                mRoundedImageView.setTileModeY(Shader.TileMode.REPEAT);
                mRoundedImageView.setVisibility(GONE);
                mTotalMini.setText("00:00");

                mVideo.getHolder().addCallback(new SurfaceHolder.Callback() {
                    @Override
                    public void surfaceCreated(SurfaceHolder holder) {
//                            currentPosition = mediaPlayer.getCurrentPosition();
//                            mediaPlayer.stop();
                        // 设置播放的视频源
//                            try {
//                                MediaPlayer player=new MediaPlayer();
//                                player.setAudioStreamType(AudioManager.STREAM_MUSIC);
//                                player.setDataSource(bean.getBeanImage());
//                                // 设置显示视频的SurfaceHolder
//                                player.setDisplay(mVideo.getHolder());
//                                mMini.setMax(player.getDuration());
//                                mMini.setProgress(player.getCurrentPosition());
//                                player=null;
//                            } catch (IOException e) {
//                                e.printStackTrace();
//                            }
                        Canvas canvas = holder.lockCanvas();
                        Bitmap bitmap = ImageUtil.drawableToBitmap(ContextCompat.getDrawable(TestActivity.this, R.drawable.ic_default));
                        if (canvas != null) {
                            synchronized (bitmap) {
                                canvas.drawBitmap(bitmap, 0, 0, null);
                                holder.unlockCanvasAndPost(canvas);
                            }
                        }
                    }

                    @Override
                    public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) {
                    }

                    @Override
                    public void surfaceDestroyed(SurfaceHolder holder) {

                    }
                });

                mSwitch.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        if (mOnItemClickListener != null) {
                            mOnItemClickListener.onItemClick(position, view);
                        }
                    }
                });

                mMini.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
                    @Override
                    public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                    }

                    @Override
                    public void onStartTrackingTouch(SeekBar seekBar) {

                    }

                    @Override
                    public void onStopTrackingTouch(SeekBar seekBar) {
                        int progress = seekBar.getProgress();
                        if (mOnItemClickListener != null && mediaPlayer != null && mediaPlayer.isPlaying()) {
                            mOnItemClickListener.onItemChange(position, progress, view);
                        } else {
                            seekBar.setProgress(0);
                        }
                    }
                });

                view.setOnTouchListener(new View.OnTouchListener() {
                    @Override
                    public boolean onTouch(View v, MotionEvent event) {
                        if (mOnItemClickListener != null) {
                            mOnItemClickListener.onItemTouch(position, view);
                        }
                        return false;
                    }
                });

                mRoundedImageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
                Glide.with(this).load(bean.getBeanImage() + "?vframe/jpg/offset/1").into(mRoundedImageView);
                return view;
        }

        return null;
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        destoryMediaPlayer();
    }


    //启动线程的一个方法
    class MyThread extends Thread {
        @Override
        public void run() {
            super.run();
            while (mMiniSB.getProgress() <= mMiniSB.getMax() && mediaPlayer != null) {
                //获取音乐当前播放的位置
                int position = mediaPlayer.getCurrentPosition();
                mMiniSB.setProgress(position);
            }
        }
    }

    private void startMediaPlayer(BannerBean bean, View view) {
        mView = null;
        mView = view;
        mVideoSV = view.findViewById(R.id.vv_item_banner_video);
        mSwitchIV = view.findViewById(R.id.iv_item_banner_video_switch);
        try {
            if (mediaPlayer != null && mPlayVideoBean != null
                    && mPlayVideoBean.getId().equals(bean.getId())) {
                mediaPlayer.start();
                mSwitchIV.setVisibility(GONE);
                mSwitchIV.setImageResource(R.drawable.ice_playing);
            } else if (mediaPlayer != null) {
                mediaPlayer.reset();
                // 设置播放的视频源
                mediaPlayer.setDataSource(bean.getBeanImage());
                // 设置显示视频的SurfaceHolder
                mediaPlayer.setDisplay(mVideoSV.getHolder());
                mediaPlayer.prepare();
                mediaPlayer.start();
                mPlayVideoBean = bean;


                mMiniSB = view.findViewById(R.id.sb_item_banner_video_progress);
                mTotalMiniTV = view.findViewById(R.id.tv_item_banner_video_progress_total);
                int duration = mediaPlayer.getDuration();
                //将进度条设置最大值为：音乐的总时长
                mMiniSB.setMax(duration);

                TimeUtil timeUtil = new TimeUtil();
                mTotalMiniTV.setText("" + timeUtil.stringForTime(duration));
                //启动线程
                new MyThread().start();
                mSwitchIV.setVisibility(GONE);
                mSwitchIV.setImageResource(R.drawable.ice_playing);
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    private void destoryMediaPlayer() {
        try {
            if (mediaPlayer != null) {
                mediaPlayer.setOnCompletionListener(null);
                mediaPlayer.setOnPreparedListener(null);
                mediaPlayer.reset();
                mediaPlayer.release();
                mediaPlayer = null;
            }
        } catch (Exception e) {
        }
    }
}

另外还有OnPagerItemClickListener ，其他的工具类和VpAdapter 就继承的PagerAdapter 没什么内容就不贴了

public interface OnPagerItemClickListener {
    void onItemClick(int position, View view);

    void onItemTouch(int position, View view);

    void onItemChange(int position,int progress, View view);
}
二先生ღ
关注
专栏目录
android视频播放器轮播,嵌入 ViewPager 的视频播放器
weixin_33374585的博客
05-28 975
这次的目标是实现一个能够播放视频的轮播器，即每个页面都能放置视频且能随页面的切换实现视频的切换。这个需求类似于在ListView中实现小视频的播放和切换，核心内容是怎么将视频播放器与控件的状态变化连接在一起。视频播放器实现思路使用 ViewPager 进行轮播使用 MediaPlayer 对视频进行播放使用 TextureView 展示视频界面具体实现为了提高性能，当然不能为每一页配置一个 Med...
Android ViewPage 图片、视频轮播
a598068693的博客
05-16 8779
直接进入主题 为了方便使用我们先自定义一个View(当然不自定义也行，具体就不说了) public class Banner extends RelativeLayout { private ViewPager viewPager; private final int UPTATE_VIEWPAGER = 100; //图片默认时间间隔 private in...
Android使用ViewPager加载图片和轮播视频
08-31
主要为大家详细介绍了Android使用ViewPager加载图片和轮播视频，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
用viewpager实现图片与视频混轮播
点滴之路的博客
05-09 4889
主要参考https://blog.csdn.net/chengxu_hou/article/details/78144607 不同之处在于我用的 JCVideoPlayer播放视频，参考的博主用的是VideoView播放视频的，主要逻辑与思路，参考上篇博客博主。 代码其实不难理解：禁用了ViewPager的预加载模式，重写了一下viewPager，利用Handler与ViewPager实现轮播...
android viewpager滑动图片轮播,使用ViewPager实现图片轮播
weixin_39631295的博客
05-31 861
前言首先我们来看一下运行的效果，如下所示：这是在我们的项目中经常会用到的图片轮播效果，一般用于广告图片的展示。它要求主要实现以下功能：1)自动播放；2)无限滑动；3)手指拖拽图片时暂停自动轮播，松开后继续自动轮播；4)含动画效果的小圆点指示器。本文将介绍利用ViewPager实现无限轮播图片，图片下方加上小圆点指示器标记当前位置，并利用Handler实现自动轮播图片。正文1、实现自动播放思路：没隔...
Android ViewPager实现图片轮播效果
01-05
在app中图片的轮播显示可以说是非常常见的实现效果了，其实现原理不过是利用ViewPager，然后利用handler每隔一定的时间将ViewPager的currentItem设置为当前item的position+1即可。先来看看效果图吧：   就是实现...
Android 视频图片 轮播,详解android 视频图片混合轮播实现
weixin_28968285的博客
05-29 1106
循环添加视频view 图片viewfor (int i = 0 ;iif (beansarraylist.get(i).gettype()==1){videoplayer = new nicevideoplayer(this);controller = new txvideoplayercontroller(this);videoplayer.setcontroller(controller);...
详解android 视频图片混合轮播实现
08-26
主要介绍了android 视频图片混合轮播实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
android自动循环轮播图,android 轮播图无限循环，自动播放
weixin_36037280的博客
05-25 238
在Fragment中添加Handler：private static class BannerHandler extends Handler {@Overridepublic void handleMessage(Message msg) {if (msg.what == MSG_SWITCH_PIC) {if (vpBanner != null) {if (switchPictureAdapte...
Android ViewPager中显示图片与播放视频的填坑记录
01-20
ViewPager介绍 ViewPager的功能就是可以使视图滑动，就像Lanucher左右滑动那样。 ViewPager用于实现多页面的切换效果，该类存在于Google的兼容包android-support-v4.jar里面. ViewPager:       1)ViewPager类直接继承了ViewGroup类，所有它是一个容器类，可以在其中添加其他的view类。       2)ViewPager类需要一个PagerAdapter适配器类给它提供数据。       3)ViewPager经常和Fragment一起使用，并且提供了专门的FragmentPagerAdapter
Android实现图片自动轮播并且支持手势左右无限滑动
01-04
废话不多说了，先给大家上左右无限滑动的代码了。 1.左右无限滑动 public class MainActivity extends AppCompatActivity { private static ViewPager viewPager; private RadioGroup group; //图片资源，实际项目需要从网络获取 private int[] imageIds = {R.drawable.ym1, R.drawable.ym2, R.drawable.ym3, R.drawable.ym4}; //存放图片的数组 private List<ImageView> mList;
android轮播时间代码,教你五分钟实现Android超漂亮的刻度轮播控件实例教程
weixin_35255032的博客
05-26 383
前言最近一直在做音视频的工作，已经有大半年没有写应用层的东西了，生怕越来越生疏。正好前段时间接了个外包项目，才得以回顾一下。项目中有一个控件挺简洁漂亮的，而且用到的技术也比较基础，比较适合新手学习，所以单独开源出来，希望能对初学者有所帮助。截图截屏一、自定义View的常用方法相信每个Android程序员都知道，我们每天的开发工作当中都在不停地跟View打交道，Android中的任何一个布局、任何一...
Android中的轮播
weixin_44548405的博客
05-18 347
在使用轮播控件(Banner)前需要在dependencies里添加： //开源轮播控件 implementation 'com.youth.banner:banner:2.0.2' 添加权限： <uses-permission android:name="android.permission.INTERNET" />//联网 <uses-permission android:name="android.permission.READ_EXTERNAL_STO..
使用ViewPager来加载图片和轮播视频
nalanrumeng1113的博客
03-12 5921
使用ViewPager来加载图片和轮播视频 作为android基础组件之一，大家对viewpager已经很熟悉了，网上也有很多使用viewpager来加载图片的案例。但是像微信那样点击图片，可以轮播显示图片和视频的例子却没找到。正巧项目中有需求，可以就花时间写了下，现在给一下核心代码，希望对有此需求的同学们起一个抛砖引玉的作用。话不多说了，上代码： 以下是initData的代码“` pub
使用VIEWPAGER+SURFACEVIEW实现视频的循环滑动播放（一）
MAGICYANG的专栏
02-19 3259
本文还是使用VIERPAGER来做视频切换。
ViewPager无限轮播自动播放
qq_38744847的博客
05-12 364
package com.example.skkbck; import android.os.Bundle; import android.os.Handler; import android.app.Activity; import android.support.v4.view.PagerAdapter; import android.support.v4.view.ViewPager
android 视频和图片切换并进行自动轮播
热门推荐
w171066813的博客
07-27 1万+
刚入android没多久，遇到的比较郁闷的问题就是子线程主线程的问题，更改UI界面，本想做一个图片的轮播但是比较简单，然后就试试实现视频跟图片切换播放进行不停的循环播放。也用过不少控件，但是知其然不知其所以然，后来自己写了一段来实现图片视频互相切换轮播。在这写下一篇博客也当自己学习的过程.希望大家多多指教希望 下面代码： xml xml version="1.0" encodin
Android ViewPager 实现图片轮播效果教程与代码示例
本文档详细介绍了如何在Android应用中使用Android ViewPager实现图片轮播效果。ViewPager是Android提供的一个用于展示多个页面的组件，它允许用户通过滑动切换不同的页面。在实现图片轮播时，关键在于使用ViewPager...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值