UIView 底色色彩即時變換（一）

在說到如何變換 UIView 的色彩前，必須先決定用何種方式或是元件來即時變換 UIView 的色彩。這次使用 UISlider 這個元件來改變色彩的參數，當作我們的控制元件。色彩的變化是改變紅、藍、綠三原色的參數，因此將設定三個 UISlider 來進行UIView 底色的即時控制。而使用 UISlider 改變 UIView 底色的方法，將有兩種方式，一種採用 Core Graphic 的方式進行，另一種採用 Key - Value Observing (觀察特定物件的 property ，當 property 改變時執行動作)。本篇先介紹 Core Graphic 的操作方式。（View-Based Template）

開啟新專案後，在 viewcontroller 所屬的 XIB 檔中，加入三個 UISlider 以及一個 UIView。待會將回頭改變 UIView 所屬的 Class 型態。

接下來新增一個 UIView subclass，在 drawRect 方法中，置入下列 code：

//取得現行畫布的 context
CGContextRef currentContext = UIGraphicsGetCurrentContext();

//設定要填滿畫布的 R G B 色彩參數
CGContextSetRGBFillColor (currentContext, self.redFloat, self.greenFloat, self.blueFloat, 1);

//設定要填滿色彩的方塊大小
CGContextFillRect (currentContext, CGRectMake (0, 0, 768, 768));

//儲存現行畫布
CGContextSaveGState(currentContext);


上述 code 中，redFloat, greenFloat, blueFloat 為 UIView subclass 的 instance variable。必須先行在 .h 檔案中設定，並設定 property 給這些 instance variable。而欲填滿的方塊大小，因本範例使用 iPad 的專案，因此方塊較大為 768x768 。設定完 UIView subclass 之後，在原本的 XIB 檔中的 UIView，將其 class 型態改變為剛設定好的 UIView subclass。

接下在 viewcontroller 中，增加一個 updateColorView 的方法，code 如下：

- (IBAction)updateColorView {
    self.colorView.redFloat = redSlider.value;
    self.colorView.greenFloat = greenSlider.value;
    self.colorView.blueFloat = blueSlider.value;
    [self.colorView setNeedsDisplay];
}


上述的 colorView 為與 XIB 檔中 UIView subclass 連結的 IBOutlet property，將三個 Slider 的數值回傳給 colorView，讓 colorView 產生色彩的即時變換。最後使用 setNeedsDisplay 方法來讓 UIView subclass 重新更新畫布以產生底色色彩的變化。

在執行前請注意 IBAction 以及 IBOutlet 都已經正確連結至相關的元件，另外在 UISlider 的設定上，記得將最大值設定為 1 ，最小值設定為 0，UISlider 起始位置設定為 0，continuous 選項要打勾。而 updateColorView 與 UISlider 連結的 event 為 Value Changed。