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