ボタンの角を丸める方法


182

長方形の画像(jpg)があり、それを使用してボタンの背景をxcodeの角を丸くしたいと思います。

私は以下を書きました:

UIButton *button = [[UIButton buttonWithType:UIButtonTypeRoundedRect] retain];
CGRect frame = CGRectMake(x, y, cardWidth, cardHeight);
button.frame = frame;
[button setBackgroundImage:backImage forState:UIControlStateNormal];

ただし、この方法で取得したボタンの角は丸くありません。代わりに、元の画像とまったく同じように見えるプレーンな長方形です。代わりに、ボタンを表すために角が丸い画像を取得するにはどうすればよいですか?

ありがとう!

回答:


436

私はあなたの問題を得たと思います、私はUITextAreaで次の解決策を試しました、そしてこれはUIButtonでも動作すると思います。

まず、これを.mファイルにインポートします-

#import <QuartzCore/QuartzCore.h>

そしてあなたのloadViewメソッドに次の行を追加します

    yourButton.layer.cornerRadius = 10; // this value vary as per your desire
    yourButton.clipsToBounds = YES;

これでうまくいくことを願っています。


6
「ユーザー定義のランタイム属性」インスペクターでも動作します
Avi Cherry

迅速にも動作します!YESをtrueに変更するだけです。
Andrew Thomas

119

このランタイム属性によって達成できます

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

カスタムボタンを作成できます。添付の​​スクリーンショットをご覧ください。

親切に注意してください:

ランタイム属性で境界線の色を変更するには、この指示に従ってください

  1. CALayerのカテゴリクラスを作成する

  2. Hファイル

    @property(nonatomic, assign) UIColor* borderIBColor;
  3. mファイル:

    -(void)setBorderIBColor:(UIColor*)color {
        self.borderColor = color.CGColor;
    }
    
    -(UIColor*)borderIBColor {
        return [UIColor colorWithCGColor:self.borderColor];
    }

今から境界線の色チェックのスクリーンショットを設定します

更新された答え

ありがとう


4
私だけですか、回答の情報は不完全ですか?それは実際には機能しません。更新:指定しない限り機能しますborderColor。ただし、borderColorには常に黒を使用します。
ジョニー

3
拡張された回答:IBに設定された色は、CGColorRefのborderColorでは機能しないUIColorタイプである可能性があります。またはそのようなもの。解決策のようなもので、CALayerの上のカテゴリを作成することですので@property(nonatomic, assign) UIColor* borderIBColor;、ヘッダファイル内(いくつかの他の名前と衝突していない)、および実装は次のとおりです。-(void)setBorderIBColor:(UIColor*)color{self.borderColor = color.CGColor;} -(UIColor*)borderIBColor{return [UIColorcolorWithCGColor:self.borderColor];}
ジョニー

1
境界線の色が必要ない場合は、borderRadiusを0に設定すると、色がなくなります。
jungledev

Swiftはどうですか?
Jayprakash Dubey

1
@JayprakashDubey CALayerの拡張機能を作成します。
Krutarth Patel

14

DCKitと呼ばれる私のライブラリをチェックしてみてください。最新バージョンのSwiftで書かれています。

丸い角のボタン/テキストフィールドをInterface Builderから直接作成することができます。

DCKit:丸いボタン

また、検証付きのテキストフィールド、境界線付きのコントロール、破線の境界線、円やヘアラインビューなど、他にも多くの優れた機能があります。


11

円を取得するために限界角の半径まで押し上げる:

    self.btnFoldButton.layer.cornerRadius = self.btnFoldButton.frame.height/2.0;

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

ボタンフレームが正方形の場合、frame.heightやframe.widthは関係ありません。それ以外の場合は、どちらか大きい方を使用します。


7

インポートQuartCoreフレームワーク、それはあなたの既存のプロジェクトに存在しない場合は、インポート#import <QuartzCore/QuartzCore.h>viewcontroller.m

UIButton *button = [[UIButton buttonWithType:UIButtonTypeRoundedRect]];
CGRect frame = CGRectMake(x, y, width, height); // set values as per your requirement
button.layer.cornerRadius = 10;
button.clipsToBounds = YES;

6
UIButton* closeBtn = [[UIButton alloc] initWithFrame:CGRectMake(10, 50, 90, 35)];
//Customise this button as you wish then
closeBtn.layer.cornerRadius = 10;
closeBtn.layer.masksToBounds = YES;//Important

4

最初にボタンのwidth = 100およびHeight = 100を設定します

Objective Cソリューション

YourBtn1.layer.cornerRadius=YourBtn1.Frame.size.width/2;
YourBtn1.layer.borderColor=[uicolor blackColor].CGColor;
YourBtn1.layer.borderWidth=1.0f;

Swift 4ソリューション

YourBtn1.layer.cornerRadius = YourBtn1.Frame.size.width/2
YourBtn1.layer.borderColor = UIColor.black.cgColor
YourBtn1.layer.borderWidth = 1.0

2

角を1つまたは2つの角に丸めたい場合などは、この投稿を読んでください。

[ObjC] –角が丸いUIButton- http://goo.gl/kfzvKP

XIB /ストーリーボードのサブクラスです。書き込みコードなしで境界線をインポートおよび設定します。



2

Swift 3用に更新:

以下のコードを使用して、UIButtonの角を丸くします。

 yourButtonOutletName.layer.cornerRadius = 0.3 *
        yourButtonOutletName.frame.size.height

2

私のコードを試してください。ここでは、テキストの色、背景色、角の半径など、UIButtonのすべてのプロパティを設定できます。

extension UIButton {
    func btnCorner() {
        layer.cornerRadius = 10
        clipsToBounds = true
        backgroundColor = .blue
    }
}

今このように呼び出します

yourBtnName.btnCorner()


0

iOS SWift 4の場合

button.layer.cornerRadius = 25;
button.layer.masksToBounds = true;

0

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

以下のためのObjective C

submitButton.layer.cornerRadius = 5;
submitButton.clipsToBounds = YES;

スウィフト

submitButton.layer.cornerRadius = 5
submitButton.clipsToBounds = true

0

Swift 4アップデート

私も多くのオプションを試しましたが、UIButtonを丸くすることができませんでした。viewDidLayoutSubviews()解決済みマイ問題にコーナー半径コードを追加しました。

func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        anyButton.layer.cornerRadius = anyButton.frame.height / 2
    }

また、次のようにしてcornerRadiusを調整できます

func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        anyButton.layer.cornerRadius = 10 //Any suitable number as you prefer can be applied 
    }
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.