Question

背景

当您接到电话时，我正在做一个上下滑动FAB的POC，类似于它在“电话”应用程序中的工作方式：

问题

虽然我处理了触摸事件（允许上下移动fab），并在停止触摸时向后动画，但是我还需要更改FAB的背景颜色以及FAB图标的旋转和颜色。

我发现的东西

我只找到了动画FAB背景色及其图标旋转的解决方案：

但是，我没有找到如何更改图标本身的颜色。

但是对于我而言，这不能仅使用动画来完成，因为FAB的Y坐标基于触摸而改变，因此这些值需要立即进行调整，而无需使用动画。

这是我当前的代码：

activity_main.xml

<FrameLayout
    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:clipChildren="false" android:clipToPadding="false"
    tools:context=".MainActivity">

    <FrameLayout
        android:id="@+id/fabTouchingAreaView" android:layout_width="match_parent" android:layout_height="wrap_content"
        android:layout_gravity="bottom|center_horizontal" android:layout_margin="@dimen/fab_margin"
        android:clipChildren="false" android:clipToPadding="false" tools:background="#33ff0000">

        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/fab" android:layout_width="match_parent" android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal|bottom" android:layout_marginBottom="20dp"
            android:layout_marginTop="50dp" android:tint="#0f0" app:backgroundTint="#fff"
            app:srcCompat="@android:drawable/stat_sys_phone_call"/>
    </FrameLayout>
</FrameLayout>

MainActivity.kt

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        val yToResetTo = (fab.layoutParams as ViewGroup.MarginLayoutParams).topMargin.toFloat()
        val argbEvaluator = ArgbEvaluator()
        fabTouchingAreaView.setOnTouchListener(object : View.OnTouchListener {
            val WHITE_COLOR = 0xffffffff.toInt()
            val RED_COLOR = 0xffff0000.toInt()
            val GREEN_COLOR = 0xff00ff00.toInt()
            var startTouchY = Float.MIN_VALUE
            var startViewY = Float.MIN_VALUE
            var maxToGoTo = Float.MIN_VALUE
            var animator: ObjectAnimator? = null

            fun updateView() {
                val newY = fab.y
                val percentDown = if (newY <= yToResetTo) 0.0f else ((newY - yToResetTo) / (maxToGoTo - yToResetTo))
                val percentUp = if (newY >= yToResetTo) 0.0f else (1.0f - (newY / yToResetTo))
                // need code here to update content
            }

            override fun onTouch(view: View, motionEvent: MotionEvent): Boolean {
                when (motionEvent.action) {
                    MotionEvent.ACTION_DOWN -> {
                        if (animator != null) {
                            animator!!.cancel()
                            animator = null
                        }
                        startTouchY = motionEvent.rawY
                        startViewY = fab.y
                        maxToGoTo = fabTouchingAreaView.height.toFloat() - fab.height
                    }
                    MotionEvent.ACTION_UP -> {
                        if (animator == null) {
                            animator = ObjectAnimator.ofFloat(fab, View.Y, yToResetTo)
                            //TODO use normal animate() when minSdk is at least 19
                            animator!!.addUpdateListener { animation -> updateView() }
                            animator!!.start()
                        }
                    }
                    MotionEvent.ACTION_MOVE -> {
                        val newY = Math.min(Math.max(startViewY + (motionEvent.rawY - startTouchY), 0.0f), maxToGoTo)
                        fab.y = newY
                        updateView()
                    }
                }
                return true
            }
        })
    }
}

这是它如何工作的演示：

一种可能的解决方法是拥有多个视图而不是一个FAB，我选择了如何在它们之间建立动画，但这只是一种解决方法...

问题

如何在运行时（类似于Phone应用程序）更改FAB的背景颜色，而仅使用我得到的百分比来更改？
如何在运行时（类似于Phone应用）更改FAB图标的旋转和颜色，仅使用我获得的百分比即可？

编辑：看到接受的答案，下一个代码将执行我在updateView函数中编写的代码：

                val fabBackgroundColor = when {
                    percentDown > 0f -> argbEvaluator.evaluate(percentDown, WHITE_COLOR, RED_COLOR) as Int
                    percentUp > 0f -> argbEvaluator.evaluate(percentUp, WHITE_COLOR, GREEN_COLOR) as Int
                    else -> WHITE_COLOR
                }
                val fabIconColor = when {
                    percentDown > 0f -> argbEvaluator.evaluate(percentDown, GREEN_COLOR, WHITE_COLOR) as Int
                    percentUp > 0f -> argbEvaluator.evaluate(percentUp, GREEN_COLOR, WHITE_COLOR) as Int
                    else -> GREEN_COLOR
                }
                fab.setColorFilter(fabIconColor)
                fab.backgroundTintList = ColorStateList.valueOf(fabBackgroundColor)
                fab.rotation = percentDown * 135
                Log.d("appLog", "y:" + fab.y + " percentDown:$percentDown percentUp:$percentUp " +
                        "fabBackgroundColor:${Integer.toHexString(fabBackgroundColor)} fabIconColor:${Integer.toHexString(fabIconColor)}")

Answer 1

如何在运行时更改FAB的背景颜色，类似到电话应用程序中，只需使用我获得的距离的百分比即可？

您可以使用ArgbEvaluator计算当前位置的颜色，并将evaluate的返回值设置为新的Background。

如何在运行时更改FAB图标的旋转，与“电话”应用类似，只使用了我有吗？

如上所述，使用Interpolator来计算旋转，并使用View.setRotation来旋转

如何在运行时直接（不使用动画）设置FAB图标的旋转，颜色和FAB背景？

背景

问题

我发现的东西

问题

1 个答案: