2012年11月4日 星期日

UISegmentedControl的使用(一)

UISegmentedControl方便使用者來做選擇,

參考網頁 http://furnacedigital.blogspot.tw/2011/08/uisegmentedcontrol.html

 UISegmentedControl 可以製作出多選項的按鈕物件,有點類似 Radio Button 的感覺,使用者在同一組選項中,一次只能選擇一個項目,每一個項目的背後都會有一個對應值,它們可以是該項目的 Title 、Index 或是自行設定的 Array 參數。

實作上有靜態及動態設定,因此在實作上使用一個靜態來選擇三個動態的UISegmentedControl元件,並以動態的UISegmentedControl元件來選擇圖檔。

以下是我的實作例

1. 開啓一個專案

2. 拉入一個UISegmentedControl元件到storyBoard,並設定Tag為 100

3. 加入圖檔到專案內,此處使用Mac上的圖檔

4. 將UISegmentedControl元件註冊到mainViewController.h,並加入三個UISegmentedControl給動態設定使用。

#import <UIKit/UIKit.h>

@interface mainViewController : UIViewController
@property (weak, nonatomic) IBOutlet UISegmentedControl *segmentSelector;

@property (nonatomic) UISegmentedControl *selector1;

@property (nonatomic) UISegmentedControl *selector2;

@property (nonatomic) UISegmentedControl *selector3;


@end

5. 將相關的程式碼加到mainViewController.m
#import "mainViewController.h"

@interface mainViewController ()

@end

@implementation mainViewController

@synthesize segmentSelector;
@synthesize selector1, selector2, selector3;

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
}

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}
- (IBAction)selectOtherSegment:(id)sender {
   
    NSNumber *value = [NSNumber numberWithInt:[sender selectedSegmentIndex]];
   
    switch ([sender selectedSegmentIndex]) {
        case 0:
           
            [self setSelector1];
           
            break;
           
        case 1:
           
            [self setSelector2];
           
            break;
           
        case 2:
           
            [self setSelector3];
           
            break;
           
        default:
           
            [self setSelector1];
           
            break;
    }

}


- (void) setSelector1
{
    [self removeSubViewByLabelClass];
   
    NSArray *itemArray =[NSArray arrayWithObjects:@"Green Apple", @"Orange", @"Pear",@"Red Apple", @"Strawberry",nil];
   
    //使用陣列來建立UISegmentedControl
    selector1 = [[UISegmentedControl alloc] initWithItems:itemArray];
   
    //設定外觀大小與初始選項
    selector1.segmentedControlStyle = UISegmentedControlStyleBar;
    selector1.frame = CGRectMake(20.0, 100.0, 500.0, 44.0);
    selector1.selectedSegmentIndex = 0;
   
    selector1.tag = 1;
   
    //設定所觸發的事件條件與對應事件
    [selector1 addTarget:self action:@selector(chooseOne:) forControlEvents:UIControlEventValueChanged];
   
    //加入畫面中並釋放記憶體
    [self.view addSubview:selector1];
   
}

- (void) setSelector2
{
    [self removeSubViewByLabelClass];
   
    NSArray *itemArray =[NSArray arrayWithObjects:@"Bluehound", @"Doggie", @"Pointy",@"PurpGuy",@"RedDog",@"Woof", nil];
   
    //使用陣列來建立UISegmentedControl
    selector2 = [[UISegmentedControl alloc] initWithItems:itemArray];
   
    //設定外觀大小與初始選項
    selector2.segmentedControlStyle = UISegmentedControlStyleBar;
    selector2.frame = CGRectMake(20.0, 200.0, 600.0, 44.0);
    selector2.selectedSegmentIndex = 0;
   
    selector1.tag = 2;
   
    //設定所觸發的事件條件與對應事件
    [selector2 addTarget:self action:@selector(chooseOne:) forControlEvents:UIControlEventValueChanged];
   
    //加入畫面中並釋放記憶體
    [self.view addSubview:selector2];
   
}

- (void) setSelector3
{
    [self removeSubViewByLabelClass];
   
    NSArray *itemArray =[NSArray arrayWithObjects:@"African Daisy", @"Dandelion", @"Ixia", @"Spiked",@"Sunflower",nil];
   
    //使用陣列來建立UISegmentedControl
    selector3 = [[UISegmentedControl alloc] initWithItems:itemArray];
   
    //設定外觀大小與初始選項
    selector3.segmentedControlStyle = UISegmentedControlStylePlain; //UISegmentedControlStyleBar;
   
    selector3.frame = CGRectMake(20.0, 300.0, 550.0, 44.0);
    selector3.selectedSegmentIndex = 0;
   
    selector1.tag = 3;
   
    //設定所觸發的事件條件與對應事件
    [selector3 addTarget:self action:@selector(chooseOne:) forControlEvents:UIControlEventValueChanged];
   
    //加入畫面中並釋放記憶體
    [self.view addSubview:selector3];
   
}

- (void)chooseOne:(id)sender {
   
    [self removeSubViewByTag:101];
   
    //NSLog(@"%@", [sender titleForSegmentAtIndex:[sender selectedSegmentIndex]]);
   
    UIImageView *a1 = [[UIImageView alloc]initWithFrame:CGRectMake(100, 500, 200,200)];
    [a1 setImage: [UIImage imageNamed:[NSString stringWithFormat:@"%@.gif",[sender titleForSegmentAtIndex:[sender selectedSegmentIndex]]]]];
   
    //a1.alpha = 0.3f;
   
    a1.tag = 101;
   
    [self.view addSubview:a1];
    [self.view sendSubviewToBack:a1];
   
   
}

- (void) removeSubViewByTag:(int)tag
{
    for(UIView *subview in [self.view subviews]) {
        if (subview.tag == tag)
            [subview removeFromSuperview];
    }
}

- (void) removeSubViewByLabelClass
{
    for(UIView *subview in [self.view subviews]) {
        if([subview isKindOfClass:[UISegmentedControl class]]) {
           
            if (subview.tag != 100)
                [subview removeFromSuperview];
        } else {
            // Do nothing - not a UIButton or subclass instance
        }
    }
}


@end

6. 執行結果,選擇右邊的UISegmentedControl,來產生左邊的UISegmentedControl,再以左邊的選擇來展示同名的圖檔。