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

1 問題

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

  14-sim-phone-xx3d2ybnf.jpg  

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

 

2 畫面設計

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

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

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

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

01-imageview-start.jpg

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

 

02-imageview-choose-res.jpg

圖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 配置原始檔中,去加以刪除即可。

 

03-imageview-added.jpg

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

 

04-imageview-added-xml.jpg

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

05-imageview-added-xml-modified.jpg

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

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

 

06-imageview-added-gui-modified.jpg

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

 

08-imageView-res-gui-lc_launcher.jpg

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

 

 

09-xx3d2ybnf.jpg

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

 

10-file-res-default.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-file-res-xx3d2ybnf.jpg

 

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

 

12-eclipse-res-xx3d2ybnf.jpg

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

 

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

<RelativeLayout 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"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".ProcessImage" >

    <TextView
        android:id="@+id/tv_lb_hello"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world" />

    <Button
        android:id="@+id/btn_show_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignRight="@+id/tv_lb_hello"
        android:layout_below="@+id/tv_lb_hello"
        android:layout_marginTop="18dp"
        android:text="顯示內存的圖片" />

    <TextView
        android:id="@+id/tv_lb_out_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/tv_lb_hello"
        android:layout_below="@+id/btn_show_image"
        android:layout_marginTop="28dp"
        android:text="內存的圖片:" />

    <ImageView
        android:id="@+id/iv_out_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/tv_lb_out_image"
        android:layout_marginLeft="16dp"
        android:layout_toRightOf="@+id/tv_lb_out_image"
        />

</RelativeLayout>

 

 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開頭的圖片檔案。

13-imageView-java-xx3d2ybnf.jpg  

圖13. Java 程式檔中,設定 ImageView 元件要顯示使用者自訂存入的圖片。

 

07-imageView-res-java-lc_launcher.jpg

圖13. Java 程式檔中,設定 ImageView 元件要顯示系統預設的 Icon set 圖片。

上圖所顯示的情況是,使用者也可以選擇用來顯示系統所預設的 Icon set 圖片

 

文章標籤
創作者介紹

xx3d2ybnf-不圖3日但2年精進勇者不懼的部落格

xx3d2ybnf 發表在 痞客邦 留言(0) 人氣()