pantalla - iphone 8

¿Cómo se realiza una vista rectificada 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 tiempo.

¿Cómo se realiza este redondeo? ¿Es posible hacerlo simplemente utilizando Interface Builder (ya que hay muchos lugares en los que me gustaría usar algo como esto)? 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 la transparencia parece aplicarse a todas las subvistas (no quiero el texto y el indicador de actividad para ser transparente, sin embargo, aunque establezco el valor alfa en los de IB, parece que se ignora).

Answer 1

A partir del iPhone SDK 3.0, simplemente puede usar la propiedad cornerRadius la capa. P.ej:

view.layer.cornerRadius = 10.0;

En las mismas líneas, puede cambiar el ancho y el color del borde de la vista:

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

Answer 2

En su opinión, haga 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 el ejemplo de HeadsUpUI proporcionado con el SDK. HTH

Answer 3

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

Answer 4

Me abstraí de la respuesta de @ lostIn Transit 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 coloca el camino en el contexto para que usted haga con lo que pueda

Llamadas CoreGraphics ligeramente diferentes y no cerré la ruta, en caso de que desee agregar eso

CGContextFillPath(c);

Answer 5

view.layer.cornerRadius = radius;

La forma más difícil (que solía ser necesaria en el primer iPhone SDK) es crear su propia subclase UIView con el método 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);

Nota: el código rect debe tomarse de [self bounds] (o de la ubicación en la que lo desee), no tendrá sentido si se pasa drawRect: método drawRect: .