ImageView ScaleType and Transition

Posted on | Edited on | Comments: | Views:

ImageView 是很常用的控件，记录下ScaleType和Transition animation

ImageView ScaleType

image-20190827232228863

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:id="@+id/faceLayout"
        android:layout_height="match_parent">

    <Button
            android:id="@+id/button2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="Button"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
// 这三个属性尽量搭配一起使用，除了center和matrix，其他效果都一致，显示正常不拉伸的图片。
android:layout_width="0dp"
android:layout_height="wrap_content"
android:adjustViewBounds="true"

ImageView Transition

https://medium.com/@andkulikov/animate-all-the-things-transitions-in-android-914af5477d50

1，改变图片属性

1
2
3
4
5
6
7
8
9
10
val animator = ValueAnimator.ofFloat(0f, 1f)
        animator.duration = Constants.ThrottleDuration.NORMAL
        animator.addUpdateListener { animation ->
            val animatorValue = animation.animatedValue as Float
            videoView.translationX = 50 * animatorValue
            videoView.translationY = 100 * animatorValue
            videoView.scaleX = 1f - 0.8f * animatorValue
            videoView.scaleY = 1f - 0.5f * animatorValue
        }
        animator.start()

2，利用transition改变layoutParams

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
val marginHorizontal = UtilResource.getDimensionPixelSize(R.dimen.margin_horizontal)
        val container = mRoot.transitionLayout
        val transitionSet = TransitionSet()
            .addTransition(ChangeBounds())
            .addTransition(ChangeImageTransform()).addListener(object : TransitionListenerAdapter(){
                override fun onTransitionStart(transition: Transition) {
                    super.onTransitionStart(transition)

                    UtilLog.d(sTAG, "------full start ")
                }

                override fun onTransitionEnd(transition: Transition) {
                    super.onTransitionEnd(transition)
                    UtilLog.d(sTAG, "------full end")
                }
            })

        TransitionManager.beginDelayedTransition(container, transitionSet)
        val params = videoView.layoutParams as ViewGroup.MarginLayoutParams
        UtilLog.d(sTAG, "------full $isScale $params")
        params.height = if (isScale) ViewGroup.LayoutParams.MATCH_PARENT else ViewGroup.LayoutParams.WRAP_CONTENT
        if (isScale) {
            params.setMargins(0, 0, 0, 0)
        } else {
            params.setMargins(marginHorizontal, marginHorizontal, marginHorizontal, 0)
        }
        videoView.layoutParams = params
        (videoView as ImageView).scaleType =
            if (isScale) ImageView.ScaleType.CENTER_CROP else ImageView.ScaleType.FIT_START