Android ViewPager中显示图片与播放视频的填坑记录
作者：Android-刘旭 发布时间：2023-12-23 14:28:40
标签：viewpager,图片,视频
ViewPager介绍
ViewPager的功能就是可以使视图滑动，就像Lanucher左右滑动那样。
ViewPager用于实现多页面的切换效果，该类存在于Google的兼容包android-support-v4.jar里面.
ViewPager:
1)ViewPager类直接继承了ViewGroup类，所有它是一个容器类，可以在其中添加其他的view类。
2)ViewPager类需要一个PagerAdapter适配器类给它提供数据。
3)ViewPager经常和Fragment一起使用，并且提供了专门的FragmentPagerAdapter和FragmentStatePagerAdapter类供Fragment中 的ViewPager使用。
4)在编写ViewPager的应用的使用，还需要使用两个组件类分别是PagerTitleStrip类和PagerTabStrip类，PagerTitleStrip类直接继承 自ViewGroup类，而PagerTabStrip类继承PagerTitleStrip类，所以这两个类也是容器类。但是有一点需要注意，在定义XML的layout 的时候，这两个类必须是ViewPager标签的子标签，不然会出错。
本文将详细介绍关于Android ViewPager中显示图片与播放视频填坑的相关内容，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍吧。
一.需求来源与实现思路
1.最近项目需求中有用到需要在ViewPager中播放视频和显示图片的功能，视频是本地视频，最开始的实现思路是ViewPager中根据当前item位置对应的是图片还是视频去初始化PhotoView和SurfaceView，同时销毁时根据item的位置去判断移除PhotoView和SurfaceView。
2.上面那种方式确实是可以实现的，但是存在2个问题，第一，MediaPlayer的生命周期不容易控制并且存在内存泄漏问题。第二，连续三个item都是视频时，来回滑动的过程中发现会出现上个视频的最后一帧画面的bug。
3.未提升用户体验，视频播放器初始化完成前上面会覆盖有该视频的第一帧图片,但是发现存在第一帧图片与视频第一帧信息不符的情况，后面会通过代码给出解决方案。
4.图片和视频尺寸如何适配以保证不变形。
二.需要填的坑
1.对于MediaPlayer的生命周期不容易控制的本质原因是这种实现思路上我的播放器只有1个，频繁的初始化和销毁造成了问题，所以后面我更改了实现方式，一个item的视频对应一个播放器。
2.对于滑动过程中发现会出现上个视频的最后一帧画面的bug,发现是surfaceView这个控件造成的，后面通过将播放的载体更换为TextureView完美解决该问题。
3.SurfaceView与TextureView的本质异同
第一：两者都能在独立的线程中绘制和渲染，在专用的GPU线程中大大提高渲染的性能。
第二：SurfaceView专门提供了嵌入视图层级的绘制界面，开发者可以控制该界面像Size等的形式，能保证界面在屏幕上的正确位置。但也有局限：
1.由于是独立的一层View，更像是独立的一个Window，不能加上动画、平移、缩放；
2.两个SurfaceView不能相互覆盖。
第三:Texture更像是一般的View，像TextView那样能被缩放、平移，也能加上动画。TextureView只能在开启了硬件加速的Window中使用，并且消费的内存要比SurfaceView多，并伴随着1-3帧的延迟。
第四:屏幕锁屏时SurfaceView会销毁重建，TextureView不会！
三.具体实现核心代码
1.ViewPager的初始化
mAdapter = ImageBrowseFragmentPagerAdapter(supportFragmentManager, this, imgs)
imgs_viewpager.offscreenPageLimit = 1
imgs_viewpager.adapter = mAdapter
imgs_viewpager.currentItem = mPosition
//为了处理首次点击时视频播放的问题
val message = Message.obtain()
message.what = START_PLAY_VIDEO
mHandler.sendMessageDelayed(message, 200)
2.Handler处理消息
private val START_PLAY_VIDEO = 0
private var DELETE_VIDEO = 1
private var DELETE_VIDEO_START_PLAY = 2
private var mHandler = Handler(Handler.Callback { msg ->
when (msg.what) {
//开始播放视频
START_PLAY_VIDEO -> NotifyDispatch.dispatch(PreviewPlayVideoEvent(mPosition))
//删除视频时刷新ui
DELETE_VIDEO -> {
mAdapter?.setImgs(imgs)
}
//解决删除视频时之后跳转到另一个item,当它是视频时不继续播放的问题
DELETE_VIDEO_START_PLAY -> NotifyDispatch.dispatch(PreviewPlayVideoEvent(mDeletePosition))
}
true
})
3.删除视频或图片的处理逻辑
private fun deletePhotos(position: Int) {
if (imgs!!.isEmpty()) {
return
}
ThreadDispatch.right_now.execute({
var file: File?
file = File(imgs.get(position))
if (file != null && file?.exists()!!) {
val intent = Intent(Intent.ACTION_MEDIA_SCANNER_SCAN_FILE)
val uri = Uri.fromFile(file)
intent.data = uri
sendBroadcast(intent)
file?.delete()
imgs.removeAt(position)
}
if (position == imgs.size) {
mDeletePosition = position - 1
} else {
mDeletePosition = position
}
val message = Message.obtain()
message.what = DELETE_VIDEO
mHandler.sendMessage(message)
NotifyDispatch.dispatch(DeletePreviewPhotoEvent(imgs))
val message1 = Message.obtain()
message1.what = DELETE_VIDEO_START_PLAY
mHandler.sendMessageDelayed(message1, 200)
if (imgs.isEmpty()) {
finish()
}
})
// }
}
4.ViewPager对应的Adapter
package com.immomo.camerax.gui.view.adapter;
import android.content.Context;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;
import android.support.v4.app.FragmentTransaction;
import android.view.View;
import android.view.ViewGroup;
import com.immomo.camerax.gui.fragment.PreviewImgFragment;
import com.immomo.camerax.gui.fragment.PreviewVideoFragment;
import java.util.ArrayList;
import java.util.List;
/**
* Created by liuxu on 2018/3/26.
*/
public class ImageBrowseFragmentPagerAdapter extends FragmentStatePagerAdapter {
private Context mContext;
private List<String> datas;
private int mCurrentSelectedPosition = -1;
private FragmentManager mFragmentManager;
private FragmentTransaction mFragmentTransaction;
private ArrayList<Fragment> mFragments = new ArrayList<>();
public ImageBrowseFragmentPagerAdapter(FragmentManager fm, Context context, List<String> datas) {
super(fm);
mFragmentManager = fm;
mContext = context;
this.datas = datas;
}
public void removeContext(){
mContext = null;
}
@Override
public void setPrimaryItem(ViewGroup container, int position, Object object) {
mCurrentSelectedPosition = position;
}
@Override
public void startUpdate(ViewGroup container) {
super.startUpdate(container);
}
public void setImgs(List<String> imgs) {
this.datas = imgs;
notifyDataSetChanged();
}
//处理更新无效----删除条目
@Override
public int getItemPosition(Object object) {
return POSITION_NONE;
}
public int getPrimaryItemPosition() {
return mCurrentSelectedPosition;
}
public ImageBrowseFragmentPagerAdapter(FragmentManager fm) {
super(fm);
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view == ((Fragment) object).getView();
}
@Override
public Fragment getItem(int position) {
Bundle bundle = new Bundle();
bundle.putString("url", datas.get(position));
bundle.putInt("position", position);
if (datas.get(position).endsWith(".jpg")) {
PreviewImgFragment previewImgFragment = new PreviewImgFragment();
previewImgFragment.setArguments(bundle);
return previewImgFragment;
} else {
PreviewVideoFragment previewVideoFragment = new PreviewVideoFragment();
previewVideoFragment.setArguments(bundle);
return previewVideoFragment;
}
}
@Override
public int getCount() {
return datas == null ? 0 : datas.size();
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
return super.instantiateItem(container,position);
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
super.destroyItem(container,position,object);
}
}
5显示图片对应的Fragment
package com.immomo.camerax.gui.fragment;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import com.bumptech.glide.Glide;
import com.immomo.camerax.R;
import com.immomo.camerax.foundation.util.StatusBarUtils;
import com.immomo.camerax.gui.view.ResizablePhotoView;
/**
* Created by liuxu on 2018/3/27.
*/
public class PreviewImgFragment extends Fragment {
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_preview_photo, null);
ResizablePhotoView resizablePhotoView = view.findViewById(R.id.customPhotoView);
String url = getArguments().getString("url");
Glide.with(getContext()).load(url).into(resizablePhotoView);
resizablePhotoView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
getActivity().finish();
}
});
return view;
}
@Override
public void onPause() {
super.onPause();
}
@Override
public void onResume() {
super.onResume();
}
@Override
public void onDetach() {
super.onDetach();
}
@Override
public void onDestroyView() {
super.onDestroyView();
}
@Override
public void onStart() {
super.onStart();
}
@Override
public void onDestroy() {
super.onDestroy();
}
@Override
public void setUserVisibleHint(boolean isVisibleToUser) {
super.setUserVisibleHint(isVisibleToUser);
}
}
6.图片根据宽度适配高度的自定义View
package com.immomo.camerax.gui.view;
import android.content.Context;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import com.github.chrisbanes.photoview.PhotoView;
/**
* Created by liuxu on 2018/4/7.
*/
public class ResizablePhotoView extends PhotoView {
public ResizablePhotoView(Context context) {
super(context);
}
public ResizablePhotoView(Context context, AttributeSet attr) {
super(context, attr);
}
public ResizablePhotoView(Context context, AttributeSet attr, int defStyle) {
super(context, attr, defStyle);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
Drawable d = getDrawable();
if (d != null){
int width = MeasureSpec.getSize(widthMeasureSpec);
//高度根据使得图片的宽度充满屏幕计算而得
int height = (int) Math.ceil((float) width * (float) d.getIntrinsicHeight() / (float) d.getIntrinsicWidth());
setMeasuredDimension(width, height);
}else {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
}
}
7.播放视频对应的Fragment
/**
* Created by liuxu on 2018/3/27.
*/
public class PreviewVideoFragment extends Fragment {
private ImageView mPhotoView;
private TextureView mTextureView;
private String mUrl;
private int mPosition;
private AndroidMediaPlayer mIjkVodMediaPlayer;
private boolean mIsSelected;
private boolean mIsFirstPrepared;
private PreviewPlayVideoSubscriber mPreviewPlayVideoSubscriber = new PreviewPlayVideoSubscriber() {
@Override
public void onEventMainThread(PreviewPlayVideoEvent event) {
super.onEventMainThread(event);
MDLog.e("liuxu",event.getPosition()+"");
if (event != null && event.getPosition() == mPosition) {
//说明是当前条目
if (mIjkVodMediaPlayer != null && !mIjkVodMediaPlayer.isPlaying()) {
if (mTextureView != null) {
mIjkVodMediaPlayer.setSurface(mSurface);
mIjkVodMediaPlayer.prepareAsync();
mPhotoView.setVisibility(View.VISIBLE);
}
}
mIsSelected = true;
} else {
if (mIjkVodMediaPlayer != null && mIjkVodMediaPlayer.isPlaying()) {
mIjkVodMediaPlayer.pause();
mIjkVodMediaPlayer.stop();
}
if (mPhotoView != null) {
mPhotoView.setVisibility(View.VISIBLE);
}
mIsSelected = false;
}
}
};
private String mWidth;
private String mHeight;
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
mPreviewPlayVideoSubscriber.register();
View view = inflater.inflate(R.layout.fragment_preview_video, null);
mPhotoView = view.findViewById(R.id.photoView);
mTextureView = view.findViewById(R.id.surfaceView);
mUrl = getArguments().getString("url");
mPosition = getArguments().getInt("position");
layoutPlayer();
loadVideoScreenshot(getContext(), mUrl, mPhotoView, 1);
view.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
release();
getActivity().finish();
}
});
initTextureMedia();
return view;
}
private void initTextureMedia() {
mTextureView.setSurfaceTextureListener(mSurfaceTextureListener);
}
private void play(String url) {
try {
mIjkVodMediaPlayer = new AndroidMediaPlayer();
mIjkVodMediaPlayer.reset();
mIjkVodMediaPlayer.setDataSource(url);
//让MediaPlayer和TextureView进行视频画面的结合
mIjkVodMediaPlayer.setSurface(mSurface);
//设置监听
mIjkVodMediaPlayer.setOnBufferingUpdateListener((mp, percent) -> {
});
mIjkVodMediaPlayer.setOnCompletionListener(mp -> {
mp.seekTo(0);
mp.start();
});
mIjkVodMediaPlayer.setOnInfoListener((mp1, what, extra) -> {
if (what == IMediaPlayer.MEDIA_INFO_VIDEO_RENDERING_START) {
mPhotoView.setVisibility(View.GONE);
mIsFirstPrepared = true;
}
return false;
});
mIjkVodMediaPlayer.setOnErrorListener((mp, what, extra) -> false);
mIjkVodMediaPlayer.setOnPreparedListener(mp -> {
mp.start();
if (!mIsFirstPrepared){
}else {
mPhotoView.setVisibility(View.GONE);
}
});
mIjkVodMediaPlayer.setScreenOnWhilePlaying(true);//在视频播放的时候保持屏幕的高亮
if (mIsSelected){
//异步准备
mIjkVodMediaPlayer.prepareAsync();
}
} catch (Exception e) {
e.printStackTrace();
}
}
private Surface mSurface;
private TextureView.SurfaceTextureListener mSurfaceTextureListener = new TextureView.SurfaceTextureListener() {
@Override
public void onSurfaceTextureAvailable(SurfaceTexture surface, int width, int height) {
mSurface = new Surface(surface);
play(mUrl);
}
@Override
public void onSurfaceTextureSizeChanged(SurfaceTexture surface, int width, int height) {
}
@Override
public boolean onSurfaceTextureDestroyed(SurfaceTexture surface) {
if (mSurface != null){
mSurface.release();
mSurface = null;
}
if (mTextureView != null){
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
mTextureView.releasePointerCapture();
}
}
release();
return false;
}
@Override
public void onSurfaceTextureUpdated(SurfaceTexture surface) {
}
};
@Override
public void onStart() {
super.onStart();
}
@Override
public void onAttach(Context context) {
super.onAttach(context);
}
@Override
public void onDetach() {
super.onDetach();
}
@Override
public void onPause() {
MDLog.e("liuxu", "onPause" + mPosition);
//处理锁屏时播放器停止播放
if (mIjkVodMediaPlayer != null && mIjkVodMediaPlayer.isPlaying()){
mIjkVodMediaPlayer.pause();
mIjkVodMediaPlayer.stop();
}
super.onPause();
}
//屏幕打开时重新播放
@Override
public void onResume() {
MDLog.e("liuxu", "onResume" + mPosition);
super.onResume();
if (mIsSelected && mIjkVodMediaPlayer != null && !mIjkVodMediaPlayer.isPlaying()) {
mIjkVodMediaPlayer.prepareAsync();
}
}
@Override
public void onDestroy() {
MDLog.e("liuxu", "onDestroy");
release();
if (mPreviewPlayVideoSubscriber.isRegister()) {
mPreviewPlayVideoSubscriber.unregister();
}
super.onDestroy();
}
private void release() {
if (mIjkVodMediaPlayer == null) {
return;
}
if (mIjkVodMediaPlayer.isPlaying()) {
mIjkVodMediaPlayer.stop();
}
mIjkVodMediaPlayer.release();
mIjkVodMediaPlayer = null;
}
@Override
public boolean getUserVisibleHint() {
return super.getUserVisibleHint();
}
/**
* 动态设置视频宽高信息
*/
private void layoutPlayer() {
//获取视频宽高比
getPlayInfo(mUrl);
float ratio = Float.parseFloat(mHeight) / Float.parseFloat(mWidth);
MDLog.e("type", mPosition + "ratio" + ratio);
int type = 0;
//添加容错值
if (ratio < MediaConstants.INSTANCE.getASPECT_RATIO_1_1().toFloat() + MediaConstants.INSTANCE.getSCREEN_DEFAULT_VALUE()
&& ratio > MediaConstants.INSTANCE.getASPECT_RATIO_1_1().toFloat() - MediaConstants.INSTANCE.getSCREEN_DEFAULT_VALUE()) {
type = ScreenAdapterUtils.INSTANCE.getSCALE_TYPE_11();
} else if (ratio < MediaConstants.INSTANCE.getASPECT_RATIO_4_3().toFloat() + MediaConstants.INSTANCE.getSCREEN_DEFAULT_VALUE()
&& ratio > MediaConstants.INSTANCE.getASPECT_RATIO_4_3().toFloat() - MediaConstants.INSTANCE.getSCREEN_DEFAULT_VALUE()) {
type = ScreenAdapterUtils.INSTANCE.getSCALE_TYPE_43();
MDLog.e("type", "43");
} else if (ratio < MediaConstants.INSTANCE.getASPECT_RATIO_16_9().toFloat() + MediaConstants.INSTANCE.getSCREEN_DEFAULT_VALUE()
&& ratio > MediaConstants.INSTANCE.getASPECT_RATIO_16_9().toFloat() - MediaConstants.INSTANCE.getSCREEN_DEFAULT_VALUE()) {
type = ScreenAdapterUtils.INSTANCE.getSCALE_TYPE_169();
MDLog.e("type", "169");
}
FrameLayout.LayoutParams layoutParams = (FrameLayout.LayoutParams) mTextureView.getLayoutParams();
layoutParams.height = ScreenAdapterUtils.INSTANCE.getSurfaceHeight(type);
mTextureView.setLayoutParams(layoutParams);
FrameLayout.LayoutParams params = (FrameLayout.LayoutParams) mPhotoView.getLayoutParams();
params.height = ScreenAdapterUtils.INSTANCE.getSurfaceHeight(type);
mPhotoView.setLayoutParams(params);
MDLog.e("params.height", params.height + "");
}
private void getPlayInfo(String mUri) {
android.media.MediaMetadataRetriever mmr = new android.media.MediaMetadataRetriever();
try {
if (mUri != null) {
mmr.setDataSource(mUri);
} else {
//mmr.setDataSource(mFD, mOffset, mLength);
}
//宽
mWidth = mmr.extractMetadata(android.media.MediaMetadataRetriever.METADATA_KEY_VIDEO_WIDTH);
//高
mHeight = mmr.extractMetadata(android.media.MediaMetadataRetriever.METADATA_KEY_VIDEO_HEIGHT);
// mBitmap = mmr.getFrameAtTime(1 );
} catch (Exception ex) {
} finally {
mmr.release();
}
}
public static void loadVideoScreenshot(final Context context, String uri, ImageView imageView, long frameTimeMicros) {
// 这里的时间是以微秒为单位
RequestOptions requestOptions = RequestOptions.frameOf(frameTimeMicros);
requestOptions.set(FRAME_OPTION, MediaMetadataRetriever.OPTION_CLOSEST);
requestOptions.transform(new BitmapTransformation() {
@Override
protected Bitmap transform(@NonNull BitmapPool pool, @NonNull Bitmap toTransform, int outWidth, int outHeight) {
return toTransform;
}
@Override
public void updateDiskCacheKey(MessageDigest messageDigest) {
try {
messageDigest.update((context.getPackageName() + "RotateTransform").getBytes("utf-8"));
} catch (Exception e) {
e.printStackTrace();
}
}
});
Glide.with(context).load(uri).apply(requestOptions).into(imageView);
}
}
4.结语
笔者使用这种方式实现了项目需求，但是由于本人接触音视频的相关内容比较少，全是在不断探索和学习中前进，如有不足之处请评论指正，谢谢。大家共同学习共同进步。
好了以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。
来源：https://blog.csdn.net/liuxu841911548/article/details/80157129
0
投稿猜你喜欢
- 前言我又搞回笃NET啦！java之路真是命运多舛，好事多磨。不过，也许我已经进入无招胜有招，博取众家之长、融会贯通的地步了。对于WebApi
kafka作为一个使用广泛的消息队列，很多人都不会陌生，但当你在网上搜索“kafka 延迟队列”，出- 项目背景：在项目中包含两个定时任务，配置信息如下：1、@Scheduled(initialDelay = 1,fixedDelay=1000
- 本文实例讲述了WPF中不规则窗体与WindowsFormsHost控件兼容问题的解决方法。分享给大家供大家参考。具体方法如下：这里首先说明一
- 制作透明窗体办法有好几种，各有优缺点. 我们先来看看C#本身提供的办法 1：通过设置窗体的 TransparencyKey实现 例：窗体中
- 一、程序运行环境编译环境：IntelliJ IDEA所需测试文件：PDF、.pfx数字证书及密钥、PDF Jar包（Free Spire.P
- System.Collections.ArrayList类是一个特殊的数组。通过添加和删除元素，就可以动态改变数组的长度。一．优点1. 支持
- 相信在做B/S模式的项目时，我们请求server端时通常遇到返回数据的处理，对返回数据的格式处理方式多样，随着JSON的流行，现在很多的项目
- 异常处理增强错误恢复能力是提高代码健壮性的最有力的途径之一，C语言中采用的错误处理方法被认为是紧耦合的，函数的使用者必须在非常靠近函数调用的
- 在自然语言处理（NLP）研究中，NGram是最基本但也是最有用的一种比对方式，这里的N是需要比对的字符串的长度，而今天我介绍的TrieTre
- 本文实例为大家分享了flutter实现头部tabTop滚动栏的具体代码，供大家参考，具体内容如下效果图如下：main.dart代码如下：im
- 1.object：匿名内部类在Android最常用的匿名内部类之一就是点击事件，用Java语言写的话就是下面这样：public interf
- Java中对象与C++中对象的放置安排的对比概要：Java中，所有的对象都存放在堆（Heap，一种通用的内存池）中；而对象的引用是存放在堆栈
- 1. 文件上传a. 看看@FIEL注解的属性/** * 上传文件时使用该注解 设置文件相关参数 */@Retention(Retention
- AIDL:Android Interface Definition Language，它是一种android内部进程通信接口的描述语言，通过
- 我们知道springboot中的Bean组件的成员变量(属性)如果加上了@Value注解，可以从有效的配置属性资源中找到配置项进行绑定，那么
- 1、 WIFI网卡的状态WIFI网卡的状态信息都以整型变量的形式存放在 android.net.wifi.WifiManager 类中，有以
- 一、二维数组进入正题之前.首先为了便于大家理解,我画了一个图:xx枪战游戏中, 我是一个刚刚注册账号的小白,系统送了我两把枪,此时,我的武器
- 1. Date.compareTo（）java.util.Date提供了在Java中比较两个日期的经典方法compareTo（）。如果两个日
- 在上一篇文章中，我为大家介绍了《5种创建文件并写入文件数据的方法》，本节我们为大家来介绍6种从文件中读取数据的方法.另外为了方便大家理解，我
