切り替えをする「Segmented Control」の使い方をマスター

Segmented Controlとは

切り替えができるパーツです。

分割数や表示名は自由に変えることができます。

上図の「1」「2」「3」のような各部分を『セグメント』と呼びます。

Segmented Controlの配置

まずは、xibファイルに配置します。

配置したら、パーツ→アトリビューツインスペクタを選択します。
基本は、①〜④で変えることができるので、解説します。

• ①Style・・・形式を３つのパターンから選べます
  　
  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ファイルで、関連付けをします。

まず、IBOutletの紐付けをします。

次に、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;
    }
    
}

シミュレータを実行し、背景色が変化することを確認できます。