【Android】ViewPager实现图片左右滑动播放及添加点击事件

前两天老师找我帮她写个Android的demo。说是要实现一个图片左右滑动的效果，并且点击图片的时候会发出声音。

由于好久没写过Android了，所以花了一段时间来复习和学习。现将过程和实现简单记录如下。（项目参照了一部分CSDN博主Android将军的）

实现使用的是ViewPager

代码如下：在点击监听的部分，通过获取List<>中的控件添加触摸监听。当然你可以在各个页面添加多个控件，然后在获取该界面的控件，然后各个添加监听。

而且代码有优化的地方。。。不过只是为了演示，就没有太花时间去做。。。原谅我的不负责。。。

package com.example.viewpagerdemo;

import java.util.ArrayList;

import android.media.MediaPlayer;
import android.os.Bundle;
import android.os.Parcelable;
import android.app.Activity;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.ViewGroup.LayoutParams;
import android.widget.ImageView;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;

public class TwoActivity extends Activity implements OnPageChangeListener {
private ViewPager viewPager;
private ArrayList<View> list;
private ImageView imageView;
private ImageView[] imageViews;
private MediaPlayer mediaPlayer = null;

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
LayoutInflater inflater = getLayoutInflater();
list = new ArrayList<View>();
list.add(inflater.inflate(R.layout.item01, null));
list.add(inflater.inflate(R.layout.item02, null));
list.add(inflater.inflate(R.layout.item03, null));
list.add(inflater.inflate(R.layout.item04, null));
list.add(inflater.inflate(R.layout.item05, null));

imageViews = new ImageView[list.size()];

ViewGroup group = (ViewGroup)findViewById(R.id.viewGroup);
viewPager = (ViewPager)findViewById(R.id.viewPager);

for(int i=0; i<list.size(); i++){
imageView = new ImageView(this);
imageView.setLayoutParams(new LayoutParams(12,12));
imageViews[i] = imageView;
if(i == 0){
imageView.setBackgroundResource(R.drawable.page_indicator_focused);
}else{
imageView.setBackgroundResource(R.drawable.page_indicator_unfocused);
}

group.addView(imageView);
}

viewPager.setAdapter(new MyAdapter());
viewPager.setOnPageChangeListener(this);
viewPager.setCurrentItem(0);

}

@Override
public void onPageScrollStateChanged(int arg0) {

}

@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {

}

@Override
public void onPageSelected(int arg0) {
Log.e("log", "你当前选择的是 " + arg0%list.size());
// 切换到下一页时将上一页在播放的音乐停掉并置为null，已重新初始化
if(mediaPlayer!=null)
{
if (mediaPlayer.isPlaying())
{
mediaPlayer.stop();
mediaPlayer = null;
}
}
setImageBackground(arg0%list.size());
}

private void setImageBackground( int selectItems){
for(int i=0; i<imageViews.length; i++){
if(i == selectItems){
imageViews[i].setBackgroundResource(R.drawable.page_indicator_focused);
}else{
imageViews[i].setBackgroundResource(R.drawable.page_indicator_unfocused);
}
}
}

public class MyAdapter extends PagerAdapter{

@Override
public int getCount() {
return Integer.MAX_VALUE;
}

@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0 == arg1;
}

@Override
public int getItemPosition(Object object) {
return super.getItemPosition(object);
}

@Override
public Object instantiateItem(ViewGroup container, final int position) {
// 为每页添加点击监听，初始化音乐并点击时播放，并保证每次点击都可以重新播放
switch (position)
{
case 0:
list.get(0).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Log.e("log", "你当前选择的是 dog ");
if(mediaPlayer!=null)
{
if (mediaPlayer.isPlaying())
{
mediaPlayer.stop();
mediaPlayer = null;
}
}
initMediaPlayer(0);
mediaPlayer.start();
}
});
break;
case 1:
list.get(1).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Log.e("log", "你当前选择的是 cat ");
if(mediaPlayer!=null)
{
if (mediaPlayer.isPlaying())
{
mediaPlayer.stop();
mediaPlayer = null;
}
}
initMediaPlayer(1);
mediaPlayer.start();
}
});
break;
case 2:
list.get(2).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Log.e("log", "你当前选择的是 cat ");
if(mediaPlayer!=null)
{
if (mediaPlayer.isPlaying())
{
mediaPlayer.stop();
mediaPlayer = null;
}
}
initMediaPlayer(2);
mediaPlayer.start();
}
});
break;
case 3:
list.get(3).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Log.e("log", "你当前选择的是 cat ");
if(mediaPlayer!=null)
{
if (mediaPlayer.isPlaying())
{
mediaPlayer.stop();
mediaPlayer = null;
}
}
initMediaPlayer(3);
mediaPlayer.start();
}
});
break;
case 4:
list.get(4).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Log.e("log", "你当前选择的是 cat ");
if(mediaPlayer!=null)
{
if (mediaPlayer.isPlaying())
{
mediaPlayer.stop();
mediaPlayer = null;
}
}
initMediaPlayer(4);
mediaPlayer.start();
}
});
break;
default:
break;
}
((ViewPager) container).addView(list.get(position%list.size()),0);
return list.get(position%list.size());
}

@Override
public void restoreState(Parcelable arg0, ClassLoader arg1) {

}

@Override
public Parcelable saveState() {
return null;
}

@Override
public void startUpdate(View arg0) {

}

@Override
public void finishUpdate(View arg0) {

}

@Override
public void destroyItem(View container, int position, Object object) {
((ViewPager)container).removeView(list.get(position%list.size()));
}

}

private void initMediaPlayer(int i){
// 初始化对于页面的音乐
try {
switch (i)
{
case 0:
mediaPlayer = MediaPlayer.create(this, R.raw.bgm1);
mediaPlayer.prepare();
break;
case 1:
mediaPlayer = MediaPlayer.create(this, R.raw.bgm2);
mediaPlayer.prepare();
break;
case 2:
mediaPlayer = MediaPlayer.create(this, R.raw.bgm3);
mediaPlayer.prepare();
break;
case 3:
mediaPlayer = MediaPlayer.create(this, R.raw.bgm4);
mediaPlayer.prepare();
break;
case 4:
mediaPlayer = MediaPlayer.create(this, R.raw.bgm5);
mediaPlayer.prepare();
break;
default:
break;
}

} catch (Exception e)
{
e.printStackTrace();
}
}

}


布局文件：
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >

<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />

<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >

<LinearLayout
android:id="@+id/viewGroup"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="30dp"
android:gravity="center_horizontal"
android:orientation="horizontal" >
</LinearLayout>
</RelativeLayout>

</FrameLayout>

页面布局文件：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >

<ImageView
android:id="@+id/imageView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="centerCrop"
android:src="@drawable/dog" />

</LinearLayout>

在上面的页面布局文件中我只是添加了一个ImageVIew并填满整个屏幕，当然如果您有需求您也可以在此添加文字或者其他控件，要添加监听，只需获取然后如上添加即可。

如果您需要自动滑动，那么应该添加一个计时器或就可以完成这个。

其他的动画切换效果，这些扩展都是看如何实现啦。

不过呢，感觉ViewPager的灵活性不高，完全可以自己定制实现一个类似的具有更多接口和灵活性选择的空间出来。当然这要看需求啦。

OK，记录到此。