Android ViewPager中顯示圖片與播放視訊的填坑記錄

NO IMAGE
1 Star2 Stars3 Stars4 Stars5 Stars 給文章打分!
Loading...

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.結語

筆者使用這種方式實現了專案需求,但是由於本人接觸音視訊的相關內容比較少,全是在不斷探索和學習中前進,如有不足之處請評論指正,謝謝。大家共同學習共同進步。

好了以上就是這篇文章的全部內容了,希望本文的內容對大家的學習或者工作具有一定的參考學習價值,如果有疑問大家可以留言交流,謝謝大家對指令碼之家的支援。

您可能感興趣的文章:

Android使用ViewPager載入圖片和輪播視訊Android開發之使用ViewPager實現圖片左右滑動切換效果android 解決ViewPager載入大量圖片記憶體溢位問題Android ViewPager實現圖片輪播效果Android 利用ViewPager實現圖片可以左右迴圈滑動效果附程式碼下載使用ViewPager實現左右迴圈滑動及滑動跳轉仿網易新聞客戶端頭條ViewPager巢狀例項Android利用ViewPager實現滑動廣告板例項原始碼Android App中ViewPager所帶來的滑動衝突問題解決方法

相關文章

Android 開發 最新文章