主流は16進数カラーコード(#FF0022)だと思いますが、
RGBカラーコード(255, 0, 34)の形式で色変更を行いました。
実際の業務でやった内容の備忘録っす!
・backGroundcolor()をセットするのではなく、colorFilterを適用する!
・RGB値はColor.rgb()でRGB値を変換して適用する!
#クラス:カラーマスタ(MstColor)
データベースのカラム情報をそのまま使います。
・カラーコード(番号)
・カラー名
・R値
・G値
・B値
本当はもっとあるけど...とりあえず必要なものだけ。
data class MstColor(
val color_code: String,
val color_name: String,
val r_code: Int,
val g_code: Int,
val b_code: Int
)
#レイアウトと画像
サンプルのレイアウトにImageView追加しただけです。
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".SecondFragment">
<ImageView
android:id="@+id/triforce"
android:layout_width="100dp"
android:layout_height="100dp"
android:orientation="horizontal"
android:src="@drawable/triforce"
app:layout_constraintBottom_toTopOf="@id/button_second"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="@+id/button_second"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/previous"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/triforce" />
</androidx.constraintlayout.widget.ConstraintLayout>
使う画像はこれ。
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="450dp"
android:height="450dp"
android:viewportWidth="450"
android:viewportHeight="450">
<path
android:pathData="M215.8,41.8c-3.1,5.3 -25.4,44.1 -49.7,86.1 -24.3,42 -44.1,76.5 -44.1,76.7 0,0.2 44.8,0.4 99.5,0.4 54.7,-0 99.5,-0.4 99.5,-0.8 0,-0.8 -6.3,-11.9 -19.7,-34.7 -3.8,-6.6 -23.1,-39.9 -42.8,-74 -19.6,-34.1 -36,-62.3 -36.4,-62.7 -0.4,-0.4 -3.2,3.6 -6.3,9z"
android:fillColor="#000000"
android:strokeColor="#00000000"/>
<path
android:pathData="M121,206.7c0,1.4 -97,169.6 -98.4,170.5 -0.6,0.4 -0.8,0.9 -0.5,1.3 0.3,0.3 45.2,0.4 99.8,0.3l99.2,-0.3 -6.4,-11c-52.4,-90.6 -88,-152.1 -90.5,-156.5 -1.8,-3 -3.2,-5 -3.2,-4.3z"
android:fillColor="#000000"
android:strokeColor="#00000000"/>
<path
android:pathData="M273.9,292.8l-49.5,85.7 49.9,0.3c27.4,0.1 72.1,0.1 99.3,-0l49.5,-0.3 -6.4,-11c-3.5,-6.1 -25.6,-44.3 -49.1,-85 -23.6,-40.7 -43.1,-74.3 -43.5,-74.7 -0.4,-0.4 -22.9,37.8 -50.2,85z"
android:fillColor="#000000"
android:strokeColor="#00000000"/>
</vector>
画像見ればわかるけど。。
まぁまぁまぁ...焦るでない.....
#ColorFilterを適用する
まずはFragmentの実際のソース内容を貼り付けます。
class SecondFragment : Fragment() {
// カラーマスタを初期設定
private val mstColorList: List<MstColor> = listOf(
MstColor("1", "blue", 30, 60, 162),
MstColor("2", "yellow", 255, 219, 79),
MstColor("3", "red", 231, 87, 53),
MstColor("4", "gray", 170, 170, 170),
MstColor("5", "black", 51, 51, 51),
)
override fun onCreateView(
inflater: LayoutInflater,
container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
// Inflate the layout for this fragment
return inflater.inflate(R.layout.fragment_second, container, false)
}
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
super.onViewCreated(view, savedInstanceState)
val triforce = view.findViewById<ImageView>(R.id.triforce)
var num = 0
// ボタンを押す度にトライフォースの色を変える
view.findViewById<Button>(R.id.button_second).setOnClickListener {
val color = mstColorList[num]
// 色設定
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
triforce.colorFilter = BlendModeColorFilter(Color.rgb(color.r_code, color.g_code, color.b_code), BlendMode.SRC_ATOP)
} else {
triforce.setColorFilter(Color.rgb(color.r_code, color.g_code, color.b_code), PorterDuff.Mode.SRC_ATOP)
}
// ループ設定
if (num + 1 == mstColorList.size) {
num = 0
} else {
num += 1
}
}
}
}
ポイントとしては
・setBackgroundColorは使えない
・Color.rgbでRGBカラーコードを適用すること
・colorFilterを使って画像に指定した色で塗りつぶしを行うこと
あとsetColorFilterは非推奨になった!!
API29以降では BlendModeColorFilter を使うこと。
BlendModeColorFilterって画像の色フィルターを適用するイメージかな。。
○URL
・BlendModeColorFilter
https://developer.android.com/reference/android/graphics/BlendModeColorFilter
・BlendMode
https://developer.android.com/reference/android/graphics/BlendMode
【結果】
16進数のカラーコードを使わずに、
RGB値だけで色が変わるようになりました!
やっとSwitch買ってゼル伝の「ブレスオブザワイルド」やってます!
小一時間くらいで作ったサンプルですが、
色連続で変わるだけでトライフォース良い感じになるなw
もっと色追加してゲーミングPC的な感じにするとよくなるかも!?
てことで、みなさんも一緒に。
せーーーーーのっ.....
### エ・バ・ラ・の・ご・ま・だ・れ♪
...(やっとパラセール取ったとこ。モリブリンに勝てんw)
【参考記事】
https://stackoverflow.com/questions/56716093/setcolorfilter-is-deprecated-on-api29