2017-04-02 25 views
1

UIViewControllerのサブクラスにUIViewのサブクラスであるUIViewのICYCollapsableInputViewとUIViewサブクラスのICYHeaderVIewが含まれています。UIViewサブクラスの設定UIViewController + Storyboard in Swift

ICYHeaderViewは、スクリーンショットに表示されている四捨五入のUIViewです。それには丸いボタンが含まれています - 丸いボタン - 緑色の「追加」(+)ボタンが付いたボタンです。

ICYCollapsableInputViewは、今はUITextFieldと保存ボタンを持つビューです。 ICYCollapsableInputViewの適切な関数を呼び出すことによって、UIViewControllerからこのビューを展開したり折りたたんだりすることができます。

ユーザーがICYHeaderViewの丸いボタンをタップすると、ICYCollapsableInputViewはUITableViewを押し下げて高さを拡大することになっています。 ICYCollapsableInputViewを展開したり折りたたんだりしていますが、UITableViewを変更に対応させる方法を理解できません。私は

enter image description here

(スクリーンショットを参照)、赤色の背景と、私は青色の背景と、それに加えビューのXIBでメインビューを着色

expand/collapse animation

(アニメーションを参照)。独自の高さ制約を使用してICYCollapsableInputViewのサイズを変更することはできますが、UITableViewの制約は無視しているようです。

class ICYCollapsableInputView: UIView { 

var view: UIView! 

@IBOutlet weak var heightConstraint: NSLayoutConstraint! 

@IBInspectable public var collapsedHeight: CGFloat = 150 { 
    didSet { 
     self.heightConstraint.constant = collapsedHeight 
    } 
} 
@IBInspectable public var expandedHeight: CGFloat = 250 { 
    didSet { 
     self.heightConstraint.constant = expandedHeight 
    } 
} 

// MARK: - Init 

func loadFromNib() -> UIView { 
    let bundle = Bundle(for: type(of: self)) 
    let nib = UINib(nibName: "ICYCollapsableInputView", bundle: bundle) 
    let view = nib.instantiate(withOwner: self, options: nil)[0] as! UIView 

    return view 
} 


override init(frame: CGRect) { 
    // 1. setup any properties here 

    // 2. call super.init(frame:) 
    super.init(frame: frame) 
    // 3. Setup view from .xib file 
    xibSetup() 

} 

required init?(coder aDecoder: NSCoder) { 
    // 1. setup any properties here 

    // 2. call super.init(coder:) 
    super.init(coder: aDecoder) 
    // 3. Setup view from .xib file 
    xibSetup() 
} 


func xibSetup() { 
    view = loadFromNib() 
    view.frame = bounds 
    view.autoresizingMask = [.flexibleWidth, .flexibleHeight] 
    addSubview(view) 
    self.heightConstraint.constant = self.collapsedHeight 
    var rect = self.frame 
    rect.size.height = self.collapsedHeight 
    self.frame = rect 
    self.view.frame = rect 

} 

func revealInputView() { 
    UIView.animate(withDuration: 0.5, delay: 0, usingSpringWithDamping: 0.3, initialSpringVelocity: 0, options: .curveEaseInOut, animations: { 
     var rect = self.frame 
     rect.size.height = self.expandedHeight 
     self.frame = rect 
     self.heightConstraint.constant = self.expandedHeight 
     self.view.layoutIfNeeded() 
    }, completion: nil) 
} 

func closeInputView() { 
    UIView.animate(withDuration: 0.5, delay: 0, usingSpringWithDamping: 0.3, initialSpringVelocity: 0, options: .curveEaseInOut, animations: { 
     self.heightConstraint.constant = self.collapsedHeight 
     var rect = self.frame 
     rect.size.height = self.collapsedHeight 
     self.frame = rect 
     self.view.layoutIfNeeded() 
    }, completion: nil) 

} 

} 
+0

あなたは解決策を見つけましたか?私は同じ問題があります。それは自分の高さが変わっているからでしょうか? –

答えて

0

は、すべてあなたがIAだけの高さの制約を変更する必要があります。ここでは

はICYCollapsableInputViewからのコードです。

func revealInputView() { 
     UIView.animate(withDuration: 0.5, delay: 0, usingSpringWithDamping: 0.3, initialSpringVelocity: 0, options: .curveEaseInOut, animations: { 

      self.heightConstraint.constant = self.expandedHeight //or 250 
      self.view.layoutIfNeeded() 
     }, completion: nil) 
    } 

    func closeInputView() { 
     UIView.animate(withDuration: 0.5, delay: 0, usingSpringWithDamping: 0.3, initialSpringVelocity: 0, options: .curveEaseInOut, animations: { 

      self.heightConstraint.constant = self.collapsedHeight //or 150   
self.view.layoutIfNeeded() 
     }, completion: nil) 
} 

そして、ストーリーボードでの制約がinputVW

スーパーへTrailaing空間の

以下れるべき - 0、スーパーにスペースをリードする - 0を、スーパーへトップスペース - 0、テーブルビューの下のスペース - 0、スーパーの先頭にスペース - - 0、スーパービューにスペースを末尾 - 0、テーブルビュー

inputVwへトップスペースのための0

下のスペースをスーパービューに - 0

+0

私はそれを試みました。 ICYCollapsableInputView(赤い部分)のメインフレームが変更されない点を除いて、同じことが実行されます。 – Tom

+0

イメージ3 - 制約内で4の4を示します。高さの制約はどこですか? –

+0

ICYCollapsableInputView xibに高さ制約が設定されています。あなたは画像2でそれを見ることができます。 – Tom

関連する問題