Lottie动画库的Z轴排序问题

Question

我目前正在尝试使用AirBnB的Lottie库来开发Android应用，但是我在使用LottieAnimationView时遇到了层次顺序(Z ordering)的问题。无论我把LottieAnimationView放在RelativeLayout的顶部还是其他位置，它总是显示在布局中所有其他元素的上方，例如：

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="@dimen/spacing_lrg"
    tools:context="com.myapp.SplashActivity">

    <com.airbnb.lottie.LottieAnimationView
        android:id="@+id/animation_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:lottie_fileName="test.json"/>

   <! -- Other Elements that should appear on top of the background animation -->

</RelativeLayout>

我还尝试将LottieAnimationView的高度设置为0，但没有成功解决这个问题。有人知道如何解决这个问题吗？或者这只是该库的限制？如果是限制，是什么原因导致的呢？

可能在库的更新中已经修复了此问题，因为这个问题发生在一个非常早期的库版本中。

- Submersed

Answer 1

我无法在包括RelativeLayout在内的任何布局中重现您所提到的问题。也许升级到最新版本可以解决这个问题。最新版本是3.4.1：implementation 'com.airbnb.android:lottie:3.4.1'。如果您已经使用了最新版本，请分享您的完整代码，以便我们进一步调查。

- Sina

Answer 2

这很奇怪。 我建议您将整个布局包装在帧布局中，并将Lottie放在其第一个子项，第二个子项为其余的部件树。我还没有尝试过这个方法，但应该可以解决问题。

另外，您是否尝试过调整高度？

- Jaswant Singh

Answer 3

我建议您使用约束布局，我就是这样尝试的:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">


<com.airbnb.lottie.LottieAnimationView
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    android:id="@+id/animationLoading"
    android:layout_width="200dp"
    android:layout_height="200dp"
    app:lottie_rawRes="@raw/thermosun"
    app:lottie_loop="true"
    app:lottie_autoPlay="true"/>

<Button
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    android:layout_margin="@dimen/app_default_margin_16dp"
    android:text="My button"/>
</androidx.constraintlayout.widget.ConstraintLayout>

CustomTextView类

class CustomTextView : AppCompatTextView {

constructor(context: Context) : super(context) {
    init(context)
}

constructor(context: Context, attrs: AttributeSet) : super(context, attrs) {
    init(context, attrs)
}

constructor(context: Context, attrs: AttributeSet, defStyle: Int) : super(
    context,
    attrs,
    defStyle
) {
    init(context, attrs)
}

private fun init(context: Context, attrs: AttributeSet? = null) {
    if (!isInEditMode) {
        @Suppress("Recycle")
        context.obtainStyledAttributes(attrs, R.styleable.AppCompatTextView).use {
           setUpCharacterSpacing(
                it.getFloat(R.styleable.CustomTextView_characterSpacing, 0.0f)
            )
            setUpLineSpacing(
                it.getDimension(R.styleable.CustomTextView_lineSpacing, 0f)
            )
        }
        paintFlags = paintFlags or Paint.SUBPIXEL_TEXT_FLAG
    }
}

private fun setUpLineSpacing(lineSpacing: Float) {
    if (lineSpacing != 0f) {
        setLineSpacing(lineSpacing - textSize, 1f)
    }
}
}

该项目的Constraintlayout和CustomTextView的XML

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">

<ImageView
    android:id="@+id/closeIcon"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    android:src="@drawable/ic_go_to_location"
    android:layout_margin="@dimen/dimen_16dp"/>

<com.airbnb.lottie.LottieAnimationView
    app:layout_constraintTop_toBottomOf="@id/closeIcon"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    android:id="@+id/animationLoading"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintDimensionRatio="750:1080"
    app:lottie_rawRes="@raw/thermosun"
    app:lottie_loop="true"
    app:lottie_autoPlay="true"/>

<com.shadows.howhotismycity.utils.CustomTextView
    android:id="@+id/tvUserCounter"
    android:layout_width="@dimen/dimen_30dp"
    android:layout_height="wrap_content"
    android:text="10"
    android:textColor="@android:color/black"
    android:textSize="24sp"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toBottomOf="@id/closeIcon"/>
<com.shadows.howhotismycity.utils.CustomTextView
    android:id="@+id/tvSampleText"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="Theres some text here"
    android:textColor="@android:color/black"
    android:textSize="24sp"
    android:gravity="center"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toBottomOf="@id/tvUserCounter"
    app:layout_constraintBottom_toBottomOf="parent"
    android:layout_margin="@dimen/dimen_16dp"/>
</androidx.constraintlayout.widget.ConstraintLayout>

库依赖

//lottie
implementation 'com.airbnb.android:lottie:3.4.0'

在 Android 10 上测试动画顶部的文本视图的结果

- Mateo Hervas

---

我已经在使用ConstraintLayout，但它并没有起作用。 - Etienne Lawlor

你能发布你的约束布局代码吗？这样我们可以更好地帮助你。 - Mateo Hervas

我正在使用 Lottie 库的 3.4.0 版本。我已更新 Gist，包括 CustomTextView。 - Etienne Lawlor

我刚刚更新了答案，复制了你的问题并在动画顶部放置了一个TextView。希望能有所帮助！ - Mateo Hervas

让我们在聊天中继续此讨论。 - Mateo Hervas

Answer 4

尝试通过代码加载lottie文件名。当我通过xml加载文件时，遇到了一些问题。

你可以使用一个Linear用于其他视图，并调用linearlayout.bringToFront()。

- Pabel