web-dev-qa-db-fra.com

Comment se fait une vue rectangle arrondie avec transparence sur l'iphone?

De nombreuses applications affichent une vue transparente avec des coins arrondis et un indicateur d'activité lors de l'exécution d'une opération longue.

Comment cet arrondi est-il effectué et est-il possible de le faire simplement en utilisant Interface Builder (car il y a beaucoup d'endroits où j'aimerais utiliser quelque chose comme ça)? Ou, dois-je utiliser une vue d'image avec une image arrondie rect ou extensible? Dois-je dessiner l'arrière-plan moi-même?

Jusqu'à présent, j'ai réussi à obtenir une vue de base avec une transparence similaire en définissant l'alphaValue dans Interface Builder, mais il n'a pas de coins arrondis, et la transparence semble également s'appliquer à toutes les sous-vues (je ne veux pas le texte et l'indicateur d'activité pour être transparent, cependant, même si j'ai défini l'alphaValue sur ceux de IB, il semble être ignoré).

iphonecocoa-touchrounded-corners
39
frankodwyer
view.layer.cornerRadius = radius;

La manière la plus difficile (qui était requise dans le premier SDK iPhone) est de créer votre propre sous-classe UIView avec drawRect: méthode:

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

Remarque: rect dans ce code doit être tiré de [self bounds] (ou quel que soit l'emplacement dans lequel vous le souhaitez), cela n'aura aucun sens avec rect passé à drawRect: méthode.

47
Kornel

Depuis iPhone SDK 3.0, vous pouvez simplement utiliser la propriété cornerRadius de la couche. Par exemple.:

view.layer.cornerRadius = 10.0;

Dans le même sens, vous pouvez modifier la couleur et la largeur de la bordure de la vue:

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

J'ai résumé la réponse de @ lostInTransit dans cette fonction:

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

qui place le chemin sur le contexte pour que vous puissiez faire comme vous le pouvez

appels CoreGraphics légèrement différents et je n'ai pas fermé le chemin, au cas où vous voudriez ajouter cela

CGContextFillPath(c);
8
bshirley

À votre avis, faites-le dans la méthode 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);

Cela rendra votre rectangle arrondi pour votre vue. Vous pouvez trouver un exemple complet dans l'exemple HeadsUpUI fourni avec le SDK. HTH

7
lostInTransit

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

6
casey