本文章用於記錄閱讀Android Sample ActivitySceneTransitionBasic 項目時學到的一些知識。
項目簡介：
該項目用於展示Activity View對應顯示跳轉的實現方法。就是點擊列表中的某個View時，該View會使用動畫效果變大成爲新的頁面的一部分。
效果圖：
由於Sample項目提供的圖片地址訪問不是很穩定，所以被我替換掉了。
技術點：
使用android.support.v4.app.ActivityCompat的
startActivity(Activity activity, Intent intent, @Nullable Bundle options)
方法來觸發跳轉效果，關鍵點在於將View的實例與Name屬性關聯鍵值放到
ActivityOptionsCompat 類中，並將它傳到startActivity的option屬性中。
項目詳解：
項目主要有兩個Activity，MainActivity使用GridView展示一個網格列表。DetailActivity顯示詳情頁。
首先看一下GridView的Adapter的View構成。
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<com.example.android.activityscenetransitionbasic.SquareFrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/imageview_item"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop" />
</com.example.android.activityscenetransitionbasic.SquareFrameLayout>
<TextView
android:id="@+id/textview_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?android:attr/colorPrimary"
android:maxLines="1"
android:padding="16dp"
android:textAppearance="@android:style/TextAppearance.Material.Subhead"
android:theme="@android:style/Theme.Material" />
</LinearLayout>這個layout文件主要由LinearLayout包含一個ImageView與TextView，用於顯示圖片以及標題。SquareFrameLayout是用於將內容設置爲正方形的佈局。
這兩個View就是跳轉時的動畫主體了。
再看一下DetailActivity的layout文件。
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<com.example.android.activityscenetransitionbasic.SquareFrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/imageview_header"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop" />
</com.example.android.activityscenetransitionbasic.SquareFrameLayout>
<TextView
android:id="@+id/textview_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?android:attr/colorPrimary"
android:theme="@android:style/Theme.Material"
android:textAppearance="@android:style/TextAppearance.Material.Title"
android:maxLines="2"
android:padding="16dp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="16dp"
android:text="@string/bacon_ipsum"
android:textAppearance="@android:style/TextAppearance.Material.Body1" />
</LinearLayout>
</ScrollView>可以看到，這裏面的LinearLayout也包含了一個ImageView和一個TextView，多出的一個TextView是用於展示說明文字用的，不用理會。
這兩個帶ID的ImageView與TextView對應於Adapter裏面的那兩個ImageView與TextView。
那它們怎樣關聯起來的呢？很明顯可以看到ID是不同的，實際用的是View的transitionName屬性。
下面來看看具體的關聯代碼。
第一步，在跳轉發生前設置。
/**
* Called when an item in the {@link android.widget.GridView} is clicked. Here will launch the
* {@link DetailActivity}, using the Scene Transition animation functionality.
*/
@Override
public void onItemClick(AdapterView<?> adapterView, View view, int position, long id) {
Item item = (Item) adapterView.getItemAtPosition(position);
// Construct an Intent as normal
Intent intent = new Intent(this, DetailActivity.class);
intent.putExtra(DetailActivity.EXTRA_PARAM_ID, item.getId());
// BEGIN_INCLUDE(start_activity)
/**
* Now create an {@link android.app.ActivityOptions} instance using the
* {@link ActivityOptionsCompat#makeSceneTransitionAnimation(Activity, Pair[])} factory
* method.
* 使用靜態工廠方法添加View TransitionName的鍵值對
*/
ActivityOptionsCompat activityOptions = ActivityOptionsCompat.makeSceneTransitionAnimation(
this,
// Now we provide a list of Pair items which contain the view we can transitioning
// from, and the name of the view it is transitioning to, in the launched activity
// 添加ImageView的鍵值對
new Pair<View, String>(view.findViewById(R.id.imageview_item),
DetailActivity.VIEW_NAME_HEADER_IMAGE),
// 添加TextView的鍵值對
new Pair<View, String>(view.findViewById(R.id.textview_name),
DetailActivity.VIEW_NAME_HEADER_TITLE));
// Now we can start the Activity, providing the activity options as a bundle
ActivityCompat.startActivity(this, intent, activityOptions.toBundle()); // 將設置轉化爲Bundle傳入
// END_INCLUDE(start_activity)
}new Pair<View, String>(view.findViewById(R.id.imageview_item), DetailActivity.VIEW_NAME_HEADER_IMAGE)new Pair<View, String>(view.findViewById(R.id.textview_name), DetailActivity.VIEW_NAME_HEADER_TITLE))最後將ActivityOptionsCompat的實例轉化成Bundle傳入到startActivity方法就可以了，至此，完成了MainActivity的TransitionName的綁定。
第二步，在跳轉頁面創建時設置
// View name of the header image. Used for activity scene transitions
public static final String VIEW_NAME_HEADER_IMAGE = "detail:header:image";
// View name of the header title. Used for activity scene transitions
public static final String VIEW_NAME_HEADER_TITLE = "detail:header:title"; @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.details);
// Retrieve the correct Item instance, using the ID provided in the Intent
mItem = Item.getItem(getIntent().getIntExtra(EXTRA_PARAM_ID, 0));
mHeaderImageView = (ImageView) findViewById(R.id.imageview_header);
mHeaderTitle = (TextView) findViewById(R.id.textview_title);
// BEGIN_INCLUDE(detail_set_view_name)
/**
* Set the name of the view's which will be transition to, using the static values above.
* This could be done in the layout XML, but exposing it via static variables allows easy
* querying from other Activities
* 設置相應的TransitionName
*/
ViewCompat.setTransitionName(mHeaderImageView, VIEW_NAME_HEADER_IMAGE);
ViewCompat.setTransitionName(mHeaderTitle, VIEW_NAME_HEADER_TITLE);
// END_INCLUDE(detail_set_view_name)
loadItem();
}至此，已經可以實現場景切換的效果。不過，Sample中展示了一種讓效果更好的小技巧。
第三步，先加載縮略圖，當場景切換完成後，再加載大圖
private void loadItem() {
// Set the title TextView to the item's name and author
mHeaderTitle.setText(getString(R.string.image_header, mItem.getName(), mItem.getAuthor()));
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP && addTransitionListener()) {
// 如果系統版本在21以上，並且添加切換監聽器成功，就加載縮略圖
// If we're running on Lollipop and we have added a listener to the shared element
// transition, load the thumbnail. The listener will load the full-size image when
// the transition is complete.
loadThumbnail();
} else {
// If all other cases we should just load the full-size image now
loadFullSizeImage();
}
} /**
* Try and add a {@link Transition.TransitionListener} to the entering shared element
* {@link Transition}. We do this so that we can load the full-size image after the transition
* has completed.
*
* @return true if we were successful in adding a listener to the enter transition
*/
private boolean addTransitionListener() {
final Transition transition = getWindow().getSharedElementEnterTransition();
if (transition != null) {
// There is an entering shared element transition so add a listener to it
transition.addListener(new Transition.TransitionListener() {
@Override
public void onTransitionEnd(Transition transition) {
// As the transition has ended, we can now load the full-size image
loadFullSizeImage();
// Make sure we remove ourselves as a listener
transition.removeListener(this);
}
@Override
public void onTransitionCancel(Transition transition) {
// Make sure we remove ourselves as a listener
transition.removeListener(this);
}
});
return true;
}
// If we reach here then we have not added a listener
return false;
}這樣做的好處是，不會因爲加載大圖而在切換過程中出現空白的ImageView，讓體驗更好。