Android: ボタン押下時ランダムかつ動的に背景色変更とStyleで文字サイズ変更を行うサンプルアプリ実装について

作成したアプリ

 - ボタン押下で背景色と画面中央の文字列のサイズが変更するアプリ

実装した機能

 - 文字サイズを変更する為のStyle.xmlの定義

 - ボタン押下処理

   - どの文字サイズ・背景色を扱うかのランダム処理

   - 文字サイズ変更処理

   - 背景色変更処理

実装手順と詳細

1.文字サイズを変更する為のStyle.xmlの定義

文字サイズを変更するのみなので、styleタグの中のitemタグの中に文字サイズを定義したStyleを三つ用意

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <style name="text1">
        <item name="android:textSize">14dp</item>
    </style>

    <style name="text2">
        <item name="android:textSize">24dp</item>
    </style>

    <style name="text3">
        <item name="android:textSize">34dp</item>
    </style>

</resources>

styleで定義したものを今回はFragment内のリストで扱うように実装

val stylesList = listOf(R.style.text1,  R.style.text2,  R.style.text3)

今回背景色に使う色は既存で入っているものを使う為color.xmlは触らず、このタイミングでstyleに対する背景色リストを作成

val colorList = listOf(R.color.purple_500, R.color.teal_200, R.color.white)

2.ボタン押下処理実装

2-1.ボタンタップ時のリスナーを定義

button.setOnClickListener {}

2-2.リスナー内でランダムにstyleとstyleに対する背景色を取得する実装

Q.ランダムでリスト内から要素を取得するには?

A_1.Randomインスタンスを生成し、nextInt(listsize: Int)を使用してランダムな値を取得する。今回引数にはリストの要素数を利用(ランダムで取得できる値が0 ~ 引数で指定した値 -1なので常にリストの要素番号を指定出来るようにする為)

A_2.取得したランダムな値を使ってリストからstyleとそれに対する背景色を取得する

// ランダムインスタンス生成
val random = Random()
// nextInt()を使用して 0 ~ (スタイルの要素数 - 1) の間でランダムな数値を一つ取り出す
val randomNumber = random.nextInt(stylesList.size)
// 取得してきたランダムな値をリストの要素番号の指定に利用して、styleと背景色を決定する
val style = stylesList[randomNumber]
val colorResource = colorList[randomNumber]

2-3.背景色変更と文字サイズ変更を実装

 - 文字サイズ変更については、textViewに対してstyleを動的に変更する為に、textViewCompatのsetTextAppearance(textView: TextView, styleResources: Int)を利用する。

(メモ：Compatクラスは~Compatという名前で複数あり、~に記載されているクラスのサポートを行う互換性がありのクラスなので~クラスでできない事は~Compatクラスを使うと解決できる可能性がある。)

 - 背景色変更については、レイアウトのsetBackGroundColor(colorInt: Int)を利用してカラーを設定。

ここで注意するべき点はsetBackGroundColor(colorInt: Int)の引数で必要なのはcolorIntに対し、リストから取得しているのはcolorResouce。

その為ResourceCompatクラスのgetColor(res: Resouces, colorResource: Int, theme: Theme)を用いてcolorResourceからColorIntに変更を行ってsetBackGroundColor(colorInt: Int)に背景色のセットを行う。

// TextViewにStyleを反映
TextViewCompat.setTextAppearance(text, style)
// ColorResourceをcolorIntに変更し、Layoutに背景色を反映
constraintLayout.setBackgroundColor(ResourcesCompat.getColor(resources, colorResource, null))

以上で今回作成したアプリは完成。

実装手順と詳細の一覧コードを下記に載せておく。

package com.example.samplerandamstyleapplication

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.Button
import android.widget.TextView
import androidx.constraintlayout.widget.ConstraintLayout
import androidx.core.content.res.ResourcesCompat
import androidx.core.widget.TextViewCompat
import androidx.fragment.app.Fragment
import java.util.*

class MainFragment : Fragment() {

    companion object {
        private const val CORRECTION_STYLE_NUMBER = 1
    }

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        return inflater.inflate(R.layout.fragment_main, container, false)
    }

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)

        val constraintLayout = view.findViewById<ConstraintLayout>(R.id.constraintLayout)
        val text = view.findViewById<TextView>(R.id.randomColorText)
        val button = view.findViewById<Button>(R.id.changeRandomButton)

        val stylesList = listOf(R.style.text1, R.style.text2, R.style.text3)
        val colorList = listOf(R.color.purple_500, R.color.teal_200, R.color.white)

        button.setOnClickListener {
            // ランダムインスタンス生成
            val random = Random()
            // nextInt()を使用して 0 ~ (スタイルの要素数 - 1) の間でランダムな数値を一つ取り出す
            val randomNumber = random.nextInt(stylesList.size)
            // 取得してきたランダムな値をリストの要素番号の指定に利用して、styleと背景色を決定する
            val style = stylesList[randomNumber]
            val colorResource = colorList[randomNumber]
            // +1の補正をかけてスタイルの番号を表示する
            text.text = (randomNumber + CORRECTION_STYLE_NUMBER).toString()
            // TextViewにStyleを反映
            TextViewCompat.setTextAppearance(text, style)
            // ColorResourceをcolorIntに変更し、Layoutに背景色を反映
            constraintLayout.setBackgroundColor(ResourcesCompat.getColor(resources, colorResource, null))
        }
    }
}