專欄作者新書出版：Android App程式開發剖析 第三版（適用Android 8 Oreo與Android Studio 3）

Android Tutorial 第六堂（2）Material Design – RecylerView << 前情

Android 5 Lollipop開始提供的Material Design，除了新增RecylerView與其它許多新的元件，也有許多改良與簡化的動畫API，例如之前說明的Transition API。目前記事應用程式提供記錄照片的功能，使用者在主畫面選擇記事資料以後，照片會直接顯示在記事資料的畫面：

把照片直接顯示在記事資料畫面的作法，會佔用畫面大部份的空間。如果使用者為記事資料儲存照片的話，進入記事資料以後，改為在畫面右下角顯示照片的縮圖：

使用者如果需要檢視照片，點選右下角的照片縮圖以後，才會使用整個畫面顯示照片：

這一章把記事資料的照片顯示，改為上面說明的作法，在顯示照片的時候，採用Android 5 Lollipop、API Level 21開始提供的「Shared element」，執行顯示圖片時的畫面轉換效果，更符合Material Design的設計概念。

20-1 建立顯示照片元件

要完成上面說明的修正，需要另外建立一個顯示照片Activity元件，這個元件的設計會比較簡單一些。

依照下列的步驟，建立這個元件的畫面配置資源：

1. 在「res/layout」目錄按滑鼠右鍵。
2. 選擇「New -> Layout Resource File」。
3. 在File Name:欄位輸入「activity_picture」。
4. 選擇「OK」按鈕。

參考下列的內容完成這個畫面配置資源：

<!-- 使用 android:transitionName 設定 shared element 名稱 -->
<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/picture_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/retangle_drawable"
    android:padding="6sp"
    android:layout_margin="6sp"
    android:transitionName="picture"
    android:onClick="clickPicture"/>

依照下列的步驟，建立這個元件的Activity類別：

1. 在應用程式主套件目錄按滑鼠右鍵。
2. 選擇「New -> Java Class」。
3. 在Name:輸入「PictureActivity」。
4. 選擇「OK」按鈕。

參考下列的內容完成這個Activity類別：

package net.macdidi.myandroidtutorial;

import android.app.Activity;
import android.content.Intent;
import android.os.Build;
import android.os.Bundle;
import android.view.View;
import android.view.Window;
import android.widget.ImageView;

public class PictureActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_picture);

        // 取得照片元件
        ImageView picture_view = (ImageView) findViewById(R.id.picture_view);

        // 讀取照片檔案名稱
        Intent intent = getIntent();
        String pictureName = intent.getStringExtra("pictureName");

        if (pictureName != null) {
            // 設定照片元件
            FileUtil.fileToImageView(pictureName, picture_view);
        }
    }

    public void clickPicture(View view) {
        // 如果裝置的版本是LOLLIPOP
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            finishAfterTransition();
        }
        else {
            finish();
        }
    }

}

開啟AndroidManifest.xml設定檔，參考下列的內容加入元件的設定：

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="net.macdidi.myandroidtutorial" >

    ...

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        ...

        <!-- 檢視照片元件 -->
        <activity android:name=".PictureActivity" />
    </application>

</manifest>

完成照片檢視元件的設計，它跟一般Activity元件的設計差不多，只有在畫面配置資源的部份，為顯示照片的ImageView元件加入特別的設定，這是為了設定轉換效果加入的「android:transitionName」，在後面完成所有修改後，就可以產生畫面轉換的效果。

20-2 修改記事資料元件

接下來修改記事資料元件的部份。開啟記事元件的畫面資源「res/layout/activity_item.xml」，參考下列的片段，依照註解的說明執行需要的修改：

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

<!-- 加入外層的 RelativeLayout 設定 -->
<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" >

    <!-- 移除 xmlns:android 設定 -->
    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TableLayout
            xmlns:tools="http://schemas.android.com/tools"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:stretchColumns="1"
            tools:context="net.macdidi.myandroidtutorial.ItemActivity">

            ...

            <!-- 移除原來顯示圖片的設定
            <ImageView
                android:id="@+id/picture"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@drawable/retangle_drawable"
                android:padding="6sp"
                android:layout_margin="2sp"
                android:visibility="invisible" />
            -->

            <TableLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:stretchColumns="*">
                ...
            </TableLayout>

            <TableLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:stretchColumns="*">
                ...
            </TableLayout>
        </TableLayout>

    </ScrollView>

    <!-- 在右下角顯示照片縮圖 -->
    <!-- 使用 android:transitionName 設定 shared element 名稱 -->
    <ImageView
        android:id="@+id/picture"
        android:layout_width="64sp"
        android:layout_height="64sp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:background="@drawable/retangle_drawable"
        android:padding="3sp"
        android:layout_margin="6sp"
        android:visibility="invisible"
        android:transitionName="picture"
        android:onClick="clickPicture"/>

<!-- 最外層的 RelativeLayout 結束標籤 -->
</RelativeLayout>

開啟記事資料Activity元件類別「ItemActivity.java」，加入下列的方法宣告：

// 點擊畫面右下角的照片縮圖元件
public void clickPicture(View view) {
    Intent intent = new Intent(this, PictureActivity.class);

    // 設定圖片檔案名稱
    intent.putExtra("pictureName", configFileName("P", ".jpg").getAbsolutePath());

    // 如果裝置的版本是LOLLIPOP
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
        ActivityOptions options = ActivityOptions
                .makeSceneTransitionAnimation(this, picture, "picture");
        startActivity(intent, options.toBundle());
    }
    else {
        startActivity(intent);
    }
}

執行這個應用程式，選擇記事資料後，為它拍攝與儲存一張照片，然後再執行檢視照片的操作，試試看動畫的效果。

20-3 為RecylerView設計自定動畫效果

RecylerView提供更方便的實作方式，還有比ListView元件更好的效率。你還可以為RecylerView設企自定的動畫效果，提供使用者更好的操作體驗。接下來撰寫一個實作「RecyclerView.ItemAnimator」介面的類別，依照應用程式的需求，設計好自訂的動畫效果。在應用程式的主套件下建立一個名稱為「MyItemAnimator」的Java類別，依照下列的內容完成這個程式碼：

package net.macdidi.myandroidtutorial;

import android.animation.Animator;
import android.animation.AnimatorSet;
import android.animation.ObjectAnimator;
import android.support.v7.widget.RecyclerView;
import android.view.View;

import java.util.ArrayList;
import java.util.List;

public class MyItemAnimator extends RecyclerView.ItemAnimator {

    // 儲存動畫的畫面包裝元件
    private List<RecyclerView.ViewHolder> viewHolders = new ArrayList<>();

    @Override
    public void runPendingAnimations() {

        if (!viewHolders.isEmpty()) {

            // 動畫物件
            AnimatorSet animator;
            // 執行動畫的元件
            View target;

            for (final RecyclerView.ViewHolder viewHolder : viewHolders) {
                // 取得執行動畫的元件
                target = viewHolder.itemView;
                // 建立動畫物件
                animator = new AnimatorSet();

                // 設定動畫效果
                // 由左側出現與淡入效果
                animator.playTogether(
                        ObjectAnimator.ofFloat(target, "translationX", -target.getMeasuredWidth(), 0.0f),
                        ObjectAnimator.ofFloat(target, "alpha", 0.5F, 1.0F)
                );

                // 設定動畫套用的元件與時間
                animator.setTarget(target);
                animator.setDuration(1000);

                // 動畫結束監聽事件
                animator.addListener(new AnimatorListenerWrapper() {
                    @Override
                    public void onAnimationEnd(Animator animation) {
                        // 移除完成動畫的元件
                        viewHolders.remove(viewHolder);

                        if (!isRunning()) {
                            dispatchAnimationsFinished();
                        }
                    }
                });

                animator.start();
            }
        }
    }

    @Override
    public boolean animateAdd(RecyclerView.ViewHolder viewHolder) {
        return viewHolders.add(viewHolder);
    }

    @Override
    public boolean animateRemove(RecyclerView.ViewHolder viewHolder) {
        return false;
    }

    @Override
    public boolean animateMove(RecyclerView.ViewHolder viewHolder,
                               int i, int i2, int i3, int i4) {
        return false;
    }

    @Override
    public boolean animateChange(RecyclerView.ViewHolder oldHolder,
                                 RecyclerView.ViewHolder newHolder,
                                 int fromLeft, int fromTop,
                                 int toLeft, int toTop) {
        return false;
    }

    @Override
    public void endAnimation(RecyclerView.ViewHolder viewHolder) {

    }

    @Override
    public void endAnimations() {

    }

    @Override
    public boolean isRunning() {
        return !viewHolders.isEmpty();
    }

    public class AnimatorListenerWrapper implements Animator.AnimatorListener {

        @Override
        public void onAnimationStart(Animator animation) {

        }

        @Override
        public void onAnimationEnd(Animator animation) {

        }

        @Override
        public void onAnimationCancel(Animator animation) {

        }

        @Override
        public void onAnimationRepeat(Animator animation) {

        }
    }

}

完成自定動畫類別設計以後，只要把它指定給RecylerView元件使用就可以了。開啟「MainActivity」類別，找到「onCreate」方法，參考下列的片段加入設定動畫效果的敘述：

@Override
protected void onCreate(Bundle savedInstanceState) {
    ...

    // 設定自定動畫效果物件
    item_list.setItemAnimator(new MyItemAnimator());
}

完成所有的工作了，執行這個應用程式，新增一筆記事資料，儲存記事資料回到主畫面，新增的記事資料會使用動畫的效果顯示在RecylerView元件。這是示範的影片，包含檢視照片與新增記事的動畫效果：

課程相關的檔案都可以GitHub瀏覽與下載。

http://github.com/macdidi5/AndroidTutorial