AutoLayout ConstraintsまたはStackView

Question

自動レイアウトで深刻な助けが必要です。私はキーボードとしてレイアウトしようとしている合計12のボタンを持っています。それは最後にこのように見えるはずです。

は現在、それがこの

ここに私の現在の制約があるように見えます。

は、私は本当にこのout.Can誰かの誰の助けを働いていくつかの助けを必要としています。私はプログラミングとXCODEの初心者です。しかし、これは難しいことではありません。助けてもらえますか？オートレイアウトについてのチュートリアルの後でチュートリアルを見てきましたが、それは非常に混乱する概念です。私はこの単純なピアノのキーボードをレイアウトする必要があります、助けてください。

ありがとうございました

Answer 1

インターフェイスビルダではなくプログラムで制約を試してセットアップすることをお勧めします。このようにして、実際にあなたの制約に何が起こっているのか、そしてインターフェースビルダーで簡単にできることを理解できるようになります。

プログラミングによる自動レイアウト制約表記には、 の3種類があります。1. init（item：attribute：relatedBy：toItem：attribute：multiplier：constant :)。パーセンテージベースのレイアウト（乗数）が必要なときに最適です。 2.アンカー表記法（iOS9の新機能）。私は新しいAnchor表記の経験はありませんが、インタフェースビルダーの制約の構成に似ていることがわかります。しかし、再び、それぞれの視点に対して制約が何をするかを正確に知ることはできません。 3. constraintsWithVisualFormat。 1番と同じだけど簡単です。唯一の欠点は、ビューのパーセンテージに合わせる場合、そうする能力がないことです。

constraintWithVisualFormatの表記法を「可視化」できるため、テスト番号3のみを使用します。しかし、始める前にVisual Format language参照を参照してください。

まず、新しいスワイプファイルを追加します。名前をKeyBoardViewとし、以下のコードをその中にコピーします。

class KeyboardView: UIView { 
var redKey : UIView! 
var orangeKey : UIView! 
var yellowKey : UIView! 
var greenKey : UIView! 
var lightBlueKey : UIView! 
var darkBlueKey : UIView! 
var purpleKey : UIView! 
var blackKey1 : UIView! 
var blackKey2 : UIView! 
var blackKey3 : UIView! 
var blackKey4 : UIView! 
var blackKey5 : UIView! 


override init(frame: CGRect) { 
    super.init(frame: frame) 
    self.backgroundColor = UIColor.clearColor() 
    setup() 
} 

required init(coder aDecoder: NSCoder) { 
    fatalError("This class does not support NSCoding") 
} 

func setup() { 
    redKey = UIView() 
    redKey.backgroundColor = UIColor.redColor() 
    redKey.translatesAutoresizingMaskIntoConstraints = false 
    self.insertSubview(redKey!, atIndex: 10) 

    orangeKey = UIView() 
    orangeKey.backgroundColor = UIColor.orangeColor() 
    orangeKey.translatesAutoresizingMaskIntoConstraints = false 
    self.insertSubview(orangeKey!, atIndex: 10) 

    yellowKey = UIView() 
    yellowKey.backgroundColor = UIColor.yellowColor() 
    yellowKey.translatesAutoresizingMaskIntoConstraints = false 
    self.insertSubview(yellowKey, atIndex: 10) 

    greenKey = UIView() 
    greenKey.backgroundColor = UIColor.greenColor() 
    greenKey.translatesAutoresizingMaskIntoConstraints = false 
    self.insertSubview(greenKey, atIndex: 10) 

    lightBlueKey = UIView() 
    lightBlueKey.backgroundColor = UIColor.blueColor() 
    lightBlueKey.alpha = 0.5 
    lightBlueKey.translatesAutoresizingMaskIntoConstraints = false 
    self.insertSubview(lightBlueKey, atIndex: 10) 

    darkBlueKey = UIView() 
    darkBlueKey.backgroundColor = UIColor.blueColor() 
    darkBlueKey.translatesAutoresizingMaskIntoConstraints = false 
    self.insertSubview(darkBlueKey, atIndex: 10) 

    purpleKey = UIView() 
    purpleKey.backgroundColor = UIColor.purpleColor() 
    purpleKey.translatesAutoresizingMaskIntoConstraints = false 
    self.insertSubview(purpleKey, atIndex: 10) 

    blackKey1 = UIView() 
    blackKey1.backgroundColor = UIColor.blackColor() 
    blackKey1.translatesAutoresizingMaskIntoConstraints = false 
    self.insertSubview(blackKey1, atIndex: 11) 

    blackKey2 = UIView() 
    blackKey2.backgroundColor = UIColor.blackColor() 
    blackKey2.translatesAutoresizingMaskIntoConstraints = false 
    self.insertSubview(blackKey2, atIndex: 11) 

    blackKey3 = UIView() 
    blackKey3.backgroundColor = UIColor.blackColor() 
    blackKey3.translatesAutoresizingMaskIntoConstraints = false 
    self.insertSubview(blackKey3, atIndex: 11) 

    blackKey4 = UIView() 
    blackKey4.backgroundColor = UIColor.blackColor() 
    blackKey4.translatesAutoresizingMaskIntoConstraints = false 
    self.insertSubview(blackKey4, atIndex: 11) 

    blackKey5 = UIView() 
    blackKey5.backgroundColor = UIColor.blackColor() 
    blackKey5.translatesAutoresizingMaskIntoConstraints = false 
    self.insertSubview(blackKey5, atIndex: 11) 

    let views = [ 
     "redKey" : redKey, 
     "orangeKey" : orangeKey, 
     "yellowKey" : yellowKey, 
     "greenKey" : greenKey, 
     "lightBlueKey" : lightBlueKey, 
     "darkBlueKey" : darkBlueKey, 
     "purpleKey" : purpleKey, 
     "blackKey1" : blackKey1, 
     "blackKey2" : blackKey2, 
     "blackKey3" : blackKey3, 
     "blackKey4" : blackKey4, 
     "blackKey5" : blackKey5, 
    ] 

    let colorKeySpan = self.bounds.width/7 
    let blackKeyWidth = self.bounds.width/12 
    let blackKeyHeight = self.bounds.height/2.5 
    let scaleGap = self.bounds.width/6 

    let metrics = [ 
     "colorKeySpan" : colorKeySpan, 
     "blackKeyWidth" : blackKeyWidth, 
     "blackKeyHeight" : blackKeyHeight, 
     "scaleGap" : scaleGap, 
    ] 

    let redKeyVConstraint = NSLayoutConstraint.constraintsWithVisualFormat("V:|-0-[redKey]-0-|", options: NSLayoutFormatOptions(rawValue: 0), metrics: metrics, views: views) 
    let redKeyHConstraint = NSLayoutConstraint.constraintsWithVisualFormat("H:|-0-[redKey(colorKeySpan)]-0-[orangeKey]", options: NSLayoutFormatOptions(rawValue: 0), metrics: metrics, views: views) 
    self.addConstraints(redKeyVConstraint) 
    self.addConstraints(redKeyHConstraint) 

    let orangeKeyVConstraint = NSLayoutConstraint.constraintsWithVisualFormat("V:|-0-[orangeKey]-0-|", options: NSLayoutFormatOptions(rawValue: 0), metrics: metrics, views: views) 
    let orangeKeyHConstraint = NSLayoutConstraint.constraintsWithVisualFormat("H:[orangeKey(colorKeySpan)]-0-[yellowKey]", options: NSLayoutFormatOptions(rawValue: 0), metrics: metrics, views: views) 
    self.addConstraints(orangeKeyVConstraint) 
    self.addConstraints(orangeKeyHConstraint) 

    let yellowKeyVConstraint = NSLayoutConstraint.constraintsWithVisualFormat("V:|-0-[yellowKey]-0-|", options: NSLayoutFormatOptions(rawValue: 0), metrics: metrics, views: views) 
    let yellowKeyHConstraint = NSLayoutConstraint.constraintsWithVisualFormat("H:[yellowKey(colorKeySpan)]-0-[greenKey]", options: NSLayoutFormatOptions(rawValue: 0), metrics: metrics, views: views) 
    self.addConstraints(yellowKeyVConstraint) 
    self.addConstraints(yellowKeyHConstraint) 

    let greenKeyVConstraint = NSLayoutConstraint.constraintsWithVisualFormat("V:|-0-[greenKey]-0-|", options: NSLayoutFormatOptions(rawValue: 0), metrics: metrics, views: views) 
    let greenKeyHConstraint = NSLayoutConstraint.constraintsWithVisualFormat("H:[greenKey(colorKeySpan)]-0-[lightBlueKey]", options: NSLayoutFormatOptions(rawValue: 0), metrics: metrics, views: views) 
    self.addConstraints(greenKeyVConstraint) 
    self.addConstraints(greenKeyHConstraint) 

    let lightBlueKeyVConstraint = NSLayoutConstraint.constraintsWithVisualFormat("V:|-0-[lightBlueKey]-0-|", options: NSLayoutFormatOptions(rawValue: 0), metrics: metrics, views: views) 
    let lightBlueKeyHConstraint = NSLayoutConstraint.constraintsWithVisualFormat("H:[lightBlueKey(colorKeySpan)]-0-[darkBlueKey]", options: NSLayoutFormatOptions(rawValue: 0), metrics: metrics, views: views) 
    self.addConstraints(lightBlueKeyVConstraint) 
    self.addConstraints(lightBlueKeyHConstraint) 

    let darkBlueKeyVConstraint = NSLayoutConstraint.constraintsWithVisualFormat("V:|-0-[darkBlueKey]-0-|", options: NSLayoutFormatOptions(rawValue: 0), metrics: metrics, views: views) 
    let darkBlueKeyHConstraint = NSLayoutConstraint.constraintsWithVisualFormat("H:[darkBlueKey(colorKeySpan)]-0-[purpleKey]", options: NSLayoutFormatOptions(rawValue: 0), metrics: metrics, views: views) 
    self.addConstraints(darkBlueKeyVConstraint) 
    self.addConstraints(darkBlueKeyHConstraint) 

    let purpleKeyVConstraint = NSLayoutConstraint.constraintsWithVisualFormat("V:|-0-[purpleKey]-0-|", options: NSLayoutFormatOptions(rawValue: 0), metrics: metrics, views: views) 
    let purpleKeyHConstraint = NSLayoutConstraint.constraintsWithVisualFormat("H:[purpleKey(colorKeySpan)]-0-|", options: NSLayoutFormatOptions(rawValue: 0), metrics: metrics, views: views) 
    self.addConstraints(purpleKeyVConstraint) 
    self.addConstraints(purpleKeyHConstraint) 

    let blackKey1VConstraint = NSLayoutConstraint.constraintsWithVisualFormat("V:|-0-[blackKey1(blackKeyHeight)]", options: NSLayoutFormatOptions(rawValue: 0), metrics: metrics, views: views) 
    let blackKey1HConstraint = NSLayoutConstraint.constraintsWithVisualFormat("H:|-blackKeyWidth-[blackKey1(blackKeyWidth)]", options: NSLayoutFormatOptions(rawValue: 0), metrics: metrics, views: views) 
    self.addConstraints(blackKey1VConstraint) 
    self.addConstraints(blackKey1HConstraint) 

    let blackKey2VConstraint = NSLayoutConstraint.constraintsWithVisualFormat("V:|-0-[blackKey2(blackKeyHeight)]", options: NSLayoutFormatOptions(rawValue: 0), metrics: metrics, views: views) 
    let blackKey2HConstraint = NSLayoutConstraint.constraintsWithVisualFormat("H:[blackKey1]-blackKeyWidth-[blackKey2(blackKeyWidth)]", options: NSLayoutFormatOptions(rawValue: 0), metrics: metrics, views: views) 
    self.addConstraints(blackKey2VConstraint) 
    self.addConstraints(blackKey2HConstraint) 

    let blackKey3VConstraint = NSLayoutConstraint.constraintsWithVisualFormat("V:|-0-[blackKey3(blackKeyHeight)]", options: NSLayoutFormatOptions(rawValue: 0), metrics: metrics, views: views) 
    let blackKey3HConstraint = NSLayoutConstraint.constraintsWithVisualFormat("H:[blackKey2]-scaleGap-[blackKey3(blackKeyWidth)]", options: NSLayoutFormatOptions(rawValue: 0), metrics: metrics, views: views) 
    self.addConstraints(blackKey3VConstraint) 
    self.addConstraints(blackKey3HConstraint) 

    let blackKey4VConstraint = NSLayoutConstraint.constraintsWithVisualFormat("V:|-0-[blackKey4(blackKeyHeight)]", options: NSLayoutFormatOptions(rawValue: 0), metrics: metrics, views: views) 
    let blackKey4HConstraint = NSLayoutConstraint.constraintsWithVisualFormat("H:[blackKey3]-blackKeyWidth-[blackKey4(blackKeyWidth)]", options: NSLayoutFormatOptions(rawValue: 0), metrics: metrics, views: views) 
    self.addConstraints(blackKey4VConstraint) 
    self.addConstraints(blackKey4HConstraint) 

    let blackKey5VConstraint = NSLayoutConstraint.constraintsWithVisualFormat("V:|-0-[blackKey5(blackKeyHeight)]", options: NSLayoutFormatOptions(rawValue: 0), metrics: metrics, views: views) 
    let blackKey5HConstraint = NSLayoutConstraint.constraintsWithVisualFormat("H:[blackKey4]-blackKeyWidth-[blackKey5(blackKeyWidth)]", options: NSLayoutFormatOptions(rawValue: 0), metrics: metrics, views: views) 
    self.addConstraints(blackKey5VConstraint) 
    self.addConstraints(blackKey5HConstraint) 
} 

}

ファイルの上のUIKitや財団をインポートすることを忘れないでください。

その後viewDidLoadメソッドであなたのViewControllerに以下のコードを追加します。

let keyboardView = KeyboardView(frame: UIScreen.mainScreen().bounds) 
self.view.addSubview(keyView 

あなたは、あなたのニーズに合わせて、フレームを変更することができます。

私たちがやっていることは、カスタムUIViewをインターフェイスに追加することだけです。 KeyboardViewクラスのプロパティと "setup"メソッドをViewControllerクラスに追加するだけで、カスタムUIViewなしでViewControllerのすべての制約を設定することもできます。

あなたのような複雑な設定の場合、プログラムビルドすることをお勧めします。なぜなら、常にすべてを変更するつもりだが、インターフェイスビルダーですべてを破る代わりに、必要な値を正確に移動できるからです。メトリックの値を変更することにより、

実験、ダッシュと括弧の間の値。そして、また、あなたは常にカスタマイズとのUIKitのサブクラスエレメントことができることを知って

記法1で制約を再作成してみてください。