ViewPager 可左右滑動和縮放的圖片瀏覽

最近因為要做一個項目，需要使用到圖片的瀏覽。我就自己在網上找了些資料，然后加以修改整理后出來一個demo，希望可以幫助到需要的人。同時這也是我第一個技術博客。

在做之前首先需要了解一下什么是ViewPager，怎么使用ViewPager。我這里提供一篇文章給大家  http://www.2cto.com/kf/201411/353975.html   我這里不在贅述了。

好了  了解完可以開始了

 PS  我不知道怎么制作那種動態的效果圖，如果有誰知道請告訴我  我將萬分感謝

 

 

 

一步一步來

 

首先先要寫個布局 ViewPager的布局   activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity"
    android:orientation="vertical">

    <LinearLayout
        android:id="@+id/linearlayout"
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:background="@drawable/bg_common_frames"
        android:layout_gravity="center"
        >

        <android.support.v4.view.ViewPager
            android:id="@+id/viewpager"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            />

    </LinearLayout>



</LinearLayout>

對應的效果是這樣的 請看 有點丑 不管啦。用了一張底圖  在上面代碼中的 LinearLayout

 

然后是圖片詳情布局     image_details.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </android.support.v4.view.ViewPager>

    <TextView
        android:id="@+id/page_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="10dp"
        android:textColor="#fff"
        android:textSize="18sp" />

</RelativeLayout>

 

最后一個布局是縮放的布局  zoom_image_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<com.higgs.mviewpager.ZoomImageView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/zoom_image_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#000000" >

</com.higgs.mviewpager.ZoomImageView>

 

 

 

 

 

 

基本的布局我們完成了

 

再看代碼吧

 

我這里因為迎合大部分朋友的需求 ，改成了從網絡上下載圖片的方式作為圖片來源

先模擬一個圖片URL的類

package com.higgs.mviewpager;

public class Images {

    public final static String[] imageUrls = new String[]{
            "http://img.my.csdn.net/uploads/201309/01/1378037235_3453.jpg",
            "http://img.my.csdn.net/uploads/201309/01/1378037235_7476.jpg",
            "http://img.my.csdn.net/uploads/201309/01/1378037235_9280.jpg",
            "http://img.my.csdn.net/uploads/201309/01/1378037234_3539.jpg",
            "http://img.my.csdn.net/uploads/201309/01/1378037234_6318.jpg",
    };
}

 

然后就是實現代碼了

說一下思路， 先獲取ViewPager 然后往ViewPager 添加圖片，但是圖片是網絡上的 所以要先下載后在添加進去，這里處於防止加載比較多的圖片時造成OOM問題 所以引入了 LruCache 類緩存技術。先講下載的圖片存入手機里並緩存下來，一為了節省用戶的數據流量，二為了之后的加載速度。有了緩沖下次就不用在重復去網絡上下載了。  代碼如下

package com.higgs.mviewpager;

import android.app.Activity;
import android.content.Intent;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.AsyncTask;
import android.os.Bundle;
import android.os.Environment;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.util.Log;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.Toast;

import java.io.BufferedInputStream;
import java.io.BufferedOutputStream;
import java.io.BufferedReader;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.InputStreamReader;
import java.net.HttpURLConnection;
import java.net.URL;
import java.util.ArrayList;


public class MainActivity extends Activity {

    private static final String TAG = "MainActivity";
    private ImageLoader  imageLoader = ImageLoader.getInstance();  //獲取圖片進行管理的工具類實例。

    private ViewPager viewpager;
    private ArrayList<View> viewList;
//    private ImageView imageView1;
//    private ImageView imageView2;
//    private ImageView imageView3;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
    }


    private void initView() {
        viewpager = (ViewPager) findViewById(R.id.viewpager); //獲取viewpager
        viewList = new ArrayList<View>();   //保存view，用於PagerAdapter
        for(int i = 0; i<Images.imageUrls.length; i++){
            new DownLoadPic().execute(i);//圖片有幾張就下載幾張
        }



//
//        imageView1 = new ImageView(this);
//        imageView2 = new ImageView(this);
//        imageView3 = new ImageView(this);
//        imageView1.setImageResource(R.drawable.b);
//        imageView2.setImageResource(R.drawable.c);
//        imageView3.setImageResource(R.drawable.d);
//
//        viewList.add(imageView1);
//        viewList.add(imageView2);
//        viewList.add(imageView3);

        viewpager.setAdapter(pagerAdapter);  //加入適配器
        Log.e("TAG1", "" + viewList.size());

    }


    /**
     * 圖片異步下載內部類
     */

    class DownLoadPic extends AsyncTask<Integer,Void,Bitmap>{

        /**
         * 記錄每個圖片對應的位置
         */
        private int mposition;

        @Override
        protected Bitmap doInBackground(Integer... params) {

            mposition = params[0];//獲取傳過來的圖片position （下標）
            String strurl = Images.imageUrls[mposition];  //通過下標獲得圖片URL
            File imageFile = new File(getImagePath(strurl)); //獲取圖片在本地手機中的位置路徑
            if (!imageFile.exists()) {  //判斷是否存在手機里
                doPost(strurl);//如果沒有就下載圖片
            }
            if (strurl != null) {
                Bitmap bitmap = ImageLoader.decodeSampledBitmapFromResource(imageFile.getPath(),
                        290);  //壓縮圖片  我這里寫的是290
                if (bitmap != null) {
                    imageLoader.addBitmapToMemoryCache(strurl, bitmap); //將圖片加入緩沖  LruCache中
                    return bitmap;
                }
            }


            return null;
        }

        @Override
        protected void onPostExecute(Bitmap o) {
            ImageView imageView = new ImageView(MainActivity.this);
            imageView.setImageBitmap(o);
            imageView.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {

                    Intent intent = new Intent(MainActivity.this, ImageDetailsActivity.class);//打開圖片詳情類
                    intent.putExtra("image_position", mposition);
                    MainActivity.this.startActivity(intent);
                }
            });

            viewList.add(imageView);
            pagerAdapter.notifyDataSetChanged();  //這句話一定不能少  ，不然會有異常
            Log.e("TAG2", "" + viewList.size());


        }


    }

    /**
     * ViewPager的適配器  重寫下面幾個方法就可以了
     */

    PagerAdapter pagerAdapter = new PagerAdapter() {

        @Override
        public int getCount() {

            return viewList.size();
        }

        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view == object;
        }

        @Override
        public void destroyItem(ViewGroup container, int position,
                                Object object) {
            container.removeView(viewList.get(position));

        }

        @Override
        public int getItemPosition(Object object) {

            return super.getItemPosition(object);
        }

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            container.addView(viewList.get(position));
            return viewList.get(position);
        }

    };


    /**
     * 下載圖片方法  並將圖片緩沖至手機指定位置中
     * @param urlstr  圖片URL
     */
    public void doPost(String urlstr){
        if (Environment.getExternalStorageState().equals(Environment.MEDIA_MOUNTED)) {
            Log.d("TAG", "monted sdcard");
        } else {
            Log.d("TAG", "has no sdcard");
        }
        HttpURLConnection con = null;
        FileOutputStream fos = null;
        BufferedOutputStream bos = null;
        BufferedInputStream bis = null;
        File imageFile = null;
        try {
            URL url = new URL(urlstr);
            con = (HttpURLConnection) url.openConnection();
            con.setConnectTimeout(5 * 1000);
            con.setReadTimeout(15 * 1000);
            con.setDoInput(true);
            con.setDoOutput(true);
            bis = new BufferedInputStream(con.getInputStream());
            imageFile = new File(getImagePath(urlstr));
            fos = new FileOutputStream(imageFile);
            bos = new BufferedOutputStream(fos);
            byte[] b = new byte[1024];
            int length;
            while ((length = bis.read(b)) != -1) {// 寫入手機中
                bos.write(b, 0, length);
                bos.flush();
            }
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            try {
                if (bis != null) {
                    bis.close();
                }
                if (bos != null) {
                    bos.close();
                }
                if (con != null) {
                    con.disconnect();
                }
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
        if (imageFile != null) {
            Bitmap bitmap = ImageLoader.decodeSampledBitmapFromResource(imageFile.getPath(),
                    290);
            if (bitmap != null) {
                imageLoader.addBitmapToMemoryCache(urlstr, bitmap);
            }
        }
    }

    /**
     * 獲取圖片的本地存儲路徑。
     *
     * @param imageUrl
     *            圖片的URL地址。
     * @return 圖片的本地存儲路徑。
     */
    private String getImagePath(String imageUrl) {
        int lastSlashIndex = imageUrl.lastIndexOf("/");
        String imageName = imageUrl.substring(lastSlashIndex + 1);
        String imageDir = Environment.getExternalStorageDirectory().getPath()
                + "/pwxceshibao/";
        File file = new File(imageDir);
        if (!file.exists()) {
            file.mkdirs();
        }
        String imagePath = imageDir + imageName;
        return imagePath;
    }

}

 

下面是幾個工具類。是我從網上找的。個人覺得非常有用。所以就拿過來了。注意了，下面幾個工具類都用上了，所以不能少哦

在這里要感謝 http://blog.csdn.net/sziicool/article/details/18728187  博主，我是站在他的肩膀上修改的。

 

 

第一個是查看大圖類  就是圖片詳情類

package com.higgs.mviewpager;

import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.Bundle;
import android.os.Environment;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.Window;
import android.widget.TextView;

import java.io.File;

/**
 * 查看大圖的Activity界面。
 * 
 * @author guolin
 */
public class ImageDetailsActivity extends Activity implements
        OnPageChangeListener {

    /**
     * 用於管理圖片的滑動
     */
    private ViewPager viewPager;

    /**
     * 顯示當前圖片的頁數
     */
    private TextView pageText;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.image_details);
        int imagePosition = getIntent().getIntExtra("image_position", 0);
        pageText = (TextView) findViewById(R.id.page_text);
        viewPager = (ViewPager) findViewById(R.id.view_pager);
        ViewPagerAdapter adapter = new ViewPagerAdapter();
        viewPager.setAdapter(adapter);
        viewPager.setCurrentItem(imagePosition);
        viewPager.setOnPageChangeListener(this);
        viewPager.setEnabled(false);
        // 設定當前的頁數和總頁數
        pageText.setText((imagePosition + 1) + "/" + Images.imageUrls.length);
    }

    /**
     * ViewPager的適配器
     * 
     * @author guolin
     */
    class ViewPagerAdapter extends PagerAdapter {

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            String imagePath = getImagePath(Images.imageUrls[position]);
            Bitmap bitmap = BitmapFactory.decodeFile(imagePath);
            if (bitmap == null) {
                bitmap = BitmapFactory.decodeResource(getResources(),
                        R.drawable.empty_photo);
            }
            View view = LayoutInflater.from(ImageDetailsActivity.this).inflate(
                    R.layout.zoom_image_layout, null);
            ZoomImageView zoomImageView = (ZoomImageView) view
                    .findViewById(R.id.zoom_image_view);
            zoomImageView.setImageBitmap(bitmap);
            container.addView(view);
            return view;
        }

        @Override
        public int getCount() {
            return Images.imageUrls.length;
        }

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

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            View view = (View) object;
            container.removeView(view);
        }

    }

    /**
     * 獲取圖片的本地存儲路徑。
     * 
     * @param imageUrl
     *            圖片的URL地址。
     * @return 圖片的本地存儲路徑。
     */
    private String getImagePath(String imageUrl) {
        int lastSlashIndex = imageUrl.lastIndexOf("/");
        String imageName = imageUrl.substring(lastSlashIndex + 1);
        String imageDir = Environment.getExternalStorageDirectory().getPath()
                + "/pwxceshibao/";
        File file = new File(imageDir);
        if (!file.exists()) {
            file.mkdirs();
        }
        String imagePath = imageDir + imageName;
        return imagePath;
    }

    @Override
    public void onPageScrollStateChanged(int arg0) {

    }

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

    }

    @Override
    public void onPageSelected(int currentPage) {
        // 每當頁數發生改變時重新設定一遍當前的頁數和總頁數
        pageText.setText((currentPage + 1) + "/" + Images.imageUrls.length);
    }

}

第二個是圖片縮放工具類

package com.higgs.mviewpager;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Matrix;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;

/**
 * 自定義的ImageView控制，可對圖片進行多點觸控縮放和拖動
 * 
 * @author guolin
 */
public class ZoomImageView extends View {

    /**
     * 初始化狀態常量
     */
    public static final int STATUS_INIT = 1;

    /**
     * 圖片放大狀態常量
     */
    public static final int STATUS_ZOOM_OUT = 2;

    /**
     * 圖片縮小狀態常量
     */
    public static final int STATUS_ZOOM_IN = 3;

    /**
     * 圖片拖動狀態常量
     */
    public static final int STATUS_MOVE = 4;

    /**
     * 用於對圖片進行移動和縮放變換的矩陣
     */
    private Matrix matrix = new Matrix();

    /**
     * 待展示的Bitmap對象
     */
    private Bitmap sourceBitmap;

    /**
     * 記錄當前操作的狀態，可選值為STATUS_INIT、STATUS_ZOOM_OUT、STATUS_ZOOM_IN和STATUS_MOVE
     */
    private int currentStatus;

    /**
     * ZoomImageView控件的寬度
     */
    private int width;

    /**
     * ZoomImageView控件的高度
     */
    private int height;

    /**
     * 記錄兩指同時放在屏幕上時，中心點的橫坐標值
     */
    private float centerPointX;

    /**
     * 記錄兩指同時放在屏幕上時，中心點的縱坐標值
     */
    private float centerPointY;

    /**
     * 記錄當前圖片的寬度，圖片被縮放時，這個值會一起變動
     */
    private float currentBitmapWidth;

    /**
     * 記錄當前圖片的高度，圖片被縮放時，這個值會一起變動
     */
    private float currentBitmapHeight;

    /**
     * 記錄上次手指移動時的橫坐標
     */
    private float lastXMove = -1;

    /**
     * 記錄上次手指移動時的縱坐標
     */
    private float lastYMove = -1;

    /**
     * 記錄手指在橫坐標方向上的移動距離
     */
    private float movedDistanceX;

    /**
     * 記錄手指在縱坐標方向上的移動距離
     */
    private float movedDistanceY;

    /**
     * 記錄圖片在矩陣上的橫向偏移值
     */
    private float totalTranslateX;

    /**
     * 記錄圖片在矩陣上的縱向偏移值
     */
    private float totalTranslateY;

    /**
     * 記錄圖片在矩陣上的總縮放比例
     */
    private float totalRatio;

    /**
     * 記錄手指移動的距離所造成的縮放比例
     */
    private float scaledRatio;

    /**
     * 記錄圖片初始化時的縮放比例
     */
    private float initRatio;

    /**
     * 記錄上次兩指之間的距離
     */
    private double lastFingerDis;

    /**
     * ZoomImageView構造函數，將當前操作狀態設為STATUS_INIT。
     * 
     * @param context
     * @param attrs
     */
    public ZoomImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
        currentStatus = STATUS_INIT;
    }

    /**
     * 將待展示的圖片設置進來。
     * 
     * @param bitmap
     *            待展示的Bitmap對象
     */
    public void setImageBitmap(Bitmap bitmap) {
        sourceBitmap = bitmap;
        invalidate();
    }

    @Override
    protected void onLayout(boolean changed, int left, int top, int right,
            int bottom) {
        super.onLayout(changed, left, top, right, bottom);
        if (changed) {
            // 分別獲取到ZoomImageView的寬度和高度
            width = getWidth();
            height = getHeight();
        }
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        if (initRatio == totalRatio) {
            getParent().requestDisallowInterceptTouchEvent(false);
        } else {
            getParent().requestDisallowInterceptTouchEvent(true);
        }
        switch (event.getActionMasked()) {
        case MotionEvent.ACTION_POINTER_DOWN:
            if (event.getPointerCount() == 2) {
                // 當有兩個手指按在屏幕上時，計算兩指之間的距離
                lastFingerDis = distanceBetweenFingers(event);
            }
            break;
        case MotionEvent.ACTION_CANCEL:
        case MotionEvent.ACTION_MOVE:
            if (event.getPointerCount() == 1) {
                // 只有單指按在屏幕上移動時，為拖動狀態
                float xMove = event.getX();
                float yMove = event.getY();
                if (lastXMove == -1 && lastYMove == -1) {
                    lastXMove = xMove;
                    lastYMove = yMove;
                }
                currentStatus = STATUS_MOVE;
                movedDistanceX = xMove - lastXMove;
                movedDistanceY = yMove - lastYMove;
                // 進行邊界檢查，不允許將圖片拖出邊界
                if (totalTranslateX + movedDistanceX > 0) {
                    movedDistanceX = 0;
                } else if (width - (totalTranslateX + movedDistanceX) > currentBitmapWidth) {
                    movedDistanceX = 0;
                }
                if (totalTranslateY + movedDistanceY > 0) {
                    movedDistanceY = 0;
                } else if (height - (totalTranslateY + movedDistanceY) > currentBitmapHeight) {
                    movedDistanceY = 0;
                }
                // 調用onDraw()方法繪制圖片
                invalidate();
                lastXMove = xMove;
                lastYMove = yMove;
            } else if (event.getPointerCount() == 2) {
                // 有兩個手指按在屏幕上移動時，為縮放狀態
                centerPointBetweenFingers(event);
                double fingerDis = distanceBetweenFingers(event);
                if (fingerDis > lastFingerDis) {
                    currentStatus = STATUS_ZOOM_OUT;
                } else {
                    currentStatus = STATUS_ZOOM_IN;
                }
                // 進行縮放倍數檢查，最大只允許將圖片放大4倍，最小可以縮小到初始化比例
                if ((currentStatus == STATUS_ZOOM_OUT && totalRatio < 4 * initRatio)
                        || (currentStatus == STATUS_ZOOM_IN && totalRatio > initRatio)) {
                    scaledRatio = (float) (fingerDis / lastFingerDis);
                    totalRatio = totalRatio * scaledRatio;
                    if (totalRatio > 4 * initRatio) {
                        totalRatio = 4 * initRatio;
                    } else if (totalRatio < initRatio) {
                        totalRatio = initRatio;
                    }
                    // 調用onDraw()方法繪制圖片
                    invalidate();
                    lastFingerDis = fingerDis;
                }
            }
            break;
        case MotionEvent.ACTION_POINTER_UP:
            if (event.getPointerCount() == 2) {
                // 手指離開屏幕時將臨時值還原
                lastXMove = -1;
                lastYMove = -1;
            }
            break;
        case MotionEvent.ACTION_UP:
            // 手指離開屏幕時將臨時值還原
            lastXMove = -1;
            lastYMove = -1;
            break;
        default:
            break;
        }
        return true;
    }

    /**
     * 根據currentStatus的值來決定對圖片進行什么樣的繪制操作。
     */
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        switch (currentStatus) {
        case STATUS_ZOOM_OUT:
        case STATUS_ZOOM_IN:
            zoom(canvas);
            break;
        case STATUS_MOVE:
            move(canvas);
            break;
        case STATUS_INIT:
            initBitmap(canvas);
        default:
            if (sourceBitmap != null) {
                canvas.drawBitmap(sourceBitmap, matrix, null);
            }
            break;
        }
    }

    /**
     * 對圖片進行縮放處理。
     * 
     * @param canvas
     */
    private void zoom(Canvas canvas) {
        matrix.reset();
        // 將圖片按總縮放比例進行縮放
        matrix.postScale(totalRatio, totalRatio);
        float scaledWidth = sourceBitmap.getWidth() * totalRatio;
        float scaledHeight = sourceBitmap.getHeight() * totalRatio;
        float translateX = 0f;
        float translateY = 0f;
        // 如果當前圖片寬度小於屏幕寬度，則按屏幕中心的橫坐標進行水平縮放。否則按兩指的中心點的橫坐標進行水平縮放
        if (currentBitmapWidth < width) {
            translateX = (width - scaledWidth) / 2f;
        } else {
            translateX = totalTranslateX * scaledRatio + centerPointX
                    * (1 - scaledRatio);
            // 進行邊界檢查，保證圖片縮放后在水平方向上不會偏移出屏幕
            if (translateX > 0) {
                translateX = 0;
            } else if (width - translateX > scaledWidth) {
                translateX = width - scaledWidth;
            }
        }
        // 如果當前圖片高度小於屏幕高度，則按屏幕中心的縱坐標進行垂直縮放。否則按兩指的中心點的縱坐標進行垂直縮放
        if (currentBitmapHeight < height) {
            translateY = (height - scaledHeight) / 2f;
        } else {
            translateY = totalTranslateY * scaledRatio + centerPointY
                    * (1 - scaledRatio);
            // 進行邊界檢查，保證圖片縮放后在垂直方向上不會偏移出屏幕
            if (translateY > 0) {
                translateY = 0;
            } else if (height - translateY > scaledHeight) {
                translateY = height - scaledHeight;
            }
        }
        // 縮放后對圖片進行偏移，以保證縮放后中心點位置不變
        matrix.postTranslate(translateX, translateY);
        totalTranslateX = translateX;
        totalTranslateY = translateY;
        currentBitmapWidth = scaledWidth;
        currentBitmapHeight = scaledHeight;
        canvas.drawBitmap(sourceBitmap, matrix, null);
    }

    /**
     * 對圖片進行平移處理
     * 
     * @param canvas
     */
    private void move(Canvas canvas) {
        matrix.reset();
        // 根據手指移動的距離計算出總偏移值
        float translateX = totalTranslateX + movedDistanceX;
        float translateY = totalTranslateY + movedDistanceY;
        // 先按照已有的縮放比例對圖片進行縮放
        matrix.postScale(totalRatio, totalRatio);
        // 再根據移動距離進行偏移
        matrix.postTranslate(translateX, translateY);
        totalTranslateX = translateX;
        totalTranslateY = translateY;
        canvas.drawBitmap(sourceBitmap, matrix, null);
    }

    /**
     * 對圖片進行初始化操作，包括讓圖片居中，以及當圖片大於屏幕寬高時對圖片進行壓縮。
     * 
     * @param canvas
     */
    private void initBitmap(Canvas canvas) {
        if (sourceBitmap != null) {
            matrix.reset();
            int bitmapWidth = sourceBitmap.getWidth();
            int bitmapHeight = sourceBitmap.getHeight();
            if (bitmapWidth > width || bitmapHeight > height) {
                if (bitmapWidth - width > bitmapHeight - height) {
                    // 當圖片寬度大於屏幕寬度時，將圖片等比例壓縮，使它可以完全顯示出來
                    float ratio = width / (bitmapWidth * 1.0f);
                    matrix.postScale(ratio, ratio);
                    float translateY = (height - (bitmapHeight * ratio)) / 2f;
                    // 在縱坐標方向上進行偏移，以保證圖片居中顯示
                    matrix.postTranslate(0, translateY);
                    totalTranslateY = translateY;
                    totalRatio = initRatio = ratio;
                } else {
                    // 當圖片高度大於屏幕高度時，將圖片等比例壓縮，使它可以完全顯示出來
                    float ratio = height / (bitmapHeight * 1.0f);
                    matrix.postScale(ratio, ratio);
                    float translateX = (width - (bitmapWidth * ratio)) / 2f;
                    // 在橫坐標方向上進行偏移，以保證圖片居中顯示
                    matrix.postTranslate(translateX, 0);
                    totalTranslateX = translateX;
                    totalRatio = initRatio = ratio;
                }
                currentBitmapWidth = bitmapWidth * initRatio;
                currentBitmapHeight = bitmapHeight * initRatio;
            } else {
                // 當圖片的寬高都小於屏幕寬高時，直接讓圖片居中顯示
                float translateX = (width - sourceBitmap.getWidth()) / 2f;
                float translateY = (height - sourceBitmap.getHeight()) / 2f;
                matrix.postTranslate(translateX, translateY);
                totalTranslateX = translateX;
                totalTranslateY = translateY;
                totalRatio = initRatio = 1f;
                currentBitmapWidth = bitmapWidth;
                currentBitmapHeight = bitmapHeight;
            }
            canvas.drawBitmap(sourceBitmap, matrix, null);
        }
    }

    /**
     * 計算兩個手指之間的距離。
     * 
     * @param event
     * @return 兩個手指之間的距離
     */
    private double distanceBetweenFingers(MotionEvent event) {
        float disX = Math.abs(event.getX(0) - event.getX(1));
        float disY = Math.abs(event.getY(0) - event.getY(1));
        return Math.sqrt(disX * disX + disY * disY);
    }

    /**
     * 計算兩個手指之間中心點的坐標。
     * 
     * @param event
     */
    private void centerPointBetweenFingers(MotionEvent event) {
        float xPoint0 = event.getX(0);
        float yPoint0 = event.getY(0);
        float xPoint1 = event.getX(1);
        float yPoint1 = event.getY(1);
        centerPointX = (xPoint0 + xPoint1) / 2;
        centerPointY = (yPoint0 + yPoint1) / 2;
    }

}

最后一個是圖片管理工具類  也是緩存核心類   這個就是上面提到的防止加載過多的圖片時產生OOM

package com.higgs.mviewpager;

import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.util.LruCache;

/**
 * 對圖片進行管理的工具類。
 * 
 * @author Tony
 */
public class ImageLoader {

    /**
     * 圖片緩存技術的核心類，用於緩存所有下載好的圖片，在程序內存達到設定值時會將最少最近使用的圖片移除掉。
     */
    private static LruCache<String, Bitmap> mMemoryCache;

    /**
     * ImageLoader的實例。
     */
    private static ImageLoader mImageLoader;

    private ImageLoader() {
        // 獲取應用程序最大可用內存
        int maxMemory = (int) Runtime.getRuntime().maxMemory();
        int cacheSize = maxMemory / 8;
        // 設置圖片緩存大小為程序最大可用內存的1/8
        mMemoryCache = new LruCache<String, Bitmap>(cacheSize) {
            @Override
            protected int sizeOf(String key, Bitmap bitmap) {
                return bitmap.getByteCount();
            }
        };
    }

    /**
     * 獲取ImageLoader的實例。
     * 
     * @return ImageLoader的實例。
     */
    public static ImageLoader getInstance() {
        if (mImageLoader == null) {
            mImageLoader = new ImageLoader();
        }
        return mImageLoader;
    }

    /**
     * 將一張圖片存儲到LruCache中。
     * 
     * @param key
     *            LruCache的鍵，這里傳入圖片的URL地址。
     * @param bitmap
     *            LruCache的鍵，這里傳入從網絡上下載的Bitmap對象。
     */
    public void addBitmapToMemoryCache(String key, Bitmap bitmap) {
        if (getBitmapFromMemoryCache(key) == null) {
            mMemoryCache.put(key, bitmap);
        }
    }

    /**
     * 從LruCache中獲取一張圖片，如果不存在就返回null。
     * 
     * @param key
     *            LruCache的鍵，這里傳入圖片的URL地址。
     * @return 對應傳入鍵的Bitmap對象，或者null。
     */
    public Bitmap getBitmapFromMemoryCache(String key) {
        return mMemoryCache.get(key);
    }

    public static int calculateInSampleSize(BitmapFactory.Options options,
            int reqWidth) {
        // 源圖片的寬度
        final int width = options.outWidth;
        int inSampleSize = 1;
        if (width > reqWidth) {
            // 計算出實際寬度和目標寬度的比率
            final int widthRatio = Math.round((float) width / (float) reqWidth);
            inSampleSize = widthRatio;
        }
        return inSampleSize;
    }

    public static Bitmap decodeSampledBitmapFromResource(String pathName,
            int reqWidth) {
        // 第一次解析將inJustDecodeBounds設置為true，來獲取圖片大小
        final BitmapFactory.Options options = new BitmapFactory.Options();
        options.inJustDecodeBounds = true;
        BitmapFactory.decodeFile(pathName, options);
        // 調用上面定義的方法計算inSampleSize值
        options.inSampleSize = calculateInSampleSize(options, reqWidth);
        // 使用獲取到的inSampleSize值再次解析圖片
        options.inJustDecodeBounds = false;
        return BitmapFactory.decodeFile(pathName, options);
    }

}

 

 

 

好了  大家照着自己做做就可以出來效果了，因為我已經把全部的源碼貼出來了，如果你懶得連代碼都不想敲。我覺得此文章對你沒有什么作用。只有自己敲了就理解了

第一次寫博客，感覺思路很亂，很多都沒有講明白。一個是時間不夠，二是關鍵點都有注釋，代碼都貼上來了。共勉~~~~