一步一步打造自己的Android图片浏览器(原创)
今天我们试着来制作一个自己的Android图片浏览器。
图片浏览器应该具有什么功能呢?鉴于不同的人不同的理解,这里提出一个基本的需求:
- 搜索手机内的所有图片,展示于一个列表中;
- 列表中展示的是图片的缩略图,点击图片之后,进入图片的大图显示;
- 在大图显示状态下,可以进行左右滑动,查看其它图片;
- 在大图显示状态下,我们应该可以查看图片的详细信息;
- 也许我们还可以支持大图下的放大与缩小?
好了,要求先这么多,我们来实现吧。
第一步:我们要得到手机内的所有图片,展示在一个列表中。
android内部为我们提供了一个类MediaStore,这个类中存放了手机中的所有文件信息,并且这个类中对于图片有一个单独的类:MediaStore.Images,我们可以从这个类中获得我们想要的图片信息。(关于这个类的更详细描述,请参阅android文档,或者:http://www.cnblogs.com/weizhxa/p/5688719.html)。
那么我们依次:
1、新建一个Android工程;
2、在Android工程的主页Activity中添加一个ListView:
<RelativeLayout 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:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context="org.fiu.fiuimagebrower.MainActivity" > <ListView android:id="@+id/lv_images" android:layout_width="match_parent" android:layout_height="match_parent" /> </RelativeLayout>
这个listview将成为展示图片的主力。
3、我们为listview绑定一个adapter,adapter的每一项将加载一张图片。
lv_images = (ListView) findViewById(R.id.lv_images); adapter = new FIUImageAdapter(this); lv_images.setAdapter(adapter);
4、接下来,我们来实现这个adapter的内部代码,这个adapter继承自BaseAdapter(当然我们也可以继承其他adapter,习惯了)。我们知道,这个adapter的职能就是进行图片的加载,那么我们将加载工作放入这个adapter中进行。那么加载时需要activity传递什么数据呢?由于是从MediaStore中得到数据,所以除了context生成控件的使用外,是不需要其它数据的。所以,我们的adapter可以如下实现。
1 /** 2 * 当前的图片浏览器的适配器 3 * 4 */ 5 public class FIUImageAdapter extends BaseAdapter { 6 /** 7 * ctx 8 */ 9 private Context context; 10 /** 11 * list 12 */ 13 List<ImageInfo> list = new ArrayList<ImageInfo>(); 14 15 /** 16 * ctor 17 */ 18 public FIUImageAdapter(Context context) { 19 this.context = context; 20 // 加载数据库中的图片信息 21 loadImages(); 22 } 23 24 /** 25 * 加载图片信息 26 */ 27 private void loadImages() { 28 list.clear(); 29 getImages(MediaStore.Images.Media.EXTERNAL_CONTENT_URI, list); 30 getImages(MediaStore.Images.Media.INTERNAL_CONTENT_URI, list); 31 Log.i("list.size(): ", list.size() + ""); 32 } 33 34 /** 35 * 得到list 36 * 37 * @param uri 38 * @param list 39 */ 40 private void getImages(Uri uri, List<ImageInfo> list) { 41 Cursor externalCursor = MediaStore.Images.Media.query( 42 context.getContentResolver(), uri, new String[] { 43 MediaStore.Images.Media.TITLE, 44 MediaStore.Images.Media.DISPLAY_NAME, 45 MediaStore.Images.Media.SIZE, 46 MediaStore.Images.Media.DATA, 47 MediaStore.Images.Media.DESCRIPTION }); 48 if (externalCursor != null) { 49 while (externalCursor.moveToNext()) { 50 ImageInfo model = new ImageInfo(); 51 model.title = externalCursor.getString(externalCursor 52 .getColumnIndex(MediaStore.Images.Media.TITLE)); 53 model.displayName = externalCursor.getString(externalCursor 54 .getColumnIndex(MediaStore.Images.Media.DISPLAY_NAME)); 55 model.description = externalCursor.getString(externalCursor 56 .getColumnIndex(MediaStore.Images.Media.DESCRIPTION)); 57 model.size = externalCursor.getString(externalCursor 58 .getColumnIndex(MediaStore.Images.Media.SIZE)); 59 model.data = externalCursor.getString(externalCursor 60 .getColumnIndex(MediaStore.Images.Media.DATA)); 61 list.add(model); 62 } 63 } 64 } 65 66 @Override 67 public int getCount() { 68 return list.size(); 69 } 70 71 @Override 72 public Object getItem(int position) { 73 return list.get(position); 74 } 75 76 @Override 77 public long getItemId(int position) { 78 return position; 79 } 80 81 @Override 82 public View getView(int position, View convertView, ViewGroup parent) { 83 ImageView view; 84 int widthAndHeight = (int) (getScreenWidth() / 3); 85 if (convertView != null) { 86 view = (ImageView) convertView; 87 } else { 88 view = new ImageView(context); 89 LayoutParams params = new LayoutParams(widthAndHeight, 90 widthAndHeight); 91 view.setLayoutParams(params); 92 } 93 view.setImageBitmap(getThumbnail(list.get(position).data, 94 widthAndHeight, widthAndHeight)); 95 return view; 96 } 97 98 /** 99 * 获取缩略图 100 * 101 * @param pathName 102 * @param width 103 * @param height 104 * @return 105 */ 106 private Bitmap getThumbnail(String pathName, int width, int height) { 107 Options opts = new Options(); 108 opts.inJustDecodeBounds = true; 109 BitmapFactory.decodeFile(pathName, opts);// 图片未加载进内存,但是可以读取长宽 110 int oriWidth = opts.outWidth; 111 int oriHeight = opts.outHeight; 112 opts.inSampleSize = oriWidth / width; 113 opts.inSampleSize = opts.inSampleSize > oriHeight / height ? opts.inSampleSize 114 : oriHeight / height; 115 opts.inJustDecodeBounds = false; 116 Bitmap decodeFile = BitmapFactory.decodeFile(pathName, opts);// 图片加载进内存 117 Bitmap result = Bitmap.createScaledBitmap(decodeFile, width, height, 118 false); 119 decodeFile.recycle(); 120 return result; 121 } 122 123 /** 124 * 获取屏幕宽度 125 * 126 * @return 127 */ 128 private float getScreenWidth() { 129 WindowManager windowManager = (WindowManager) context 130 .getSystemService(Context.WINDOW_SERVICE); 131 return windowManager.getDefaultDisplay().getWidth(); 132 } 133 134 /** 135 * 获取屏幕高度 136 * 137 * @return 138 */ 139 private float getScreenHeight() { 140 WindowManager windowManager = (WindowManager) context 141 .getSystemService(Context.WINDOW_SERVICE); 142 return windowManager.getDefaultDisplay().getHeight(); 143 } 144 }
我们注意到,以上代码中的getImages()方法调用了2次,分别读取了external和internal的图片信息,而这是我们必须做的,因为我们要读取的是手机全部的图片信息。注意,读取外部存储卡的信息时要加入权限。
在图片显示时,我们指定图片的显示高宽都为屏幕宽度的1/3,这样,我们浏览时,图片的大小就是一样的了。
我们注意到,其中有个获取缩略图的方法:getThumbnail(),这个方法根据原始图片路径,进行了缩略图的计算操作。
我们的list列表中的存储类型是:ImageInfo ,这个类型里面保存了图片的几个必要属性。
/** * 图片信息 * * */ public class ImageInfo { /** * 标题 */ public String title; /** * 大小 */ public String size; /** * 描述 */ public String description; /** * 图片路径 */ public String data; /** * 带后缀名 */ public String displayName; }
接下来,我们运行:
当然,也有可能是下面这种情况:
07-20 17:24:43.240: W/dalvikvm(4762): threadid=1: thread exiting with uncaught exception (group=0x41662ba8)
07-20 17:24:43.240: W/CursorWrapperInner(4762): Cursor finalized without prior close()
07-20 17:24:43.245: E/Parcel(4762): Reading a NULL string not supported here.
07-20 17:24:43.245: W/CursorWrapperInner(4762): Cursor finalized without prior close()
07-20 17:24:43.245: E/Parcel(4762): Reading a NULL string not supported here.
07-20 17:24:43.245: E/AndroidRuntime(4762): FATAL EXCEPTION: main
07-20 17:24:43.245: E/AndroidRuntime(4762): Process: org.fiu.fiuimagebrower, PID: 4762
07-20 17:24:43.245: E/AndroidRuntime(4762): java.lang.ClassCastException: android.view.ViewGroup$LayoutParams cannot be cast to android.widget.AbsListView$LayoutParams
07-20 17:24:43.245: E/AndroidRuntime(4762): at android.widget.ListView.setupChild(ListView.java:2177)
07-20 17:24:43.245: E/AndroidRuntime(4762): at android.widget.ListView.makeAndAddView(ListView.java:2140)
07-20 17:24:43.245: E/AndroidRuntime(4762): at android.widget.ListView.fillDown(ListView.java:952)
07-20 17:24:43.245: E/AndroidRuntime(4762): at android.widget.ListView.fillFromTop(ListView.java:1037)
07-20 17:24:43.245: E/AndroidRuntime(4762): at android.widget.ListView.layoutChildren(ListView.java:1961)
07-20 17:24:43.245: E/AndroidRuntime(4762): at android.widget.AbsListView.onLayout(AbsListView.java:2979)
07-20 17:24:43.245: E/AndroidRuntime(4762): at android.view.View.layout(View.java:15488)
07-20 17:24:43.245: E/AndroidRuntime(4762): at android.view.ViewGroup.layout(ViewGroup.java:4662)
07-20 17:24:43.245: E/AndroidRuntime(4762): at android.widget.RelativeLayout.onLayout(RelativeLayout.java:1055)
07-20 17:24:43.245: E/AndroidRuntime(4762): at android.view.View.layout(View.java:15488)
07-20 17:24:43.245: E/AndroidRuntime(4762): at android.view.ViewGroup.layout(ViewGroup.java:4662)
07-20 17:24:43.245: E/AndroidRuntime(4762): at android.widget.FrameLayout.layoutChildren(FrameLayout.java:453)
07-20 17:24:43.245: E/AndroidRuntime(4762): at android.widget.FrameLayout.onLayout(FrameLayout.java:388)
07-20 17:24:43.245: E/AndroidRuntime(4762): at android.view.View.layout(View.java:15488)
07-20 17:24:43.245: E/AndroidRuntime(4762): at android.view.ViewGroup.layout(ViewGroup.java:4662)
07-20 17:24:43.245: E/AndroidRuntime(4762): at com.android.internal.widget.ActionBarOverlayLayout.onLayout(ActionBarOverlayLayout.java:420)
07-20 17:24:43.245: E/AndroidRuntime(4762): at android.view.View.layout(View.java:15488)
07-20 17:24:43.245: E/AndroidRuntime(4762): at android.view.ViewGroup.layout(ViewGroup.java:4662)
07-20 17:24:43.245: E/AndroidRuntime(4762): at android.widget.FrameLayout.layoutChildren(FrameLayout.java:453)
07-20 17:24:43.245: E/AndroidRuntime(4762): at android.widget.FrameLayout.onLayout(FrameLayout.java:388)
07-20 17:24:43.245: E/AndroidRuntime(4762): at android.view.View.layout(View.java:15488)
07-20 17:24:43.245: E/AndroidRuntime(4762): at android.view.ViewGroup.layout(ViewGroup.java:4662)
07-20 17:24:43.245: E/AndroidRuntime(4762): at android.view.ViewRootImpl.performLayout(ViewRootImpl.java:2397)
07-20 17:24:43.245: E/AndroidRuntime(4762): at android.view.ViewRootImpl.performTraversals(ViewRootImpl.java:2094)
07-20 17:24:43.245: E/AndroidRuntime(4762): at android.view.ViewRootImpl.doTraversal(ViewRootImpl.java:1066)
07-20 17:24:43.245: E/AndroidRuntime(4762): at android.view.ViewRootImpl$TraversalRunnable.run(ViewRootImpl.java:6245)
07-20 17:24:43.245: E/AndroidRuntime(4762): at android.view.Choreographer$CallbackRecord.run(Choreographer.java:767)
07-20 17:24:43.245: E/AndroidRuntime(4762): at android.view.Choreographer.doCallbacks(Choreographer.java:580)
07-20 17:24:43.245: E/AndroidRuntime(4762): at android.view.Choreographer.doFrame(Choreographer.java:550)
07-20 17:24:43.245: E/AndroidRuntime(4762): at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:753)
07-20 17:24:43.245: E/AndroidRuntime(4762): at android.os.Handler.handleCallback(Handler.java:733)
07-20 17:24:43.245: E/AndroidRuntime(4762): at android.os.Handler.dispatchMessage(Handler.java:95)
07-20 17:24:43.245: E/AndroidRuntime(4762): at android.os.Looper.loop(Looper.java:136)
07-20 17:24:43.245: E/AndroidRuntime(4762): at android.app.ActivityThread.main(ActivityThread.java:5117)
07-20 17:24:43.245: E/AndroidRuntime(4762): at java.lang.reflect.Method.invokeNative(Native Method)
07-20 17:24:43.245: E/AndroidRuntime(4762): at java.lang.reflect.Method.invoke(Method.java:515)
07-20 17:24:43.245: E/AndroidRuntime(4762): at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:785)
07-20 17:24:43.245: E/AndroidRuntime(4762): at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:601)
07-20 17:24:43.245: E/AndroidRuntime(4762): at dalvik.system.NativeStart.main(Native Method)
啊,我们注意到,上面的:
07-20 17:24:43.245: E/AndroidRuntime(4762): java.lang.ClassCastException: android.view.ViewGroup$LayoutParams cannot be cast to android.widget.AbsListView$LayoutParams
这句中,cast错误,这个是因为ListView的LayoutParam应该使用AbsListView.LayoutParams,而我们在代码89行中使用的是
LayoutParams params = new LayoutParams(widthAndHeight,widthAndHeight);
so,只要修改为:
AbsListView.LayoutParams params = new AbsListView.LayoutParams( widthAndHeight, widthAndHeight);
即可。
我们继续运行,啊,显示出来了。啊,等等,为什么下拉一下,就崩溃了呢?