一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

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

时间:2022-06-25 23:25:34 编辑:袖梨 来源:一聚教程网

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

这里写图片描述

以下是initData的代码

 

 代码如下复制代码

publicvoidinitData() {

  //把聊天界面的图片和视频找出来,并加到数组中,并在

  //并根据传进来的position来找到视频或图片在数组中的位置

  for(inti =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(inti =0; i < ImageUrl.size(); i++) {

   if(ImageUrl.get(i).startsWith(ChatUtil.TAG_IMAGE)) {

    PhotoView photoView =newPhotoView(context);

    viewList.add(photoView);

   }elseif(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);

    intscreenWidth = getScreenWidth((Activity) context);

    intvideoHight = (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 =newMyAdapter();

  viewPager.setAdapter(adapter);

  if(position != -1) {

   viewPager.setCurrentItem(position);

  }

 }

```publicvoidinitEvent() {

  //给viewPager设置监听

  viewPager.setOnPageChangeListener(newViewPager.OnPageChangeListener() {

 

   @Override

   publicvoidonPageSelected(intarg0) {

 

    intchildCount = viewPager.getChildCount();//viewPager得到页面的数量

    //如果不是在原页面,让原来页面的视频停止播放

    if(position != arg0){

     position=arg0;

     StopVideo();

    }

 

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

 

    for(inti =0; i < childCount; i++) {

     View childAt = viewPager.getChildAt(i);

 

     try{

      if(childAt !=null&& childAtinstanceofPhotoView) {

       PhotoView photoView = (PhotoView) childAt;

       photoView.setOnPhotoTapListener(newPhotoViewAttacher.OnPhotoTapListener() {

        @Override

        publicvoidonPhotoTap(View view,floatx,floaty) {

         finish();

        }

 

        @Override

        publicvoidonOutsidePhotoTap() {

 

        }

       });

      }

     }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 =newHandler();

     handler.postDelayed(newRunnable() {

      @Override

      publicvoidrun() {

       StopVideo();

      }

     },50);

    }

   }

 

   @Override

   publicvoidonPageScrolled(intarg0,floatarg1,intarg2) {

    // TODO Auto-generated method stub

 

   }

 

   @Override

   publicvoidonPageScrollStateChanged(intarg0) {

    // TODO Auto-generated method stub

 

   }

  });

 }

 publicclassMyAdapterextendsPagerAdapter {

 

  @Override

  publicintgetCount() {

   returnImageUrl.size();

  }

 

  @Override

  publicView instantiateItem(ViewGroup container,intpos) {

   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","="+ body[0]);

    ImageLoader.getInstance().displayImage(body[0], photoView);

    photoView.setScaleType(ImageView.ScaleType.FIT_CENTER);//设置图片显示为充满全屏

    photoView.setOnPhotoTapListener(newPhotoViewAttacher.OnPhotoTapListener() {

     @Override

     publicvoidonPhotoTap(View view,floatx,floaty) {

      finish();

     }

 

     @Override

     publicvoidonOutsidePhotoTap() {

 

     }

    });

    //   photoView.setOnLongClickListener(longClickListener);

 

   }elseif(ImageUrl.get(pos).startsWith(ChatUtil.TAG_VIDEO)) {

     View view1 = viewList.get(pos);

    SurfaceVideoView VideoView = (SurfaceVideoView) view1.findViewById(R.id.videoview);

    intscreenWidth = getScreenWidth((Activity) context);

    intvideoHight = (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);

 

    }

 

 

 

   }

 

   returnviewList.get(pos);

  }

 

  @Override

  publicvoiddestroyItem(ViewGroup container,intposition, Object object) {

   container.removeView((View) object);

  }

 

  @Override

  publicbooleanisViewFromObject(View view, Object object) {

   returnview == object;

  }

 }

以下是控制视频播放的接口:

 publicvoidonCompletion(MediaPlayer mp) {

  onStateChanged(false);

 }

 

 @Override

 publicbooleanonError(MediaPlayer mp,intwhat,intextra) {

 

  returnfalse;

 

 }

 

 @Override

 publicbooleanonInfo(MediaPlayer mp,intwhat,intextra) {

  switch(what) {

   caseMediaPlayer.MEDIA_INFO_BAD_INTERLEAVING:

    // 音频和视频数据不正确

    ConfigUtil.showShort(context,"视频数据不正确!");

    break;

   caseMediaPlayer.MEDIA_INFO_BUFFERING_START:

    if(!isFinishing())

     mVideoView.pause();

    break;

   caseMediaPlayer.MEDIA_INFO_BUFFERING_END:

    if(!isFinishing())

     mVideoView.start();

    break;

   caseMediaPlayer.MEDIA_INFO_VIDEO_RENDERING_START:

    if(DeviceUtils.hasJellyBean()) {

     mVideoView.setBackground(null);

    }else{

     mVideoView.setBackgroundDrawable(null);

    }

  break;

 }

 returnfalse;

}

 

 @Override

 publicvoidonStateChanged(booleanisPlaying) {

  mPlayerStatus.setVisibility(isPlaying ? View.GONE : View.VISIBLE);

 

 

 }

 

 @Override

 publicvoidonPrepared(MediaPlayer mp) {

  mVideoView.setVolume(SurfaceVideoView.getSystemVolumn(this));

  mVideoView.start();

  mLoading.setVisibility(View.GONE);

 

 }

 

我觉得轮播视频的难点在于viewpager只能播放一个视频,而每个viewItem都有继承自SurfaceView的SurfaceVideoView控件, 我让原先页面的SurfaceViedeoView停止播放,并把新页面的SurfaceVideoView付给mVideoView,然后就可以对选中页面的视频进行控制了。

下面来张效果图:

这里写图片描述

热门栏目