web-dev-qa-db-ja.com

UIViewの角を丸くする

私のログインビューはUIActivityViewとUILabelを持つ "Signing In…"というサブビューを持っています。このサブビューは角が丸くなっていません。どうやってそれらを丸めることができますか？

私のxibの中でそれをする方法はありますか？

ioscocoa-touchuiview
549
itsaboutcode

これを試して

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

...

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

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

1182
Ed Marty

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

このトリックはlayer.borderWidthの設定にも有効ですが、これはCGColorではなくUIColorを想定しているのでlayer.borderColorに対しては機能しません。

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

Using Interface builder to set the corner radius

254
Gujamin

これで、UIViewのSwiftカテゴリ（画像の下のコード）を@IBInspectableと共に使用して、ストーリーボードに結果を表示できます（このカテゴリを使用している場合は、キーパスとしてlayer.cornerRadiusではなくcornerRadiusのみを使用します）。

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

enter image description here

60
Guilherme Torres Castro

迅速

短い答え：

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)

enter image description here

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

blueView.layer.cornerRadius = 8

enter image description here

半径値が大きいほど角が丸くなります

blueView.layer.cornerRadius = 25

enter image description here

値が小さいほど角が丸くなります。

blueView.layer.cornerRadius = 3

enter image description here

これで問題をすぐに解決できます。ただし、ビューにサブビューまたはビューの境界外に出るサブレイヤがある場合があります。たとえば、次のようにsub view を追加するとします。

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

または私がこのようにsub layer を追加する場合

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

それで私はに終わるだろう

enter image description here

さて、私は物事が境界の外にぶら下がって欲しくないならば、私はこれをすることができます

blueView.clipsToBounds = true

またはこれ

blueView.layer.masksToBounds = true

これはこの結果を与える：

enter image description here

clipsToBoundsとmasksToBoundsは両方とも 同等の です。最初のものがUIViewと一緒に使われ、二番目のものがCALayerと一緒に使われるということです。

また見なさい

47
Suragch

エドマーティがしたものとは異なるアプローチ：

#import <QuartzCore/QuartzCore.h>

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

あなたはそれがIBからすべてのオブジェクトをロードするためにそれのためにsetMasksToBoundsを必要とします...私は私の見解が丸くなったがIBからのオブジェクトを持っていなかった問題を抱えています：

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

43
Kristian Flatheim Jensen

このブログ記事 で説明されているように、これは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];
}

それについての素晴らしい部分は、あなたがあなたがどの角を切り上げたいかを選ぶことができるということです。

26
pabloruiz55

最初にヘッダファイル<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を使用してください。そうしないと、効果が表示されない場合があります。

19
Samir Jwarchan

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

enter image description here 

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
        }
    }

}
9
Vakas
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];
6
jorik
view.layer.cornerRadius = 25
view.layer.masksToBounds = true
3
Parth Barot

Swift 4 - IBDesignableを使う

   @IBDesignable
    class DesignableView: UIView {
    }

    extension UIView
    {

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

Quartzcore frameworkをインポートしてください。そうするとsetMaskToBoundsをTRUEに設定する必要があります。これは非常に重要な行です。

その後：[[yourView layer] setCornerRadius:5.0f];

2
DeveshM
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
Ashish Patel

これを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

enter image description here

1
Vikas Rajput

ラウンドコーナーが機能していない場合 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);
}

お役に立てれば！

1
Dharmesh Mansata

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
A.G

ラウンドビューの角のプロパティを設定します。

set masksToBoundsブール値imageの値は、まだコーナーの半径の境界の外側に描画されません。

view.layer.cornerRadius = 5;

view.layer.masksToBounds = YES;
0
bhautikmewada191

画像を使うこともできます。

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
richy

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
    }
}
0
iOS