一步一步打造自己的Android圖片瀏覽器（原創）

本文轉載自查看原文 2016-07-20 17:29 10204 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);

　　即可。

　　我們繼續運行，啊，顯示出來了。啊，等等，為什么下拉一下，就崩潰了呢？

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Android -- 從源碼的角度一步步打造自己的TextView 一步一步把vim打造成IDE 一步一步教你打造接口測試平台(1) 一步一步教你打造接口測試平台(2) 一步一步MVP 一步一步生成圖片水印 html和JavaScript，用戶點擊瀏覽器后退按鈕，或者返回上一步自動刷新方式 layui下瀏覽器退格鍵返回上一步問題一步一步生成滑動驗證碼圖片 Android 一步一步教你使用ViewDragHelper