android開發我的新浪微博客戶端-大圖浏覽以及保存篇(7)

 

 
     在閱讀微博的功能篇中，如果微博包含了圖片就會在微博正文下面顯示該張圖片，但是這個圖片只是張縮略圖，這樣就需要提供一個能放大縮小查看這張圖片的功能，當點擊正文中的縮略圖的時候顯示一個簡單的圖片浏覽器功能，提供圖片的放大、縮小、拖拽操作方便用戶查看圖片，同時也提供保存圖片到手機的功能。本功能的UI比較簡單就不單獨分篇講了，具體的實現效果如上圖。

      新建ImageActivity.java作為圖片浏覽Activity,在res/layout下新建image.xml的Layout作為圖片浏覽的布局文件，image.xml布局代碼很簡單了就不詳細解釋了直接貼代碼：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:orientation="vertical">
  <LinearLayout
  android:layout_width="fill_parent"
  android:layout_height="41px"
  android:background="@drawable/imagebar_bg">
  
  <RelativeLayout
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:layout_weight="2">
  <Button
  android:id="@+id/returnBtn"
  android:layout_width="63px"
  android:layout_height="29px"
  android:layout_centerInParent="true"
  android:text="返回"
  android:textColor="#ffffff"
  android:background="@drawable/btn1_bg">
  </Button>
  </RelativeLayout>
  
  <RelativeLayout
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:layout_weight="1">
  <TextView
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_centerInParent="true"
  android:text="浏覽圖片"
  android:textColor="#ffffff">
  </TextView>
  </RelativeLayout>
  
  <RelativeLayout
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:layout_weight="2">
  <Button
  android:id="@+id/downBtn"
  android:layout_width="60px"
  android:layout_height="29px"
  android:layout_centerInParent="true"
  android:text="下載"
  android:textColor="#ffffff"
  android:background="@drawable/btn2_bg">
  </Button>
  </RelativeLayout>
  
  </LinearLayout>
  <RelativeLayout
  android:layout_width="fill_parent"
  android:layout_height="fill_parent">

  <MySinaWeiBo.ui.ImageZoomView
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:id="@+id/pic"
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent">
  </MySinaWeiBo.ui.ImageZoomView>
  
  <ZoomControls
  android:id="@+id/zoomCtrl"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_alignParentRight="true"
  android:layout_alignParentBottom="true">
  </ZoomControls>
  </RelativeLayout>

</LinearLayout> 

     上面的代碼中用到了一個自定義控件MySinaWeiBo.ui.ImageZoomView，這個就是整個功能的核心部分，用來實現圖片的放大、縮小、拖拽的一個圖片顯示控件，這個控件非我原創，是參考了Android one finger zoom tutorial 這篇博客寫出來的，所以我在這裡也不貼實現代碼了，有興趣的大家可以直接看看這個文章。

      接下要做的就是用這個ImageZoomView來顯示圖片，在閱讀微博內容的頁面中當點擊內容中的縮略圖片的時候會把這個縮略圖對應的原圖的url傳給當前的這個ImageActivity，那麼在ImageActivity的onCreate方法中根據這個url獲取圖片並且設置給ImageZoomView。在onCreate方法中代碼如下：

@Override
    public void onCreate(Bundle savedInstanceState) {
        。。。。。
        Intent i=this.getIntent();
        if(i!=null){
            Bundle b=i.getExtras();
            if(b!=null){
                if(b.containsKey("url")){
                    String url = b.getString("url");
                    mZoomView=(ImageZoomView)findViewById(R.id.pic);
                    Drawable img= AsyncImageLoader.loadImageFromUrl(url);
                    
                
                    image=drawableToBitmap(img);
                    mZoomView.setImage(image);
                    
                    mZoomState = new ZoomState();
                    mZoomView.setZoomState(mZoomState);
                    mZoomListener = new SimpleZoomListener();
                    mZoomListener.setZoomState(mZoomState);
                    
                    mZoomView.setOnTouchListener(mZoomListener);
                    resetZoomState();
                }
            }
        }
。。。。。。

} 

private void resetZoomState() {
        mZoomState.setPanX(0.5f);
        mZoomState.setPanY(0.5f);
        
        final int mWidth = image.getWidth();
        final int vWidth= mZoomView.getWidth();
        Log.e("iw:",vWidth+"");
        mZoomState.setZoom(1f);
        mZoomState.notifyObservers();
        
    }
    
    public Bitmap drawableToBitmap(Drawable drawable) {
        Bitmap bitmap = ((BitmapDrawable)drawable).getBitmap(); 
        return bitmap;

    }

接下來就是ZoomControls的放大縮小事件代碼： 

ZoomControls zoomCtrl = (ZoomControls) findViewById(R.id.zoomCtrl);
        zoomCtrl.setOnZoomInClickListener(new OnClickListener(){
            @Override
            public void onClick(View view) {
                float z= mZoomState.getZoom()+0.25f;
                mZoomState.setZoom(z);
                mZoomState.notifyObservers();
            }
            
        });
        zoomCtrl.setOnZoomOutClickListener(new OnClickListener(){

            @Override
            public void onClick(View v) {
                float z= mZoomState.getZoom()-0.25f;
                mZoomState.setZoom(z);
                mZoomState.notifyObservers();
            }
            

        }); 

這樣一個簡單的圖片浏覽器功能就完成了，支持放大縮小並且還能拖拽，基本上達到應用需求。