丸みを帯びたUIViewを与える


577

私のログインビューがありサブビューているUIActivityViewUILabel言って、「では...署名を」。このサブビューには、角が丸くないコーナーがあります。どうすれば丸くできますか?

私のxib内でそれを行う方法はありますか?


6
IBでこのようなことを行うには、角の丸い事前レンダリングされた画像が必要になります
Ed Marty

9
必ずしも@ ed- martyとは限りません。@ Gujaminからのこの回答はcornerRadiusインターフェイスビルダーのみを使用してプロパティをテーブルに適用する方法を示しているため、事前レンダリングされた画像を使用したり、コードで設定したりする必要はありません。
djskinner 2012

回答:


1219

これを試して

#import <QuartzCore/QuartzCore.h> // not necessary for 10 years now  :)

...

view.layer.cornerRadius = 5;
view.layer.masksToBounds = true;

注:UIViewControllerのビューに丸みを帯びた角を適用しようとしている場合は、ビューコントローラーのコンストラクターではなく、実際にインスタンス化された-viewDidLoad後ので適用する必要がありviewます。


6
このプロパティはiPhone 3.0にのみ存在し、以前のバージョンには存在しないことに注意してください。
Kendall Helmstetter Gelner、

5
これは、SOでこれまでに見た中で最も満足のいく答えの1つだと言わざるを得ません。最初にここをチェックすると、画像エディターとの戦いに1時間節約できただけで、色やサイズの変更が見にくくなっていました。ありがとう!
Justin Searls、

20
関連する注記:UIViewに簡単に適用するためのより視覚的な利点(つまり、影)に関心がある人は、CALayerクラスリファレンスをチェックアウトする必要があります。:それのほとんどは、上記の回答のように、1つのまたは2のプロパティ値を設定するのと同じくらい簡単ですdeveloper.apple.com/mac/library/documentation/GraphicsImaging/...
ジャスティンSearls

6
@Ben Collins(またはこの問題が発生している人)は、ビューに「クリップサブビュー」が設定されていることを確認してください。これは、インターフェイスビルダーで確認できます。
10

2
これはうまく機能しますが、スクロールビューやアニメーション(UITableViewで使用してみました)にこれらの丸みを帯びたコーナーがたくさんあると、パフォーマンスが大幅に低下します。素敵な滑らかなスクロールテーブルビューがすぐに途切れ途切れになります:(
Slee

261

インターフェイスビルダーのユーザー定義ランタイム属性機能を使用して、キーパスをlayer.cornerRadius値に設定することもできます。QuartzCoreただし、ライブラリが含まれていることを確認してください。

このトリックは、layer.borderWidthの設定でも機能しますがlayer.borderColor、これはでCGColorないことを期待しているため機能しませんUIColor

これらのパラメーターは実行時に評価されるため、ストーリーボードで効果を確認することはできません。

Interface Builderを使用してコーナー半径を設定する


10
Clip SubviewsビューIBのオプションも忘れずにチェックしてください
Peter

2
(または)キーパスを追加:layer.masksToBounds、タイプ:ブール値:チェック済み
Amitabh

64

@ViewでUIView(画像の下のコード)の迅速なカテゴリを使用して、ストーリーボードに結果を表示できるようになりました(カテゴリを使用している場合は、キーパスとして、layer.cornerRadiusではなく、cornerRadiusのみを使用してください。

extension UIView {
    @IBInspectable var cornerRadius: CGFloat {
        get {
            return layer.cornerRadius
        }
        set {
            layer.cornerRadius = newValue
            layer.masksToBounds = newValue > 0
        }
    }
}

ここに画像の説明を入力してください


また、カスタムサブクラスを使用している場合は、必ずタグを付けて@IBDesignable、IBでライブプレビューを取得してください。(ではより多くのnshipster.com/ibinspectable-ibdesignable
clozach

56

迅速

簡潔な答え:

myView.layer.cornerRadius = 8
myView.layer.masksToBounds = true  // optional

補足回答

この答えに達している場合は、おそらく問題を解決するのに十分な数を見たことがあるでしょう。私はこの答えを追加して、なぜ物事が何をするのかを視覚的に説明します。

レギュラーUIViewから始めると、角が四角になります。

let blueView = UIView()
blueView.frame = CGRect(x: 100, y: 100, width: 100, height: 50)
blueView.backgroundColor = UIColor.blueColor()
view.addSubview(blueView)

ここに画像の説明を入力してください

cornerRadiusビューののプロパティを変更して、角を丸くすることができますlayer

blueView.layer.cornerRadius = 8

ここに画像の説明を入力してください

半径の値が大きいほど、角が丸くなる

blueView.layer.cornerRadius = 25

ここに画像の説明を入力してください

値が小さいほど、角の丸みが少なくなります。

blueView.layer.cornerRadius = 3

ここに画像の説明を入力してください

これで問題を解決するには十分かもしれません。ただし、ビューには、ビューの境界の外に出るサブビューまたはサブレイヤーが含まれる場合があります。例えば、私はサブを追加した場合のビュー、このように

let mySubView = UIView()
mySubView.frame = CGRect(x: 20, y: 20, width: 100, height: 100)
mySubView.backgroundColor = UIColor.redColor()
blueView.addSubview(mySubView)

または、このようなサブレイヤーを追加する場合

let mySubLayer = CALayer()
mySubLayer.frame = CGRect(x: 20, y: 20, width: 100, height: 100)
mySubLayer.backgroundColor = UIColor.redColor().CGColor
blueView.layer.addSublayer(mySubLayer)

その後、私は結局

ここに画像の説明を入力してください

さて、境界の外に物事をぶら下げたくない場合は、これを行うことができます

blueView.clipsToBounds = true

またはこれ

blueView.layer.masksToBounds = true

これはこの結果を与えます:

ここに画像の説明を入力してください

どちらclipsToBoundsmasksToBoundsされている同等。1 UIViewつ目はで使用され、2つ目はで使用されるだけCALayerです。

こちらもご覧ください


4
角の半径を短い方の辺の半分(この場合blueView.frame.size.height/2)に設定すると、角が完全に丸くなることも付け加えておきます。
ヨハンバージェス

44

Ed Martyが行ったアプローチとは異なるアプローチ:

#import <QuartzCore/QuartzCore.h>

[v.layer setCornerRadius:25.0f];
[v.layer setMasksToBounds:YES];

IBからすべてのオブジェクトをロードするには、setMasksToBoundsが必要です...ビューが丸められる問題が発生しましたが、IBからのオブジェクトがありませんでした:/

これはそれを修正しました= D役立つことを願っています!


48
どう違うの?ドット構文を使用しない以外は?
user102008

3
[v.layer setMasksToBounds:YES]; \ nこの行は魔法で、私の大きな問題を解決します
カレンSUN

3
私がiOSの開発を始めたときにこれを書きましたが、ドット構文とブラケット構文の間に違いがないことを知りませんでした。そのため「違う」と書いた。私のコードには、エドマーティが元の応答(後で編集)になかったインポート<>も含まれていたので、私の回答は人々が問題を修正するのに役立ちます(別名、インポートされていません)。
Kristian Flatheim Jensen 2015

28

このブログ投稿で説明されているように、UIViewの角を丸める方法は次のとおりです。

+(void)roundView:(UIView *)view onCorner:(UIRectCorner)rectCorner radius:(float)radius
{
    UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:view.bounds
                                                   byRoundingCorners:rectCorner
                                                         cornerRadii:CGSizeMake(radius, radius)];
    CAShapeLayer *maskLayer = [[CAShapeLayer alloc] init];
    maskLayer.frame = view.bounds;
    maskLayer.path = maskPath.CGPath;
    [view.layer setMask:maskLayer];
    [maskLayer release];
}

それについてのクールな部分は、あなたがあなたが丸めたい角を選択できることです。


6
ここでは、外部サイトへのリンクを提供するだけでなく、回答を自己完結型にすることをお勧めします。そのため、リンクされたブログ投稿から関連するコードを回答に組み込みました。詳細については、ブログの投稿にアクセスできますが、これにより、問題の投稿が消えてもコンテンツが確実に存続するようになります。また、この回答を、同じことを実際に尋ねなかったいくつかの異なる質問に投稿しました。それらは削除され、1つの質問がこの質問の複製としてクローズされました。私たちは、各質問に一致するように作成された回答を用意しています。
ブラッド・ラーソン

5
先見の明。ブログ投稿は404になりました。
アンソニーC

このアプローチはクリーンですが、ビューの影の効果を隠します。
thesummersign 2017

19

最初にヘッダーファイルをインポートする必要があります <QuartzCore/QuartzCore.h>

 #import QuartzCore/QuartzCore.h>

[yourView.layer setCornerRadius:8.0f];
yourView.layer.borderColor = [UIColor redColor].CGColor;
yourView.layer.borderWidth = 2.0f;
[yourView.layer setMasksToBounds:YES];

使用をお見逃しなく- setMasksToBoundsさもなければ、効果が表示されない可能性があります。


2
「QuartzCore / QuartzCore.h」をインポートする必要はありません
Sudhir Kumar

はい、インポートする必要があります。
ゾート卿2013

3
@LordZsolt iOS7で変更されたのかもしれませんが、QuartzCoreをインポートする必要はもうありません。
Marc

14

UIView境界線の色と幅も変更できる次のカスタムクラスを使用できます。このままではIBDesignalbe、インターフェイスビルダーでも属性を変更できます。

ここに画像の説明を入力してください

import UIKit

@IBDesignable public class RoundedView: UIView {

    @IBInspectable var borderColor: UIColor = UIColor.white {
        didSet {
            layer.borderColor = borderColor.cgColor
        }
    }

    @IBInspectable var borderWidth: CGFloat = 2.0 {
        didSet {
            layer.borderWidth = borderWidth
        }
    }

    @IBInspectable var cornerRadius: CGFloat = 0.0 {
        didSet {
            layer.cornerRadius = cornerRadius
        }
    }

}

6
UIView *view = [[UIView alloc] initWithFrame:CGRectMake(20, 50, 200, 200)];

view.layer.backgroundColor = [UIColor whiteColor].CGColor;
view.layer.cornerRadius = 20.0;
view.layer.frame = CGRectInset(v.layer.frame, 20, 20);

view.layer.shadowOffset = CGSizeMake(1, 0);
view.layer.shadowColor = [[UIColor blackColor] CGColor];
view.layer.shadowRadius = 5;
view.layer.shadowOpacity = .25;

[self.view addSubview:view];
[view release];

setMasksToBoundsを適用することは重要です。背景色とドロップシャドウの設定はそうではありません。
djskinner 2012

3

Swift 4-IBDesignableの使用

   @IBDesignable
    class DesignableView: UIView {
    }

    extension UIView
    {

        @IBInspectable
        var cornerRadius: CGFloat {
            get {
                return layer.cornerRadius
            }
            set {
            layer.cornerRadius = newValue
        }
    }
}

申し訳ありませんが、IOS開発の新参者として。ソリューションはどのようにしてlayer.cornerRadius元の状態に戻るのを防ぎますか?(つまり、xcodeのストーリーボードはcornerRadius、オリジナルUIViewが初期化された後にのみ設定する方法をどのように知るのですか?)
AlanSTACK


3

-SwiftUI

SwiftUIでは、必要なものにcornerRadius直接修飾子を使用できViewます。この質問の例:

Text("Signing In…")
    .padding(16)
    .background(Color.red)
    .cornerRadius(50)

プレビュー

ダイアモンドのような半径はこれ以上ないこと注意してください。したがって、cornerRadiusを高さの半分以上に設定しても、スムーズに丸められます。

チェックアウト 、この答え SE方法にラウンド特定のコーナー SwiftUIで


2

インポートしQuartzcore frameworkてから、非常に重要な行に設定setMaskToBoundsしてくださいTRUE

次に: [[yourView layer] setCornerRadius:5.0f];


2
UIView* viewWithRoundedCornersSize(float cornerRadius,UIView * original)
{
    // Create a white border with defined width
    original.layer.borderColor = [UIColor yellowColor].CGColor;
    original.layer.borderWidth = 1.5;

    // Set image corner radius
    original.layer.cornerRadius =cornerRadius;

    // To enable corners to be "clipped"
    [original setClipsToBounds:YES];
    return original;
}

2

これをobj cでプログラム的に行う

UIView *view = [[UIView alloc] initWithFrame:CGRectMake(20, 50,    200, 200)];

view.layer.backgroundColor = [UIColor whiteColor].CGColor;
view.layer.cornerRadius = 20.0;
view.layer.frame = CGRectInset(v.layer.frame, 20, 20);

[view.layer.shadowOffset = CGSizeMake(1, 0);
view.layer.shadowColor = [[UIColor blackColor] CGColor];
view.layer.shadowRadius = 5;
view.layer.shadowOpacity = .25;][1]

[self.view addSubview:view];

これは、stoaryboardからも実行できます。

 layer.cornerRadius  Number  5

ここに画像の説明を入力してください


2

丸い角がviewDidload()で機能しない場合は、viewDidLayoutSubview()でコードを書くことをお勧めします

-(void)viewDidLayoutSubviews
{
    viewTextfield.layer.cornerRadius = 10.0 ;                                               
    viewTextfield.layer.borderWidth = 1.0f;
    viewTextfield.layer.masksToBounds =  YES;
    viewTextfield.layer.shadowRadius = 5;
    viewTextfield.layer.shadowOpacity = 0.3;
    viewTextfield.clipsToBounds = NO;
    viewTextfield.layer.shadowOffset = CGSizeMake(0.0f, 0.0f);
}

お役に立てれば!


0

画像を使用することもできます:

UIImage *maskingImage = [UIImage imageNamed:@"bannerBarBottomMask.png"];
CALayer *maskingLayer = [CALayer layer];
maskingLayer.frame = CGRectMake(-(self.yourView.frame.size.width - self.yourView.frame.size.width) / 2
                                , 0
                                , maskingImage.size.width
                                , maskingImage.size.height);
[maskingLayer setContents:(id)[maskingImage CGImage]];
[self.yourView.layer setMask:maskingLayer];

0

ラウンドビューのcornerRadiousプロパティを設定する

set masksToBoundsブール値画像の角の半径の境界の外側には描画されません

view.layer.cornerRadius = 5;

view.layer.masksToBounds = YES;

0

UIView拡張機能の使用:

extension UIView {    

func addRoundedCornerToView(targetView : UIView?)
{
    //UIView Corner Radius
    targetView!.layer.cornerRadius = 5.0;
    targetView!.layer.masksToBounds = true

    //UIView Set up boarder
    targetView!.layer.borderColor = UIColor.yellowColor().CGColor;
    targetView!.layer.borderWidth = 3.0;

    //UIView Drop shadow
    targetView!.layer.shadowColor = UIColor.darkGrayColor().CGColor;
    targetView!.layer.shadowOffset = CGSizeMake(2.0, 2.0)
    targetView!.layer.shadowOpacity = 1.0
}
}

使用法:

override func viewWillAppear(animated: Bool) {

sampleView.addRoundedCornerToView(statusBarView)

}

0

Swift 4.2およびXcode 10.1

let myView = UIView()
myView.frame = CGRect(x: 200, y: 200, width: 200, height: 200)
myView.myViewCorners()
//myView.myViewCorners(width: myView.frame.width)//Pass View width
view.addSubview(myView)

extension UIView {
    //If you want only round corners
    func myViewCorners() {
        layer.cornerRadius = 10
        layer.borderWidth = 1.0
        layer.borderColor = UIColor.red.cgColor
        layer.masksToBounds = true
    }
    //If you want complete round shape, enable above comment line
    func myViewCorners(width:CGFloat) {
        layer.cornerRadius = width/2
        layer.borderWidth = 1.0
        layer.borderColor = UIColor.red.cgColor
        layer.masksToBounds = true
    }
}

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.