這是本教程系列的第三部分，講解如何通過例項使用Core Graphics API！

在第一部分教程系列中，我們通過製作一個美觀的tablie view cell 背景，講解了如何繪製線，矩形和顏色漸變。

在第二部分教程系列中，我們通過製作一個美觀的table view cell header，講解了如何繪製陰影和光滑效果。

在本篇教程中，我們將通過為table view新增footer和結束觸控事件來結束table view的製作。在教程中，我們也將學習繪製弧線，裁剪和軌跡的相關內容！

如果你還沒有本教程的例子程式碼， 可以在這裡下載上篇教程的程式碼。

開始

我們首先要做的，是用15畫素點高的紅色view去替換掉footer – 就像前面的教程那樣做 – 以確保一切運作正常。

到現在，你應該相當熟悉如何操作了… 那為何不自己做一遍呢？如果遇到什麼問題，你都可以隨時回到這裡。
…

…等待…

…

…等待…

…

…等待…
…

Tomato-San 生氣了！

什麼？！你現在還在這裡發呆？！你可以做到的 – 繼續嘗試下吧！:]

解決方案

假如你遇到任何麻煩，以下是解決方案。

確保你的 ”Groups & Files”下面的“Classes”分組被選中，前往選單項的 ”FileNew File…”，選擇iOSCocoa Touch Class，Objective-C class，確保”Subclass of UIView”被選中，然後點選下一步。命名檔案為”CustomFooter.m”，確保”Also create CustomFooter.h”被選中，然後點選”Finish”。

切換到CustomFooter.m檔案，取消drawRect方法的註釋，然後使用以下程式碼替換掉原來的內容：

CGContextRef context = UIGraphicsGetCurrentContext();
CGColorRef redColor = [UIColor colorWithRed:1.0 green:0.0 
    blue:0.0 alpha:1.0].CGColor;
 
CGContextSetFillColorWithColor(context, redColor);
CGContextFillRect(context, self.bounds)
 
;

然後切換到RootViewController.m檔案，根據以下程式碼做修改：

// In import section

#import "CustomFooter.h"
// Add new methods
-(CGFloat) tableView:(UITableView *)tableView 
    heightForFooterInSection:(NSInteger)section {
    return 15;
}
- (UIView *) tableView:(UITableView *)tableView 
    viewForFooterInSection:(NSInteger)section {
    return [[[CustomFooter alloc] init] autorelease];
}

編譯並執行工程，如果一切執行正常，你將看到以下畫面：

回到正題

既然現在我們在當前區域有一個預留的view，我們對它美化下吧。首先，先為接下來的操作重新整理記憶體。

注意以下對上圖效果的描述：

• 頁面底部有一條勻整的弧線。
• 頁面有從淺灰色到深灰色的漸變效果。
• 在頁面的左右邊緣還有種白色的高亮顯示效果。
• 頁面的弧線下部有一塊合適的陰影效果。

顯然這裡的新效果就是弧線。讓我們對它做一點討論。

建立弧線 – 數學問題

從示意圖可以看出，我們想要的弧線只是一塊有很大半徑，從特定的開始角度到特定的結束角度的大圓頂部。

那現在我們如何用Core Graphics去描述這段弧線呢？好的，我們將要使用的API是CGContextAddArc API，作為這個函式的輸入引數，我們需要告訴Core Graphics以下三項內容：

1. 圓的中心點
2. 圓的半徑
3. 繪製弧線的開始點和結束點

相關推薦