为计数器应用程序重置或制作连续运动布局

Posted 2023-04-18

【中文标题】为计数器应用程序重置或制作连续运动布局

【英文标题】：Reset or make continuous Motion Layout for counter app

【发布时间】：2021-03-24 13:01:18

【问题描述】：

我正在使用运动布局构建一个基于计数器的 android 应用程序。我使用运动布局构建了这个场景，您可以在其中滑动珠子，它会为计数器添加 +1。在滑动时将珠子从一个地方移动到另一个地方的初始场景效果很好，但现在我不知道如何让珠子从它所在的初始位置开始，然后将它滑动到最终位置，然后再添加另一个 + 1 到柜台。

我希望这个过程是连续的，就好像你指望着真正的珠子一样。到目前为止，下面的代码效果很好。我需要帮助才能继续计数过程以及如何知道珠子何时到达其最终位置以添加 +1。

counter_fragment.xml

<?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_
    android:layout_
    app:layoutDescription="@xml/tasbeeh_fragment_scene"
    tools:context=".ui.tasbeeh.TasbeehFragment">

    <ImageView
        android:id="@+id/tasbihStart"
        android:layout_
        android:layout_
        android:src="@drawable/tasbeeh_start"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/singeBead"
        android:layout_
        android:layout_
        android:layout_marginStart="114dp"
        android:layout_marginTop="71dp"
        android:src="@drawable/singe_bead"
        app:layout_constraintStart_toStartOf="@+id/tasbihStart"
        app:layout_constraintTop_toTopOf="@+id/tasbihStart" />

    <ImageView
        android:id="@+id/tasbihFinal"
        android:layout_
        android:layout_
        android:src="@drawable/tasbeeh_final"
        android:visibility="gone"
        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>

counter_fragment_scene

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

    <ConstraintSet android:id="@+id/start">
        <Constraint android:id="@+id/singeBead"
            android:layout_
            android:layout_
            android:layout_marginStart="114dp"
            android:layout_marginTop="72dp"
            app:layout_constraintStart_toStartOf="@+id/tasbihStart"
            app:layout_constraintTop_toTopOf="@+id/tasbihStart"/>
        <Constraint
            android:id="@+id/tasbihStart"
            app:layout_constraintEnd_toEndOf="parent"
            android:layout_
            android:layout_
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toStartOf="parent"
             />
    </ConstraintSet>

    <ConstraintSet android:id="@+id/end">
        <Constraint android:id="@+id/singeBead"
            android:layout_
            android:layout_
            android:layout_marginStart="231dp"
            android:layout_marginTop="27dp"
            app:layout_constraintStart_toStartOf="@+id/tasbihStart"
            app:layout_constraintTop_toTopOf="@+id/tasbihStart"
            android:layout_marginLeft="232dp" />
        <Constraint
            android:layout_
            app:layout_constraintTop_toTopOf="parent"
            android:layout_
            android:id="@+id/imageView6"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
             />
        <Constraint
            android:id="@+id/tasbihStart"
            app:layout_constraintEnd_toEndOf="parent"
            android:layout_
            android:layout_
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toStartOf="parent"
             />
    </ConstraintSet>

    <Transition
        app:constraintSetStart="@+id/start"
        app:constraintSetEnd="@id/end">
        <OnSwipe
            app:dragDirection="dragRight"
            app:touchAnchorId="@+id/singeBead"/>
    </Transition>
</MotionScene>

输出： https://drive.google.com/file/d/1XR2nE5XZNB7pQHB5nXd7GIBwhRCPQIxs/view?usp=sharing

预期输出： https://drive.google.com/file/d/1XmcdupU-2Js-rfI_J7Uv_VqvH4Hi6mTk/view?usp=sharing

【问题讨论】：

你能上传你看到的视频/gif吗？因为它对我们更有意义。我们在这里缺少可绘制资产

@AgentP 添加了视频的链接。

珠子的最大数量是多少？

可以达到 100 个。

@AkramHussain 你能在 Github 上提供演示项目吗？谢谢

【参考方案1】：

你可以使用监听器：

  motionlayout?.setTransitionListener(object : MotionLayout.TransitionListener 
    override fun onTransitionCompleted(p0: MotionLayout?, currentId: Int) 
            if(currentId == R.id.end)
                 this.counter++
                // run another animation to put singeBead at startpoint   
            
            else if(currentId == R.id.start)
                this.counter-- 
               // run another animation to put singeBead at startpoint   
            

        
       

对于您的计数器，您可以在布局中添加一个 TextView（例如，使用 id="txt_counter"）并设置：

txt_counter.text = this.counter

这是柜台的解决方案。但是对于您发送的视频，我认为您需要 2 张单珠图像。一个在起点，一个在终点。每个都有一个过渡。一个用于 image_start - 就像您一样），另一个用于 image_end 用于 with

app:dragDirection="dragLeft"
app:touchAnchorId="+@id/image_end"

在您必须复制/粘贴您为具有不同 ID（如 start_endpicture 和 end_endpicture）的 image_end 所做的单个珠子（开始和结束约束）之后。你可以用下面的听众来听不同的过渡。你真的重新初始化了 ui 状态和计数器。