子项折叠后 MotionLayout 中的不需要的间隙答案

【问题标题】：Unwanted gap in MotionLayout after child-item collapse子项折叠后 MotionLayout 中的不需要的间隙
【发布时间】：2022-01-24 11:30:41
【问题描述】：

我现在正在研究如何使用 MotionLayout，并且在我的 TextView（或被其他框架包裹的 TextView）折叠后，每个项目都面临着父框架底部不需要的白色间隙的奇怪问题。这个差距可能更大或更小 - 我无法检测到相似之处。无论如何，我试图删除所有填充和边距 - 它没有用。

前几个项目是由 RecyclerView 或 ViewPager2 加载的，我认为这是主要问题。所以我决定制作一个屏幕上只有 2 个项目的简单项目并进行一些研究。我又失败了。

我想我失去了一些基本规则，但不能谷歌它或谷歌任何与我的问题类似的东西。希望你能帮助我。

外观如何：gif-image

活动布局：

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView
    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="wrap_content"
    tools:context=".MainActivity"
    android:layout_margin="16dp"
    app:cardCornerRadius="20dp"
    android:id="@+id/cardView">

    <androidx.constraintlayout.motion.widget.MotionLayout
        android:id="@+id/constraintLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layoutDescription="@xml/activity_main_xml_constraintlayout_scene">

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:background="#072776"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/textView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:alpha="0"
            android:background="#fdb766"
            android:text="@string/loremipsum"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

    </androidx.constraintlayout.motion.widget.MotionLayout>

</androidx.cardview.widget.CardView>

运动布局：

<?xml version="1.0" encoding="utf-8"?>
<MotionScene 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:motion="http://schemas.android.com/apk/res-auto">

    <Transition
        motion:constraintSetEnd="@+id/end"
        motion:constraintSetStart="@id/start"
        motion:duration="800">

        <OnClick motion:targetId="@+id/constraintLayout"/>

    </Transition>

    <ConstraintSet android:id="@+id/start">
    </ConstraintSet>

    <ConstraintSet android:id="@+id/end">

        <Constraint android:id="@+id/textView"
            android:layout_height="match_parent"
            motion:layout_constraintTop_toBottomOf="@+id/imageView"
            motion:layout_constraintStart_toStartOf="parent"
            motion:layout_constraintEnd_toEndOf="parent"
            android:alpha="1"/>

    </ConstraintSet>
</MotionScene>

【问题讨论】：

标签： android css xml android-motionlayout

【解决方案1】：

白色可能是通过的卡片。您可以通过设置 MotionLayout 和 CardView 的颜色来测试它是什么。通常发生的情况是在 MotionLayout 折叠之前 Text 正在消失。

陶醉下面的cardView。

有很多方法可以获得您正在寻找的动画。我会做以下之一：

将 MoionLayout 背景设置为 #072776
使 ImageView 从 200dp 变为 match_parent
设置 CardView 颜色

【讨论】：