web-dev-qa-db-ja.com

ストーリーボードで簡単な丸いボタンを作る方法は？

私はちょうどiOSの開発を学び始めた、単純な丸いボタンを作る方法を見つけることができません。私は古いバージョンのためのリソースを見つけます。ボタンの背景をカスタマイズする必要がありますか？ Androidでは、私はただ9つの​​パッチを使うでしょう、しかし私はiOSがこの機能を持っていないことを知っています。

enter image description here

iosxcodeuibuttonstoryboard
82
Gintas_

ストーリーボードでそれを行うには、ボタンに画像を使用する必要があります。

あるいは、コードでそれを行うことができます。

 btn.layer.cornerRadius = 10
 btn.clipsToBounds = true
70
realtimez

短い答え：はい

追加の背景画像やそのためのコードを書く必要なしに、あなたは絶対に簡単な丸いボタンを作ることができます。以下のスクリーンショットに従って、ボタンの実行時属性を設定し、目的の結果を得てください。

Storyboardには表示されませんが、プロジェクトを実行したときには正常に機能します。

enter image description here

注：キーパスのlayer.cornerRadiusと値は5です。値はボタンの高さと幅に応じて変更する必要があります。計算式はボタンの高さ* 0.50です。そのため、シミュレータまたは物理デバイス上の丸みのあるボタンが表示されるように、値をいろいろ試してみてください。ストーリーボードで丸めるボタンが複数ある場合、この手順は面倒に見えます。

167
Nishant

あなたはこのようなことをすることができます：

@IBDesignable class MyButton: UIButton
{
    override func layoutSubviews() {
        super.layoutSubviews()

        updateCornerRadius()
    }

    @IBInspectable var rounded: Bool = false {
        didSet {
            updateCornerRadius()
        }
    }

    func updateCornerRadius() {
        layer.cornerRadius = rounded ? frame.size.height / 2 : 0
    }
}

Identity InspectorでclassをMyButtonに設定します。IBではroundedプロパティがあります。

enter image description here

75
ChikabuZ
  1. Cocoa Touchクラスを作成します。

enter image description here

  1. RoundButtonクラスにコードを挿入します。

    import UIKit

@IBDesignable
class RoundButton: UIButton {

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

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

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

  2. 画像を参照してください。

enter image description here

24
anson

これを行う最も簡単な方法は、cornerRadiusをビューの高さの半分に設定することです。

button.layer.cornerRadius = button.bounds.size.height/2
8
FrankkieNL

他の回答では、この作業の大部分をコードで実行することを推奨していますが、実際にはストーリーボードのIBインタフェースで変更を表示する方法を提供する回答は1つだけでした。私の答えは、ビュー、ボタン、画像などの角半径を変更できるようにすることで、その答えを超えています。

次のコードを見てください。このコードを使用するには、RoundedViewという名前の新しいSwiftファイルまたはそれを呼び出したいものを作成してからストーリーボードに移動し、クラスを "RoundedView"、 "RoundedImageView"、または "RoundedButton"のいずれかに変更します。

import UIKit

@IBDesignable class RoundedImage: UIImageView
{
    override func layoutSubviews() {
        super.layoutSubviews()

        updateCornerRadius()
    }

    @IBInspectable var rounded: Bool = false {
        didSet {
            updateCornerRadius()
        }
    }

    @IBInspectable var cornerRadius: CGFloat = 0.1 {
        didSet {
            updateCornerRadius()
        }
    }

    func updateCornerRadius() {
        layer.cornerRadius = rounded ? cornerRadius : 0
        layer.masksToBounds = rounded ? true : false
    }
}

@IBDesignable class RoundedView: UIView
{
    override func layoutSubviews() {
        super.layoutSubviews()

        updateCornerRadius()
    }

    @IBInspectable var rounded: Bool = false {
        didSet {
            updateCornerRadius()
        }
    }

    @IBInspectable var cornerRadius: CGFloat = 0.1 {
        didSet {
            updateCornerRadius()
        }
    }

    func updateCornerRadius() {
        layer.cornerRadius = rounded ? cornerRadius : 0
        layer.masksToBounds = rounded ? true : false
    }
}

@IBDesignable class RoundedButton: UIButton
{
    override func layoutSubviews() {
        super.layoutSubviews()

        updateCornerRadius()
    }

    @IBInspectable var rounded: Bool = false {
        didSet {
            updateCornerRadius()
        }
    }

    @IBInspectable var cornerRadius: CGFloat = 0.1 {
        didSet {
            updateCornerRadius()
        }
    }

    func updateCornerRadius() {
        layer.cornerRadius = rounded ? cornerRadius : 0
        layer.masksToBounds = rounded ? true : false
    }
}
3
Joseph Shenton

ストーリーボードからyurボタンのIBOutletを接続できます。

それからあなたはそれが角を丸くするためにあなたのボタンのcorner radiusをセットすることができます。

例えば、あなたのoutletはmyButtonです。

Obj - C

 self.myButton.layer.cornerRadius = 5.0 ;

迅速

  myButton.layer.cornerRadius = 5.0

正確な丸いボタンが必要な場合は、ボタンのwidthとheightはequalで、cornerRadiusはheightまたはwidth/2（widthまたはheightの半分）に等しい必要があります。

3
Lion

ストーリーボードにlayer.cornerRadiusを追加するときは、前後にスペースがないことを確認してください。コピーペーストすると、スペースが挿入される可能性があります。 XCodeがある種の警告やエラーを言ってくれればいいでしょう。

1
venki mohan

これを試して！！

 override func viewDidLoad() {
   super.viewDidLoad()

   var button = UIButton.buttonWithType(.Custom) as UIButton
   button.frame = CGRectMake(160, 100, 200,40)

   button.layer.cornerRadius =5.0
   button.layer.borderColor = UIColor.redColor().CGColor
   button.layer.borderWidth = 2.0

   button.setImage(UIImage(named:"Placeholder.png"), forState: .Normal)
   button.addTarget(self, action: "OnClickroundButton", forControlEvents: .TouchUpInside)
   button.clipsToBounds = true

   view.addSubview(button)
}
    func OnClickroundButton() {
   NSLog(@"roundButton Method Called");
}
0
Sanjeet verma