使用ViewPager来加载图片和轮播视频

最新推荐文章于 2021-05-26 22:49:46 发布
最新推荐文章于 2021-05-26 22:49:46 发布
阅读量5.9k 收藏 3
点赞数 3
分类专栏： 技术分享 文章标签： android 视频 图片 viewpager轮播
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nalanrumeng1113/article/details/61473237
版权

作为android基础组件之一，大家对viewpager已经很熟悉了，网上也有很多使用viewpager来加载图片的案例。但是像微信那样点击图片，可以轮播显示图片和视频的例子却没找到。正巧项目中有需求，可以就花时间写了下，现在给一下核心代码，希望对有此需求的同学们起一个抛砖引玉的作用。话不多说了，上代码：
这里写图片描述
以下是initData的代码

public void initData() {
     //把聊天界面的图片和视频找出来，并加到数组中，并在
       //并根据传进来的position来找到视频或图片在数组中的位置
        for (int i = 0; i < MsgCount; i++) {
            Msg1 msg1 = fridenMessages.MessageList.get(i);
            if (msg1.getMsg().startsWith(ChatUtil.TAG_IMAGE) || msg1.getMsg().startsWith(ChatUtil.TAG_VIDEO)) {
              ImageUrl.add(msg1.getMsg());
                //查看消息postion对应的图片位置
                if (position == i) {
                    position = ImageUrl.size() - 1;
                    Log.i("TAG", "position=" + position);
                }

            }
        }
        Log.i("TAG", "position=" + position);
        //把要用到的view加到viewList中
        for (int i = 0; i < ImageUrl.size(); i++) {
            if (ImageUrl.get(i).startsWith(ChatUtil.TAG_IMAGE)) {
                PhotoView photoView = new PhotoView(context);
                viewList.add(photoView);
            } else if (ImageUrl.get(i).startsWith(ChatUtil.TAG_VIDEO)) {


                View view1 = LayoutInflater.from(context).inflate(R.layout.activity_video_player, null);
                SurfaceVideoView videoView = (SurfaceVideoView) view1.findViewById(R.id.videoview);
                int screenWidth = getScreenWidth((Activity) context);
                int videoHight = (int) (screenWidth / (MediaRecorderBase.SMALL_VIDEO_WIDTH / (MediaRecorderBase.SMALL_VIDEO_HEIGHT * 1.0f)));
//                int videoHight = (int) (screenWidth)*4/3;
                videoView.getLayoutParams().height = videoHight;
                videoView.requestLayout();
                View playStatus = view1.findViewById(R.id.play_status);
                View loading = view1.findViewById(R.id.loading);
                viewList.add(view1);
            }
        }

        adapter = new MyAdapter();
        viewPager.setAdapter(adapter);
        if (position != -1) {
            viewPager.setCurrentItem(position);
        }
    }
``` public void initEvent() {
        //给viewPager设置监听
        viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {

            @Override
            public void onPageSelected(int arg0) {

                int childCount = viewPager.getChildCount();//viewPager得到页面的数量
                //如果不是在原页面，让原来页面的视频停止播放
                if(position != arg0){
                    position=arg0;
                    StopVideo();
                }

                // 遍历当前所有加载过的PhotoView，恢复所有图片的默认状态

                for (int i = 0; i < childCount; i++) {
                    View childAt = viewPager.getChildAt(i);

                    try {
                        if (childAt != null && childAt instanceof PhotoView) {
                            PhotoView photoView = (PhotoView) childAt;
                            photoView.setOnPhotoTapListener(new PhotoViewAttacher.OnPhotoTapListener() {
                                @Override
                                public void onPhotoTap(View view, float x, float y) {
                                    finish();
                                }

                                @Override
                                public void onOutsidePhotoTap() {

                                }
                            });
                        }
                    } catch (Exception e) {
                        e.printStackTrace();
                    }
                }
                if (ImageUrl.get(position).startsWith(ChatUtil.TAG_VIDEO)) {
                    String body = ChatApplication.dbHelper.getVideoSdPath(ImageUrl.get(position));
                    String url[] = ImageUrl.get(position).substring(ChatUtil.TAG_VIDEO.length()).split("&&");
                    View childAt = viewList.get(arg0);
                    SurfaceVideoView videoView = (SurfaceVideoView) childAt.findViewById(R.id.videoview);
                    mVideoView = videoView;
                    mPlayerStatus = childAt.findViewById(R.id.play_status);
                    mLoading = childAt.findViewById(R.id.loading);
                    Log.i("TAG", "videoUrl=" + body);
                    setVideoUrl(body, url);
                    //延迟50ms，让播放器播放视频时，让它暂停
                    Handler handler = new Handler();
                    handler.postDelayed(new Runnable() {
                        @Override
                        public void run() {
                            StopVideo();
                        }
                    }, 50);
                }
            }

            @Override
            public void onPageScrolled(int arg0, float arg1, int arg2) {
                // TODO Auto-generated method stub

            }

            @Override
            public void onPageScrollStateChanged(int arg0) {
                // TODO Auto-generated method stub

            }
        });
    }
 public class MyAdapter extends PagerAdapter {

        @Override
        public int getCount() {
            return ImageUrl.size();
        }

        @Override
        public View instantiateItem(ViewGroup container, int pos) {
            Log.i("TAG", "pos=" + pos);
            if (ImageUrl.get(pos).startsWith(ChatUtil.TAG_IMAGE)) {
                PhotoView photoView = (PhotoView) viewList.get(pos);
                container.addView(photoView, ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
                String body[] = ImageUrl.get(pos).substring(ChatUtil.TAG_IMAGE.length()).split("&&");
                Log.i("TAG", "<IMAGE>=" + body[0]);
                ImageLoader.getInstance().displayImage(body[0], photoView);
                photoView.setScaleType(ImageView.ScaleType.FIT_CENTER);//设置图片显示为充满全屏
                photoView.setOnPhotoTapListener(new PhotoViewAttacher.OnPhotoTapListener() {
                    @Override
                    public void onPhotoTap(View view, float x, float y) {
                        finish();
                    }

                    @Override
                    public void onOutsidePhotoTap() {

                    }
                });
                //            photoView.setOnLongClickListener(longClickListener);

            } else if (ImageUrl.get(pos).startsWith(ChatUtil.TAG_VIDEO)) {
                 View view1 = viewList.get(pos);
                SurfaceVideoView  VideoView = (SurfaceVideoView) view1.findViewById(R.id.videoview);
                int screenWidth = getScreenWidth((Activity) context);
                int videoHight = (int) (screenWidth / (MediaRecorderBase.SMALL_VIDEO_WIDTH / (MediaRecorderBase.SMALL_VIDEO_HEIGHT * 1.0f)));
//                int videoHight = (int) (screenWidth)*4/3;
                VideoView.getLayoutParams().height = videoHight;
                VideoView.requestLayout();
                View PlayerStatus = view1.findViewById(R.id.play_status);
                View Loading = view1.findViewById(R.id.loading);
                VideoView.setOnPreparedListener(ShowBigPictureActivity.this);
                VideoView.setOnPlayStateListener(ShowBigPictureActivity.this);
                VideoView.setOnErrorListener(ShowBigPictureActivity.this);
                VideoView.setOnClickListener(ShowBigPictureActivity.this);
                VideoView.setOnInfoListener(ShowBigPictureActivity.this);
                VideoView.setOnCompletionListener(ShowBigPictureActivity.this);
                container.addView(view1, ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);

                String body = ChatApplication.dbHelper.getVideoSdPath(ImageUrl.get(pos));
                String url[] = ImageUrl.get(pos).substring(ChatUtil.TAG_VIDEO.length()).split("&&");
                //找到是点击聊天界面哪个视频进来的，将局部成员，付给类成员
                if(pos==position) {
                    mVideoView = VideoView;
                    mPlayerStatus=PlayerStatus;
                    mLoading=Loading;
                    setVideoUrl(body,url);

                }



            }

            return viewList.get(pos);
        }

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView((View) object);
        }

        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view == object;
        }
    }
以下是控制视频播放的接口：
 public void onCompletion(MediaPlayer mp) {
        onStateChanged(false);
    }

    @Override
    public boolean onError(MediaPlayer mp, int what, int extra) {

        return false;

    }

    @Override
    public boolean onInfo(MediaPlayer mp, int what, int extra) {
        switch (what) {
            case MediaPlayer.MEDIA_INFO_BAD_INTERLEAVING:
                // 音频和视频数据不正确
                ConfigUtil.showShort(context, "视频数据不正确！");
                break;
            case MediaPlayer.MEDIA_INFO_BUFFERING_START:
                if (!isFinishing())
                    mVideoView.pause();
                break;
            case MediaPlayer.MEDIA_INFO_BUFFERING_END:
                if (!isFinishing())
                    mVideoView.start();
                break;
            case MediaPlayer.MEDIA_INFO_VIDEO_RENDERING_START:
                if (DeviceUtils.hasJellyBean()) {
                    mVideoView.setBackground(null);
                } else {
                    mVideoView.setBackgroundDrawable(null);
                }
        break;
    }
    return false;
}

    @Override
    public void onStateChanged(boolean isPlaying) {
        mPlayerStatus.setVisibility(isPlaying ? View.GONE : View.VISIBLE);


    }

    @Override
    public void onPrepared(MediaPlayer mp) {
        mVideoView.setVolume(SurfaceVideoView.getSystemVolumn(this));
        mVideoView.start();
        mLoading.setVisibility(View.GONE);

    }
我觉得轮播视频的难点在于viewpager只能播放一个视频，

而每个viewItem都有继承自SurfaceView的SurfaceVideoView控件，
我让原先页面的SurfaceViedeoView停止播放，并把新页面的SurfaceVideoView付给mVideoView，然后就可以对选中页面的视频进行控制了。
下面来张效果图:
这里写图片描述

Huige1113
关注
专栏目录
Android使用ViewPager加载图片和轮播视频
08-31
主要为大家详细介绍了Android使用ViewPager加载图片和轮播视频，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
【Android】实现图片和视频混合轮播（无限循环、视频自动播放）
最新发布
full courage的博客
06-24 2283
我们日常的需求基本上都是图片的轮播，而在一些特殊需求，例如用于展览的的数据大屏，又想展示图片又想展示视频，本文将利用第三方库com.youth.play.banner轮播控件实现图片和视频混合轮播的效果，自动+手动滑动，无限循环，视频自动播放。 其中图片使用Glide图片加载库，视频使用GSYVideoPlayer播放器。
ViewPager加载图片
pengyu1801的专栏
01-16 759
目前项目中需要用到ViewPager加载图片，现在在此记录一下。首先先看布局文件：activity_main.xml<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schem
ViewPager+动态加载网络图片
张小丫的程序员的修行之路
07-10 6101
前言：昨晚上师傅让我写了发给一个人的，因为我很闲，于是就写了，网上我看到好多例子，涉及到好多类，看的头疼还不如自己写，一个类搞定，如下：（PS:防止以后忘记）xml里面就一个ViewPager控件，没啦，哈哈^_^.package com.yalantis.contextmenu.sample;import android.support.v4.view.PagerAdapter; import a
android viewpager动态加载图片,Android ViewPager加载图片效果
weixin_33256233的博客
05-26 212
目前项目中需要用到ViewPager加载图片，现在在此记录一下。首先先看布局文件：activity_main.xmlxmlns:tools="http://schemas.android.com/tools"android:id="@+id/activity_main"android:layout_width="match_parent"android:layout_height="match_p...
Viewpager加载网络图片轮播
12-25
【标题】"Viewpager加载网络图片轮播"涉及的关键知识点主要集中在Android开发中关于Viewpager组件的使用以及网络图片的加载。Viewpager是Android SDK提供的一种用于实现滑动页面效果的控件，常用于实现类似轮播图、...
Android viewpager网络加载图片无限自动轮播demo
06-17
综上所述，这个“Android viewpager网络加载图片无限自动轮播demo”涵盖了Android开发中多个重要知识点，包括ViewPager的使用、网络图片加载、无限轮播机制以及用户体验优化等，是学习和参考的好例子。通过理解并...
Viewpager定时实现图片的轮播
12-02
在Android应用开发中，创建一个自动轮播的图片展示功能是一项常见的需求，这通常涉及到`ViewPager`组件的使用。`ViewPager`是Android SDK提供的一种滑动页面的视图容器，它可以方便地实现左右滑动切换页面的效果。在...
Android ViewPager加载图片效果
01-04
目前项目中需要用到ViewPager加载图片，现在在此记录一下。 首先先看布局文件：activity_main.xml <?xml version=1.0 encoding=utf-8?> <RelativeLayout xmlns:android=http://schemas.android.com/apk/res/android xmlns:tools=http://schemas.android.com/tools android:id=@+id/activity_main android:layout_width=match_parent androi
ViewPager网络加载图片
guoleisb10的博客
12-20 2727
首页： activity_main: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:
ViewPager加载网络图片
05-09
ViewPagerl加载网络图片实现gallery效果
viewPager实现动态加载图片，附带大图片处理方式
04-19
NULL 博文链接：https://androidll.iteye.com/blog/1853379
博客资源：ViewPager加载大量图片oom解决方案demo
12-28
ViewPager加载大量图片oom解决方案
详解Android_性能优化之ViewPager加载成百上千高清大图oom解决方案
08-31
主要介绍了详解Android_性能优化之ViewPager加载成百上千高清大图oom解决方案，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
ViewPager加载大量图片
蓝枫
03-17 1447
比如说当我们加载100张图片的时候，我们创建100个Imageview，然后放入集合，这样做很容易内存溢出或者加载速度特别慢。我们可以滑动的时候去加载，滑动一张创建一个Imageview直接上代码主要关注adapter的写法package krelve.view;import android.content.Context; import android.graphics.Bitmap; impor
android viewpager动态加载图片,Android使用ViewPager加载图片和轮播视频
weixin_29202687的博客
05-26 523
作为Android基础组件之一，大家对viewpager已经很熟悉了，网上也有很多使用viewpager来加载图片的案例。但是像微信那样点击图片，可以轮播显示图片和视频的例子却没找到。正巧项目中有需求，可以就花时间写了下，现在给一下核心代码，希望对有此需求的同学们起一个抛砖引玉的作用。话不多说了，上代码：以下是initData的代码public void initData() {//把聊天界面的图...
ViewPager动态加载本地图片
zhy_760982661的博客
08-03 558
viewpager动态加载图片
评论 16
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值