XCode

XCode

 

UISegmentedControl 是 iOS 開發的一個重要元件,而我們常常利用他來做條件的選擇,如果用 XCode 中的 Interface Build 來拉出 UISegmentedControl 畫面的話,預設只有 Tint Color 和 Background Color 可以選擇,也就是當 UISegmentedControl 中的條件被選中時,就用 TintColor 來當文字顏色,用 Background Color 來當背景色; 若是 UISegmentedControl 中的條件未被選中,則用  TintColor 來當背景色,用  Background Color 來當文字顏色。這樣對於程式開發顯然不夠用,所以我們需要一點擴充。

 

UISegmentedControl-1

▲ 當用 XCode 內建的 Interface Build 來拉出 Xib 畫面時可以選擇的選項超少

 

 

要改變這這個情況,海芋是以 updateSegmentColor 的函式來實做,在實做之前,先給大家看一下實做的成果,底下是實做的成果,當 UISegmentedControl 中的條件被選中時,呈現黑底白色,未被選中時,呈現綠底紅字。

UISegmentedControl-2UISegmentedControl-3

 

而底下是的程式碼。

- (void) updateSegmentColor
{
    UIColor* checkBackgroundColor   = [UIColor blackColor];
    UIColor* unCheckBackgroundColor = [UIColor greenColor];
    UIColor* checkTintColor         = [UIColor whiteColor];
    UIColor* unCheckTintColor       = [UIColor redColor];
    
    self.m_segment.tintColor = [UIColor clearColor];
    [self.m_segment setTitleTextAttributes:@{NSForegroundColorAttributeName:checkTintColor}
                                  forState:UIControlStateSelected];
    [self.m_segment setBackgroundImage:[self genImageWithSColor:checkBackgroundColor]
                              forState:UIControlStateSelected
                            barMetrics:UIBarMetricsDefault];
    [self.m_segment setTitleTextAttributes:@{NSForegroundColorAttributeName:unCheckTintColor}
                                  forState:UIControlStateNormal];
    [self.m_segment setBackgroundImage:[self genImageWithSColor:unCheckBackgroundColor]
                              forState:UIControlStateNormal
                            barMetrics:UIBarMetricsDefault];
}
/**利用 Color 產生影像*/
- (UIImage*) genImageWithSColor: (UIColor*) color
{
    CGRect rect=CGRectMake(0.0f, 0.0f, 1.0f, 1.0f);
    UIGraphicsBeginImageContext(rect.size);
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSetFillColorWithColor(context, [color CGColor]);
    CGContextFillRect(context, rect);
    
    UIImage *theImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return theImage;
}

 

這段程式碼其實先定義 UISegmentedControl 被選中時和未被選中時的文字顏色和背景顏色,再使用 UISegmentedControl 內建的兩個函式來更新背景色和文字顏色

- (void)setTitleTextAttributes:(nullable NSDictionary *)attributes forState:(UIControlState)state NS_AVAILABLE_IOS(5_0) UI_APPEARANCE_SELECTOR;
- (void)setBackgroundImage:(nullable UIImage *)backgroundImage forState:(UIControlState)state barMetrics:(UIBarMetrics)barMetrics NS_AVAILABLE_IOS(5_0) UI_APPEARANCE_SELECTOR;

 

我們要加入切換時的動作,所以別忘了在 ViewDidLoad 加入監聽事件。

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view from its nib.
    [self.m_segment addTarget:self
                       action:@selector(onSegmentClick)
             forControlEvents:UIControlEventValueChanged];
}

 

以及在程式中新增一個監聽的函式。

- (void) onSegmentClick{
    [self updateSegmentColor];
}

 

當然也別忘了在 viewDidAppear 時呼叫 updateSegmentColor 函式喔!

- (void) viewDidAppear:(BOOL)animated{
    [super viewDidAppear: animated];
    [self updateSegmentColor];
}

 

參考資料:http://stackoverflow.com/questions/6496441/creating-a-uiimage-from-a-uicolor-to-use-as-a-background-image-for-uibutton

Written by 

小小的宅宅電腦工程師,從小就是吃草族,用鍵盤寫下我在電腦上的足跡,用照片記錄下我的生活日常,用文字與大家交朋友~

發表迴響