Kotlin28.Kotlin如何通过TransitionDrawable显示颜色渐变效果

这里&＃xff0c;我们通过 TransitionDrawable 显示颜色渐变效果&＃xff0c;包括背景颜色的变化&＃xff0c;以及图片与图片的渐变效果。

1 导入需要渐变的图片

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


<resources>
<array name&＃61;"icons">
<item>&＃64;drawable/idea1item>
<item>&＃64;drawable/idea2item>
array>
resources>


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

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

2 activity_main.xml

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

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


3 MainActivity.kt

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


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