主なGUIコンポーネントの利用 (3/4)
作成:2011-03-22 08:10
更新:2011-03-22 08:18
更新:2011-03-22 08:18
■UISegmentedControlによる排他的選択ボタン
UISegmentedControlは、複数のボタンが1つにまとめられたような、iOS特有のGUIです。役割としては、ラジオボタンとほぼ同様のものと言えるでしょう。いくつかのボタンのうち、クリックした1つだけが選択されるようになっています(排他的選択というやつです)。各項目は「セグメント(Segment)」と呼ばれ、常にクリックしたセグメントだけが選択されます。
iOSにはパソコンのタブパネルと同じGUIはないため、タブパネルのタブ部分的に活用されることもあります。ただし、UISegmentedControlはあくまで「ただのボタンが集まったようなもの」ですので、これに表示を変更するような処理をあわせて利用することになるでしょう。
このUISegmentedControlは、Interface Builderでは「Segmented Control」という名前のコンポーネントとして用意されています。これを利用する場合、あらかじめ表示の設定を行っておく必要があるでしょう。
コンポーネントをそのままデザインウインドウにドラッグ&ドロップした場合、表示されるのは「First」「Second」という2つのセグメントだけが表示された状態のコンポーネントです。これを元に、設定を色々と編集して、独自の切り替えボタンを用意していくことになります。重要なものを以下に整理しておきましょう。
Style――GUIの表示スタイルを選択するものです。「Plain」「Bordered」「Bar」「Bezeled」の4タイプが用意されています。どれを選んでも、GUIの動作そのものは同じです。ただ単に表示スタイルが少し変わるだけです。
Segments――表示するセグメント数を指定するものです。ここで整数を指定すると、その数に分割されます。
「Segment 数字」ポップアップメニュー――このポップアップで、各セグメントを編集します。ここで選択したセグメントの属性が、ポップアップメニューの下に表示されます。各セグメントを利用する場合、最低でも以下のものは設定しておく必要があるでしょう。
・title――セグメントに表示されるテキスト
・Enabled――利用可能かどうか
・Selected――選択されているかどうか。これをONにしたセグメントが、起動時に選択された状態となります。(同時に複数のセグメントをONにはできません)。
では、これも簡単な利用例を挙げておきましょう。下のリスト欄にソースコードを掲載しておきます。ここでは、LabelとSegmented Controlを1つずつ配置し、それぞれ「label1」「segment1」というプロパティに接続した、という前提でコーディングしてあります。
またSegmented Controlは、イベント処理としてsegment1Action:メソッドに接続をしてあります。Segmented ControlをFile's Ownerのメソッドに接続すると、デフォルトでは「Value Changed」イベントとメソッドが接続されます。このイベントは、既に何度も出てきていますからおなじみですね。値が変化したときに発生するイベントで、Segmented Controlの場合はセグメントが選択されたときに呼び出されます。
今回のメソッドでは、選択されたセグメントの番号とタイトル(表示されているテキスト)を表示しています。選択されたセグメントに関する情報は、まず選択されているセグメントのインデックス番号を取得し、その番号のセグメントに関する情報を取得する、という形になるでしょう。
iOSにはパソコンのタブパネルと同じGUIはないため、タブパネルのタブ部分的に活用されることもあります。ただし、UISegmentedControlはあくまで「ただのボタンが集まったようなもの」ですので、これに表示を変更するような処理をあわせて利用することになるでしょう。
このUISegmentedControlは、Interface Builderでは「Segmented Control」という名前のコンポーネントとして用意されています。これを利用する場合、あらかじめ表示の設定を行っておく必要があるでしょう。
コンポーネントをそのままデザインウインドウにドラッグ&ドロップした場合、表示されるのは「First」「Second」という2つのセグメントだけが表示された状態のコンポーネントです。これを元に、設定を色々と編集して、独自の切り替えボタンを用意していくことになります。重要なものを以下に整理しておきましょう。
Style――GUIの表示スタイルを選択するものです。「Plain」「Bordered」「Bar」「Bezeled」の4タイプが用意されています。どれを選んでも、GUIの動作そのものは同じです。ただ単に表示スタイルが少し変わるだけです。
Segments――表示するセグメント数を指定するものです。ここで整数を指定すると、その数に分割されます。
「Segment 数字」ポップアップメニュー――このポップアップで、各セグメントを編集します。ここで選択したセグメントの属性が、ポップアップメニューの下に表示されます。各セグメントを利用する場合、最低でも以下のものは設定しておく必要があるでしょう。
・title――セグメントに表示されるテキスト
・Enabled――利用可能かどうか
・Selected――選択されているかどうか。これをONにしたセグメントが、起動時に選択された状態となります。(同時に複数のセグメントをONにはできません)。
では、これも簡単な利用例を挙げておきましょう。下のリスト欄にソースコードを掲載しておきます。ここでは、LabelとSegmented Controlを1つずつ配置し、それぞれ「label1」「segment1」というプロパティに接続した、という前提でコーディングしてあります。
またSegmented Controlは、イベント処理としてsegment1Action:メソッドに接続をしてあります。Segmented ControlをFile's Ownerのメソッドに接続すると、デフォルトでは「Value Changed」イベントとメソッドが接続されます。このイベントは、既に何度も出てきていますからおなじみですね。値が変化したときに発生するイベントで、Segmented Controlの場合はセグメントが選択されたときに呼び出されます。
今回のメソッドでは、選択されたセグメントの番号とタイトル(表示されているテキスト)を表示しています。選択されたセグメントに関する情報は、まず選択されているセグメントのインデックス番号を取得し、その番号のセグメントに関する情報を取得する、という形になるでしょう。
NSUInteger 変数 = [《UISegmentedControl》 selectedSegmentIndex];ここでは、このように処理をしています。selectedSegmentIndexは、現在選択されているセグメントのインデックス番号をNSUIntegerで返すメソッドです。また、titleForSegmentAtIndex:は、引数に指定したインデックス番号のセグメントに設定されているタイトルをNSStringで返します。これで「何番目のセグメントか」「セグメントのタイトルは何か」といった情報が取得できます。
NSString* 変数 = [《UISegmentedControl》 titleForSegmentAtIndex:番号 ];
[《UISegmentedControl》 setSelectedSegmentIndex:番号 ];また、setSelectedSegmentIndex:は、引数に指定したインデックス番号を選択します。とりあえず、この3つのメソッドがわかれば、選択されたセグメントに関する処理はできるようになるでしょう。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
※MyIAppController.h #import <UIKit/UIKit.h> @interface MyIAppViewController : UIViewController { UILabel * label1; UISegmentedControl * segment1; } @property (nonatomic, retain) IBOutlet UILabel *label1; @property (nonatomic, retain) IBOutlet UISegmentedControl * segment1; - (IBAction)segment1Action:(id)sender; @end ※MyIAppController.m #import "MyIAppViewController.h" @implementation MyIAppViewController @dynamic label1; @dynamic segment1; - (IBAction)segment1Action:(id)sender { NSUInteger sgmt = [segment1 selectedSegmentIndex]; NSString* sgtl = [segment1 titleForSegmentAtIndex:sgmt]; NSString* msg = [NSString stringWithFormat: @"Segment: %i:%@",sgmt,sgtl]; [label1 setText:msg]; } ……中略…… @end
※関連コンテンツ
「初心者のためのiphone/ipadプログラミング入門」に戻る