【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，記錄到此。