#12 - AutoLayout(如何只用程式做設定) (善用Equal width/height 就不用煩惱fixed產生的錯誤囉) (善用Stack排版免煩惱)

點選Xcode工作視窗右下角Add new constraint

從這邊可以設定物件在storyboard中的位置，Constrain to margins打勾的話表示物件是跟父視窗做Autolayout的設定(打勾表示把安全區域考慮進去，如status bar,tool bar等，所以會比較內縮)。

如有多個物件要做Autolayout，可先設定各個物件固定寬度、高度後，再將物件用stack合併。

下圖左邊數來第二個選項即為stack合併，如欲取消合併這先選擇stack後按住option鍵再點選

stack按鈕，選擇Embed in Stack即可取消合併。

*如只設定元件的長寬固定大小會有錯誤產生，此時只要在設定元件Autolayout的位置即可





用程式碼實現AutoLayout

        //置中-方法二

        blueView.translatesAutoresizingMaskIntoConstraints = false

        

        view.addConstraint(NSLayoutConstraint(item: blueView, attribute: .centerX, relatedBy: .equal, toItem: view, attribute: .centerX, multiplier: 1.0, constant: 0))

        //X軸置中

        view.addConstraint(NSLayoutConstraint(item: blueView, attribute: .centerY, relatedBy: .equal, toItem: view, attribute: .centerY, multiplier: 1.0, constant: 0))

        //Y軸置中

        view.addConstraint(NSLayoutConstraint(item: blueView, attribute: .width, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1, constant: 100))

        //寬度調整

        view.addConstraint(NSLayoutConstraint(item: blueView, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1, constant: 100))

        //高度調整

------------------------------
1.可先用fixed width/height固定元件大小做初始排版，再用equal width/height將各個元件做等大小關聯，並包入stack中，再把一開始再個別元件上設定的fixed width/height刪掉(最外層stack的constrain最後再設定(先解開stack內元件的fixed width/height))
2.善用>= ，對於大小不同但要並列顯示的元件(如Image下面的Label)，可在較小的元件上(如Label)加入>=條件，就不怕拿掉fixed height/width後，小圖被大圖吃掉的問題
3.可用等長寬等比例(1:1 指向自己(Ctrl+滑鼠拉到自己)) 解決圖形變形問題

------------------------------------------------------
2018/11/18
1.多個元件排版時，先將各自元件大小設定為固定，在包進同一個stack裡，之後設定stack大小固定，位置水平/垂直置中，可解決跑版問題