web-dev-qa-db-ja.com

iPhoneで透明度のある丸みを帯びた長方形のビューはどのように行われますか？

多くのアプリは、時間がかかる操作を実行すると、角が丸い透明なビューとactivityIndi​​catorをポップアップします。

この丸めはどのように行われ、Interface Builderを使用するだけで可能ですか（このようなものを使用したい場所がたくさんあるので）？または、丸みを帯びた四角形または伸縮可能な画像のあるimageviewを使用する必要がありますか？背景を自分で描く必要がありますか？

これまでのところ、Interface BuilderでalphaValueを設定することで、同様の透明度を持つ基本的なビューを取得できましたが、角が丸くなく、透明度はすべてのサブビューに適用されるようです（テキストとアクティビティインジケーターは必要ありません）透明にするために、IBのalphaValueを設定しても無視されるようです）。

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

（最初のiPhone SDKで必要であった）難しい方法は、drawRect:メソッドを使用して独自のUIViewサブクラスを作成することです。

 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]（または任意の場所）から取得する必要があります。rectをdrawRect:に渡しても意味がありません。方法。

47
Kornel

IPhone SDK 3.0以降では、レイヤーのcornerRadiusプロパティを使用するだけで済みます。例えば。：

view.layer.cornerRadius = 10.0;

同じ線に沿って、ビューの境界線の色と幅を変更できます。

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

@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);
8
bshirley

あなたの見解では、これを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サンプルにあります。 HTH

7
lostInTransit

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

6
casey