Skip to main content

背景の変更 (ガイド付きプロジェクト Light)

ステップ 2: 背景色を変更する

ライトがオンになっているとき、つまり背景色が白のときにボタンをタップするとライトをオフにするようにします。反対にライトがオフになっているとき、つまり背景色が黒のときにボタンをタップするとライトをオンにするようにします。

「ライトがオンである」というステートメントは true または false のいずれかなので、Boolean を使用して背景色を変更する方法を決定します。

1.ViewController クラス定義の上部で、lightOn という変数を作成します。

2.最初の画面背景は白なので、初期値を true に設定します。

var lightOn = true

ユーザーがボタンをタップするたびにこの値を変更する必要があります。     

3.buttonPressed(_:) メソッドはユーザーがボタンをタップしたときに実行されるので、このメソッド内を次のように変更します。

@IBAction func buttonPressed(_ sender: UIButton) {
 lightOn = !lightOn
}

値が変更された後に、新しい値を使用して背景色を決定します。値が true であれば、背景色を白に変更します。値が false であれば、背景色を黒に変更します。

1.このロジックをシンプルな if ステートメントを使用して記述します。

@IBAction func buttonPressed(_ sender: UIButton) {
 lightOn = !lightOn
 if lightOn {
  view.backgroundColor = .white
 } else {
  view.backgroundColor = .black
 }
}    

2.アプリケーションをビルドして実行します。

背景色は、ボタンをタップするたびに変更されます。

アプリケーションのサイズが大きくなっていくと、コードを適切に整理しておく必要があります。buttonPressed(_:) メソッドの内部に if ステートメントを直接追加する代わりに、ユーザーインターフェース (UI) を更新する新しいメソッドを作成します。

  1. updateUI() という新しいメソッドを作成します。
  2. if ステートメントを buttonPressed(:) から updateUI() に移動します。
  3. buttonPressed(_:) 内で updateUI() をコールします。
@IBAction func buttonPressed(_ sender: UIButton) {
 lightOn = !lightOn
 updateUI()
}
func updateUI() {
 if lightOn {
  view.backgroundColor = .white
} else {
  view.backgroundColor = .black
}
}

このアプリケーションで行ったように、変更を小さく段階的に行うことで、バグが入るリスクを減らすことができます。ビューを更新するすべてのコードを含む 1 つのメソッドを使用することは、インターフェースの問題をデバッグするためのベストプラクティスです。

必要であればソリューションのチェック

こちらが Light プロジェクトの全ファイルです。自分が記述した背景のコードと比較し、メソッドと if ステートメントを確認してください。

無料で学習を続けましょう!
続けるにはアカウントにサインアップしてください。
サインアップすると次のような機能が利用できるようになります。
  • 各自のキャリア目標に合わせてパーソナライズされたおすすめが表示される
  • ハンズオン Challenge やテストでスキルを練習できる
  • 進捗状況を追跡して上司と共有できる
  • メンターやキャリアチャンスと繋がることができる