android 点击图案侧滑,【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 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();

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

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

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

}

}

}

布局文件：

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:orientation="vertical" >

android:id="@+id/viewPager"

android:layout_width="fill_parent"

android:layout_height="wrap_content" />

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:orientation="vertical" >

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" >

页面布局文件：

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:orientation="vertical" >

android:id="@+id/imageView1"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:scaleType="centerCrop"

android:src="@drawable/dog" />

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

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

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

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

OK，记录到此。

原文：http://blog.csdn.net/suool/article/details/44734213