LoginSignup
1

More than 5 years have passed since last update.

Paletteで取得した色からボタンの色を決めてみる

Last updated at Posted at 2016-12-09

やりたいこと

ツールバーの色をPalette(特にLightVibrantSwatch)などで取得してきて色を決める時に色が赤や青の濃い色だったり黄色の明るい色が帰ってくることがあります。そうするとツールバーのボタンの色を黒か白で固定していると色によってはボタンが見辛くなることが起こります。
(YouTubeのアプリは上手く回避していましたので)真似してPaletteで取得した色からボタンの色(白か黒)を決めてみたいと思います。

    public enum ToolbarButtonColor {
        WHITE, BLACK
    }
    private Palette mPalette;

    public ToolbarButtonColor getToolbarButtonColor() {
        if (mPalette.getLightVibrantSwatch() != null) {
            float hsl[] = mPalette.getLightVibrantSwatch().getHsl();
            float hue = hsl[0];         // 色相
            float saturation = hsl[1];  // 彩度
            float lightness = hsl[2];   // 明度
            if (lightness < 0.35) {
                return ToolbarButtonColor.WHITE;
            } else if (lightness >= 0.35 && lightness <= 0.6) {
                if (saturation >= 0.6 && (hue >= 30 && hue <= 190)) {
                    return ToolbarButtonColor.BLACK;
                } else {
                    return ToolbarButtonColor.WHITE;
                }
            } else if (lightness > 0.6 && lightness <= 0.8) {
                if (saturation >= 0.5 && (hue <= 210 && hue >= 290)) {
                    return ToolbarButtonColor.BLACK;
                } else {
                    return ToolbarButtonColor.WHITE;
                }
            } else {
                return ToolbarButtonColor.BLACK;
            }
        }
        return ToolbarButtonColor.BLACK;
    }

解説

まずSwatchから色を取得するにはRGBとHSLの2通りありますがHSLの方が分岐が楽そうということだけでHSLにしました。HSLについては画像を検索してもらったりこちらを参考にしてください。

Paletteはnullを返すことがあるのでnullチェックをします。ここではデフォルトで黒いボタンを設定していることにします。

getHsl()ではfloat型の配列が帰ってきて、0番目に色相、1番目に彩度、2番目に明度が入っています。
色相は0〜360、彩度と明度は0〜1の間です。

明度が35%以下の場合は黒っぽい暗い色になるので白、80%より大きい場合は白っぽい明るい色になるので黒を返します。35%〜80%の間は色が多くなるので明るい色は黒、暗い色は白を返すようにしています。

使い方としてはこんな感じで呼んでもらえればいいと思います。

    switch (getToolbarButtonColor()) {
        case BLACK:
           // 黒いボタンを設定
        case WHITE:
           // 白いボタンを設定
    }

まとめ

これでひとまず黒い背景に黒いボタン、白い背景に白いボタンという悲惨なことにならなくなりましたが、まだまだ改善の余地が残っているので気に入らなかったら好みに合わせて範囲を修正していただけると幸いです。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1