切り替えをする「Segmented Control」の使い方をマスター
Segmented Controlとは
切り替えができるパーツです。
分割数や表示名は自由に変えることができます。
上図の「1」「2」「3」のような各部分を『セグメント』と呼びます。
Segmented Controlの配置
まずは、xibファイルに配置します。
配置したら、パーツ→アトリビューツインスペクタを選択します。
基本は、①〜④で変えることができるので、解説します。
- ①Style・・・形式を3つのパターンから選べます
Plain
Bordered
Bar
- ②Tint・・・StyleがBarのときだけ、色を変えることができます
- ③Segments・・・セグメントの数を変えることができます
- ④Segment / Title・・・各セグメントのタイトル表示を変えることができます
まず、タイトルを変えるセグメント番号を選び、続けてタイトルを変えます。
セグメント番号は左から順に0,1,2,・・・となります。
まずは、特にそのままの形式で配置してみます。
ヘッダーファイルにIBActionの定義をします。
#import <UIKit/UIKit.h>
@interface TestViewController : UIViewController
{
UISegmentedControl *sc;
}
@property (nonatomic, retain) IBOutlet UISegmentedControl *sc;
- (IBAction)SegChanged:(id)sender;
@end
ソースファイル(.m)に追記します。
「パーツ変数名.selectedSegmentIndex」で現在選択されているセグメント番号を取得できます。switch文で、セグメント番号ごとに違う動作を割り付けます。
#import "TestViewController.h"
@interface TestViewController ()
@end
@implementation TestViewController
@synthesize sc;
- (void)dealloc {
[sc release];
[super dealloc];
}
- (IBAction)SegChanged:(id)sender {
switch (sc.selectedSegmentIndex) {
case 0:
NSLog(@"Firstが選択されています");
break;
case 1:
NSLog(@"Secondが選択されています");
break;
default:
break;
}
}
- (void)viewDidLoad
xibファイルで、関連付けをします。
次に、IBActionの紐付けをします。『Value Changed』を使います。
シミュレータで実行し、スイッチを切り替えてみます。
コンソールに次のように表示されます。
実際に使う際には、swtich文にやりたいことを書けばよいです。
背景色を切り替えるサンプルプログラム
先ほど配置したスイッチを下図のように変えます。
Segmentsの値を「3」にし、Titleをそれぞれ「黒」「黄」「赤」にします。
そして、SegChangedのメソッド中身を次のように書き換えます。
『self.view.backgroundColor = [UIColor ];』で背景色を“色名”に変えることができます。色については、色の種類の記事を見て下さい。
- (IBAction)SegChanged:(id)sender {
switch (sc.selectedSegmentIndex) {
case 0:
NSLog(@"黒が選択されています");
self.view.backgroundColor = [UIColor blackColor];
break;
case 1:
NSLog(@"黄が選択されています");
self.view.backgroundColor = [UIColor yellowColor];
break;
case 2:
NSLog(@"赤が選択されています");
self.view.backgroundColor = [UIColor redColor];
break;
default:
break;
}
}
シミュレータを実行し、背景色が変化することを確認できます。