スウィフト：ボタンの丸い角が拘束を破ります

Question

私はxib経由でロードされたカスタムセルを持つテーブルビューを持っています。そのセルには右下隅が丸くなるステータスボタンがあります。このボタンには、スーパービュー= 0、高さ= 30のトレーリング/リーディング/ボトムスペースという制約があります。それは完璧に働いている丸めなし

、できるだけ早く私は、例えば、底のための一つの角を丸めるように右の制約が

self.btnStatus.roundCorners(corners: [.bottomRight], radius: 7.0, borderWidth: nil, borderColor: nil) 

を破り、ここでいくつかの人は（layoutSubviewsを呼び出すことが示唆します）それは私を助けなかった。

具体的には、プロジェクト全体を一目見てみることができるシンプルなプロジェクトを作成しました。

正しいリンク

ButtonRoundCorner.zip

Answer 1

ボタンをサブクラス化し、layoutSubviews()関数をオーバーライドして「丸め」コードを配置することで、より信頼性の高い結果を得ることができます。

あなたが境界線を追加したい場合はまず、あなたが複数の「国境のサブレイヤー」を追加したい...ので、これにあなたのUIView拡張子を変更しないでください：

extension UIView { 
    func roundCorners(corners: UIRectCorner, radius: CGFloat, borderWidth: CGFloat?, borderColor: UIColor?) { 
     let maskPath = UIBezierPath(roundedRect: self.bounds, byRoundingCorners: corners, cornerRadii: CGSize(width: radius, height: radius)) 
     let maskLayer = CAShapeLayer() 
     maskLayer.frame = self.bounds 
     maskLayer.path = maskPath.cgPath 

     self.layer.mask = maskLayer 
     self.layer.masksToBounds = true 

     if (borderWidth != nil && borderColor != nil) { 

      // remove previously added border layer 
      for layer in layer.sublayers! { 
       if layer.name == "borderLayer" { 
        layer.removeFromSuperlayer() 
       } 
      } 

      let borderLayer = CAShapeLayer() 

      borderLayer.frame = self.bounds; 
      borderLayer.path = maskPath.cgPath; 
      borderLayer.lineWidth = borderWidth ?? 0; 
      borderLayer.strokeColor = borderColor?.cgColor; 
      borderLayer.fillColor = UIColor.clear.cgColor; 
      borderLayer.name = "borderLayer" 

      self.layer.addSublayer(borderLayer); 

     } 

    } 
} 

次に、UIButtonサブクラスを追加：

class RoundedButton: UIButton { 

    var corners: UIRectCorner? 
    var radius = CGFloat(0.0) 
    var borderWidth = CGFloat(0.0) 
    var borderColor: UIColor? 

    override func layoutSubviews() { 

     super.layoutSubviews() 

     // don't apply mask if corners is not set, or if radius is Zero 
     guard let _corners = corners, radius > 0.0 else { 
      return 
     } 

     roundCorners(corners: _corners, radius: radius, borderWidth: borderWidth, borderColor: borderColor) 

    } 

} 

これはあなたのカップルの利点を与える：と、ボタンの枠の変更（例えば、デバイスを回転させる）1）これは、そのマスク層のフレームを更新する、および2）あなたがいずれかのカスタムからこれらの値を設定することができます細胞クラスまたはcellForRowAtの

どちらの方法でも、btnStatusクラスをUIButtonからRoundedButtonに変更します（ストーリーボードと@IBOutlet接続の両方）。その後

これにあなたのCustomTableViewCellを変更します。

class CustomTableViewCell: UITableViewCell { 

    @IBOutlet weak var btnStatus: RoundedButton! 

    override func awakeFromNib() { 
     super.awakeFromNib() 

     // set up corner maskign 
     btnStatus.corners = .bottomRight 
     btnStatus.radius = 7.0 

     // set if desired 
//  btnStatus.borderWidth = 2.0 
//  btnStatus.borderColor = .blue 

    } 

    override func setSelected(_ selected: Bool, animated: Bool) { 
     super.setSelected(selected, animated: animated) 
     // Configure the view for the selected state 
    } 

} 

そして最後に、あなたのcellForRowAt関数は次のようになります。

それを行う必要があります

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { 
    let cell = self.tableView.dequeueReusableCell(withIdentifier: "customCell", for: indexPath) as! CustomTableViewCell 
    return cell 
} 

...

Answer 2

それは、上の制約を持っていないので、たぶん、あなたのボタンが重なっていますか？明るい枠線を追加して、上部にコンストレインを追加しない場合は上部を表示できるかどうかを確認してください。また、静的な高さを与えるのではなく、その上にあるオブジェクトの高さに比例するようにしてください（おそらく、デバイスの画面サイズによってオーバーラップが発生している可能性があります）。

Answer 3

コードを見ました。問題は、roundCorners関数がレイヤのプロパティを設定するためにビューの境界に依存し、awakeFromNibにroundCornersを呼び出していることです。セルは、autolayoutがまだ計算されていないため、NIBファイルと同じ境界になります。 roundCornersコールをlayoutSubviewsに移動する必要があります。したがって、自動レイアウトが完了した後にコールされます。

import UIKit 

class CustomTableViewCell: UITableViewCell { 

    @IBOutlet weak var btnStatus: UIButton!  
    override func layoutSubviews() { 
     super.layoutSubviews() 
       self.btnStatus.roundCorners(corners: [.bottomRight], radius: 7.0, borderWidth: nil, borderColor: nil) 
    } 
} 

EDITはまた、細胞が最初に描画される前に呼び出されるlayoutSubviewsを強制的にcellforRowAtにcell.setNeedsLayout（）を加えます。