android - 为计数器应用程序重置或制作连续运动布局
问题描述
我正在使用运动布局构建一个基于计数器的 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_width="match_parent"
android:layout_height="match_parent"
app:layoutDescription="@xml/tasbeeh_fragment_scene"
tools:context=".ui.tasbeeh.TasbeehFragment">
<ImageView
android:id="@+id/tasbihStart"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
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_width="45dp"
android:layout_height="45dp"
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_width="wrap_content"
android:layout_height="wrap_content"
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_width="45dp"
android:layout_height="45dp"
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_width="wrap_content"
android:layout_height="wrap_content"
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_width="45dp"
android:layout_height="45dp"
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_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
android:layout_width="wrap_content"
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_width="wrap_content"
android:layout_height="wrap_content"
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
解决方案
您可以使用监听器:
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 状态和计数器。
推荐阅读
- c++ - 关于如何处理vulkan队列族的问题
- python-3.x - 使用 selenium python 3.4 在 redhat 6.8 上缩小 firefox 52
- sql - 将未来日期加入到只有当前日期的表中
- c++ - 使用提供的运行时如何在本地调试 AWS Lambda?
- r - Matlabs最小二乘估计通过\用于R中的欠定系统
- node.js - 如何解决 RangeError ERR_INVALID_ADDRESS_FAMILY:地址族无效
- python - 使用 python 修剪来自 Kafka 主题的返回值
- ios - UICollectionViewLayout.layoutAttributesForElementsInRect 的行为
- python - 根据列表替换pandas df中值的最佳方法
- nearprotocol - 未找到 Account_locked_balance 导入