web-dev-qa-db-ja.com

ちょうど2つの丸い角？

私のiPadアプリでは、ユーザーがボタンをクリックしたときにメイン内に2番目のビューを表示したいと思います。新しいビューは最初のビューよりも小さくなり、表示されると背景が暗くなります。新しいビューの上部の2つのコーナーを丸く表示したいのですが、cornerRadiusを使用すると、すべてが丸く設定されます。 2つの角だけを丸くするにはどうすればよいですか？

iphoneobjective-cipadrounded-corners
20
Jumhyn

DrawRect：でこれを行う必要があります。私は実際に古典的なaddRoundedRectToPathを変更しました：ビットマップを取り、あなたが要求する角を丸めるように：

static void addRoundedRectToPath(CGContextRef context, CGRect rect, float radius, UIImageRoundedCorner cornerMask)
{
    CGContextMoveToPoint(context, rect.Origin.x, rect.Origin.y + radius);
    CGContextAddLineToPoint(context, rect.Origin.x, rect.Origin.y + rect.size.height - radius);
    if (cornerMask & UIImageRoundedCornerTopLeft) {
        CGContextAddArc(context, rect.Origin.x + radius, rect.Origin.y + rect.size.height - radius, 
                        radius, M_PI, M_PI / 2, 1);
    }
    else {
        CGContextAddLineToPoint(context, rect.Origin.x, rect.Origin.y + rect.size.height);
        CGContextAddLineToPoint(context, rect.Origin.x + radius, rect.Origin.y + rect.size.height);
    }

    CGContextAddLineToPoint(context, rect.Origin.x + rect.size.width - radius, 
                          rect.Origin.y + rect.size.height);

    if (cornerMask & UIImageRoundedCornerTopRight) {
        CGContextAddArc(context, rect.Origin.x + rect.size.width - radius, 
                        rect.Origin.y + rect.size.height - radius, radius, M_PI / 2, 0.0f, 1);
    }
    else {
        CGContextAddLineToPoint(context, rect.Origin.x + rect.size.width, rect.Origin.y + rect.size.height);
        CGContextAddLineToPoint(context, rect.Origin.x + rect.size.width, rect.Origin.y + rect.size.height - radius);
    }

    CGContextAddLineToPoint(context, rect.Origin.x + rect.size.width, rect.Origin.y + radius);

    if (cornerMask & UIImageRoundedCornerBottomRight) {
        CGContextAddArc(context, rect.Origin.x + rect.size.width - radius, rect.Origin.y + radius, 
                        radius, 0.0f, -M_PI / 2, 1);
    }
    else {
        CGContextAddLineToPoint(context, rect.Origin.x + rect.size.width, rect.Origin.y);
        CGContextAddLineToPoint(context, rect.Origin.x + rect.size.width - radius, rect.Origin.y);
    }

    CGContextAddLineToPoint(context, rect.Origin.x + radius, rect.Origin.y);

    if (cornerMask & UIImageRoundedCornerBottomLeft) {
        CGContextAddArc(context, rect.Origin.x + radius, rect.Origin.y + radius, radius, 
                        -M_PI / 2, M_PI, 1);
    }
    else {
        CGContextAddLineToPoint(context, rect.Origin.x, rect.Origin.y);
        CGContextAddLineToPoint(context, rect.Origin.x, rect.Origin.y + radius);
    }

    CGContextClosePath(context);
}

これはビットマスクを取り（画像に対してこれを行っていたのでUIImageRoundedCornerと呼びましたが、何でも呼び出すことができます）、丸めたいコーナーに基づいてパスを構築します。次に、そのパスをdrawRectのビューに適用します。

CGContextBeginPath(context);
addRoundedRectToPath(context, rect, radius, yourMask);
CGContextClosePath(context);
CGContextClip(context);

私が言ったように、私はUIImagesに対してこれを行っていたので、私のコードはdrawRect：で使用するために正確に設定されていませんが、それを適応させるのはかなり簡単なはずです。基本的には、パスを作成し、それにコンテキストをクリップするだけです。

編集：ビットマスク部分を説明するために、それは単なる列挙型です：

typedef enum {
    UIImageRoundedCornerTopLeft = 1,
    UIImageRoundedCornerTopRight = 1 << 1,
    UIImageRoundedCornerBottomRight = 1 << 2,
    UIImageRoundedCornerBottomLeft = 1 << 3
} UIImageRoundedCorner;

このようにして、列挙型の各メンバーがビットマスク内の2の異なる累乗を表すため、ORを組み合わせて、コーナーを識別するビットマスクを形成できます。

ずっと後で編集：UIBezierPath のbezierPathWithRoundedRect:byRoundingCorners:cornerRadii:を使用してこれを行う簡単な方法を発見しました。コンテキストでベジェパスオブジェクトのCGPathを使用するだけです。

17
kevboh

ObjectiveCで

   // Create the path (with only the top-left corner rounded)
UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:imageView.bounds 
                          byRoundingCorners:UIRectCornerTopLeft| UIRectCornerTopRight
                          cornerRadii:CGSizeMake(10.0, 10.0)];
// Create the shape layer and set its path
CAShapeLayer *maskLayer = [CAShapeLayer layer];
maskLayer.frame = imageView.bounds;
maskLayer.path = maskPath.CGPath;
// Set the newly created shape layer as the mask for the image view's layer
imageView.layer.mask = maskLayer;

これは上部の丸い角を使用するためのものです。IViewの2つの角を丸めます

Swift !!!

myView.clipsToBounds = true
myView.layer.cornerRadius = 10
myView.layer.maskedCorners = [.layerMinXMinYCorner,.layerMaxXMinYCorner]

enter image description here

67
SachinVsSachin

TomekKuźmaによる素晴らしい仕事。これがあなたの要件のための新しいTKRoundedViewクラスです。
要件は、このパラメーターによってのみ満たすことができます。

TKRoundedView *view = [[TKRoundedView alloc] initWithFrame:frame];
view.roundedCorners = TKRoundedCornerTopLeft | TKRoundedCornerTopRight;

ただし、次の追加機能も提供します。

TKRoundedView *view = [[TKRoundedView alloc] initWithFrame:frame];
view.roundedCorners = TKRoundedCornerTopLeft
view.borderColor = [UIColor greenColor];
view.fillColor = [UIColor whiteColor];
view.drawnBordersSides = TKDrawnBorderSidesLeft | TKDrawnBorderSidesTop;
view.borderWidth = 5.0f;
view.cornerRadius = 15.0f;

サンプルプロジェクトについては、次のリンクを確認してください
https://github.com/mapedd/TKRoundedView

8
iNeal