Android 顯示內存 image 圖片範例-01 @ xx3d2ybnf-不圖3日但2年精進勇者不懼的部落格

Android 顯示內存 image 圖片範例-01

1 問題

設計一個 Android 程式，在專案的 res目錄中建立一個 drawable 子目錄，並存入一個使用者自訂的圖片，然後在 Android 程式中建立一個按鈕元件，當按下按鈕後，就在畫面上顯示使用者所自行選擇存入的圖片。

圖1. 按下「顯示內存的圖片」按鈕後就顯示圖片。

2 畫面設計

由於不同版本的 Android SDK 所提供的資源與工具有所不同，所以在開發與邁立專案時，所可以使用的視窗編輯元件與畫面可能就不太一樣。因此讀者自行用自己的 Eclipse 中建立一個新的 Android 專案時，可能會與本文的畫面不太相同，但是設計專案的流程與概念卻是大同小異的，因此讀者應該要能夠自行進行不同 Android SDK 版本專案開發畫面的瞭解與映對。

請讀者依照「Android 日期與文字互轉範例」一文的 Android 應用程式基本設計的範例說明，來建立本問題所須的視窗元件。以下就不一一的顯示建立一個 Android 應用程式專案的詳細過程，只列出建立專案過程中的幾個關鍵重點，請讀者自行補足在建立本問題的 Android 應用程式專案時的其他設定。

本問題的專案名稱為：Image01
Activity 視窗名稱為：ProcessImage。因此系統會預設的 activtiy layout xml 檔名為：activity_process_image.xml。預設的 Java 程式檔名為：ProcessImage.java。Java程式中預設的視窗物件名稱為 ProcessImage。(亦即為指令：public class ProcessImage extends Activity {...})
Activity 視窗所設定的目標 Android SDK 版本為：2.3.3

請先依照上述的規定，建立出如下圖2 的畫面，請記得每建立一個視窗元件後，就必須先點按進入 activity_process_image.xml 視窗元件配置原始檔案中，更改所新增的視窗元件ID識別名稱，如此在未來才不會不容易閱讀與進行相關的修正。此時並尚未建立可顯示圖片的視窗元件，接下來就是要說明如何建立一個可以顯示圖片的視窗元件。

圖2.想要建立一個能顯示圖片的物件，要點選「Images & Media」頁簽，並點按拖曳「ImageView」元件到手機螢幕設計區。

圖3.使用者可以在此處決定所建立的 ImageView 元件預設要顯示的圖片來源是那裏。

此時預設要顯示的圖片來源是「Porject Resources」，也就是在建立一個視窗類別物件時，所指定的 Icon Set 圖示集合，也就是在 Eclipse 專案設計畫面中 res子目錄中所包括的以 drawable 開頭的子目錄中的圖片。使用者然可以依照此視窗的內容因作選擇圖片的來源，而且每一子目錄中的圖片名稱皆為 ic_launcher，只是不同子目錄中的 ic_launcher.png 的圖片大小不同，系統會自動顯示第一個搜尋到的 ic_launcher.png 圖片。此例，可以只顯擇「Porject Resources」即可。當然，其實本題想要顯示的並不是系統所內建或內存的 Icon 圖示圖片，而是使用者自行選擇所存入的圖片，但是目前筆者所使用的 Android SDK 版本，在每次以 GUI 的方式建立一個新的 ImangeView 元件時，就一定會出現上圖的畫面，所以可以先以預設圖片資料源來設定，接下來就去 layout xml 配置原始檔中，去加以刪除即可。

圖4. 點選「Porject Resources」中的 ic_launcher.png 作為預設顯示的圖片。

圖5.點選「Porject Resources」中的 ic_launcher.png 作為預設顯示的圖片的 activity_process_image.xml 之 layout 檔案內容。

圖6. activity_process_image.xml 之 layout 檔案內容修改後的結果。

主要是將所建立的 ImageView物件的ID識別名稱由原來的「imageVeiw1」改名為「im_out_image」。同時將「android:src="@drawable/ic_launcher" />」更改成只剩下「 />」，亦即不要對此一 ImageView 元件預設顯示任何的圖片。這是因為本問題所要求的操作過程，是一開始執行程式時，不要顯示任何的圖片，一但點按按鈕後，才顯示使用者自行存入的圖片。

圖7. ImageView 元件建立後預設不顯示任何的圖片設計結果

圖8. Android 應用程式專案預設圖片會存放在以 drawable-xxxx 開頭的目錄中。

圖9. 假設使用者要存入的圖片 xx3d2ybnf.jpg 檔案

圖10. 從系統檔案總管來查看本專案的 res 目錄中，所有以 drawable-xxxx 開頭的主目錄。

但假設自用者想存入的圖片想儲存在不同的子目錄，目錄名稱為 drawable (仍舊是以 drawable 開頭的目錄名稱為宜)。因此使用都就必須利用檔案總管來建立 drawable 的子目錄，並存入 xx3d2ybnf.jpg 此一圖片檔。

要記得圖片的檔名只能是小寫的英文字 (a-z)，以及數字 (0-9)，底線與句點，否則在編輯程式時，在 eclipse 畫面的訊息視窗就會出現類似「res/drawable/Aquarius.jpg: Invalid file name: must contain only [a-z0-9_.]」，因此當出現此類錯誤訊息時，就去更改檔名以符合檔名命名規則即可。

圖11. 在檔案總管中，已建立好的 drawable 的子目錄，並已存入 xx3d2ybnf.jpg

圖12. 在 Eclipse 中，顯示已建立好的 drawable 的子目錄，並已存入 xx3d2ybnf.jpg

接著請先檢查完整的畫面 layout 之 activity_process_image.xml 的內容：

3 完整的 strings.xml 的內容

接著再檢查與輸入如下完整的 strings.xml 的內容

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string name="app_name">Image01</string>
    <string name="action_settings">Settings</string>
    <string name="hello_world">Android Image 處理範例01</string>

</resources>

4 Java 程式設計

接著進行程式設計，ProcessImage.java 程式的完整內容如下：

package com.example.image01;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;

public class ProcessImage extends Activity {
   Button btn_show_image;
   ImageView iv_out_image;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_process_image);
        doWorks();
    }
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.process_image, menu);
        return true;
    }

    public void doWorks(){
       btn_show_image = (Button) findViewById(R.id.btn_show_image);
       iv_out_image = (ImageView) findViewById(R.id.iv_out_image);

       btn_show_image.setOnClickListener(new View.OnClickListener() {

           @Override
           public void onClick(View v) {
               // TODO Auto-generated method stub
               int id = getResources().getIdentifier("com.example.image01:drawable/" + "xx3d2ybnf", null, null);
               iv_out_image.setImageResource(id);
           }
       });
    }
}

同樣的，一個Android java 程式設計的架構與區塊是相同的，而具有事件驅動，例如，Click 事件，的監空、設定與回應的架構也是相同的。使用者可以參考「Android 日期與文字互轉範例」一文中有關 Java 程式設計章節中的範例說明。

在程式設計的過程中，有關設定 ImageView 元件要顯示使用者存入 drawable 子目錄中 xx3d2ybnf.jpg 圖片的指令為：「int id = getResources().getIdentifier("com.example.image01:drawable/" + "xx3d2ybnf", null, null);」，其中「com.example.image01」是本 Android 應用程式的 URL 式的名稱 (package name)，此一 package name 就是每一個 Android 應用程式 java 檔中以 package 為開頭的那一行。

由於每一個 Android 應用程式的 package name 皆不相同，所以程式開發人員必須要將 getIdentifier ()中的 package name 字串，更改成自己應用程式的 package name。例如，若自己的 package name 為 tw.constellation，則指令就要變成「int id = getResources().getIdentifier("tw.constellation:drawable/" + "xx3d2ybnf", null, null);」

而「drawable」是圖片所存入的子目錄名稱。使用者所存入的圖片檔名可以只寫「xx3d2ybnf」不用加上附檔名「jpg」，系統會自行搜尋以「xx3d2ybnf」開頭的圖片檔案。