android开发我的新浪微博客户端-大图浏览以及保存篇(7)
2012-03-20 21:44
417 查看
在阅读微博的功能篇中,如果微博包含了图片就会在微博正文下面显示该张图片,但是这个图片只是张缩略图,这样就需要提供一个能放大缩小查看这张图片的功能,当点击正文中的缩略图的时候显示一个简单的图片浏览器功能,提供图片的放大、缩小、拖拽操作方便用户查看图片,同时也提供保存图片到手机的功能。本功能的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>
上面的代码中用到了一个自定义控件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(); }
相关文章推荐
- android开发我的新浪微博客户端-大图浏览以及保存篇(7)
- android开发我的新浪微博客户端-大图浏览以及保存篇(7)
- android-新浪微博客户端开发-效果图以及讲解PPT(五)
- android开发我的新浪微博客户端-OAuth篇(2.1)
- android开发我的新浪微博客户端-载入页面UI篇(1.1)
- android开发我的新浪微博客户端-登录页面功能篇
- android开发我的新浪微博客户端-用户授权页面功能篇(3.2)
- android开发我的新浪微博客户端-OAuth篇(2.1)
- android开发我的新浪微博客户端-OAuth篇(2.1)
- [转]android开发新浪微博客户端 完整攻略 [新手必读]
- android开发我的新浪微博客户端-载入页面sqlite篇(1.2)
- Android 客户端访问服务器以及服务器开发
- android开发新浪微博客户端 完整攻略 [新手必读]
- android开发我的新浪微博客户端-载入页面sqlite篇(1.2)
- android开发我的新浪微博客户端-开篇
- android开发我的新浪微博客户端-用户授权页面功能篇(3.2)
- android开发我的新浪微博客户端-OAuth认证过程中用WebView代替原来的系统自带浏览器
- Android开发新浪微博客户端 完整攻略
- android开发我的新浪微博客户端-用户授权页面UI篇(3.1)
- 新浪微博Android客户端开发之OAuth认证篇