Kotlin使用TransitionDrawable實現(xiàn)顏色漸變效果流程講解

更新時間：2023年02月16日 14:37:16 作者：破浪會有時

這篇文章主要介紹了Kotlin使用TransitionDrawable實現(xiàn)顏色漸變效果，這里，我們通過TransitionDrawable顯示顏色漸變效果，包括背景顏色的變化，以及圖片與圖片的漸變效果

1 導入需要漸變的圖片

如果需要實現(xiàn)圖片之間的漸變效果，我們需要兩張照片，這樣才能實現(xiàn)照片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 呈現(xiàn)出燈泡的開關效果。

2 activity_main.xml

這里例子涉及到的前端由三部分組成，一個 TextView，一個 ImageView，以及一個 Switch，當我們點擊了 Switch 按鈕，圖片的燈光就可以實現(xiàn)亮暗之間的變化，以及字體背景的漸變。

<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 函數(shù)：var transitionDrawableIcon = TransitionDrawable(iconDrawables);。對于文字背景也是一個道理，我們需要把需要漸變的顏色先放到一個array里面：val colorDrawables = arrayOf(ColorDrawable(Color.RED),ColorDrawable(Color.GREEN) )，然后再作為輸入給到 TransitionDrawable 函數(shù)：var transitionDrawable = TransitionDrawable(colorDrawables)。當我們點擊 Switch 按鈕后，燈泡會變亮（實際上就是兩張燈泡之間的顏色漸變），字體背景也會從紅色變化到綠色。

到此這篇關于Kotlin使用TransitionDrawable實現(xiàn)顏色漸變效果流程講解的文章就介紹到這了,更多相關Kotlin顏色漸變效果內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: