(三)執行OpenCV讀圖功能

操作影片：

 

影片連結

一、實際操作

※在開始本教學之前請先下載最新的ADT套件!

※下載ADT套件請參考第一章「(一)安裝與設定Android開發環境」

1.下載OpenCV - 2.4.0

2.下載後會有一個OpenCV-2.4.0-android-bin.tar.bz2的檔案，解壓縮後生成OpenCV-2.4.0-android-bin，再解壓縮一次，生成三個OpenCV的資料夾

3.開啟Eclipse，現在要創建一個新的專案，功能表File -> New -> Android Application Project

4.專案名稱設定為”App_OpenCV”，其他照著圖片上設定，之後一路按Next直到Finish

5.匯入OpenCV Library，功能表File -> Import，選擇Android裡的Existing Android Code Into Workspace

Browse -> 選擇一開始下載的OpenCV-2.4.0-android-bin資料夾中的OpenCV-2.4.0，最後按Finish

6.專案連結Library，對著App_OpenCV專案按右鍵 -> Properties，左邊選單選Android -> 右下按Add

選擇OpenCV-2.4.0 -> 按OK -> 完成後按OK

7.環境設定完後，就可以開始拉程式的介面了，若找不到拉介面的版面，在左邊Package Explorer處找到res/layout/fragment_main.xml，打開後在下方處點選Graphical Layout就是圖形化版型設計介面，而fragment_main.xml則是使用描述檔來編輯介面

註：最新版的ADT套件才會產生fragment_main.xml，舊的則為activity_main.xml，故使用本教學請下載最新的ADT套件

左鍵點擊兩下畫面中的”Hello World”就會進入xml描述檔編輯，

<TextView

android:id="@+id/textView1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="HelloWorld" />

將這段程式碼中”HelloWorld”的地方改成”Original”

回到視覺化界面可以看到原本的”HelloWorld”已經改成Original了

在視覺化界面的左方Palette的地方打開Image & MediaForm，從裡面拉一個ImageView到面板上，跳出對話框按OK

畫面出現ImageView物件後，左鍵連點兩下進入xml描述檔

在xml裡面將ImageView的區塊改寫成：

<ImageView

android:id="@+id/imageView1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_below="@+id/textView1"

android:layout_centerHorizontal="true"

android:layout_marginTop="17dp"

android:height="50px"

android:maxHeight="100dp"

android:maxWidth="100dp" />

8.將要讀取的圖片放到專案存放處：Workspace/App_OpenCV/res/drawable-hdpi裡面，注意圖片須轉成bmp檔(只要用小畫家另存圖片為bmp檔即可輕鬆轉檔)，並記住圖片名稱，範例中圖片名稱為”cat”

9.開啟MainActivity.java，位置在src/com.example.app_opencv裡

 

將MainActivity.java裡面的內容改寫為：

 

package com.example.app_opencv; import android.support.v7.app.ActionBarActivity;

import android.support.v7.app.ActionBar;

import android.support.v4.app.Fragment;

import android.os.Bundle;

import android.view.LayoutInflater;

import android.view.Menu;

import android.view.MenuItem;

import android.view.View;

import android.view.ViewGroup;

import android.os.Build; import java.io.FileOutputStream;

import java.io.IOException;

import java.io.InputStream;

import org.opencv.android.Utils;

import org.opencv.core.Core;

import org.opencv.core.Mat;

import org.opencv.core.Size;

import org.opencv.highgui.Highgui;

import org.opencv.imgproc.Imgproc;

import com.example.app_opencv.*;

import android.app.Activity;

import android.graphics.Bitmap;

import android.graphics.BitmapFactory;

import android.os.Bundle;

import android.widget.ImageView;

public class MainActivity extends Activity

{

/** Called when the activity is first created. */

@Override

public void onCreate(Bundle savedInstanceState)

{

super.onCreate(savedInstanceState);

setContentView(R.layout.fragment_main);

InputStream is = this.getResources().openRawResource(R.drawable.cat);

Bitmap footbm = BitmapFactory.decodeStream(is);

ImageView iv = (ImageView) findViewById(R.id.imageView1);

iv.setImageBitmap(footbm);

}

}

 

註1：程式碼中fragment_main的地方依照xml檔名不同部分使用者可能須該為activity_main

註2：程式碼中紅色的”cat”即為第七步驟的圖片名稱，使用者須自行修改成自己放的圖片名稱

 

10.改完程式碼就可以執行程式看看囉!前面教過怎麼run模擬器了，現在就打開AVD測試看看OpenCV讀圖的功力吧!(在啟動AVD模擬器之前請先ctrl+s儲存專案)

執行結果：

 

 

二、課程研讀：

 

1.介面設計

 

1-1.圖形化版型介面設計介面(Graphical Layout Editor)

透過圖形化版型設計界面，開發者可以很容易地透過拖、拉、放的動作來做一些簡單的版面設計工作。要使用任一元件時，只需將滑鼠移到對應的圖示上後按住滑鼠左鍵拖曳到右側模擬畫面上即可。

1-2.原始XML描述檔

XML(Extensible Markup Language)是一種標記描述語言，相當類似網頁所使用的HTML標記語言。XML被廣泛地運用在Java程式的設定中，副檔名為「.xml」結尾的檔案通常就是包含XML語言描述的檔案。

原始XML描述檔可以用文字敘述的方式來設定介面，在圖形版型介面設計介面中做出的修改，都會直接影響到XML描述檔中的內容，相對地，在XML描述檔中修改的內容也會直接影響圖形化版型介面設計介面的預覽畫面。

雖然利用圖形化版型介面設計介面拉介面很方便，但要完成較細部、精緻的介面設定還是需要直接修改XML描述檔。

Android提供非常多豐富且多樣的介面元件，照著圖形化版型設計介面上的分類來檢查，共有以下幾種分類：

◎ 表單類介面元件〈Form Widgets〉

◎ 輸入格式類介面元件 〈Text Fields〉

◎ 版面配置類介面元件〈Layouts〉

◎ 組合類介面元件 〈Composite〉

◎ 圖像影音類介面元件 〈Image & Media〉

◎ 日期時間類介面元件 〈Time & Data〉

◎ 切換效果類介面元件 〈Transitions〉

◎ 進階類介面元件 〈Advanced〉

在開發Android應用程式時，我們可以使用Java程式碼或是XML描述檔兩種方式來定義介面元件的樣式與排列方式。透過XML描述檔來定義介面元件時，就可以在圖形化版型設計介面上直接看到結果。而使用Java程式碼產生介面元件時，則需在模擬器或實機上實際執行時，才能看到效果。

因此在一般情況下，最好的實作方式就是使用XML描述檔來定義使用者介面，在程式碼中，只對介面元件做必要的操作〈例如在點選按鈕後，將負責顯示結果的文字介面設置成可顯示的操作〉。使用這種方式定義使用者介面，能提供更好的開發彈性，並且也更容易透過修改XML檔，來支援多種不同螢幕大小的機型。

即使Android提供了這麼多種現成的介面可使用，但不一定能滿足所有人的需要。開發中一旦有需要時，也可以透過自訂介面元件的方式，在程式中應用自己撰寫的介面元件，或使用其他人所提供的現成自訂介面元件。

 

2.資源(Resource)目錄

 

2-1.版面配置(layout)目錄

「layout」目錄包含所有使用XML格式的介面描述檔。「layout」中的XML介面描述檔就像寫網頁時用到的HTML檔案一樣，可用來描述螢幕上的版面編排與使用者的介面元件。XML介面描述檔描述的內容可以是整張螢幕，也可以只描述一部分的介面〈例如描述用來產生對話框的介面元件〉。

2-2.圖片目錄(drawable)

「drawable」目錄包含所有圖片、圖示相關的資源。我們可以在此替換應用程式的圖示等資源。Android 2.0之後還可以進一步在「drawable」目錄後加上後綴，如「drawable-hdpi」、「drawable-mdpi」、「drawable-ldpi」分別放置用來於不同點距(dpi,dots per inch)下顯示的圖示。

 

3.程式註解

在程式碼中加入註解的方法為，在所下的註解前面加上雙斜線「//」，即可輕鬆產生單行註解。若要註解多行文字時，只需將文字放在「/*」與「*/」的中間即可。

我們現在就來為剛剛所寫的程式加上註解看看吧!

public void onCreate(Bundle savedInstanceState)

{

/* 讀圖程式碼

    Image Display */

super.onCreate(savedInstanceState);

setContentView(R.layout.fragment_main);//需設定到fragment_main.xml 才能正確顯示layout

// 讀取圖片檔案為bitmap

InputStream is = this.getResources().openRawResource(R.drawable.cat); //圖片名稱

Bitmap footbm = BitmapFactory.decodeStream(is);

//將bmp顯示在imageview上

ImageView iv = (ImageView) findViewById(R.id.imageView1);

iv.setImageBitmap(footbm);

}

寫程式加上註解是一個很重要的習慣，註解有助於程式的閱讀與除錯，而註解僅提供程式設計師閱讀，編輯器並不會對他做編譯，所以註解完全不會影響程式的運作。