代码之家 › 专栏 › 技术社区 › frankodwyer

iPhone上的圆形矩形透明视图是如何完成的?

rounded-corners cocoa-touch iphone

39

frankodwyer · 技术社区 · 16 年前

很多应用程序在运行耗时的操作时会弹出一个圆角透明视图和一个活动指示器。

这个四舍五入是如何完成的,是否可以只使用接口生成器来完成(因为有很多地方我想使用类似的东西)?或者,我应该使用带有圆形矩形或可拉伸图像的ImageView吗?我需要自己画背景吗?

到目前为止,我已经通过在Interface Builder中设置alphavalue获得了一个具有类似透明度的基本视图,但是它没有圆角,而且透明度似乎适用于所有子视图(我不希望文本和活动指示器是透明的,尽管我在ib中设置了alphavalue,但它似乎被忽视)。

5 回复 | 直到 11 年前

1

47

Kornel 11 年前

view.layer.cornerRadius = radius;

困难的方法(在第一个iPhone SDK中曾经是必需的)是创建自己的 UIView 子类 drawRect: 方法:

 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] (或者不管你想在什么地方),这是没有意义的 直肠切除术 传递给 牵引器: 方法。

2

78

Mirko Froehlich 15 年前

从iPhone SDK 3.0开始,您只需使用层的 cornerRadius 财产。例如。:

view.layer.cornerRadius = 10.0;

沿着相同的线,可以更改视图的边框颜色和宽度:

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

3

8

bshirley RoxJ 13 年前

我将@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);

4

7

lostInTransit 16 年前

在您的视图中,使用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示例中找到完整的示例。高温高压

5

6

casey 15 年前

mbprogresshud…。
http://www.cocoadev.com/index.pl?MBProgressHUD