标签: android-motionlayout

任何人都可以帮助我以正确的方式更改 中TextView的文本MotionLayout......这就是我所做的。

我测试了MotionLayout一个简单的应用程序......我在到达部分运动教程约CustomAttributes

使用它们，您可以更改BackgroundColora 的View，也可以textColor使用customColorValue

在这种情况下，您可以看到它在开始和结束场景中更改这些值非常有效：

        <CustomAttribute
            motion:attributeName="backgroundColor"
            motion:customColorValue="#004A6D" />

        <CustomAttribute
            motion:attributeName="textColor"
            motion:customColorValue="#000000" />

另外我注意到有一个customStringValue所以我想我可以将TextView文本更改为“BEFORE”->“AFTER”。但是当我尝试CustomAttribute在应用程序崩溃时设置它时。

在开始场景中：

<CustomAttribute
            motion:attributeName="Text"
            motion:customStringValue="BEFORE" />

在最后的场景中：

        <CustomAttribute
            motion:attributeName="Text"
            motion:customStringValue="AFTER" />

在 MotionScene 之外，textView文本是TEST：

• 当我CustomAttribute为结束场景设置only 时...文本从初始值TEST更改为结束AFTER值......所以它部分工作但永远不会返回到初始状态。
• 当没有设置初始文本时也会发生这种情况TextView。它部分工作。

所以......任何人都可以帮我用正确的方式来改变TextView在的文本MotionLayout。

我有motionLayout动画transition：

<Transition
        app:constraintSetEnd="@+id/end"
        app:constraintSetStart="@+id/start">
        <OnSwipe
            app:dragDirection="dragUp"
            app:dragScale="0.1"
            app:touchAnchorId="@id/my_scrollview" />
</Transition>

但是动画对我来说太快了。我想慢下来。我尝试设置，dragScale=0.1, maxAcceleration=1, maxVelocity=1但它不会影响动画速度。我怎样才能让它慢下来？

更新：问题已在较新版本中修复，constraintlayout并且似乎正在处理中"2.0.4"

我创建了一个简单的MotionLayout，它几乎与协调器布局相似（动画略有不同）。
这里是这样的：

打开键盘后，在内容区域中使用（几个）EditText视图将中断MotionLayout动画。动画现在有延迟，状态不正确，UI开始冻结。任何想法如何解决这个问题？ 以gif格式链接到错误

使用的版本：

com.google.android.material:material:1.2.0-alpha01
androidx.constraintlayout:constraintlayout:2.0.0-beta3

我也可以在一个小示例应用程序中重现该行为

示例layout.xml：

<androidx.constraintlayout.motion.widget.MotionLayout 
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"
app:layoutDescription="@xml/animation"
tools:showPaths="true">

<androidx.appcompat.widget.Toolbar
    android:id="@+id/customtoolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<com.google.android.material.textview.MaterialTextView
    android:id="@+id/title"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="32dp"
    android:layout_marginBottom="48dp"
    android:text="title"
    app:layout_constraintBottom_toTopOf="@+id/formLayout"
    app:layout_constraintStart_toStartOf="parent" />

<ImageView
    android:id="@+id/image"
    android:layout_width="200dp"
    android:background="#ff00ff"
    android:layout_height="200dp"
    android:scaleType="centerCrop"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:srcCompat="@drawable/ic_home_black_24dp" />


<androidx.core.widget.NestedScrollView
    android:id="@+id/formLayout"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/image">

    <LinearLayout
        android:id="@+id/formLayoutContainer"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/container1"
            android:layout_width="match_parent"
            android:layout_height="200dp">

            <EditText
                android:id="@+id/container1EditText"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="EditText"
                android:importantForAutofill="no"
                android:inputType="text"
                android:lines="1" />
        </com.google.android.material.textfield.TextInputLayout>

        <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/container2"
            android:layout_width="match_parent"
            android:layout_height="200dp">

            <EditText
                android:id="@+id/container2EditText"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" …

我的主布局中有一个用于根容器的motionLayout。在里面，还有其他的景色。其中之一是 frameLayout，包含一个片段。该片段是一个页面，由一个 NestedScrollView 等组成... MotionLayout 具有仅用于水平滑动的 OnSwipe，而 NestedScrollView 应该只能垂直滚动。我不得不扩展 MotionLayout onInterceptTouchEvent 方法（查看下面的代码），并且只将那些非水平触摸事件传递给孩子们。到目前为止非常简单，并且有效。

问题是，当我开始在吸收某种触摸事件（如按钮或 NestedScrollView）的视图上滑动时，它会混淆 motionLayout 转换并立即跳过帧，因此锚点与我的鼠标位置相对应。过渡几乎完全在一个帧中进行，并扼杀了 UI 体验。我的猜测是，如果 motionLayout 将 X1 和 X2 用于转换，则 X1 值是导致问题的值，其值来自不应该出现的位置。但是当然，当我开始在触摸吸收元素上滑动时。

这是我的 customMotionLayout 的 OnInterceptTouchEvent 的覆盖方法：

 override fun onInterceptTouchEvent(event: MotionEvent): Boolean {
        super.onInterceptTouchEvent(event)

        return when (event.actionMasked) {
            MotionEvent.ACTION_DOWN -> {
                previousX = event.x.toInt()
                previousY = event.y.toInt()
                mIsScrolling = false
                false
            }
            MotionEvent.ACTION_CANCEL, MotionEvent.ACTION_UP -> {
                mIsScrolling = false
                false
            }
            MotionEvent.ACTION_MOVE -> {
                if (mIsScrolling) true
                 else {
                    var xMotion: Int …

我有一个这个layoutDescription的动画布局: app:layoutDescription="@xml/scene"

scene.xml

<MotionScene
    xmlns:motion="http://schemas.android.com/apk/res-auto">

    <Transition
        motion:constraintSetStart="@layout/view_home_card_start"
        motion:constraintSetEnd="@layout/view_home_card_end"
        motion:duration="1000">
        <OnSwipe
            motion:touchAnchorId="@+id/button"
            motion:touchAnchorSide="left"
            motion:dragDirection="dragLeft" />
    </Transition>

</MotionScene>

我认为xml view_home_card_start和view_home_card_end无关紧要.

如何以编程方式调用此动画？

我正在尝试CollapsingToolbar使用MotionLayout.

我已经成功地将所有内容动画化为CollapsingToolbar具有高度灵活性的行为，这意味着我可以轻松创建出色的动画而无需编写大量代码。

我的问题是无论我尝试过什么；我无法TextView以自然的方式调整标题的大小。

我目前使用的ConstraintLayout版本2.0.0-beta3

试验#1

CustomAttribute 的 textSize

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

    ...

    <Constraint
        android:id="@+id/dish_fragment_title_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="20dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/dish_fragment_cover_image">

        <CustomAttribute
            app:attributeName="textSize"
            app:customFloatValue="24" />

    </Constraint>

    ...

</ConstraintSet>

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

    ...

    <Constraint
        android:id="@id/dish_fragment_title_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="12dp"
        app:layout_constraintBottom_toBottomOf="@+id/dish_fragment_navigation_icon"
        app:layout_constraintStart_toEndOf="@+id/dish_fragment_navigation_icon"
        app:layout_constraintTop_toTopOf="@id/dish_fragment_navigation_icon">

        <CustomAttribute
            app:attributeName="textSize"
            app:customFloatValue="16" />

    </Constraint>

    ...

</ConstraintSet>

结果

上述解决方案有效，但文本在移动时闪烁，这意味着动画不流畅。

试验#2

scaleX & scaleY

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

    ...

    <Constraint
        android:id="@+id/dish_fragment_title_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="20dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/dish_fragment_cover_image"
        android:scaleX="1"
        android:scaleY="1"/>

    ...

</ConstraintSet>

<ConstraintSet android:id="@+id/dish_fragment_collapsed_set"> …

我需要在我的应用程序中实现这一点。最好查看视频示例，因为我无法用文字准确解释：

拖动动作：https : //streamable.com/i0aen

点击动作：https : //streamable.com/7eahj

我能够独立地实现它们。但我不能一起做。我使用的是单个运动场景文件。我可以注释掉一个过渡，而另一个有效，但是如果我离开它们，布局根本不会表现，我猜一个过渡会捕获另一个并停止。有没有办法在同一个视图上实现这两个事件？这是motion_scene的代码：

<MotionScene xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:motion="http://schemas.android.com/apk/res-auto">
<!--    <Transition-->
<!--        android:id="@+id/dragTransition"-->
<!--        motion:constraintSetEnd="@+id/endDrag"-->
<!--        motion:constraintSetStart="@+id/startDrag"-->
<!--        motion:duration="1000">-->
<!--        <OnSwipe-->
<!--            motion:dragDirection="dragDown"-->
<!--            motion:touchAnchorId="@id/menuBtnFrFr"-->
<!--            motion:touchAnchorSide="top" />-->
<!--    </Transition>-->

    <Transition
        android:id="@+id/clickTransition"
        motion:constraintSetEnd="@+id/endClick"
        motion:constraintSetStart="@+id/startClick"
        motion:duration="300">
        <OnClick motion:targetId="@id/menuBtnFrFr" />
    </Transition>

    <ConstraintSet android:id="@+id/startDrag">
        <Constraint
            android:id="@+id/menuBtnFrFr"
            android:layout_width="250dp"
            android:layout_height="250dp"
            android:layout_marginLeft="75dp"
            android:layout_marginRight="75dp"
            android:background="#00000000"
            android:src="@drawable/logo"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintDimensionRatio="1:1"
            motion:layout_constraintEnd_toEndOf="parent"
            motion:layout_constraintStart_toStartOf="parent"
            motion:layout_constraintTop_toTopOf="parent">
            <CustomAttribute
                motion:attributeName="Saturation"
                motion:customFloatValue="1" />
        </Constraint>
        <Constraint
            android:id="@+id/bgCircleOutside"
            android:layout_width="350dp"
            android:layout_height="350dp"
            android:layout_below="@id/top_label"
            android:layout_gravity="center"
            android:layout_margin="15dp"
            android:background="@drawable/circle_dark"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintDimensionRatio="1:1"
            motion:layout_constraintEnd_toEndOf="parent"
            motion:layout_constraintStart_toStartOf="parent"
            motion:layout_constraintTop_toTopOf="parent">
            <CustomAttribute
                motion:attributeName="Saturation"
                motion:customFloatValue="1" /> …

我正在使用 MotionLayout 构建包含 2 个部分的 UI - 顶部有一些视图，底部有 SwipeRefresh 和 RecyclerView 内部。另外，我有一个 MotionLayout 手势 - SwipeRefresh 在向上滑动时向上移动到顶视图上方。问题是当我将 RecyclerView 滚动到底部（顶视图“折叠”）然后到顶部时 - MotionLayout 开始立即反转我的过渡（“展开”） - 当 RecyclerView 没有完全滚动到顶部而不是滚动 RecyclerView第一的。当我的 SwipeRefresh 正在更新或刷新时，它可以正常工作。禁用它会导致刷新布局进度条在没有动画的情况下消失 - 这不是一个好的解决方案。任何解决方法？

布局 xml 要点

布局场景要点

我正在尝试实现这个播放器动画

我还希望能够在折叠和展开时滑动歌曲。所以我们的想法是将 aMotionLayout与 a一起使用RecyclerView，并且还有RecyclerViewbe a 的每个项目MotionLayout。通过这种方式，我可以在 上应用展开动画，RecyclerView并在其子项上应用过渡。

如所附视频所示，过渡本身运行良好。但是让阻力作用于它RecyclerView本身并没有。仅当触摸从 外部开始时才会检测到拖动，RecyclerView如视频中突出显示的触摸所示，其中触摸从 下方开始RecyclerView。

如果在 上开始触摸RecyclerView，则歌曲的滚动会消耗该事件。即使禁用附件LinearLayoutManager中的滚动也不起作用。我还尝试覆盖onTouch以RecyclerView使其始终返回false并且不消耗任何触摸事件（理论上），但这也不起作用。

该项目可以在这里找到https://github.com/vlatkozelka/PlayerAnimation2 它并不意味着成为一个生产就绪的应用程序，只是一个测试游乐场。

这是相关的代码

布局：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.motion.widget.MotionLayout 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:background="@color/colorPrimary"
    app:layoutDescription="@xml/player_scene"
    tools:context=".MainActivity"
    android:id="@+id/layout_main"
    >

    <FrameLayout
        android:id="@+id/layout_player"
        android:layout_width="match_parent"
        android:layout_height="@dimen/mini_player_height"
        android:elevation="2dp"
        app:layout_constraintBottom_toTopOf="@id/layout_navigation"
        app:layout_constraintStart_toStartOf="parent"
        android:background="@color/dark_grey"
        android:focusable="true"
        android:clickable="true"
        >

        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/recycler_songs"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:focusable="false"
            android:clickable="false"
            />
    </FrameLayout>


    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/layout_navigation"
        android:layout_width="match_parent" …

我的代码

Activity

class SwipeHandlerActivity : AppCompatActivity(R.layout.activity_swipe_handler){
    override fun onSaveInstanceState(outState: Bundle) {
        super.onSaveInstanceState(outState)
        outState.putBundle("Foo", findViewById<MotionLayout>(R.id.the_motion_layout).transitionState)
    }

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        savedInstanceState?.getBundle("Foo")?.let(findViewById<MotionLayout>(R.id.the_motion_layout)::setTransitionState)
    }
}

Layout

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.motion.widget.MotionLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layoutDescription="@xml/activity_swipe_handler_scene"
    android:id="@+id/the_motion_layout"
    app:motionDebug="SHOW_ALL">

    <View
        android:id="@+id/touchAnchorView"
        android:background="#8309AC"
        android:layout_width="64dp"
        android:layout_height="64dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

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

Scene

<?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="1000">

        <OnSwipe
            motion:touchAnchorId="@id/imageView"
            motion:dragDirection="dragUp"
            motion:touchAnchorSide="top" />
    </Transition>

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

    <ConstraintSet android:id="@+id/end">
        <Constraint
            android:layout_height="250dp"
            motion:layout_constraintStart_toStartOf="@+id/textView2"
            motion:layout_constraintEnd_toEndOf="@+id/textView2"
            android:layout_width="250dp"
            android:id="@+id/imageView"
            motion:layout_constraintBottom_toTopOf="@+id/textView2"
            android:layout_marginBottom="68dp" />
    </ConstraintSet>
</MotionScene>

观察到的行为 …