2009-06-23 80 views
39

當運行耗時的操作時,很多應用程序會彈出帶圓角的透明視圖和activityIndi​​cator。如何在iPhone上完成透明度的圓角矩形視圖?

這個舍入是如何完成的,是否可以使用Interface Builder來完成(因爲有很多地方我想使用類似的東西)?或者,我應該使用帶有圓角矩形或可拉伸圖像的圖像視圖嗎?我需要自己畫背景嗎?

到目前爲止,我已經設法通過在界面生成器中設置alphaValue來獲得具有相似透明度的基本視圖,但它沒有圓角,並且透明度似乎適用於所有子視圖(我不想文本和activityindicator是透明的,但是即使我在IB中設置alphaValue,它似乎被忽略)。

回答

47
view.layer.cornerRadius = radius; 

難的方法(即使用第一代iPhone SDK被必需)是與drawRect:方法創建自己的UIView子類:

CGContextRef context = UIGraphicsGetCurrentContext(); 
CGContextSetRGBFillColor(context, 0,0,0,0.75); 

CGContextMoveToPoint(context, rect.origin.x, rect.origin.y + radius); 
CGContextAddLineToPoint(context, rect.origin.x, rect.origin.y + rect.size.height - radius); 
CGContextAddArc(context, rect.origin.x + radius, rect.origin.y + rect.size.height - radius, 
       radius, M_PI, M_PI/2, 1); //STS fixed 
CGContextAddLineToPoint(context, rect.origin.x + rect.size.width - radius, 
         rect.origin.y + rect.size.height); 
CGContextAddArc(context, rect.origin.x + rect.size.width - radius, 
       rect.origin.y + rect.size.height - radius, radius, M_PI/2, 0.0f, 1); 
CGContextAddLineToPoint(context, rect.origin.x + rect.size.width, rect.origin.y + radius); 
CGContextAddArc(context, rect.origin.x + rect.size.width - radius, rect.origin.y + radius, 
       radius, 0.0f, -M_PI/2, 1); 
CGContextAddLineToPoint(context, rect.origin.x + radius, rect.origin.y); 
CGContextAddArc(context, rect.origin.x + radius, rect.origin.y + radius, radius, 
       -M_PI/2, M_PI, 1); 

CGContextFillPath(context); 

注:rect在這段代碼也應取自[self bounds](或者你想要的任何位置),rect傳遞給drawRect:方法就沒有意義了。

+0

感謝我沒有關閉的道路,萬一!會嘗試。 – frankodwyer 2009-06-23 11:23:19

+0

我是否仍然通過IB設置透明度和bg顏色等,如何停止alpha應用於子視圖(text/activityIndi​​cator)?至少我認爲這會發生 - 文本和微調看起來都很無聊/灰色,就像背景是通過白色文本。 – frankodwyer 2009-06-23 11:26:19

+0

在IB中設置透明背景,並在代碼中使用半透明填充顏色。我已經更新了答案。 – Kornel 2009-06-23 11:28:50

7

您認爲這樣做是drawRect方法

float radius = 5.0f; 

CGRect rect = self.bounds; 
CGContextRef context = UIGraphicsGetCurrentContext(); 
rect = CGRectInset(rect, 1.0f, 1.0f); 

CGContextBeginPath(context); 
CGContextSetGrayFillColor(context, 0.5, 0.7); 
CGContextMoveToPoint(context, CGRectGetMinX(rect) + radius, CGRectGetMinY(rect)); 
CGContextAddArc(context, CGRectGetMaxX(rect) - radius, CGRectGetMinY(rect) + radius, radius, 3 * M_PI/2, 0, 0); 
CGContextAddArc(context, CGRectGetMaxX(rect) - radius, CGRectGetMaxY(rect) - radius, radius, 0, M_PI/2, 0); 
CGContextAddArc(context, CGRectGetMinX(rect) + radius, CGRectGetMaxY(rect) - radius, radius, M_PI/2, M_PI, 0); 
CGContextAddArc(context, CGRectGetMinX(rect) + radius, CGRectGetMinY(rect) + radius, radius, M_PI, 3 * M_PI/2, 0); 

CGContextClosePath(context); 
CGContextFillPath(context); 

這會讓你的圓角矩形對你的看法。您可以在隨SDK提供的HeadsUpUI示例中找到完整的示例。 HTH

79

從iPhone SDK 3.0開始,您可以簡單地使用圖層的cornerRadius屬性。例如:

view.layer.cornerRadius = 10.0; 

按照同樣的思路,您可以更改視圖的邊框顏色和寬度:

view.layer.borderColor = [[UIColor grayColor] CGColor]; 
view.layer.borderWidth = 1; 
8

我抽象出來@ lostInTransit的迴應到此功能:

static void ContextAddRoundedRect(CGContextRef c, CGRect rect, CGFloat radius) { 
    CGFloat minX = CGRectGetMinX(rect); 
    CGFloat maxX = CGRectGetMaxX(rect); 
    CGFloat minY = CGRectGetMinY(rect); 
    CGFloat maxY = CGRectGetMaxY(rect); 

    CGContextMoveToPoint(c, minX + radius, minY); 
    CGContextAddArcToPoint(c, maxX, minY, maxX, minY + radius, radius); 
    CGContextAddArcToPoint(c, maxX, maxY, maxX - radius, maxY, radius); 
    CGContextAddArcToPoint(c, minX, maxY, minX, maxY - radius, radius); 
    CGContextAddArcToPoint(c, minX, minY, minX + radius, minY, radius); 
} 

其路徑與放置到上下文爲你做,因爲你可能

略有不同CoreGraphics中調用,並且要補充一點,

CGContextFillPath(c);