IOS學習之segmented control

標籤：style   blog   http   color   使用   os   io   strong   

 

轉載請註明出處

http://blog.csdn.net/pony_maggie/article/details/27086877

作者:小馬

什麼是segmented control? 先上幾張圖:

      

            

 

這幾幅圖就是典型的segmented control UI視圖, 第一幅是某個遊戲程式，紅色框出來的就是segmentedcontrol。 後面三幅是我這篇博文做的demo示範範例。

 

segmented control有例如以下幾個特徵:

 

1一般是在單視圖中使用，不做多視圖之間的切換。實現視圖中不同顯示的高速切換，每個切割表示一個不同的顯示,這些顯示往往是相關的,所謂的相關，能夠理解成，功能一樣，可是屬性類別有差異，比方遊戲程式中的幾個切割。

 

比較經常使用的還有比方說，在一個視圖中，不同的切割控制tableView載入不同的資料來源。

 

2 它通常在整個螢幕的上部，不是必定，但大部分情況下是這樣用。

 

3 通常是3到5個切割，超過5個的話每一個切割的大小對於使用者觸碰的體驗會非常差。

 

4 隨意時刻，僅僅有一個切割是啟用狀態的。有點像單選button。

 

開發環境:

mac os +xcode5.0 + ios7模擬器。

 

產生控制項，代碼例如以下:

- (void)initSegmentedControl{    NSArray *segmentedData = [[NSArray alloc]initWithObjects:@"apple",@"orange",@"banana",nil];    UISegmentedControl *segmentedControl = [[UISegmentedControl alloc]initWithItems:segmentedData];    segmentedControl.frame = CGRectMake(10.0, 20.0,300.0, 30.0);    /*     這個是設定按下button時的顏色     */    segmentedControl.tintColor = [UIColor colorWithRed:49.0 / 256.0 green:148.0 / 256.0 blue:208.0 / 256.0 alpha:1];    segmentedControl.selectedSegmentIndex = 0;//預設選中的button索引    /*     以下的代碼實同正常狀態和按下狀態的屬性控制,比方字型的大小和顏色等     */    NSDictionary *attributes = [NSDictionary dictionaryWithObjectsAndKeys:[UIFont boldSystemFontOfSize:12],NSFontAttributeName,[UIColor redColor], NSForegroundColorAttributeName, nil];    [segmentedControl setTitleTextAttributes:attributes forState:UIControlStateNormal];            NSDictionary *highlightedAttributes = [NSDictionary dictionaryWithObject:[UIColor redColor] forKey:NSForegroundColorAttributeName];        [segmentedControl setTitleTextAttributes:highlightedAttributes forState:UIControlStateHighlighted];        //設定分段控制項點擊對應事件    [segmentedControl addTarget:self action:@selector(doSomethingInSegment:)forControlEvents:UIControlEventValueChanged];        [self.view addSubview:segmentedControl];}

 

每一個功能凝視都有清晰的描寫敘述，有一點要特別說明一下:

在ios7曾經，segmentedcontrol有一個segmentedControlStyle 屬性，通常都要設定，比方像以下這樣:

/*     typedef enum {     UISegmentedControlStylePlain,     UISegmentedControlStyleBordered,     UISegmentedControlStyleBar,     UISegmentedControlStyleBezeled,     } UISegmentedControlStyle; */segmentedControl.segmentedControlStyle = UISegmentedControlStyleBar;

可是這個在ios7之後，出於扁平化風格的考慮，這些style都不在有效了

 

我們再寫一個button的事件響應函數，設定不同的背景圖片，例如以下:

-(void)doSomethingInSegment:(UISegmentedControl *)Seg{        NSInteger Index = Seg.selectedSegmentIndex;        switch (Index)    {        case 0:            self.view.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:kSrcName(@"bg_apple_small.png")]];            break;        case 1:            self.view.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:kSrcName(@"bg_orange_small.png")]];            break;        case 2:            self.view.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:kSrcName(@"bg_banana_small.png")]];            break;        default:            break;    }}

代碼比較簡單。關鍵是理解segmented control的應用情境，靈活運用。除了第一幅圖中的遊戲程式，我這裡再舉一個範例，非常多時候會把segmented control嵌套在navigation bar裡面使用，以降低navigationview之間的層級數量，給使用者較好的體驗，就像以下這樣:

 

          

原始碼下載:

https://github.com/pony-maggie/SegmentedControl

或

http://download.csdn.net/detail/pony_maggie/7403175