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

        }); 

这样一个简单的图片浏览器功能就完成了，支持放大缩小并且还能拖拽，基本上达到应用需求。