私のログインビューがありサブビューているUIActivityView
とUILabel
言って、「では...署名を」。このサブビューには、角が丸くないコーナーがあります。どうすれば丸くできますか?
私のxib内でそれを行う方法はありますか?
cornerRadius
インターフェイスビルダーのみを使用してプロパティをテーブルに適用する方法を示しているため、事前レンダリングされた画像を使用したり、コードで設定したりする必要はありません。
私のログインビューがありサブビューているUIActivityView
とUILabel
言って、「では...署名を」。このサブビューには、角が丸くないコーナーがあります。どうすれば丸くできますか?
私のxib内でそれを行う方法はありますか?
cornerRadius
インターフェイスビルダーのみを使用してプロパティをテーブルに適用する方法を示しているため、事前レンダリングされた画像を使用したり、コードで設定したりする必要はありません。
回答:
これを試して
#import <QuartzCore/QuartzCore.h> // not necessary for 10 years now :)
...
view.layer.cornerRadius = 5;
view.layer.masksToBounds = true;
注:UIViewController
のビューに丸みを帯びた角を適用しようとしている場合は、ビューコントローラーのコンストラクターではなく、実際にインスタンス化された-viewDidLoad
後ので適用する必要がありview
ます。
インターフェイスビルダーのユーザー定義ランタイム属性機能を使用して、キーパスをlayer.cornerRadius
値に設定することもできます。QuartzCore
ただし、ライブラリが含まれていることを確認してください。
このトリックは、layer.borderWidthの設定でも機能しますがlayer.borderColor
、これはでCGColor
ないことを期待しているため機能しませんUIColor
。
これらのパラメーターは実行時に評価されるため、ストーリーボードで効果を確認することはできません。
Clip Subviews
ビューIBのオプションも忘れずにチェックしてください
@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)
簡潔な答え:
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
これはこの結果を与えます:
どちらclipsToBounds
とmasksToBounds
されている同等。1 UIView
つ目はで使用され、2つ目はで使用されるだけCALayer
です。
blueView.frame.size.height/2
)に設定すると、角が完全に丸くなることも付け加えておきます。
Ed Martyが行ったアプローチとは異なるアプローチ:
#import <QuartzCore/QuartzCore.h>
[v.layer setCornerRadius:25.0f];
[v.layer setMasksToBounds:YES];
IBからすべてのオブジェクトをロードするには、setMasksToBoundsが必要です...ビューが丸められる問題が発生しましたが、IBからのオブジェクトがありませんでした:/
これはそれを修正しました= D役立つことを願っています!
このブログ投稿で説明されているように、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];
}
それについてのクールな部分は、あなたがあなたが丸めたい角を選択できることです。
最初にヘッダーファイルをインポートする必要があります <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
さもなければ、効果が表示されない可能性があります。
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
}
}
}
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];
@IBDesignable
class DesignableView: UIView {
}
extension UIView
{
@IBInspectable
var cornerRadius: CGFloat {
get {
return layer.cornerRadius
}
set {
layer.cornerRadius = newValue
}
}
}
layer.cornerRadius
元の状態に戻るのを防ぎますか?(つまり、xcodeのストーリーボードはcornerRadius
、オリジナルUIView
が初期化された後にのみ設定する方法をどのように知るのですか?)
SwiftUIでは、必要なものにcornerRadius
直接修飾子を使用できView
ます。この質問の例:
Text("Signing In…")
.padding(16)
.background(Color.red)
.cornerRadius(50)
ダイアモンドのような半径はこれ以上ないことに注意してください。したがって、cornerRadiusを高さの半分以上に設定しても、スムーズに丸められます。
チェックアウト 、この答え SE方法にラウンド特定のコーナー SwiftUIで
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;
}
これを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
丸い角が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);
}
お役に立てれば!
画像を使用することもできます:
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];
ラウンドビューのcornerRadiousプロパティを設定する
set masksToBoundsブール値画像の角の半径の境界の外側には描画されません
view.layer.cornerRadius = 5;
view.layer.masksToBounds = YES;
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)
}
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
}
}
Xcode 6で
self.layer.layer.cornerRadius = 5.0f;
または
self.layer.layer.cornerRadius = 5.0f;
self.layer.clipsToBounds = YES;