Comment faire une vue rectangulaire arrondie avec transparence sur l'iphone ?

Question

Beaucoup d'applications font apparaître une vue transparente avec des coins arrondis et un indicateur d'activité lorsqu'elles exécutent une opération qui prend du temps.

Comment cet arrondi est-il réalisé et est-il possible de le faire en utilisant simplement Interface Builder (car il y a beaucoup d'endroits où j'aimerais utiliser quelque chose comme ça) ? Ou dois-je utiliser un imageview avec un rectangle arrondi ou une image 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 la valeur alpha dans Interface Builder, mais elle n'a pas de coins arrondis et la transparence semble s'appliquer à toutes les vues secondaires (je ne veux pas que le texte et l'indicateur d'activité soient transparents, mais même si j'ai défini la valeur alpha sur ceux-ci dans IB, elle semble être ignorée).

Answer 1

À partir du SDK 3.0 de l'iPhone, vous pouvez simplement utiliser l'icône de la couche cornerRadius propriété. Par exemple :

view.layer.cornerRadius = 10.0;

Dans le même ordre d'idées, vous pouvez modifier la couleur et la largeur de la bordure de la vue :

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

Answer 2

view.layer.cornerRadius = radius;

La méthode dure (qui était requise dans le premier SDK de l'iPhone) consiste à créer votre propre fichier UIView sous-classe 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);

Note : rect dans ce code devrait être pris de [self bounds] (ou tout autre endroit où vous voulez qu'il se trouve), cela n'aura pas de sens avec rect transmis à drawRect: méthode.

Answer 3

J'ai fait abstraction de 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 en faire ce que vous voulez.

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

CGContextFillPath(c);

Answer 4

Dans votre vue, faites ceci 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);

Vous obtiendrez ainsi un rectangle arrondi pour votre vue. Vous pouvez trouver un exemple complet dans l'échantillon HeadsUpUI fourni avec le SDK. HTH

Answer 5

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