179
170

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2014-03-31

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

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?

179
170
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
179
170

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?