cornerRadiusを片側だけ効かせる(UIViewの一部だけ角丸にする)

  • 169
    Like
  • 0
    Comment

ビューの角を丸くしたいとき、

view.layer.cornerRadius = 3.0;
view.layer.masksToBounds = YES;

みたいにすればOKですが、「上側だけ」「下側だけ」「右側だけ」「左側だけ」丸くしたい、というケースがあります。

例えば片側だけ角丸にすることで、角丸になってない方に「画面の続きがある」ように見せる、とか。

(左側だけ角丸にしたビュー)

方法

どうやるかというと、cornerRadius自体は使えないのですが、

  1. UIBezierPathで角丸のパスを生成
  2. CAShapeLayerを生成し、1のパスをセット
  3. 2をマスクレイヤーとして(片側だけ角丸にしたいビューのlayerに)セットする

という感じで実現できます。

サンプル

たとえば、下側(左下、右下)だけ角丸にする場合は、下記のようなコードになります。

Swift
let maskPath = UIBezierPath(roundedRect: bounds,
                            byRoundingCorners: [.BottomLeft, .BottomRight],
                            cornerRadii: CGSizeMake(3, 3))
let maskLayer = CAShapeLayer()
maskLayer.frame = bounds
maskLayer.path = maskPath.CGPath
layer.mask = maskLayer
Objective-C
UIBezierPath *maskPath;
maskPath = [UIBezierPath bezierPathWithRoundedRect:self.view.bounds
                                 byRoundingCorners:(UIRectCornerBottomLeft | UIRectCornerBottomRight)
                                       cornerRadii:CGSizeMake(3.0, 3.0)];

CAShapeLayer *maskLayer = [[CAShapeLayer alloc] init];
maskLayer.frame = self.view.bounds;
maskLayer.path = maskPath.CGPath;
self.view.layer.mask = maskLayer;

参考ページ

how to set cornerRadius for only top-left and top-right corner of a UIView?