Android使用ViewPager加載圖片和輪播視頻
作為Android基礎(chǔ)組件之一,大家對(duì)viewpager已經(jīng)很熟悉了,網(wǎng)上也有很多使用viewpager來(lái)加載圖片的案例。但是像微信那樣點(diǎn)擊圖片,可以輪播顯示圖片和視頻的例子卻沒(méi)找到。正巧項(xiàng)目中有需求,可以就花時(shí)間寫了下,現(xiàn)在給一下核心代碼,希望對(duì)有此需求的同學(xué)們起一個(gè)拋磚引玉的作用。話不多說(shuō)了,上代碼:

以下是initData的代碼
public void initData() {
//把聊天界面的圖片和視頻找出來(lái),并加到數(shù)組中,并在
//并根據(jù)傳進(jìn)來(lái)的position來(lái)找到視頻或圖片在數(shù)組中的位置
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對(duì)應(yīng)的圖片位置
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設(shè)置監(jiān)聽(tīng)
viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageSelected(int arg0) {
int childCount = viewPager.getChildCount();//viewPager得到頁(yè)面的數(shù)量
//如果不是在原頁(yè)面,讓原來(lái)頁(yè)面的視頻停止播放
if(position != arg0){
position=arg0;
StopVideo();
}
// 遍歷當(dāng)前所有加載過(guò)的PhotoView,恢復(fù)所有圖片的默認(rèn)狀態(tài)
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,讓播放器播放視頻時(shí),讓它暫停
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);//設(shè)置圖片顯示為充滿全屏
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("&&");
//找到是點(diǎn)擊聊天界面哪個(gè)視頻進(jìn)來(lái)的,將局部成員,付給類成員
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:
// 音頻和視頻數(shù)據(jù)不正確
ConfigUtil.showShort(context, "視頻數(shù)據(jù)不正確!");
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);
}
我覺(jué)得輪播視頻的難點(diǎn)在于viewpager只能播放一個(gè)視頻,而每個(gè)viewItem都有繼承自SurfaceView的SurfaceVideoView控件, 我讓原先頁(yè)面的SurfaceViedeoView停止播放,并把新頁(yè)面的SurfaceVideoView付給mVideoView,然后就可以對(duì)選中頁(yè)面的視頻進(jìn)行控制了。
下面來(lái)張效果圖:

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Android 使用ViewPager自動(dòng)滾動(dòng)循環(huán)輪播效果
- Android 中使用 ViewPager實(shí)現(xiàn)屏幕頁(yè)面切換和頁(yè)面輪播效果
- Android使用viewpager實(shí)現(xiàn)自動(dòng)無(wú)限輪播圖
- Android ViewPager實(shí)現(xiàn)輪播圖效果
- Android ViewPager實(shí)現(xiàn)圖片輪播效果
- Android實(shí)現(xiàn)基于ViewPager的無(wú)限循環(huán)自動(dòng)播放帶指示器的輪播圖CarouselFigureView控件
- Android ViewPager實(shí)現(xiàn)無(wú)限循環(huán)輪播廣告位Banner效果
- Android使用ViewPager實(shí)現(xiàn)自動(dòng)輪播
- Android Viewpager實(shí)現(xiàn)無(wú)限循環(huán)輪播圖
- android?viewpager實(shí)現(xiàn)輪播效果
相關(guān)文章
Android 實(shí)現(xiàn)滑動(dòng)方法總結(jié)
這篇文章主要介紹了Android 實(shí)現(xiàn)滑動(dòng)方法總結(jié)的相關(guān)資料,需要的朋友可以參考下2017-07-07
Android自定義一個(gè)屬于自己的時(shí)間鐘表操作方法
本文主要講解的是如何自定義一個(gè)時(shí)間鐘表,通過(guò)簡(jiǎn)單的練習(xí)可以簡(jiǎn)單學(xué)習(xí)android當(dāng)中自定義view的一些常用繪圖技巧,優(yōu)化android繪圖操作,感興趣的朋友跟隨小編一起看看吧2024-08-08
最常見(jiàn)的猜拳小游戲Android代碼實(shí)現(xiàn)
這篇文章主要為大家詳細(xì)介紹了最常見(jiàn)的猜拳小游戲Android代碼實(shí)現(xiàn),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-08-08
Android Flutter實(shí)現(xiàn)五種酷炫文字動(dòng)畫效果詳解
animated_text_kit這一動(dòng)畫庫(kù)有多種文字動(dòng)畫效果,文中將利用它實(shí)現(xiàn)五種酷炫的文字動(dòng)畫:波浪涌動(dòng)效果、波浪線跳動(dòng)文字組、彩虹動(dòng)效、滾動(dòng)廣告牌效果和打字效果,需要的可以參考一下2022-03-03
Flutter利用注解生成可自定義的路由的實(shí)現(xiàn)
這篇文章主要介紹了Flutter利用注解生成可自定義的路由的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
Android 判斷是否能真正上網(wǎng)的實(shí)例詳解
這篇文章主要介紹了Android 判斷是否能真正上網(wǎng)的實(shí)例詳解相關(guān)資料,希望通過(guò)本文大家能夠掌握判斷是否上網(wǎng)的方法,需要的朋友可以參考下2017-10-10
android實(shí)現(xiàn)App活動(dòng)定時(shí)自動(dòng)跳轉(zhuǎn)效果
本篇文章主要介紹了android實(shí)現(xiàn)App活動(dòng)定時(shí)自動(dòng)跳轉(zhuǎn)效果,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02
Android ListView監(jiān)聽(tīng)滑動(dòng)事件的方法(詳解)
下面小編就為大家?guī)?lái)一篇Android ListView監(jiān)聽(tīng)滑動(dòng)事件的方法(詳解)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-03-03

