背景や文字色を変更できるようにしてみた。iPhone編

こんにちは。iPhoneアプリ「断アルコール」内で表示されるメインビューの背景や文字色を、簡単なカラーピッカーを使用して変更できるようにしました。

以下のサイトを参考にしています。

Add a color picker to an iOS app

https://stackoverflow.com/questions/21981640/add-a-color-picker-to-an-ios-app

各スライドバーは、色数が70あるので、このようにしています。デフォルトは中央です。

import UIKit

class ColorViewController: UIViewController {
    
    @IBOutlet weak var backColor: UIToolbar!
    @IBOutlet weak var stringEtc: UIBarButtonItem!
    @IBOutlet weak var stringDate: UIBarButtonItem!
    @IBOutlet weak var stringDays: UIBarButtonItem!
    
    @IBOutlet weak var sliderBack: UISlider!
    @IBOutlet weak var sliderDate: UISlider!
    @IBOutlet weak var sliderDays: UISlider!
    @IBOutlet weak var sliderEtc: UISlider!
    
    //背景色用のスライダー
    @IBAction func sliderBack(_ sender: UISlider) {
        backColor.barTintColor = Color.uiColorFromHex(rgbValue: getRGBInt(slider: sender))
    }
    
    //日時の文字色用のスライダー
    @IBAction func slideDate(_ sender: UISlider) {
        stringDate.tintColor = Color.uiColorFromHex(rgbValue: getRGBInt(slider: sender))
    }
    
    //日数の文字色用のスライダー
    @IBAction func slideDays(_ sender: UISlider) {
        stringDays.tintColor = Color.uiColorFromHex(rgbValue: getRGBInt(slider: sender))
    }
    
    //その他の文字色用のスライダー
    @IBAction func slideEtc(_ sender: UISlider) {
        stringEtc.tintColor = Color.uiColorFromHex(rgbValue: getRGBInt(slider: sender))
    }
    
    func getRGBInt(slider: UISlider) -> Int {
        let sliderValue = slider.value
        return Color.colorArray[Int(sliderValue)]
    }
    
}

import UIKit

class Color {

    static let colorArray = [ 0x000000, 0x262626, 0x4d4d4d, 0x666666, 0x808080, 0x990000, 0xcc0000, 0xfe0000, 0xff5757, 0xffabab, 0xffabab, 0xffa757, 0xff7900, 0xcc6100, 0x994900, 0x996f00, 0xcc9400, 0xffb900, 0xffd157, 0xffe8ab, 0xfff4ab, 0xffe957, 0xffde00, 0xccb200, 0x998500, 0x979900, 0xcacc00, 0xfcff00, 0xfdff57, 0xfeffab, 0xf0ffab, 0xe1ff57, 0xd2ff00, 0xa8cc00, 0x7e9900, 0x038001, 0x04a101, 0x05c001, 0x44bf41, 0x81bf80, 0x81c0b8, 0x41c0af, 0x00c0a7, 0x00a18c, 0x00806f, 0x040099, 0x0500cc, 0x0600ff, 0x5b57ff, 0xadabff, 0xd8abff, 0xb157ff, 0x6700bf, 0x5700a1, 0x450080, 0x630080, 0x7d00a1, 0x9500c0, 0xa341bf, 0xb180bf, 0xbf80b2, 0xbf41a6, 0xbf0199, 0xa10181, 0x800166, 0x999999, 0xb3b3b3, 0xcccccc, 0xe6e6e6, 0xffffff]
    
    static func uiColorFromHex(rgbValue: Int) -> UIColor {
        let red =   CGFloat((rgbValue & 0xFF0000) >> 16) / 0xFF
        let green = CGFloat((rgbValue & 0x00FF00) >> 8) / 0xFF
        let blue =  CGFloat(rgbValue & 0x0000FF) / 0xFF
        let alpha = CGFloat(1.0)
        return UIColor(red: red, green: green, blue: blue, alpha: alpha)
    }
    
}

スライドバーを動かすと、連動して色が変わる部分のコードです。

スライドバーの値 ＝ Color.colorArray 配列のインデックス

にしています。

今後の機能拡張（色数を増やすなど）を考えると、色自体の値（0xbf41a6など）を保存（UserDefaultsなど）しておくのがのが良いと思いますが、今回は描画の時にだけ色の値を取り出して使用しています。

今日はここまでです。