🔨
Swift - テーマカラー変更機能を実装する方法
作るもの
テーマ変更ページを作成し、テーマを選択するとアプリ全体の色が変わる機能を実装します。
完成イメージ
事前準備
テーマカラー用の色を6色用意しました。
Storyboardはこんな感じで、「ThemeView」と書かれたボタンを押すとテーマ変更ページに遷移するようになっています。
完成コード
ViewController.swift
import UIKit
class ViewController: UIViewController {
@IBOutlet weak var button: UIButton!
@IBOutlet weak var image: UIImageView!
override func viewDidLoad() {
super.viewDidLoad()
}
override func viewWillAppear(_ animated: Bool) {
let theme = UserDefaults.standard.object(forKey: "Theme") as? Int ?? 1
let appearance = UINavigationBarAppearance()
appearance.backgroundColor = UIColor(named: "AccentColor\(theme)")
appearance.titleTextAttributes = [NSAttributedString.Key.foregroundColor : UIColor.white]
navigationController?.navigationBar.standardAppearance = appearance
navigationController?.navigationBar.scrollEdgeAppearance = appearance
button.backgroundColor = UIColor(named: "AccentColor\(theme)")
image.tintColor = UIColor(named: "AccentColor\(theme)")
}
}
ThemeViewController.swift
import UIKit
class ThemeViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
}
@IBAction func buttonTapped(_ sender: UIButton) {
UserDefaults.standard.set(sender.tag, forKey: "Theme")
navigationController?.popToRootViewController(animated: true)
}
}
ポイント
テーマ情報の保存
ThemeViewController.swift
UserDefaults.standard.set(sender.tag, forKey: "Theme")
テーマ変更ページの全てのボタンには1〜6のTagが設定されています。
ボタンを押すとそのタグの番号がUserDefaultsに保存されるようにしています。
テーマカラーはUserDefaultsに保存しているので、アプリを閉じても保持されます。
Viewの更新
ViewController.swift
override func viewWillAppear(_ animated: Bool) {
let theme = UserDefaults.standard.object(forKey: "Theme") as? Int ?? 1
let appearance = UINavigationBarAppearance()
appearance.backgroundColor = UIColor(named: "AccentColor\(theme)")
appearance.titleTextAttributes = [NSAttributedString.Key.foregroundColor : UIColor.white]
navigationController?.navigationBar.standardAppearance = appearance
navigationController?.navigationBar.scrollEdgeAppearance = appearance
button.backgroundColor = UIColor(named: "AccentColor\(theme)")
image.tintColor = UIColor(named: "AccentColor\(theme)")
}
画面が表示されるたびに呼び出される「viewWillAppear」の中でUserDefaultsに保存されたテーマ番号を読み取り、全てのViewに反映させています。
ナビゲーションバー
let appearance = UINavigationBarAppearance()
appearance.backgroundColor = UIColor(named: "AccentColor\(theme)")
appearance.titleTextAttributes = [NSAttributedString.Key.foregroundColor : UIColor.white]
navigationController?.navigationBar.standardAppearance = appearance
navigationController?.navigationBar.scrollEdgeAppearance = appearance
この箇所はナビゲーションバーの色を変えるためのものです。
Discussion