Android Sample ActivitySceneTransitionBasic 阅读笔记

本文章用于记录阅读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)
    }

这段代码是MainActivity里面GridView的子项点击响应事件，在里面做了页面跳转的触发。首先是新建一个Intent，出入子项数据的ID。然后创建ActivityOptionsCompat的实例，创建的静态工厂方法的声明里有可变参数列表Pair[]。两个ImageView的对应就在这里。

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))

键是findViewById找出来的View，值是DetailActivity的静态常量，也就是TransitionName。

最后将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";

用来作为TransitionName的两个字符串常量。

    @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();
    }

使用ViewCompat.setTransitionName方法，传入详情页对应的View及String。

至此，已经可以实现场景切换的效果。不过，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();
        }
    }

注意到 if 判断里面有个addTransitionListener方法的调用，该方法添加了切换事件的监听。

    /**
     * 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，让体验更好。