【IT168技術】在本教程中，我們將一步步學習如何使用Android中的WebView控制元件去展現圖片，並且進行相關的引數設定，也會學習各種將圖片匯入到WebView的引數，包括從其他web站點載入圖片，以及從移動裝置中和應用的目錄中載入圖片。本文的閱讀物件為有初級Android程式設計經驗的開發者，本文的程式碼可以在如下地址下載：

　　http://tuts-authors.s3.amazonaws.com/mobile.tutsplus.com/Sue%20Smith/2012/07/05/Android_WebView_Image_Display_Source.zip

　　步驟1 建立Android工程

　　首先在eclipse中建立一個Android工程，然後在main Activity類中，或者在想要顯示圖片的Activity中，增加如下的類庫引入：

import android.app.Activity; 
import android.content.Intent; 
import android.database.Cursor; 
import android.net.Uri; 
import android.os.Bundle; 
import android.provider.MediaStore; 
import android.view.View; 
import android.view.View.OnClickListener; 
import android.webkit.WebView; 
import android.widget.Button;

　　當然，這還取決於如何載入圖片的方法，比如要通過網路載入圖片的話，則需要設定相關的網際網路許可權，這在Manifest檔案中進行配置就可以了，如下：

　　步驟2 建立APP介面

　　我們準備在Linear Layout中使用單一個頁面去展示不同的圖片，在主介面的佈局檔案中，新增以下程式碼：

< LinearLayout xmlns:android = " http://schemas.android.com/apk/res/android "
    android:orientation = " vertical "
    android:layout_width = " fill_parent "
    android:layout_height = " fill_parent " >  
</ LinearLayout >

　　在上面的佈局中，首先新增如下的webview控制元件，程式碼如下：

< WebView android:id = " @+id/pic_view "
    android:layout_width = " fill_parent "
    android:layout_height = " 0dp "
    android:layout_weight = " 1 "   >  
</ WebView >

　　接下來，我們會使用三個不同的按鈕，用來顯示三種載入圖片的方式，程式碼如下：

< LinearLayout xmlns:android = " http://schemas.android.com/apk/res/android "
    android:orientation = " horizontal "
    android:layout_width = " wrap_content "
    android:layout_height = " wrap_content "
    android:padding = " 3dp " >  
     < Button
        android:id = " @+id/pick_btn "
        android:layout_width = " wrap_content "
        android:layout_height = " wrap_content "
        android:text = " @string/pick "   />  
     < Button
        android:id = " @+id/load_btn "
        android:layout_width = " wrap_content "
        android:layout_height = " wrap_content "
        android:text = " @string/load "   />  
     < Button
        android:id = " @+id/app_btn "
        android:layout_width = " wrap_content "
        android:layout_height = " wrap_content "
        android:text = " @string/local "   />  
</ LinearLayout >

　　同樣，需要在res/values目錄下，為三個按鈕宣告一下顯示的文字的資源，如下：

< string  name = " pick " > Gallery </ string >  
< string  name = " load " > Web </ string >  
< string  name = " local " > App </ string >

　　步驟三 準備載入圖片的程式碼

　　下面先來學習如何在webview中載入圖片。首先修改PictureViewerActivity類如下，加上webview控制元件的宣告：

public  class PictureViewerActivity extends Activity implements OnClickListener 
{
       private  WebView picView;
     @Override
public  void onCreate(Bundle savedInstanceState) { 
    super.onCreate(savedInstanceState); 
    setContentView(R.layout.main); 
}

　　接下來獲得webview控制元件的引用，如下：

　　picView = (WebView)findViewById(R.id.pic_view);

　　picView.setBackgroundColor(0);

　　這個將設定webview控制元件的背景顏色為白色，然後在oncreate方法後，寫出onclick的框架程式碼：

　　public void onClick(View v) {

　　}

　　我們將在這個onClick方法中，新增分別處理三個按鈕的事件程式碼：

　　步驟4 從相簿中載入圖片

　　下面我們先來學習如何從移動裝置的相簿中載入圖片，首先在類的宣告部分，在oncreate方法前，先新增一個例項變數：

　　private final int IMG_PICK = 1;

　　這個例項變數的作用，是當用戶從移動裝置的相簿中選擇了圖片後，返回給主程式時用的標識。同時在oncreate方法中，新增第一個按鈕pickBtn，為其繫結onclicklistner事件

　　Button pickBtn = (Button)findViewById(R.id.pick_btn);

　　pickBtn.setOnClickListener(this);

　　然後在onclick方法中，新增其事件的響應程式碼如下：

if  (v.getId()  ==  R.id.pick_btn) { 
    Intent pickIntent  =   new  Intent(); 
    pickIntent.setType( " image/* " ); 
    pickIntent.setAction(Intent.ACTION_GET_CONTENT); 
     
    startActivityForResult(Intent.createChooser(pickIntent,  " Select Picture " ), IMG_PICK); 
}

　　這段程式碼將通過新建立一個Intent的方法，呼叫移動裝置上的讀取圖片的應用，這取決於使用者的裝置上安裝了什麼樣的瀏覽圖片的應用，比如下圖是其中一種情況：

　　當用戶選擇了一張圖片後，將會返回原來的應用，這個時候將觸發

　　onActivityResult方法，先新增如下的框架程式碼：

protected void onActivityResult( int  requestCode,  int  resultCode, Intent data) { 
     if  (resultCode  ==  RESULT_OK) { 
  
    } 
}

　　在其中的if判斷分支中，我們新增如下的程式碼，

　　if (requestCode == IMG_PICK) {

　　}

　　在這個分支中，將判斷使用者是否從我們剛建立的intent中選擇圖片後返回的，並且新增相關的程式碼，將返回的圖片的物理路徑返回給webview控制元件進行載入，程式碼如下：

String  imagePath  =   "" ; 
String [] imgData  =  { MediaStore.Images.Media.DATA }; 
Cursor imgCursor  =  managedQuery(pickedUri, imgData,  null ,  null ,  null ); 
if (imgCursor! = null ) { 
     int  index  =  imgCursor.getColumnIndexOrThrow(MediaStore.Images.Media.DATA);
    imgCursor.moveToFirst(); 
    imagePath  =  imgCursor.getString(index); 
} 
else
    imagePath  =  pickedUri.getPath();

　　其中詳細的解析參考：http://tech.it168.com/a2012/0706/1369/000001369061.shtml一文。現在獲得了使用者選擇的圖片的路徑的話，則可以在webview中進行載入，程式碼如下：

　　picView.loadUrl("file:///"+imagePath);

　　執行應用，則使用者可以從移動裝置已有的相簿中載入圖片，並且在webview控制元件中予以顯示，如下圖：

　　步驟5 從web中載入獲得圖片

　　我們在第2個按鈕中的onclick事件中，寫入如下程式碼，則可以很容易的從網際網路中的任意一個地方載入一張圖片，並裝載到webview控制元件中去，程式碼如下：

　　Button loadBtn = (Button)findViewById(R.id.load_btn);

　　loadBtn.setOnClickListener(this);

　　並在onClick事件中新增第二個if分支進行判斷，程式碼如下：

　　else if(v.getId() == R.id.load_btn) {

　　picView.loadUrl("http://developer.android.com/images/brand/google_play_logo_450.png");

　　這裡通過使用webview控制元件的loarUrl方法，可以很容易地獲得網際網路中的一張圖片。執行程式可以看到能正確載入網際網路中的一張圖片，如下圖：

　　步驟6 從app應用的目錄中載入圖片

　　有的時候，可能需要從已經存在的app應用中載入已經有的圖片到webview中去，下面介紹兩個方法，首先假設圖片是放在android_asset目錄下的，則可以依然通過loadUrl方法進行圖片載入，如下：

Button appBtn  =  (Button)findViewById(R.id.app_btn); 
appBtn.setOnClickListener(this);
    然後在onclick方法中增加第3個if 分支，程式碼如下：
       else   if (v.getId()  ==  R.id.app_btn) {
          picView.loadUrl( " file:///android_asset/mypicture.jpg " );
}

　　另外，由於webview控制元件顯示的是html頁面，所以也可以先建立一個html頁面，然後其中巢狀入一張圖片，程式碼如下：

< html >  
< head >  
</ head >  
< body >  
< img src = " file:///android_asset/mypicture.jpg " />  
</ body >  
</ html >

　　然後再通過webview控制元件載入html頁面，如下：

< html >  
< head >  
</ head >  
< body >  
< img src = " file:///android_asset/mypicture.jpg " />  
</ body >  
</ html >
   picView.loadUrl( " file:///android_asset/imagepage.html " );

　　步驟7 設定webview中圖片載入時的屬性

　　我們還可以設定webview控制元件中的圖片載入時的屬性，以加強互動，比如可以在在oncreate事件中，新增如下程式碼：

picView.getSettings().setBuiltInZoomControls( true ); 
picView.getSettings().setUseWideViewPort( true );

　　這將可以設定使用者能在webview控制元件中能使用圖片放大器對圖片進行放大縮小和水平左右移動的操作，如下圖：

　　小結

　　本文總結了在Android的webview控制元件中載入圖片的三種方法，分別是通過圖片選擇器選擇，載入網際網路中的圖片以及載入裝置中的資源圖片檔案。