影像顯示.

Presentation on theme: "影像顯示."— Presentation transcript:

1 影像顯示

2 一、ImageView ImageView是最基本的影像顯示元件，它支援常見影像格式的顯示，例如.gif、.jpg、.pnp、.bmp等，在Android SDK 4.0以上版本還支援新的webp影像格式。 要使用ImageView，可以在佈局中以<ImageView>標籤宣告，並以「android:src=”drawable/影像檔」屬性設定要顯示的影像來源(在程式中以「setImageResource(int)」方法指定)。

3 要控制ImageView與顯示影像之間的關係，則可以透過屬性「android:scaleType」的設定(在程式中以「setScaleType(ImageView.ScaleType)」方法設定) 。
「android:tint」屬性(或「setColorFilter(int)」方法)是以指定的顏色塗滿ImageView；「setAlpha(int)」方法則可以在顯示的影像上增加透明效果。 ImageView Test範例

4 活動佈局中安排了一個ImageView元件與一個按鈕元件，只要按下按鈕就會循環的一張張顯示指定的影像。
ImageView影像是透過R類別提供的影像資源取得影像。 活動類別的定義(Java程式碼)，主要的工作就是隨使用者敲按鈕而更換顯示的影像。 範例詳細內容請參考原書。

5 二、ImageSwitcher ImageSwitcher主要用於提供影像更換的功能，其實它的內部是用一個ImageView元件來顯示影像。
要使用ImageSwitcher，可以在佈局中以<ImageSwitcher>標籤宣告；此元件在使用它的類別定義中(Java程式碼)，必須實作「ViewFactory」介面與此介面的「makeView()」方法。

6 makeView()方法的目的是為ImageSwitcher元件打造一個ImageView物件，用以顯示影像。
ImageSwitcher Test範例 佈局中安排了一個ImageSwitcher與Button元件，目的是按下Button後會更換ImageSwitcher顯示的影像，且影像更換時會顯示淡出與淡入的動畫效果。 範例詳細內容請參考原書。

7 三、 Gallery Gallery元件主要是提供影像縮圖瀏覽功能，它將影像縮圖顯示為一水平列，可以利用水平捲動此列瀏覽影像，被選的影像會移到這列顯示範圍的中間。 因為它要顯示一系列影像，需要透過Adapter提供所要顯示的內容(其實對Gallery而言，這清單是由一系列ImageView元件組成)，因此我們需要實作一個BaseAdapter的延伸類別，並提供給Gallery使用。

8 Gallery主要處理的是「onItemSelected」事件，這在有影像縮圖移到顯示範圍的中間(即被選)時觸發。因此必需實作OnItemSelectedListener介面與onItemSelected方法，並登錄為Gallery的偵聽器以完成對此事件的處理，達到我們希望的互動結果。 Gallery Test範例 在活動佈局中，安排了一個Gallery元件與ImageView元件。 範例詳細內容請參考原書。

9 Gallery類別在API 16後已不再使用，因為它的功能可以用「HorizontalScrollView」或「ViewPager」實現。

10 四、 GridView GridView提供2維的顯示清單介面，它將清單元素分成行(即欄)與列，其中每一個元素形成一個儲存格(cell)。
GridView在佈局檔中以<GridView>標籤宣告，因為它是2維的元件，因此必須透過「android:numColumns」屬性指定它顯示的行數，它會依其儲存格數量，自動計算它所需要的列數。

11 也必須實作一個繼承自BaseAdapter的類別，而且必須在這個類別中，建立GridView儲存格實際的視圖元件與此元件的內容。
為了讓儲存格之間容易區隔，可以透過「android:horizontalSpacing」屬性設定行與行之間的間距，用「android:verticalSpacing」屬性設定列與列之間的間距。 也必須實作一個繼承自BaseAdapter的類別，而且必須在這個類別中，建立GridView儲存格實際的視圖元件與此元件的內容。 GridView Test範例 在佈局中安置了一個GridView元件，以及它下方的ImageView元件。 範例的目的是在GridView元件顯示影像縮圖，當使用者點選其中一張縮圖，此縮圖會放大顯示於下方的ImageView元件。 範例詳細內容請參考原書。

12 五、用ViewFlipper元件增添動畫效果
透過「ViewFlipper」元件與動畫資源檔(位於專案的「/res/anim/」目錄)，我們可以為任何位於ViewFlipper元件內的視圖提供補間動畫的效果。 補間動畫是透過指定它某個屬性的初始(from)與最終(to)狀態，以及動畫的執行時間長度，讓Android系統自動為我們計算動畫期間屬性值的變化，使屬性平順的逐漸從初始狀態「變」到最終狀態。

13 動畫資源檔最外層的是<set>標籤，此為動畫元件的容器；下一層是要執行動畫種類的元件，例如<alpha>定義透明度變化，<rotate>定義方位(旋轉)變化，< scale > 定義尺寸變化，<translate>定義座標平移等。 在每個動畫元件標籤內定義此動畫的屬性，如某屬性初始(from)與最終(to)狀態，以及動畫的執行期間等。 以ViewFlipper執行補間動畫時，提供的動畫資源檔必須成對，即一正一反(逆向變化)，這樣才能產生連續不斷的變化。

14 XMLDynamic Test範例 在佈局中加入ViewFlipper元件，並於ViewFlipper內放置一個ImageView元件。
在活動類別定義程式中，主要是取得對ViewFlipper元件的參考，然後設定它的進與退動畫資源，以及利用它的「startFlipping()」方法啟動動畫效果。 範例詳細內容請參考原書。

15 範例詳細內容請參考原書。