¿Cómo se hace una vista recta redondeada con transparencia en el iPhone?

Question

Muchas aplicaciones muestran una vista transparente con esquinas redondeadas y un indicador de actividad cuando se ejecuta una operación que consume mucho tiempo.

¿Cómo se realiza este redondeo? ¿Es posible hacerlo simplemente usando Interface Builder (ya que hay muchos lugares en los que me gustaría utilizar algo así)? O, ¿debería usar una vista de imagen con una imagen redondeada o estirable? ¿Necesito dibujar el fondo yo mismo?

Hasta ahora, he logrado obtener una vista básica con una transparencia similar configurando alphaValue en Interface Builder, sin embargo, no tiene esquinas redondeadas, y también la transparencia parece aplicarse a todas las subvistas (no quiero el texto y el indicador de actividad son transparentes; sin embargo, aunque configuré alphaValue en aquellos en IB, parece que se ignora).

Answer 1

view.layer.cornerRadius = radius; 

La forma más dura (que solía ser necesario en el primer iPhone SDK) es la creación de su propio UIView subclase con drawRect: método:

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); 

Nota: rect en este código debe tomarse a partir [self bounds] (o en cualquier ubicación donde lo desee), no tendrá sentido con rect pasado al método drawRect:.

Answer 2

En su opinión hacer esto en el método 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); 

Esto hará que su rectángulo redondeado para su vista. Puede encontrar un ejemplo completo en la muestra HeadsUpUI proporcionada con el SDK. HTH

Answer 3

A partir del iPhone SDK 3.0, puede simplemente usar la propiedad de la capa cornerRadius. Por ejemplo:

view.layer.cornerRadius = 10.0; 

En la misma línea, se puede cambiar la vista de color de borde y ancho:

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

Answer 4

MBProgressHUD ....
http://www.cocoadev.com/index.pl?MBProgressHUD

Answer 5

I abstraje a cabo la respuesta de @ lostInTransit en esta función:

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); 
} 

lo que sitúa el camino hacia el contexto para que hagas con él lo que puede

CoreGraphics llamadas ligeramente diferentes y no cerrar el trazado, en caso de que desee añadir que

CGContextFillPath(c);