制作动画时如何将视图置于最前面？

Question

现在，我正在实现一项功能，当我单击该应用程序时，需要将应用程序中的任何ImageView设置为全屏动画。 当它击中后背时，将应用反向动画将ImageView恢复到原始位置。 ImageView可以位于视图树中的任何位置。 为了简化描述，请考虑以下布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/image1"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_gravity="center"
        android:src="@mipmap/ic_launcher"/>

    <ImageView
        android:id="@+id/image2"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_gravity="center"
        android:layout_marginTop="100dp"
        android:src="@mipmap/ic_launcher"/>

    <FrameLayout
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_marginTop="100dp"
        android:layout_gravity="center">

        <ImageView
            android:id="@+id/image3"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_gravity="center"
            android:src="@mipmap/ic_launcher"/>
    </FrameLayout>

</LinearLayout>

以及相应的kotlin文件：

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        findViewById<View>(R.id.image2).setOnClickListener {
            it.animate().scaleX(5.0f).scaleY(5.0f).setDuration(5000L).start()
        }

        findViewById<View>(R.id.image3).setOnClickListener {
            it.animate().scaleX(5.0f).scaleY(5.0f).setDuration(5000L).start()
        }
    }
}

在这里，当我们单击image2或image3时，我们希望它放大。 但是结果不是我们想要的。 对于image2，放大后将被image3覆盖。 对于image3，它将被简单地裁剪：

image3被image3覆盖

image3被剪切

暂时将ImageView放在前面的正确方法是什么？

Answer 1

试试这个对你有帮助

class BottomNavigationExample : AppCompatActivity() {

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_bottom_navigation_example)

    findViewById<View>(R.id.image2).setOnClickListener {
        it.animate().scaleX(5.0f).scaleY(5.0f).setDuration(5000L).start()
        setElevation(it)
    }

    findViewById<View>(R.id.image3).setOnClickListener {
        it.animate().scaleX(5.0f).scaleY(5.0f).setDuration(5000L).start()
        setElevation(it)
    }

}

fun setElevation(view: View) {
    ViewCompat.setElevation(image1, 0f);    
    ViewCompat.setElevation(image2, 0f);
    ViewCompat.setElevation(image3, 0f);
    ViewCompat.setElevation(view, 5f);

}

}

Answer 2

您可以使用类似这样的方法。

class MainActivity : FragmentActivity() {


private var currentAnimator: Animator? = null
private var shortAnimationDuration: Int = 0

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)

    val thumbView: View = findViewById(R.id.thumb_button_1)
    val thumbView2: View = findViewById(R.id.thumb_button_2)

    thumbView.setOnClickListener { zoomImageFromThumb(thumb_button_1, R.drawable.image1) }
    thumbView2.setOnClickListener { zoomImageFromThumb(thumb_button_2, R.drawable.girls2) }


    shortAnimationDuration = resources.getInteger(android.R.integer.config_shortAnimTime)

}

private fun zoomImageFromThumb(thumbView: View, imageResId: Int) {
    currentAnimator?.cancel()

    val expandedImageView: ImageView = findViewById(R.id.expanded_image)
    expandedImageView.setImageResource(imageResId)

    val startBoundsInt = Rect()
    val finalBoundsInt = Rect()
    val globalOffset = Point()

    thumbView.getGlobalVisibleRect(startBoundsInt)
    findViewById<View>(R.id.container)
        .getGlobalVisibleRect(finalBoundsInt, globalOffset)
    startBoundsInt.offset(-globalOffset.x, -globalOffset.y)
    finalBoundsInt.offset(-globalOffset.x, -globalOffset.y)

    val startBounds = RectF(startBoundsInt)
    val finalBounds = RectF(finalBoundsInt)

    val startScale: Float
    if ((finalBounds.width() / finalBounds.height() > startBounds.width() / startBounds.height())) {
        // Extend start bounds horizontally
        startScale = startBounds.height() / finalBounds.height()
        val startWidth: Float = startScale * finalBounds.width()
        val deltaWidth: Float = (startWidth - startBounds.width()) / 2
        startBounds.left -= deltaWidth.toInt()
        startBounds.right += deltaWidth.toInt()
    } else {
        // Extend start bounds vertically
        startScale = startBounds.width() / finalBounds.width()
        val startHeight: Float = startScale * finalBounds.height()
        val deltaHeight: Float = (startHeight - startBounds.height()) / 2f
        startBounds.top -= deltaHeight.toInt()
        startBounds.bottom += deltaHeight.toInt()
    }

    thumbView.alpha = 0f
    expandedImageView.visibility = View.VISIBLE

    expandedImageView.pivotX = 0f
    expandedImageView.pivotY = 0f

    currentAnimator = AnimatorSet().apply {
        play(
            ObjectAnimator.ofFloat(
                expandedImageView,
                View.X,
                startBounds.left,
                finalBounds.left
            )
        ).apply {
            with(
                ObjectAnimator.ofFloat(
                    expandedImageView,
                    View.Y,
                    startBounds.top,
                    finalBounds.top
                )
            )
            with(ObjectAnimator.ofFloat(expandedImageView, View.SCALE_X, startScale, 1f))
            with(ObjectAnimator.ofFloat(expandedImageView, View.SCALE_Y, startScale, 1f))
        }
        duration = shortAnimationDuration.toLong()
        interpolator = DecelerateInterpolator()
        addListener(object : AnimatorListenerAdapter() {

            override fun onAnimationEnd(animation: Animator) {
                currentAnimator = null
            }

            override fun onAnimationCancel(animation: Animator) {
                currentAnimator = null
            }
        })
        start()
    }

    expandedImageView.setOnClickListener {
        currentAnimator?.cancel()


        currentAnimator = AnimatorSet().apply {
            play(ObjectAnimator.ofFloat(expandedImageView, View.X, startBounds.left)).apply {
                with(ObjectAnimator.ofFloat(expandedImageView, View.Y, startBounds.top))
                with(ObjectAnimator.ofFloat(expandedImageView, View.SCALE_X, startScale))
                with(ObjectAnimator.ofFloat(expandedImageView, View.SCALE_Y, startScale))
            }
            duration = shortAnimationDuration.toLong()
            interpolator = DecelerateInterpolator()
            addListener(object : AnimatorListenerAdapter() {

                override fun onAnimationEnd(animation: Animator) {
                    thumbView.alpha = 1f
                    expandedImageView.visibility = View.GONE
                    currentAnimator = null
                }

                override fun onAnimationCancel(animation: Animator) {
                    thumbView.alpha = 1f
                    expandedImageView.visibility = View.GONE
                    currentAnimator = null
                }
            })
            start()
        }
    }
}

}

布局

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:gravity="center"
    android:orientation="vertical"
    android:padding="16dp">

    <ImageButton
        android:id="@+id/thumb_button_1"
        android:layout_width="100dp"
        android:layout_height="75dp"
        android:layout_marginEnd="1dp"
        android:layout_marginRight="1dp"
        android:background="@color/colorWhite"
        android:contentDescription="@null"
        android:scaleType="centerInside"
        android:src="@drawable/image1" />

    <ImageButton
        android:id="@+id/thumb_button_2"
        android:layout_width="100dp"
        android:layout_height="75dp"
        android:layout_marginTop="10dp"
        android:layout_marginEnd="1dp"
        android:layout_marginRight="1dp"
        android:background="@color/colorWhite"
        android:contentDescription="@null"
        android:scaleType="centerInside"
        android:src="@drawable/girls2" />


</LinearLayout>


<ImageView
    android:id="@+id/expanded_image"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:contentDescription="@null"
    android:visibility="invisible" />