Android圖片瀏覽器之縮略圖

 

　　項目源碼：http://files.cnblogs.com/files/tgyf/app.rar。

　　最近在自學Android，嘗試實現一般手機上都存在的圖片瀏覽器，從縮略圖開始。

       

　　直接上圖，這是google手機自帶Photos圖片瀏覽器。

  

　　通過查閱資料了解到，在實現縮略圖之前需要做的工作有：

　　　　1、查找手機中所有圖片，包括截圖、拍照、通過USB從電腦中黏貼過來等方式存儲在若干個文件夾的，

　　　　　  將圖片完整路徑存儲在字符串數組中；

　　　　2、對於某一幅圖片，不管是縮略也好，全屏顯示也好，需要在一種組件進行顯示（只是圖片的大小不一樣）；

　　　　3、尋找一種組件，可以利用來存放各個縮略圖，完成網格般的效果；

 

　　對於第一點，說白了就是文件搜索與選擇功能，在電腦和手機中都適用。

　　因為這里只用到圖片文件，那只需要將常規的幾種圖像格式過濾出來即可（jpg,jpeg,tif,tiff,png,gif,bmp）。

　　關鍵代碼如下：

ArrayList<String> fullPathImg = new ArrayList<String>();

String pathRoot = Environment.getExternalStorageDirectory().getPath()+"/";
File root = new File(pathRoot);
getAllFiles(root);

private void getAllFiles(File root){
        File files[] = root.listFiles();
        if(files != null){
            for (File f : files){
                if(f.isDirectory()){
                    getAllFiles(f);
                }else{
                    String strf = f.toString();
                    String str = strf.substring(strf.length() - 4, strf.length());
                    if(str.equals(".bmp")||str.equals(".jpg")||str.equals(".jpeg")||str.equals(".png")||str.equals(".gif")||str.equals(".tif")||str.equals(".tiff")){
                        boolean bool = fullPathImg.add(strf);
                    }
                }
            }
        }
    }

　　上面三段代碼的作用分別為：定義一個String類型的ArrayList變量fullPathImg，用來存儲圖片路徑；獲取手機SD卡路徑；搜索圖片文件實現函數，是一個遞歸過程。

 

　　對於第二點，在Android中可以顯示圖片的組件太多了，如ImageView、ImageButton，連Button、Toast等有時候都可以來湊下熱鬧。

　　這里采用ImageView，給其賦於圖片也有很多種方式：

　　　　1、setImageBitmap(BitmapFactory.decodeFile(imagePath));  imagePath為String類型，指圖片完整名稱；

　　　　2、setImageResource(R.mipmap.ic_launcher);  通過資源來賦值，需要事先導入工程中，或者調用Android自帶資源；

　　　　3、setImageDrawable(getResources().getDrawable(R.mipmap.ic_launcher));  和第二種很相近，通過Drawable來賦值，只是多了若干步驟；

　　由於本應用是要通過文件名來讀取圖片資源，故采用的是第一種。

 

　　要完成第三點，由於是初學，采用的是較好實現的GridView組件。但是需要實現一個繼承自BaseAdapter的類ImageAdapter，代碼如下：

public class ImageAdapter extends BaseAdapter {

        private Context context;

        int countImg;

        public ImageAdapter(Context context){
            this.context = context;
            this.countImg = fullPathImg.size();
        }

        @Override
        public int getCount(){
            return countImg;
        }

        public Object getItem(int position){
            return position;
        }

        public long getItemId(int position)
        {
            return position;
        }

        @Override
        public View getView(int position, View convertView, ViewGroup parent)
        {
            windowWidth = getWindowManager().getDefaultDisplay().getWidth();
            int pad = 4;
            if(convertView == null){
                imageView = new ImageView(context);
            }
            else{
                imageView = (ImageView)convertView;
            }
            imageView.setLayoutParams(new GridView.LayoutParams((windowWidth - pad * 12) / 4, (windowWidth - pad * 12) / 4));
            imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
            imageView.setImageBitmap(BitmapFactory.decodeFile(fullPathImg.get(position)));
            return imageView;
        }
    }

　　ImageAdapter類主要實現五個方法，分別為構造、獲取總數、獲取元素位置、獲取元素ID、獲取視圖，最為關鍵的是最后一個getView()。

　　需要注意兩點：

　　　　1、不用手動一個個去將所有圖片資源和組件GridView關聯起來，通過下面的語句制定路徑變量和位置信息即可，

　　　　imageView.setImageBitmap(BitmapFactory.decodeFile(fullPathImg.get(position)));   imageView為ImageView類的變量；

　　　　2、對imageView的大小進行設置時，以手機屏幕的分辨率作為參考，獲取方式如下，

　　　　int windowWidth = getWindowManager().getDefaultDisplay().getWidth();   獲取寬度，高度類似；

　　ImageAdapter實現了，下面給出GridView定義的activity_main.xml文件內容：

<LinearLayout 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" >

    <GridView
        android:id="@+id/gridView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:listSelector="@android:color/transparent"
        android:cacheColorHint="@android:color/transparent"
        android:horizontalSpacing="4dp"
        android:verticalSpacing="4dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginBottom="8dp"
        android:stretchMode="columnWidth"
        android:gravity="center"
        android:fadeScrollbars="true"
        android:fastScrollEnabled="true"
        android:numColumns="4" >
    </GridView>

</LinearLayout>

　　對其進行設置的屬性包括大小、透明度、自身與父類及內容之間的空隙、縮略圖列數、居中、滑動條，挺簡單就不一一解釋了。

 

　　另外，要想從手機SD卡中讀寫文件，需要在AndroidManifest.xml中加入相應的權限：

<uses-permission android:name="android.permission.MOUNT_UNMOUNT_FILESYSTEMS" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

　　一切准備好后，在主程序文件MainActivity中進行加載即可，下面給出關鍵代碼：

setContentView(R.layout.activity_main);
gridView = (GridView)findViewById(R.id.gridView);
adapter = new ImageAdapter(this);
gridView.setAdapter(adapter);

　　運行后的效果還不錯，工程名為ImageScan。

      

　　當然，對於一款真正的圖片瀏覽器來說，這只是其中最基礎的功能，即第一步，需要實現還有很多，

　　如單擊某一幅圖片立刻放大顯示，隨后可以左右或上下滑動；對放大瀏覽的圖片可以任意縮放、編輯等。

　　有興趣的朋友可以一起學習交流，有錯誤或不足的還望大神們指點一二。