原文地址
教程開始的project

Getting Started

第一步，用15point高的View作為table view的footer，顏色是紅色。創建一個新的view，命名為CustomFooter
添加如下code

-(void)drawRect:(CGRect)rect {
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSetFillColorWithColor(context, [UIColor redColor].CGColor);
    CGContextFillRect(context, rect);
}

切換到 CoolTableViewController.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];
}

Run

FooterPlaceholder.jpg

Back to Business

FooterZoomed.jpg

記住下面幾點：

• 在底部有一個平滑的圓角
• 有一個從light gray到darker gray的漸變
• 在邊緣有一個白色的高亮
• 在圓弧曲線上有一個圓角

Creating Arcs – the Math

圓角是一種簡單的曲線，是圓的一部分。上面的圓角是大圓頂部的一小部分。

ArcDiagram.jpg

如何用Core Graphics描述這個圓角呢？我們將適用CGContextAddArc這個API，你需要知道下面三個知識點

• 圓心
• 半徑
• 曲線開始和結束的點

下面是你要畫的曲線所在的矩形

ArcRect.jpg

公式

ArcDiagram2.jpg

再回到我們的圓

ArcDiagram31.jpg

計算d

// Just substituting...
CGFloat d = ((arcRectWidth/2) * (arcRectWidth/2)) / (arcRectHeight);
// Or more simply...
CGFloat d = pow(arcRectWidth, 2)/(4*arcRectHeight);

如果知道c和d，可以計算出半徑

// Just substituting...
CGFloat radius = (arcRectHeight + (pow(arcRectWidth, 2)/(4*arcRectHeight)))/2;
// Or more simply...
CGFloat radius = (arcRectHeight/2) + (pow(arcRectWidth, 2)/(8*arcRectHeight));

如果你知道半徑，很容易得到圓心

CGPoint arcCenter = CGPointMake(arcRectTopMiddleX, arcRectTopMiddleY - radius);

只要我們知道center point, radius, and arcRect，就能計算出開始和結束的角度

ArcDiagram4.jpg

求余弦角angle

CGFloat angle = acos(arcRectWidth/(2*radius));

既然知道了余弦很簡單能得出開始角和結束角

ArcDiagram5.jpg

以上便是原理

Drawing Arcs and Creating Paths

打開Common.h添加如下code

static inline double radians (double degrees) { return degrees * M_PI/180; }
CGMutablePathRef createArcPathFromBottomOfRect(CGRect rect, CGFloat arcHeight);

添加一個方法，把角度轉化成弧度
記住在Core Graphics中畫圖形分兩步走，第一步定義path，第二步store或則fill你的path。
到目前為止你已經通過CGContextMoveToPoint，CGContextAddLineToPoint，CGContextAddRect簡單的添加了路徑。通過CGContextStrokePath，CGContextFillPath來store或者fill path。
你也可以通過CGContextFillRect同時畫和填充路徑。
但是現在，和直接添加路徑不同的是，我們將會保存path在一個特殊的path variable。這將使重用路徑更加的簡單。就避免了一遍一遍的用相同的方法
這非常簡單，用CGPathXXX替代CGContextXXX。
下面介紹用法，將下列code添加到Common.m

CGMutablePathRef createArcPathFromBottomOfRect(CGRect rect, CGFloat arcHeight)
{
    CGRect arcRect = CGRectMake(rect.origin.x, rect.origin.y + rect.size.height - arcHeight, rect.size.width, arcHeight);
    
    CGFloat arcRadius = (arcRect.size.height/2) + (pow(arcRect.size.width, 2) / (8*arcRect.size.height));
    CGPoint arcCenter = CGPointMake(arcRect.origin.x + arcRect.size.width/2, arcRect.origin.y + arcRadius);
    
    CGFloat angle = acos(arcRect.size.width / (2*arcRadius));
    CGFloat startAngle = radians(180) + angle;
    CGFloat endAngle = radians(360) - angle;
    
    CGMutablePathRef path = CGPathCreateMutable();
    CGPathAddArc(path, NULL, arcCenter.x, arcCenter.y, arcRadius, startAngle, endAngle, 0);
    CGPathAddLineToPoint(path, NULL, CGRectGetMaxX(rect), CGRectGetMinY(rect));
    CGPathAddLineToPoint(path, NULL, CGRectGetMinX(rect), CGRectGetMinY(rect));
    CGPathAddLineToPoint(path, NULL, CGRectGetMinX(rect), CGRectGetMaxY(rect));
    
    return path;
}

該方法通過傳入的兩個參數計算出arcRect，然后計算出半徑，圓心，開始和結束的angle。下一步，創建一個path，path有arc和矩形邊緣的line組成。
先創建一個可重用的path，CGPathCreateMutable。然后使用CGPathXXX替代CGContextXXX。
通過CGPathAddArc添加一個Arc，再通過劃線來閉合路徑。

在CustomFooter.m添加如下code

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        self.opaque = YES;
        self.backgroundColor = [UIColor clearColor];
    }
    return self;
}

-(void)drawRect:(CGRect)rect {
    CGContextRef context = UIGraphicsGetCurrentContext();
    
    UIColor * whiteColor = [UIColor colorWithRed:1.0 green:1.0 blue:1.0 alpha:1.0];
    UIColor * lightGrayColor = [UIColor colorWithRed:230.0/255.0 green:230.0/255.0 blue:230.0/255.0 alpha:1.0];
    UIColor * darkGrayColor = [UIColor colorWithRed:187.0/255.0 green:187.0/255.0 blue:187.0/255.0 alpha:1.0];
    UIColor * shadowColor = [UIColor colorWithRed:0.2 green:0.2 blue:0.2 alpha:0.5];
    
    CGFloat paperMargin = 9.0;
    CGRect paperRect = CGRectMake(self.bounds.origin.x+paperMargin, self.bounds.origin.y, self.bounds.size.width-paperMargin*2,  self.bounds.size.height);
    
    CGRect arcRect = paperRect;
    arcRect.size.height = 8;
    
    CGContextSaveGState(context);
    CGMutablePathRef arcPath = createArcPathFromBottomOfRect(arcRect, 4.0);
    CGContextAddPath(context, arcPath);
    CGContextClip(context);
    drawLinearGradient(context, paperRect, lightGrayColor.CGColor, darkGrayColor.CGColor);
    CGContextRestoreGState(context);
    
    CFRelease(arcPath);
}

把背景色設置為clear，可以在initWithFrame這個方法里面設置，因為designated method 所以在invokeinit會invokeinitWithFramemethod。

TableFooter1.jpg