Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
172
Help us understand the problem. What is going on with this article?
@shu223

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?

172
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
shu223
フリーランスiOSエンジニア 著書:『iOS×BLE Core Bluetooth プログラミング』『Metal入門』『実践ARKit』『Depth in Depth』『iOSアプリ開発 達人のレシピ100』他 GitHubの累計スター数24,000超
engineerlife
技術力をベースに人生を謳歌する人たちのコミュニティです。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
172
Help us understand the problem. What is going on with this article?