XcodeでUISegmentedControlを追加する方法【初心者向け】

Xcodeで使えるUIパーツの【UISegmentedControl】を追加する方法を初心者向けに解説した記事です。Xcodeにはラジオボタンがないので、その代用として使うことができるパーツです。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が1,000以上あります。

iPhoneアプリ開発では、アプリの画面を作るのに便利なUIパーツが多数用意されています。

今回は、XcodeUISegmentedControl(セグメンテッドコントロール)を追加する方法を初心者向けに解説します。

なお本記事は、TechAcademyのiPhoneアプリ開発オンラインブートキャンプの内容をもとに紹介しています。

 

UISegmentedControlとは

Xcodeでは、Androidアプリ開発のGUIコンポーネントにあるようなラジオボタンがありません。そんなラジオボタンの代わりになるのが、UISegmentedControlです。

選択肢を用意する必要がある際などに利用しましょう。

 

 

UISegmentedControlを配置する

他のUIパーツのようにドラッグ&ドロップすることで配置できます。

「Segmented Control」を選んで、Interfacebuilder(インターフェイスビルダー)に配置します。

XcodeScreenSnapz001

 

配置するとこのように表示されます。
XcodeScreenSnapz002

 

また、インスペクタでボタン(Segments)の数を変えることができます。

ただし、UISegmentedControlの横幅は自動で広がらないため、自分で調整する必要があるので注意しましょう。

XcodeScreenSnapz0044

 

各セグメントのラベルは、インスペクタのSegmentで対象となるセグメントを選択してTitleで指定します。

XcodeScreenSnapz005

これで配置はできました。

 

 

[PR] iPhoneアプリの開発で挫折しない学習方法を動画で公開中

UISegmentedControlの使用法

続いて、ボタンが動くように設定していきます。

まず、InterfacebuilderでViewController.hにIBActionを設定します。

XcodeScreenSnapz006

 

この際、イベントの種類はValue Changedにしてください。

XcodeScreenSnapz007

 

また、値を取得するためにIBOutletも作成しておきます。

XcodeScreenSnapz008
XcodeScreenSnapz009

didValueChangedでは、先ほど定義したIBOuteletの_segmentedControl.selectedSegmentIndexで選択されたボタンの番号を取得して、必要であれば処理を記述します。この時、selectedSegmentIndexは0オリジンであることと型がNSIntegerであることに注意してください。

 

今回の記事は以上です。

XcodeのUIパーツの追加方法についてさらに学びたい場合は、XcodeでUIActivityIndicatorViewを追加する方法も合わせてご覧ください。

[お知らせ]TechAcademyでは初心者でも8週間でオリジナルアプリが作れるiPhoneアプリ開発オンラインブートキャンプを開催しています。