Skip to main content

ボタンテキストの更新 (ガイド付きプロジェクト Light)

ステップ 3: ボタンテキストを更新する

ボタンによってビューの背景色を変更するように設定できましたが、ボタンテキストのタイトルはライトのオン/オフに関わらず同じままです。現時点では、新しく作成したボタンをコードで参照できません。

ボタンからビューコントローラー内の新しい lightButton プロパティへのアウトレット接続を作成するために、control キーを押しながらポインターをボタンからビューコントローラーソースの上部までドラッグします。

新しいアウトレット接続は次のように設定します。

アウトレットポップアップの [Name (名前)] が強調表示され、その項目に「lightButton」と入力されています。

ユーザー操作にボタンがどのように応答するかを見てみましょう。

1.buttonPressed(_:) メソッドの最初の行にブレークポイントを追加します。

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

色を変更するためにボタンをタップすると、対応するアクション buttonPressed(_:) が実行されます。ただし、ブレークポイントを追加したので、コードはブレークポイントがある行を実行する前に一時停止します。

コードの 14 行目の ブレークポイント。

3.[step over (ステップオーバー)] ボタン [Step Over (ステップオーバー)] アイコン をクリックし、最初の行を実行します。

アプリケーションは updateUI() メソッドを実行する前に一時停止します。 

4.[Step into (ステップイン)] ボタン [Step Into (ステップイン)] アイコン をクリックします。

アプリケーションは updateUI の最初の行を実行する前に一時停止します。

「if lightOn {」から始まる updateUI 関数の最初の行。

updateUI() メソッドの本文を読んでみましょう。Swift は非常に読みやすいプログラミング言語なので、これらの行が「ライトがオンであれば、ビューの背景色を白にする。そうでなければ背景色を黒にする。」という意味であることはおそらく理解できるでしょう。ボタンのタイトルを決定する方法を考えます。ライトがオンであれば、ボタンのタイトルには「Off」 (オフ) と表示します。ライトがオフであれば、ボタンのタイトルには「Off」 (オン) と表示します。

タイトルを更新するのに適した場所は updateUI() メソッドです。 

ボタンのタイトルを変更する方法については、Xcode の開発者ドキュメントを参照します。

  1. Xcode メニューバーの [Window (ウィンドウ)] > [Developer Documentation (開発者ドキュメント)] を使用してドキュメントにアクセスします。
  2. UIButton を検索します。
  3. 「Configuring the Button Title (ボタンタイトルの設定)」というタイトルのセクションを見つけて、setTitle(_:for:) メソッドについて読みます。
  4. 先ほど追加したブレークポイントを削除します。

UIButton についての新しい知識を使って、ボタンのタイトルを変更します。

1.メソッドを変更します。

func updateUI() {
 if lightOn {
  view.backgroundColor = .white
  lightButton.setTitle("Off", for: .normal)
} else {
  view.backgroundColor = .black
  lightButton.setTitle("On", for: .normal)
}
}

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

これで、ボタンをタップしたときに背景色とボタンテキストの両方が変更されるようになりました。 

ただし、このコードにはバグがあります。ボタンをタップする前のテキストは [On (オン)] または [Off (オフ)] ではなく、[Button (ボタン)] と表示されたままです。コードをどのように変更すれば、この問題を解決できるでしょうか?

プロジェクトには、ボタンのテキストをライトのオン/オフの状態に一致させるコードがすでにあります。updateUI() です。ただし、そのコードはビューが最初に表示される前に実行されません。viewDidLoad() 関数は、初期設定コードを配置するのに適した場所です。

1.このメソッド内で、次のように updateUI() をコールします。

override func viewDidLoad() {
  super.viewDidLoad()
  updateUI()
}

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

起動時に、ボタンのテキストに [Off (オフ)] と表示されるようになりました。

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

こちらが Light プロジェクトの全ファイルです。自分が更新したボタンのテキストと比較し、メソッドを確認してください。

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