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

Segmented Controlとは

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

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

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

Segmented Controlの配置

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

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

  • ①Style・・・形式を3つのパターンから選べます
     
    Plain
    plain
    Bordered
    bordered
    Bar
    bar
  • ②Tint・・・StyleがBarのときだけ、色を変えることができます
     
    tint
  • ③Segments・・・セグメントの数を変えることができます
     
  • ④Segment / Title・・・各セグメントのタイトル表示を変えることができます
     
    まず、タイトルを変えるセグメント番号を選び、続けてタイトルを変えます。
    セグメント番号は左から順に0,1,2,・・・となります。
    segment

まずは、特にそのままの形式で配置してみます。
ヘッダーファイルに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の紐付けをします。
sc06

次に、IBActionの紐付けをします。『Value Changed』を使います。
sc05

シミュレータで実行し、スイッチを切り替えてみます。
sc07

コンソールに次のように表示されます。
実際に使う際には、swtich文にやりたいことを書けばよいです。
sc08

背景色を切り替えるサンプルプログラム

先ほど配置したスイッチを下図のように変えます。
sc09

Segmentsの値を「3」にし、Titleをそれぞれ「黒」「黄」「赤」にします。
sc10

そして、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;
    }
    
}

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

コメントを残す

サブコンテンツ

このページの先頭へ