Kotlin使用TransitionDrawable实现颜色渐变效果流程讲解

1 导入需要渐变的图片

如果需要实现图片之间的渐变效果，我们需要两张照片，这样才能实现照片1到照片2的渐变。在路径 /res/values/ 下，我们新建一个 arrays.xml 文件：

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <array name="icons">
       <item>@drawable/idea1</item>
       <item>@drawable/idea2</item>
   </array>
</resources>

这个文件包含了两个 item：@drawable/idea1 以及 @drawable/idea2，把它们写在一个 array 里面。这里，我们导入的两张图片的名字分别是 idea1.png 和 idea2.png，存放于 res/drawable/ 路径下。

从上面两张照片我们可以看到，我们希望通过 TransitionDrawable 呈现出灯泡的开关效果。

2 activity_main.xml

这里例子涉及到的前端由三部分组成，一个 TextView，一个 ImageView，以及一个 Switch，当我们点击了 Switch 按钮，图片的灯光就可以实现亮暗之间的变化，以及字体背景的渐变。

<TextView
   android:id="@+id/textView2"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_marginTop="100dp"
   android:text="案例2：灯泡颜色渐变"
   android:textSize="20dp"
   app:layout_constraintEnd_toEndOf="parent"
   app:layout_constraintStart_toStartOf="parent"
   app:layout_constraintTop_toBottomOf="@+id/pushButton" />
<ImageView
   android:id="@+id/iv_light"
   android:layout_width="80dp"
   android:layout_height="80dp"
   android:src="@drawable/idea"
   app:layout_constraintBottom_toBottomOf="parent"
   app:layout_constraintHorizontal_bias="0.498"
   app:layout_constraintLeft_toLeftOf="parent"
   app:layout_constraintRight_toRightOf="parent"
   app:layout_constraintTop_toBottomOf="@+id/textView2"
   app:layout_constraintVertical_bias="0.218" />
<Switch
   android:id="@+id/switchView"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   app:layout_constraintLeft_toLeftOf="parent"
   app:layout_constraintRight_toRightOf="parent"
   android:layout_marginTop="20dp"
   android:showText="true"
   android:textOff="关"
   android:textOn="开"
   app:layout_constraintTop_toBottomOf="@+id/iv_light"
   tools:ignore="UseSwitchCompatOrMaterialXml" />

3 MainActivity.kt

@SuppressLint("ClickableViewAccessibility", "ResourceType")
override fun onCreate(savedInstanceState: Bundle?) {
   super.onCreate(savedInstanceState)
   setContentView(R.layout.activity_main)
   val resources: Resources = resources
   val icons: TypedArray = resources.obtainTypedArray(R.array.icons)
   val drawable = icons.getDrawable(0) // ending image
   val drawableTwo = icons.getDrawable(1) // starting image
   val iconDrawables = arrayOf(drawable,drawableTwo)
   var transitionDrawableIcon = TransitionDrawable(iconDrawables);
   val colorDrawables = arrayOf(ColorDrawable(Color.RED),ColorDrawable(Color.GREEN) )
   var transitionDrawable = TransitionDrawable(colorDrawables)
   switchView.setOnCheckedChangeListener { buttonView, isChecked ->
       iv_light.setImageDrawable(transitionDrawableIcon)
       transitionDrawableIcon.reverseTransition(
           2000
       )
       transitionDrawable.isCrossFadeEnabled = false
       val transitionDrawableTextView = TransitionDrawable(colorDrawables)
       textView2.background = transitionDrawableTextView
       transitionDrawableTextView.startTransition(1000)
   }
}

我们先导入这两张图片，然后这个array作为输入给到 TransitionDrawable 函数：var transitionDrawableIcon = TransitionDrawable(iconDrawables);。对于文字背景也是一个道理，我们需要把需要渐变的颜色先放到一个array里面：val colorDrawables = arrayOf(ColorDrawable(Color.RED),ColorDrawable(Color.GREEN) )，然后再作为输入给到 TransitionDrawable 函数：var transitionDrawable = TransitionDrawable(colorDrawables)。当我们点击 Switch 按钮后，灯泡会变亮（实际上就是两张灯泡之间的颜色渐变），字体背景也会从红色变化到绿色。

来源：https://blog.csdn.net/zyctimes/article/details/128977276