2016-08-01 10 views
1

を示し、私はスケッチに設計されたスクリーンを持っています。あなたは、いくつかのコーナーを見ることができますのiOS SDKには、次の2つのボタンがあります</p> <p><a href="https://i.stack.imgur.com/rvUx4.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rvUx4.jpg" alt="enter image description here"></a></p> <p>:角の半径がここで間違って

enter image description here

:今、私はXcodeで、このようなボタンを設計していると私はUIButtonの角の半径をこのように設定しています:

layer.cornerRadius = 30 
clipsToBounds = true 

しかし、結果として、私は奇妙な何かを持っていますが中央の場合は、ボタンの左右にあります。私に何ができる?

+0

使用 'layer.cornerRadius = yourbuttonwidth/2' –

+0

@ Anbu.Karthik:それは' layer.cornerRadius = yourbuttonheight/2 'でなければなりませんか? –

答えて

4

cornerRadiusの値を30に設定すると、このようなボタンで丸い角を生成するには、ボタンの高さを60とします。

レイアウトの処理方法によっては、すべてのデバイスで同じではない可能性があります。あなたのイメージを見ると、あなたのデザインよりもボタンの高さがやや低いようです。

つのオプション:あなたのボタンは常に60点の高さを持つように

  1. 使用自動レイアウトとは、60の値は、あなたのボタンの上に「固定高さ」の制約を追加します。
  2. UIButtonサブクラスを実装し、layoutSubviewsメソッドではcornerRadiusをボタンのboundsの半分の高さに設定します。この方法では、システムがボタンを再描画するたびに、コーナー半径が適切に更新されます。
0

ボタンのレイヤーは、スケッチとは異なるサイズになりました。
layoutSubviewsの後、角の半径をレイヤの高さの半分に設定します。代わりに、あなたは複数回使用する場合は、あなたが円形のボタンを作成するための拡張を行うことができますすべてのコントローラにコードを書くの

override func layoutSubviews() { 
    super.layoutSubviews() 
    layer.cornerRadius = layer.bounds.height/2.0 
} 
0

、あなたがcornerRadius、borderWidthとUIColorを渡すことができ、同様code.Inの下に使用してビュー。

import UIKit 

extension UIView 
{ 
    func makeCircular(cornerRadius: CGFloat, borderWidth: CGFloat, borderColor: UIColor) 
    { 
     self.layer.cornerRadius = cornerRadius * self.bounds.size.width 
     self.layer.borderColor = borderColor.CGColor as CGColorRef 
     self.layer.borderWidth = borderWidth 
     self.clipsToBounds = true 
    } 
} 

あなたの要件に従って値を渡すことができます。

使用法:あなたはすべてのUIViewControllerクラス内の任意のより多くのコードを配置する必要はありませんので、

snapButton.makeCircular(0.5, borderWidth: 1.0, borderColor: UIColor.clearColor()) 
1

するカスタムUIButtonクラスを作成し、そのクラスにご希望のボタンのすべてを設定します。

カスタムUIButtonクラスは次のようになります。

import UIKit 

class RoundCornerButton: UIButton { 

    override func drawRect(rect: CGRect) { 
     // Drawing code 
     self.clipsToBounds = true 
     self.layer.cornerRadius = self.frame.size.width/2 
    } 

} 
関連する問題

 関連する問題