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所示。

主頁面

  因為還沒有選擇要顯示的圖片,所以圖片視圖控件暫時為空,沒有任何內容。此時,點擊“選擇圖片”,將跳轉到手機的圖片庫界面,如圖4所示,這里我向模擬器的圖片庫中導入了兩張不同格式大小的圖片:fuwa.png(400*178)和android_logo.jpg(600*450)。

選擇圖片界面

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

適屏顯示效果

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

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

裁剪圖片

  拖動裁剪選擇框,可以調整裁剪的區域以及裁剪大小。最后,點擊“保存”按鈕,就可以將裁剪的圖片按照我們之前指定好的裁剪格式(圖片大小80*80)輸出了,如圖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

 


免責聲明!

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



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM