Android學習筆記19：ImageView實現圖片適屏與裁剪

　　在Android中，要將一張圖片顯示在螢幕上，需要建立一個顯示圖片的對象，該對象就是ImageView。

1.ImageView常用屬性

　　要對圖片進行適屏裁剪操作，首先需要瞭解ImageView的常用屬性。

　　ImageView的常用屬性1所示。

圖1 ImageView的常用屬性

　　其中，android:adjustViewBounds[boolean]屬性的作用是設定為true時，可以調整圖片的邊界。android:src(int)屬性用於載入圖片資源。android:scaleType(ImageView.ScaleType)屬性的作用是設定圖片以何種方式（類型）匹配ImageView控制項，其可選設定項有matrix、fitXY、fitStart、fitCenter、fitEnd、center、centerCrop、centerInside，這些設定值的不同之處2所示。

圖2 ScaleType屬性值

 

2.ImageView的適屏與裁剪

　　適屏是指將圖片以合適的大小顯示在手機的螢幕上。如果圖片的大小不符合手機螢幕的顯示要求，那麼就需要對圖片進行適當的裁剪，以滿足顯示需求。

　　在對圖片進行適屏顯示和裁剪之間，我們首先需要做的是從手機的圖庫中擷取圖片資源。

2.1擷取手機的圖片庫

　　在Android中，如何來擷取手機裡的圖片資源呢？其實很簡單，只需要通過如下方法就可以很方便的開啟手機的圖片庫了。

Intent intent = new Intent(Intent.ACTION_PICK, android.provider.MediaStore.Images.Media.EXTERNAL_CONTENT_URI);

　　我們知道在Android中，Intent負責對應用中一次操作的動作、動作涉及資料及附加資料進行描述，Android則根據此Intent的描述，負責找到對應的組件，將 Intent傳遞給調用的組件，並完成組件的調用。

　　所以此處通過intent.ACTION_PICK（拾取）來完成對手機中的圖片庫的調用。

　　開啟手機的圖片庫後，我們便可以從圖片庫中選擇所需圖片，進行圖片適屏顯示或裁剪了。

2.2適屏的實現

　　很顯然，要將圖片以合適的尺寸顯示在手機螢幕上，我們首先需要知道手機螢幕的大小。我們可以通過以下兩個函數方法來獲得手機螢幕的長和寬。

int dw = getWindowManager().getDefaultDisplay().getWidth();//獲得手機螢幕的寬度

int dh = getWindowManager().getDefaultDisplay().getHeight();//獲得手機螢幕的高度

　　獲得手機螢幕的長寬值之後，我們便可以以此來對圖片的寬度和高度進行適屏匹配了，具體方法如下：

View Code

 1         //對圖片的寬度和高度進行匹配 2         //如果大於1表示圖片的高度大於手機螢幕的高度 3         int hRatio = (int)Math.ceil(factory.outHeight / (float)dh); 4                      5         //如果大於1表示圖片的寬度大於手機螢幕的寬度 6         int wRatio = (int)Math.ceil(factory.outWidth / (float)dw);                 7                      8         if (hRatio > 1 || wRatio > 1) {                                  //需要進行適屏操作 9             if (hRatio > wRatio) {                                             //圖片高度大於寬度10                     factory.inSampleSize = hRatio;                    //以高度為準11             } else {                                                                            //圖片高度小於寬度12                     factory.inSampleSize = wRatio;                   //以寬度為準13                 }14         }      

2.3裁剪的實現

　　如果圖片的尺寸不符合我們需求，就需要對圖片進行裁剪操作。在裁剪之前，我們需要設定圖片的裁剪規格，具體做法如下：

View Code

 1     //設定裁剪圖片的規格 2     public Intent getImageClipIntent() { 3         Intent intent = new Intent(Intent.ACTION_GET_CONTENT, null); 4         //實現對圖片的裁剪，必須設定圖片的屬性 5         intent.setType("image/*");                    //擷取任意類型的圖片 6         intent.putExtra("crop", "true");           //滑動選中圖片地區 7         intent.putExtra("aspectX", 1);               //表示剪下框的比例為1:1 8         intent.putExtra("aspectY", 1);  9         intent.putExtra("outputX", 80);           //指定輸出圖片的大小10         intent.putExtra("outputY", 80);11         intent.putExtra("return-data", true);12         return intent;13     }

　　首先，我們通過intent.ACTION_GET_CONTENT（擷取內容）來取出圖片內容。然後通過intent.setType("image/*")函數方法設定擷取圖片的類型為任意類型的圖片。通過intent.putExtra("crop", "true")函數方法指以滑動形式來選中圖片地區。通過intent.putExtra("aspectX", 1)和intent.putExtra("aspectY", 1)函數方法設定了剪下框的比例為1:1。最後通過intent.putExtra("outputX", 80)和intent.putExtra("outputY", 80)函數方法指定了裁剪後的輸出圖片大小為80*80。 ;

2.4模擬器中載入圖片

　　為了驗證實驗效果如何，我們需要在虛擬器上進行簡單驗證。如果我們的虛擬器中沒有圖片，我們可以通過豌豆莢或91助手將圖片匯入到我們的虛擬器的圖片庫中。

　　如何將圖片匯入到模擬器中，這裡就不細述了。不過，有一點需要注意，豌豆莢好像不支援2.2的SDK（不知道是不是真的，觀點來自於博文http://blog.it.sohu.com/appreview/2010/06/24/51/），反正我折騰了好久都沒成功，最後只好使用91助手輕鬆搞定。

2.5執行個體效果

　　在本執行個體中，首先在MainActivity中完成了首頁面的布局顯示。在首頁面中，設定了兩個按鈕（分別用來選擇圖片適屏顯示和裁剪圖片）控制項和一個圖片視圖控制項（用來顯示從圖片庫中選擇的經過適屏處理後的圖片），3所示。

圖3 首頁面

　　因為還沒有選擇要顯示的圖片，所以圖片視圖控制項暫時為空白，沒有任何內容。此時，點擊“選擇圖片”，將跳轉到手機的圖片庫介面，4所示，這裡我向模擬器的圖片庫中匯入了兩張不同格式大小的圖片：fuwa.png（400*178）和android_logo.jpg（600*450）。

圖4 選擇圖片介面

　　此時，如果我們點擊選擇圖片android_logo.jpg，進行顯示的話，很顯然，該圖片的尺寸已經超出了手機螢幕的尺寸（我的模擬器螢幕尺寸為480*800），需要進行適屏操作後再在首頁面上進行顯示，5所示。

圖5 適屏顯示效果

　　可以看到，對圖片進行適屏操作後的顯示效果5所示。

　　當我們在首頁面上選擇“裁剪圖片”時，同樣會跳轉到4所示的選擇圖片介面，供使用者選擇對哪一張圖片進行裁剪，此時選擇fuwa.png，對福娃圖片進行裁剪，則出現6所示的裁剪圖片頁面。

圖6 裁剪圖片

　　拖動裁剪選擇框，可以調整裁剪的地區以及裁剪大小。最後，點擊“儲存”按鈕，就可以將裁剪的圖片按照我們之前指定好的裁剪格式（圖片大小80*80）輸出了，7所示。

圖7 輸出裁剪圖片

 

 

相關參考資料：

《老羅Android開發視頻教程》之Android常用UI控制項編程第十五集 

http://www.verycd.com/topics/2929580/

Android中Imageview的ScaleType屬性 

http://www.cnblogs.com/carmanloneliness/archive/2012/08/06/2625489.html

ImageView.ScaleType設定圖解

http://blog.csdn.net/strliu/article/details/7284848

Android中Intent詳細講解

http://bbs.hiapk.com/thread-7959-1-1.html