背景
最近公司的詳情頁改版,有一個需求設計同學覺得挺好,需要我們實現出來。
具體的需求大概就是,toolbar 上面的圖標,需要根據滑動的距離去改變顏色~
當然是難不倒我們偉大的工程師(碼農)的,所以討論需求兩小時,開發五分鐘實現了設計的需求。
先看效果圖~
請注意toolbar 上面的兩個按鈕
其實需求也就兩點
1.灰色圓圈背景需要根據滑動距離變透明,其實改變它的alpha
值就行了,這個容易。
2.就是白色圖標需要漸變成黑色,這個其實也不難。
主要講一下第二點的實現。
技術點
這個時候肯定需要去查閱下相關API文檔了,發現原生確實就有 API 實現,相當的容易。
在官網中發現有這個 API,位于android.support.v4.graphics.drawable.DrawableCompat
下:
中文意思差不多就是可以給指定的drawable
著色。
有了這個 API 就好辦了,我們去監聽下面的控件滑動距離,根據距離去設置給圖片著色。
核心代碼
fun tintDrawable(drawable: Drawable, colors: ColorStateList): Drawable {
val wrappedDrawable = DrawableCompat.wrap(drawable)
DrawableCompat.setTintList(wrappedDrawable, colors)
return wrappedDrawable
}
在需要改變的地方調用這行代碼即可:
imageView.setImageDrawable(tintDrawable(imageView.drawable, ColorStateList.valueOf(Color.argb(alpha, red, green, blue))))
這樣就實現了這個需求了,效果如開頭圖。
題外話
由于有了這個功能,所以我就可以用setTintList實現一張矢量圖適配所有顏色~
可以減少不少資源