如何创建带有动画背景的自定义开关？

Question

我需要一个看起来像这样的开关按钮：

点击销售按钮后，绿色背景随动画一起移动，颜色随动画而变化。

您是否建议任何满足我需求的图书馆？

please take A look at the video of the desired animation

Answer 1

这是我做的一个示例动画，它并不完美，需要进行一些更改和修饰，这只是为了说明操作方法。

test.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
        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:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">


    <View
            android:layout_width="0dp"
            android:layout_height="64dp"
            android:id="@+id/view"
            app:layout_constraintEnd_toEndOf="parent"
            android:layout_marginEnd="32dp"
            app:layout_constraintStart_toStartOf="parent"
            android:layout_marginStart="32dp"
            android:layout_marginTop="32dp"
            app:layout_constraintTop_toTopOf="parent"
            android:background="@color/white"/>

    <View
            android:layout_width="100dp"
            android:layout_height="0dp"
            app:layout_constraintBottom_toBottomOf="@+id/view"
            app:layout_constraintTop_toTopOf="@+id/view"
            android:layout_marginTop="8dp"
            android:layout_marginBottom="8dp"
            android:id="@+id/view_sell"
            app:layout_constraintEnd_toEndOf="@+id/view"
            android:layout_marginEnd="8dp"
            android:background="@color/red"
            android:visibility="invisible"/>

    <View
            android:layout_width="100dp"
            android:layout_height="0dp"
            app:layout_constraintBottom_toBottomOf="@+id/view"
            app:layout_constraintTop_toTopOf="@+id/view"
            android:layout_marginTop="8dp"
            android:layout_marginBottom="8dp"
            app:layout_constraintStart_toStartOf="@+id/view"
            android:layout_marginStart="8dp"
            android:id="@+id/view_buy"
            android:background="@color/green"/>

    <TextView
            android:text="Buy"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:id="@+id/textView"
            android:gravity="center"
            app:layout_constraintEnd_toEndOf="@+id/view_buy"
            app:layout_constraintStart_toStartOf="@+id/view_buy"
            app:layout_constraintTop_toTopOf="@+id/view_buy"
            app:layout_constraintBottom_toBottomOf="@+id/view_buy"/>

    <TextView
            android:text="Sell"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:id="@+id/textView2"
            android:gravity="center"
            app:layout_constraintStart_toStartOf="@+id/view_sell"
            app:layout_constraintTop_toTopOf="@+id/view_sell"
            app:layout_constraintBottom_toBottomOf="@+id/view_sell"
            app:layout_constraintEnd_toEndOf="@+id/view_sell"
            android:layout_marginEnd="8dp"/>

</androidx.constraintlayout.widget.ConstraintLayout>

TestActivity.kt

import `in`.eightfolds.igear.R
import android.animation.ArgbEvaluator
import android.animation.ValueAnimator
import android.os.Bundle
import android.view.View
import android.view.animation.Animation
import android.view.animation.TranslateAnimation
import androidx.appcompat.app.AppCompatActivity
import androidx.core.content.ContextCompat
import kotlinx.android.synthetic.main.test.*

/**
 * Created by Manohar on 8/5/19.
 */
class TestActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.test)

        textView2.setOnClickListener {
            moveViewToRight()
            colorAnimationGreenToRed()
        }

        textView.setOnClickListener {
            moveViewToLeft()
            colorAnimationRedToGreen()
        }

    }

    private fun moveViewToRight() {

        val translateAnimation = TranslateAnimation(0f, (textView2.x-(textView2.width.toFloat()/2)), 0f, 0f)

        translateAnimation.duration = 500
        translateAnimation.setAnimationListener(object : Animation.AnimationListener {
            override fun onAnimationRepeat(animation: Animation?) {
            }

            override fun onAnimationEnd(animation: Animation?) {
                view_sell.visibility = View.VISIBLE
                view_buy.visibility = View.INVISIBLE


            }

            override fun onAnimationStart(animation: Animation?) {
            }

        })
        view_buy.startAnimation(translateAnimation)
    }

    private fun moveViewToLeft() {

        val translateAnimation = TranslateAnimation(0f, -textView.x-textView.width-(textView.width.toFloat()/2), 0f, 0f)

        translateAnimation.duration = 500
        translateAnimation.setAnimationListener(object : Animation.AnimationListener {
            override fun onAnimationRepeat(animation: Animation?) {
            }

            override fun onAnimationEnd(animation: Animation?) {
                view_sell.visibility = View.INVISIBLE
                view_buy.visibility = View.VISIBLE

            }

            override fun onAnimationStart(animation: Animation?) {
            }

        })
        view_sell.startAnimation(translateAnimation)
    }

    private fun colorAnimationGreenToRed() {

        val colorFrom = ContextCompat.getColor(this, R.color.green)
        val colorTo = ContextCompat.getColor(this, R.color.red)

        val valueAnimator = ValueAnimator.ofObject(ArgbEvaluator(), colorFrom, colorTo)
        valueAnimator.duration = 500
        valueAnimator.addUpdateListener {
            view_buy.setBackgroundColor(it?.animatedValue as Int)
        }

        valueAnimator.start()
    }

    private fun colorAnimationRedToGreen() {

        val colorFrom = ContextCompat.getColor(this, R.color.red)
        val colorTo = ContextCompat.getColor(this, R.color.green)

        val valueAnimator = ValueAnimator.ofObject(ArgbEvaluator(), colorFrom, colorTo)
        valueAnimator.duration = 500
        valueAnimator.addUpdateListener {
            view_sell.setBackgroundColor(it?.animatedValue as Int)
        }
        valueAnimator.start()
    }
}