Kotlin使用TransitionDrawable實(shí)現(xiàn)顏色漸變效果流程講解
1 導(dǎo)入需要漸變的圖片
如果需要實(shí)現(xiàn)圖片之間的漸變效果,我們需要兩張照片,這樣才能實(shí)現(xiàn)照片1到照片2的漸變。在路徑 /res/values/
下,我們新建一個(gè) arrays.xml
文件:
<?xml version="1.0" encoding="utf-8"?> <resources> <array name="icons"> <item>@drawable/idea1</item> <item>@drawable/idea2</item> </array> </resources>
這個(gè)文件包含了兩個(gè) item:@drawable/idea1
以及 @drawable/idea2
,把它們寫在一個(gè) array 里面。這里,我們導(dǎo)入的兩張圖片的名字分別是 idea1.png
和 idea2.png
,存放于 res/drawable/
路徑下。
從上面兩張照片我們可以看到,我們希望通過 TransitionDrawable
呈現(xiàn)出燈泡的開關(guān)效果。
2 activity_main.xml
這里例子涉及到的前端由三部分組成,一個(gè) TextView,一個(gè) ImageView,以及一個(gè) Switch,當(dāng)我們點(diǎn)擊了 Switch 按鈕,圖片的燈光就可以實(shí)現(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="關(guān)" 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) } }
我們先導(dǎo)入這兩張圖片,然后這個(gè)array作為輸入給到 TransitionDrawable
函數(shù):var transitionDrawableIcon = TransitionDrawable(iconDrawables);
。對(duì)于文字背景也是一個(gè)道理,我們需要把需要漸變的顏色先放到一個(gè)array里面:val colorDrawables = arrayOf(ColorDrawable(Color.RED),ColorDrawable(Color.GREEN) )
,然后再作為輸入給到 TransitionDrawable
函數(shù):var transitionDrawable = TransitionDrawable(colorDrawables)
。當(dāng)我們點(diǎn)擊 Switch 按鈕后,燈泡會(huì)變亮(實(shí)際上就是兩張燈泡之間的顏色漸變),字體背景也會(huì)從紅色變化到綠色。
到此這篇關(guān)于Kotlin使用TransitionDrawable實(shí)現(xiàn)顏色漸變效果流程講解的文章就介紹到這了,更多相關(guān)Kotlin顏色漸變效果內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Android?Canva實(shí)現(xiàn)漸變進(jìn)度條
這篇文章主要為大家介紹了Android?Canva實(shí)現(xiàn)漸變進(jìn)度條示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-06-06Android源碼學(xué)習(xí)之工廠方法模式應(yīng)用及優(yōu)勢(shì)介紹
工廠方法模式定義:定義一個(gè)用于創(chuàng)建對(duì)象的接口,讓子類決定實(shí)例化哪一個(gè)類。工廠方法使一個(gè)類的實(shí)例化延遲到其子類,感興趣的朋友可以了解下哦2013-01-01Android實(shí)現(xiàn)斷點(diǎn)多線程下載
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)斷點(diǎn)多線程下載,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-12-12Android Manifest中meta-data擴(kuò)展元素?cái)?shù)據(jù)的配置與獲取方式
這篇文章主要介紹了Android Manifest中meta-data擴(kuò)展元素?cái)?shù)據(jù)的配置與獲取方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-03-03Android混合開發(fā)教程之WebView的使用方法總結(jié)
WebView是一個(gè)基于webkit引擎、展現(xiàn)web頁(yè)面的控件,下面這篇文章主要給大家介紹了關(guān)于Android混合開發(fā)教程之WebView的使用方法,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考借鑒,下面來一起看看吧2018-05-05