Swift 4: Auto Layout Progammatically (Part.1)

王彤

Published in

Tung's iOS

3 min readJul 13, 2018

之前都是用Storyboard拉畫面，這次要用程式碼做這樣的畫面：

先把要拿來練習的圖片拉進去Assets.xcassets，然後產生要放在畫面上的UIImage跟UITextView。

要做Auto Layout一定要把『translatesAutoresizingMaskIntoConstraints』這個屬性設定成false，否則不管怎麼設定都沒有用。稍微解釋一下UITextView的部分：//文字粗體且大小為18
textView.font = UIFont.boldSystemFont(ofSize: 18)//文字置中
textView.textAlignment = .center//文字不可編輯
textView.isEditable = false//不可滑動
textView.isScrollEnabled = false

在viewDidLoad把toyImageView跟descriptionTextView加到view底下，並且準備寫一個方法setupLayout來做auto layout。

setupLayout是本篇的精華，重點在於Anchor這個概念，如果拿去餵google得到的翻譯是錨，也就是拿來固定船隻，使船隻不會飄走的東西，『所以在程式碼裡大概可以想像成拿來固定UI的東西』。

centerXAnchor －＞ 固定中心點的Ｘ座標
topAnchor －＞ 固定頂端
bottomAnchor －＞ 固定底部
widthAnchor －＞ 固定寬度
heightAnchor －＞ 固定高度
leadingAnchor －＞ 固定頭部
trailingAnchor －＞固定尾端在這裡leadingAnchor、trailingAnchor改成leftAnchor、rightAnchor也會有相同的效果，但是使用leadingAnchor、trailingAnchor會比較好，原因是不一定每一種語言都是由左往右閱讀的。isActive這個屬性一定要記得設定成true，不然auto layout就白做了。

按下編譯與執行就會出現完成的畫面，但如果畫面旋轉後整個畫面就跑了，下一篇再來解決這個問題。

To be continued⋯⋯

Swift 4: Auto Layout Progammatically (Part.1)

Written by 王彤