XcodeでUIButtonを追加する方法【初心者向け】
iPhoneアプリを開発する際に、Xcodeで【UIButton(ボタン)】を追加する方法を初心者向けに解説した記事です。外観を作るところから、動く設定までの基礎を紹介しています。UIパーツの中でも基本中の基本となります。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
XcodeでiPhoneアプリを開発するときに、便利なUIパーツを追加する方法を紹介する記事です。初心者向けの内容です。
今回は、UIButton(ボタン)を扱います。
なお本記事は、TechAcademyのiPhoneアプリ開発オンラインブートキャンプの内容をもとに紹介しています。
UIButtonとは
UIButton（ボタン）は、ユーザーがタップできるUIKitのパーツです。開始・停止など各種操作を指示するために使わることが多いです。
ボタンの文言や色も変えることができます。
UIButtonの外観設定
まずは、UIButtonの外観を設定しましょう。
ボタンはStoryboardのViewの上に配置することで利用可能です。
ボタンの文言や外観はインスペクターで変更することができます。
例えば、文言を変えるのであればTitleの2行目にある文字列を変更します。
また、「Type」でボタンのタイプを設定することができます。上の画像は「System」ですが、他に「Detail Disclosure」「Info Light」「Info Dark」「Add Contact」があります。
なお、Detail Disclosure・Info Light・Info Darkは下図の同じアイコンになります。
ちなみに、Customを選択してBackgroundで画像を指定すると、ボタンを画像に変更することもできます。
UIButtonを動かす方法
UIButtonの外観を設定できましたが、これだけでは動きませんのでIBActionを設定します。
設定するには、ストーリーボードがに設置したボタンの上で右クリックでドラックしてからIBActionを設定します。
すると、ヘッダーファイルには下記のコードが自動で作成されます。
– (IBAction)buttonTapped:(id)sender;
また、.mファイルには下記のコードが自動で作成されます。
– (IBAction)buttonTapped:(id)sender
{
}
.mファイルのこのメソッドの中にボタンがタップされた時の処理を記述することになります。
応用編：ボタンを使えなくする
最後に応用編として、ボタンを使えなくする設定を行います。今回はストップウォッチを題材にしました。必要なボタンは「START」と「STOP」の二つだけです。
この時大事なのは「START」と「STOP」は対になっていて、初期状態では「START」だけがタップできる状態にしなくてはなりません。そのため、「START」がタップされると、その後に再度「START」をタップされないようにする必要があります。合わせて、利用不可だった「STOP」を利用可能にすることも必要です。「STOP」がタップされている場合も同様です。
早速やってみましょう。
まず、Storyboard上にボタンを2つ配置して、それぞれのIBOutletとIBActionを設定します。IBOutletは先ほど説明したIBActionのように「Connection」のところで設定できます。
設定が完了すると、ヘッダーファイルには下記のように追加されます。
@property (weak, nonatomic) IBOutlet UIButton *buttonStart;
@property (weak, nonatomic) IBOutlet UIButton *buttonStop;
– (IBAction)startTapped:(id)sender;
– (IBAction)stopTapped:(id)sender;
また、.mファイルには下記のように追加されます。
– (IBAction)startTapped:(id)sender
{
}
– (IBAction)stopTapped:(id)sender
{
}
初期状態で「STOP」ボタンを利用不可にするには「- (void)viewDidLoad」で下記のに設定します。
_buttonStart.enabled = YES;
_buttonStop.enabled = NO;
次に「START」ボタンがタップされた時の処理を下記のようにします。
– (IBAction)startTapped:(id)sender
{
_buttonStart.enabled = NO;
_buttonStop.enabled = YES;
// ストップウォッチ開始処理
}
同様に「STOP」ボタンがタップされた時の処理も記述します。
– (IBAction)stopTapped:(id)sender
{
_buttonStart.enabled = YES;
_buttonStop.enabled = NO;
// ストップウォッチ停止処理
}
すると、初期状態はこのように表示されます。
ここで「START」をタップすると、コードの通りに「START」が利用不可に、「STOP」が利用可能になります。
今回の記事は以上です。
他のUIパーツも使ってみたい場合は、XcodeでUITextFieldを追加する方法も合わせてご覧ください。
[お知らせ]TechAcademyでは初心者でも8週間でオリジナルアプリが作れるiPhoneアプリ開発オンラインブートキャンプを開催しています。
