Edited at

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

More than 3 years have passed since last update.

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

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?