Ch05 ImageSwitcher和GridView介面元件 View Animation動畫效果

Presentation on theme: "Ch05 ImageSwitcher和GridView介面元件 View Animation動畫效果"— Presentation transcript:

1 Ch05 ImageSwitcher和GridView介面元件 View Animation動畫效果

2 大綱 範例：畫廊 GridView ImageSwitcher View Animation動畫效果

3 完成「影像畫廊」程式 請參考書上的介面佈局檔和程式碼以及說明。

4 「影像畫廊」程式(圖片資源) 「影像畫廊」程式需要用到二個 新的元件，也就是GridView和 ImageSwitcher。GridView元件可 以提供瀏覽影像縮圖的功能，右 圖就是利用GridView元件建立， 它可以把程式畫面切割成許多小 格子，每一個格子都顯示一張影 像縮圖。除了需要瀏覽影像縮圖 的元件之外，還要搭配一個可以 顯示正常影像的元件。雖然前面 單元學過的ImageView具備這樣的 功能，但是這個單元我們要使用 一個更有趣的影像元件，那就是 ImageSwitcher。

5 GridView元件的用法 Step 1. 開啟程式專案的res/layout資料夾裡頭的介 面佈局檔，然後建立一個GridView元件標 籤，並設定好id和相關屬性如下，其中的 android:numColumns屬性是設定要在 GridView中建立幾個欄位。 <GridView android:layout_width="match_parent" android:layout_height="match_parent" android:numColumns="3" /> 5

6 GridView元件的用法 ImageAdapter.java
Step 2. 編輯好介面佈局檔之後，接下來是修改程式 檔。首先我們必須新增一個繼承 BaseAdapter的新類別，在專案檢視視窗中， 用滑鼠右鍵點選app/java資料夾中的套件路 徑名稱，選擇New > Java Class。在對話盒的 Name欄位輸入新類別的名稱，例如： ImageAdapter，按下OK按鈕。這個類別的 功能是管理影像縮圖陣列，並提供給 GridView元件使用。 6

7 GridView元件的用法 Step 3. 類別程式檔會自動開啟，請輸入以下程式碼。輸 入之後，會在BaseAdapter下方標示紅色波浪底線， 表示該處有語法錯誤。把編輯游標設定到該處， 然後同時按下鍵盤上的Alt和Enter，就會出現輔助 視窗，選擇Import class。接下來還是出現紅色波浪 底線，這是因為這個新類別必須實作指定的方法。 再同時按下Alt和Enter，然後選擇Implement methods。 public class ImageAdapter extends BaseAdapter { } 7

8 GridView元件的用法 Step 4. 程式檔中會自動加入4個方法。請參考書上說明書 入程式碼，我們在ImageAdapter類別中建立二個屬 性，mContext屬性用來儲存物件的執行環境， miImgArr屬性用來儲存縮圖陣列，縮圖陣列中的每 一個縮圖都是儲存它的資源id編號。getView()方法 的功能是傳回一個ImageView物件給Android系統顯 示。當Android系統呼叫getView()時，會傳入一個 可以重複使用的convertView物件。因此程式判斷 如果convertView不是null，就不需要重新建立 ImageView，最後把要顯示的縮圖放到ImageView物 件中，再傳回該ImageView物件。 8

9 GridView元件的用法 Step 5. 接下來是編輯主程式檔app/src/(套件路徑名 稱)/MainActivity.java。在程式檔中呼叫findViewById() 方法，取得宣告在介面佈局檔中的GridView元件， 然後建立一個ImageAdapter的物件，再將該物件設 定給GridView元件。 Integer[] miThumbImgArr = {…(程式專案中的影像資源)}; // 建立一個ImageAdapter型態的物件，this是主程式類別的物件 ImageAdapter imgAdap = new ImageAdapter(this, miThumbImgArr); GridView gridView = (GridView)findViewById(R.id.gridView); gridView.setAdapter(imgAdap); // 設定GridView物件的OnItemClickListener，請參考下一個步驟的說明 gridView.setOnItemClickListener(gridViewOnItemClick); 9

10 step5-1:宣告變數 private GridView gridViewImg;
private Integer[] miImgArr = { R.drawable.img01, R.drawable.img02, R.drawable.img03, R.drawable.img04, R.drawable.img05, R.drawable.img06, R.drawable.img07, R.drawable.img08}; private Integer[] miThumbImgArr = { R.drawable.img01th, R.drawable.img02th, R.drawable.img03th, R.drawable.img04th, R.drawable.img05th, R.drawable.img06th, R.drawable.img07th, R.drawable.img08th};

11 Step5-2: 連結畫面及變數 Step5-3:連結listener
ImageAdapter imgAdap = new ImageAdapter(this, miThumbImgArr); gridViewImg = (GridView)findViewById(R.id.gridViewImg); gridViewImg.setAdapter(imgAdap); Step5-3:連結listener gridViewImg.setOnItemClickListener(gvImgListener);

12 ImageSwitcher元件的用法 ImageSwitcher元件的目的就是用來顯示影像，它和ImageView元件的差異是ImageSwitcher元件能夠設定影像切換時的轉場效果。

13 ImageSwitcher元件的用法 Step 6. 在程式專案的介面佈局檔app/res/layout/activity_main.xml中加入一個ImageSwitcher標籤，並設定id和屬性如下： <ImageSwitcher android:layout_width="wrap_content" android:layout_height=" wrap_content " />

14 ImageSwitcher元件的用法 Step 7. 在程式專案的主類別程式檔中，讓主程式類別實作ViewFactory介面。加入該程式碼之後，會在類別名稱下方出現紅色波浪底線，這是語法錯誤的提示。把編輯游標設定到該處，然後同時按下Alt和Enter，就會顯示一個修正建議的視窗。點選其中的Implemented methods，按下對話盒的OK按鈕，就會在類別中加入一個makeView()方法。讓主類別實作ViewFactory介面的makeView()方法後，就可以把主類別設定給ImageSwitcher物件。makeView()方法的程式碼如書上說明，首先是建立一個ImageView物件，然後設定相關參數，最後傳回該ImageView物件。

15 Step7-1:實作介面ViewFactory
public class MainActivity extends AppCompatActivity implements ViewSwitcher.ViewFactory Step7-2:實作方法makeView() @Override public View makeView() { ImageView v = new ImageView(this); v.setBackgroundColor(0xFF000000); v.setScaleType(ImageView.ScaleType.FIT_CENTER); v.setLayoutParams(new ImageSwitcher.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT)); v.setBackgroundColor(Color.WHITE); return v; }

16 ImageSwitcher元件的用法 Step 3. 在程式檔中利用findViewById()取得步驟1建立的ImageSwitcher元件，接著呼叫ImageSwitcher的setFactory()方法，把主程式類別的物件傳入ImageSwitcher中（使用this），然後呼叫ImageSwitcher物件的setInAnimation()和setOutAnimation()方法分別指定影像顯示和消失的動畫效果。 mImgSwitcher = (ImageSwitcher) findViewById(R.id.imgSwitcher); mImgSwitcher.setFactory(this); // 主程式類別必須implements // ViewSwitcher.ViewFactory mImgSwitcher.setInAnimation(AnimationUtils.loadAnimation(this, android.R.anim.fade_in)); mImgSwitcher.setOutAnimation(AnimationUtils.loadAnimation(this, android.R.anim.fade_out));

17 private ImageSwitcher imgSwitcher1; Step 3-2: 畫面元件連結變數
imgSwitcher1 = (ImageSwitcher)findViewById(R.id.imgSwitcher1); imgSwitcher1.setFactory(this); imgSwitcher1.setInAnimation(AnimationUtils.loadAnimation(this, android.R.anim.fade_in)); imgSwitcher1.setInAnimation(AnimationUtils.loadAnimation(this, android.R.anim.fade_out));

18 GridView元件的用法 Step 8. 建立一個AdapterView.OnItemClickListener物件，再 將它設定給上一個步驟的GridView物件。 AdapterView.OnItemClickListener物件的功能是當使 用者點選GridView元件中的影像縮圖時，把該縮圖 對應的原始影像顯示在ImageSwitcher元件中。 private AdapterView.OnItemClickListener gridViewOnItemClick = new AdapterView.OnItemClickListener() { @Override public void onItemClick(AdapterView<?> parent, View v,int position, long id) { …(把使用者點選的縮圖對應的原始影像顯示在ImageSwitcher中) } }; 18

19 完成Listener private AdapterView.OnItemClickListener gvImgListener = new OnItemClickListener() { @Override public void onItemClick(AdapterView<?> parent, View view, int position, long id) { imgSwitcher1.setImageResource(miImgArr[position]); } };

20 使用View Animation動畫效果

21 使用隨機動畫的「影像畫廊」程式

22 Android程式支援二種動畫效果 Android程式可以對顯示在螢幕上的物件做出二種 類型的動畫效果：View Animation和Drawable Animation。所謂View Animation是藉由指定動畫開 始和結束時的物件屬性，例如位置、Alpha值（透 明度）、大小、角度等，以及動畫播放的時間長度， 讓Android系統自動產生動畫過程中的所有畫面。 Drawable Animation則類似卡通動畫的製作過程， 我們必須指定每一個影格播放的影像檔和時間長度， Android系統再依照我們的設定播放動畫。

23 Android程式支援二種動畫效果 View Animation在舊版的技術文件中稱為Tween Animation，Drawable Animation在舊版的技術文件 稱為Frame Animation，在操作開發工具時，有時候 會出現舊版的名稱。

24 Android程式建立動畫的二種方式 1. 在專案的res資料夾下建立動畫資源檔 （xml檔案格式），該動畫資源會自動加 入專案的資源類別R中，程式再從資源類 別中載入動畫物件來使用。 2. 直接在程式碼中建立動畫物件並設定相關 屬性。 24

25 4種View Animation類型的動畫效果
1. Alpha 這種動畫效果是藉由改變影像的透明度來達成。 當影像的alpha值是1時，表示影像完全不透明， 此時是最清楚的狀態。當影像的alpha值由1減 到0時，影像變的愈來愈透明，也就是愈來愈 不清楚直到看不見（alpha值為0）。 2. Scale 這種動畫效果是藉由改變影像的大小來達成。 影像的scale值也是用0~1來表示。0表示完全看 不到，1表示原來影像的大小。scale值可以在x 和y二個方向獨立設定。x方向是影像的寬，y 方向是影像的高。

26 Android系統提供4種類型的動畫效果 3. Translate 這個動畫效果是藉由改變影像的位置來達成。 影像的位置是藉由x和y方向上的位移量來決定。 Rotate 藉由改變影像的旋轉角度來做出動畫效果。

27 建立動畫資源檔的步驟 Step 1. 在Android Studio左邊的專案檢視視窗中，用 滑鼠右鍵點選App專案的res資料夾，然後選 擇New > Android resource file，就會出現如 圖的對話盒。

28 建立動畫資源檔的步驟 Step 2. 在對話盒中，將Resource type欄位設定為Animation， File name欄位輸入動畫資源檔名稱，例如scale_out （操作提示：檔名只能用小寫英文字母、數字或底 線字元），然後在Root element欄位輸入動畫類型。 動畫類型總共有五種選擇：alpha、scale、translate、 rotate、和set。前四種就是前面介紹的四種動畫， 而set表示要結合多個動畫，例如Scale加上Rotate。 由於物件會分別用到影像消失和出現二種動畫效果， 所以我們在動畫資源檔的最後加上in和out來區別， in表示用在影像出現時的動畫，out表示用在影像消 失時的動畫。輸入完畢之後按下OK按鈕。在程式專 案的res資料夾中會新增一個anim子資料夾，裡頭就 是我們建立的動畫資源檔，而且這個檔案會自動開 啟在編輯視窗中。

29 建立動畫資源檔的步驟(動畫特效xml) Step 3. 在新建立的動畫資源檔中輸入下列的程式碼，這個 範例是用<scale…/>標籤建立一個scale類型的動畫 效果。如果想要建立其它類型的動畫效果，只要把 <scale…/>標籤換成其它動畫類型的標籤即可： <?xml version="1.0" encoding="utf-8"?> <scale android:fromXScale="0.0" android:toXScale="1.0" android:fromYScale="0.0" android:toYScale="1.0" android:pivotX="50%" android:pivotY="50%" android:startOffset="3000" android:duration="3000" />

30 建立動畫資源檔的步驟 Step 4. 完成以上動畫資源檔之後，就能夠在程式碼中載入 使用。例如我們將上一個單元的「影像畫廊」程式 中的ImageSwitcher物件，改成使用我們自行建立的 scale_out動畫效果，程式碼只需要修改以下粗體字 的部分即可： mImgSwitcher.setOutAnimation(AnimationUtils.loadAnimation(this, R.anim.scale_out));

31 建立4種View Animatioin動畫類型的相關屬性
屬性名稱 屬性值 說明 Alpha android:interpolator 設定動畫過程中變化的快慢 第一個值是一樣快 第二個值是愈來愈快 第三個值是愈來愈慢 第四個值是中間快前後慢 android:fromAlpha 0 ~ 1 動畫開始時的影像alpha值 android:toAlpha 動畫結束時的影像alpha值 android:startOffset 整數值 啟動動畫後要等多久才真正開始執行動畫，以毫秒為單位 android:duration 動畫持續時間，以毫秒為單位 Scale 同前面說明 android:fromXScal 0 ~ 動畫開始時影像的x方向大小比例，1以上的值表示放大 android:toXScale 動畫結束時影像的x方向大小比例，1以上的值表示放大 android:fromYScale 動畫開始時影像的y方向大小比例，1以上的值表示放大 android:toYScale 動畫結束時影像的y方向大小比例，1以上的值表示放大 android:pivotX 動畫開始時影像的x座標，0表示最左邊，1表示最右邊 android:pivotY 動畫開始時影像的y座標，0表示上緣，1表示下緣

32 建立4種View Animatioin動畫類型的相關屬性
屬性名稱 屬性值 說明 Translate android:interpolator 同前面說明 android:fromXDelta 整數值 動畫開始時影像的x座標的位移量 android:toXDelta 動畫結束時影像的x座標的位移量 android:fromYDelta 動畫開始時影像的y座標的位移量 android:toYDelta 動畫結束時影像的y座標的位移量 android:startOffset android:duration Rotate android:fromDegrees 動畫開始時影像的角度 android:toDegrees 動畫結束時影像的角度 android:pivotX android:pivotY

33 動畫資源檔範例 anim_alpha_in.xml 從完全透明(看不見)到完全不透明(正常顯 示)，總共費時3秒 <?xml version="1.0" encoding="utf-8"?> <alpha xmlns:android=" android:fromAlpha="0.0" android:toAlpha="1.0" android:duration="3000“ />

34 動畫資源檔範例 anim_alpha_out.xml 從完全不透明(正常顯示)到完全透明(看 不見) ，總共費時3秒 <?xml version="1.0" encoding="utf-8"?> <alpha xmlns:android=" android:fromAlpha="1.0" android:toAlpha="0.0" android:duration="3000“ />

35 動畫資源檔範例 anim_scale_rotate_in.xml 從看不見放大到正常大小並加上旋轉效果 ，總共費時 3秒 <?xml version="1.0" encoding="utf-8"?> <set xmlns:android=" <scale android:fromXScale="0.0" android:toXScale="1.0" android:fromYScale="0.0" android:toYScale="1.0" android:pivotX="50%" android:pivotY="50%" android:startOffset="3000" android:duration="3000“ /> <rotate android:fromDegrees="0" android:toDegrees="360" </set>

36 動畫資源檔範例 anim_scale_rotate_out.xml 從正常大小縮小到看不見並加上旋轉效果 ，總 共費時3秒 <?xml version="1.0" encoding="utf-8"?> <set xmlns:android=" <scale android:fromXScale="1.0" android:toXScale="0.0" android:fromYScale="1.0" android:toYScale="0.0" android:pivotX="50%" android:pivotY="50%" android:duration="3000“ /> <rotate android:fromDegrees="0" android:toDegrees="360" </set>

37 動畫資源檔範例 anim_trans_in.xml 將影像從螢幕上方移動到正常位置，總共 費時3秒 <?xml version="1.0" encoding="utf-8"?> <translate xmlns:android=" android:fromXDelta="0" android:toXDelta="0" android:fromYDelta="-300" android:toYDelta="0" android:duration="3000" />

38 動畫資源檔範例 anim_trans_out.xml 將影像從正常位置移動到螢幕下方，總 共費時3秒 <?xml version="1.0" encoding="utf-8"?> <translate xmlns:android=" android:fromXDelta="0" android:toXDelta="0" android:fromYDelta="0" android:toYDelta="300" android:duration="3000" />

39 使用隨機動畫的「影像畫廊」程式 以上我們總共建立了3組動畫資源檔（每一 組都有in/out二個檔案），當使用者在「影 像畫廊」程式上方的GridView元件中點選一 個影像縮圖時，程式會隨機選擇一組動畫效 果來完成切換影像的動作。每一次使用者點 選一個影像縮圖後，我們必須重新選擇動畫 效果，而這個動畫效果是用亂數來決定。

40 private AdapterView.OnItemClickListener gvImgListener = new OnItemClickListener() public void onItemClick(AdapterView<?> parent, View view, int position, long id) { switch ((int)(Math.random()*3+1)) { case 1: imgSwitcher1.setInAnimation(AnimationUtils.loadAnimation(MainActivity.this, R.anim.alpha_in)); imgSwitcher1.setOutAnimation(AnimationUtils.loadAnimation(MainActivity.this, R.anim.alpha_out)); break; case 2: R.anim.trans_in)); R.anim.trans_out)); case 3: R.anim.scale_rotate_in)); R.anim.scale_rotate_out)); } imgSwitcher1.setImageResource(miImgArr[position]); };

41 在程式碼中建立動畫效果 另一種建立動畫效果的方法是使用程式碼，在程 式碼中我們可以建立AlphaAnimation、 ScaleAnimation、TranslateAnimation、和 RotateAnimation四種動畫物件，它們分別對應到動 畫資源檔中的<alpha…/>、<scale…/>、 <translate…/>、和<rotate…/>四種動畫類型標籤， 而且這些動畫物件的參數和它所對應的標籤中的 屬性也是有清楚的對應關係。

42 範例：ScaleAnimation ScaleAnimation(float fromX, float toX, float fromY, float toY, int pivotXType, float pivotXValue, int pivotYType, float pivotYValue) 在動畫物件的建構參數中多了pivotXType和pivotYType，它 們的作用是指定後面的pivotXValue和pivotYValue參數的值 的參考基準為何，例如如果設定為 Animation.RELATIVE_TO_SELF表示是以自己為基準，這也 是動畫標籤中的屬性的作法。動畫物件的建構參數中沒有 interpolator、startOffset、duration的設定，這些屬性是用 動畫物件的方法來設定。

43 範例：TranslateAnimation
下列的程式碼可以建立出和前面anim_trans_out.xml動畫資 源檔完全一樣的動畫效果。 TranslateAnimation anim_trans_out = new TranslateAnimation(Animation.RELATIVE_TO_SELF, 0, Animation.RELATIVE_TO_SELF, 0, Animation.RELATIVE_TO_SELF, 300); anim_trans_out.setInterpolator(new LinearInterpolator()); anim_trans_out.anim_rotate_in.setDuration(3000); mImgSwitcher.setInAnimation(anim_trans_out);

44 利用AnimationSet產生混合動畫效果
利用下列的程式碼建立一個和前面anim_scale_rotate_in.xml動畫資源檔完 全一樣的動畫效果。 ScaleAnimation anim_scale_in = new ScaleAnimation(0.0f, 1.0f, 0.0f, 1.0f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f); anim_scale_in.setInterpolator(new LinearInterpolator()); anim_scale_in.setStartOffset(3000); anim_scale_in.setDuration(3000); RotateAnimation anim_rotate_in = new RotateAnimation(0, 360, anim_rotate_in.setInterpolator(new LinearInterpolator()); anim_rotate_in.setStartOffset(3000); anim_rotate_in.setDuration(3000); AnimationSet anim_set = new AnimationSet(false); anim_set.addAnimation(anim_scale_in); anim_set.addAnimation(anim_rotate_in); mImgSwitcher.setInAnimation(anim_set);