ImageTransition

最新推荐文章于 2020-05-28 22:21:21 发布

Wei_Leng

最新推荐文章于 2020-05-28 22:21:21 发布

阅读量557

点赞数

分类专栏： Android 自定义控件进阶文章标签：应用 library imageview

本文链接：https://blog.csdn.net/u014608640/article/details/52942422

版权

Android 自定义控件进阶专栏收录该内容

344 篇文章 0 订阅

订阅专栏

ImageTransition

项目地址： vikramkakkar/ImageTransition

简介：A small android library to transition between a circular ImageView from one Activity to a rectangular ImageView in the launched Activity.

... is a small android library to transition between a circular ImageView from one Activity to a rectangular ImageView in the launched Activity.

Gradle dependency

compile 'com.appeaser.imagetransitionlibrary:imagetransitionlibrary:0.0.1'

Walkthrough

Following gif has been taken from the sample application available here:

The transition has been slowed down for demo purposes.

Components

ImageTransition: Transition based on ChangeBounds that provides animation support between a circular and rectangular ImageView (implemented as TransitionImageView) residing in two different activities. Works on API version >= 21.

TransitionImageView: A modified version of Henning Dodenhof's CircleImageView. Transition animators are run on this widget.

ImageTransitionUtils: Provides SharedElementCallback that is used to set values accessed inImageTransition.

ImageTransitionCompat: under development Transition based on ChangeBounds that provides animation support between a circular and rectangular ImageView (implemented as TransitionImageView) residing in the same activity or fragment. Requires API version >= 14.

Usage

Use com.appeaser.imagetransitionlibrary.TransitionImageView in place of ImageView. The rounding value can be set using app:tiv_rounding attribute. Value must be within [0,1] - 0 for no rounding, 1 for perfect rounding. Set android:transitionName attribute.

<com.appeaser.imagetransitionlibrary.TransitionImageView
    android:id="@+id/image"
    android:layout_width="80dp"
    android:layout_height="80dp"
    android:scaleType="centerCrop"
    android:transitionName="@string/iv_transition_name"
    app:tiv_rounding="0"/>

Note: com.appeaser.imagetransitionlibrary.TransitionImageView only works with scaleType="centerCrop". This restriction has been inherited from Henning Dodenhof's CircleImageView.

Provide @transition/itl_image_transition as the value forandroid:windowSharedElementEnterTransition & android:windowSharedElementExitTransition under your Activity theme in styles.xml:

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="colorPrimary">...</item>
    <item name="colorPrimaryDark">...</item>
    <item name="colorAccent">...</item>

    ....
    ....

    <!-- @transition/itl_image_transition is provided by ImageTransition library -->
    <item name="android:windowSharedElementEnterTransition">@transition/itl_image_transition</item>
    <item name="android:windowSharedElementExitTransition">@transition/itl_image_transition</item>
</style>

This should ideally be placed in your values-v21/styles.xml file. Refer to the sample app for an example.

In the second Activity's onCreate(Bundle) method, add the following line of code:

public class SecondActivity extends AppCompatActivity {

    ....
    ....

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

        ....
        ....

        // SharedElementCallback needs be set in the second Activity.
        // See ImageTrainsitionUtil for more info.
        setEnterSharedElementCallback(ImageTransitionUtil.DEFAULT_SHARED_ELEMENT_CALLBACK);
    }

    ....
    ....

    @Override
    public void onBackPressed() {
        supportFinishAfterTransition();
        super.onBackPressed();
    }
}

The sample app shows this approach.

Note: ImageTransitionUtil.DEFAULT_SHARED_ELEMENT_CALLBACK can be used only when transitioning fromtiv_rounding="1" to tiv_rounding="0". If you're transitioning between any other values, use:

setEnterSharedElementCallback(ImageTransitionUtil
    .prepareSharedElementCallbackFor(_your start rounding value_, _your end rounding value_));

If you'd like to change the duration of the transition, or use the transition within your own set of transitions, or use a different interpolator, include the following:

<transitionSet
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="your interpolator">

    ....
    ....

    <transition
        class="com.appeaser.imagetransitionlibrary.ImageTransition"
        android:duration="your duration" />

    ....
    ....

</transitionSet>

The library declares its min SDK version as 14. If your app's minSdkVersion is set to a lower value, include the following in your app's manifest:

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

    <uses-sdk tools:overrideLibrary="com.appeaser.imagetransitionlibrary"/>

    <application ...>
        ...
        ...
    </application>

</manifest>