#13 AutoLayout 練習，從 入門Figma SignIn設計圖開始

AutoLayout Practice#1

彼得潘說AutoLayout是需要大量練習的，沒有練個十幾次是不會熟練的，來吧，今天就從第一張開始練習。

寫Code想不出來的時候，中間插AutoLayout練習也可以讓頭腦休息轉換一下。

今天我們要來練習的就是這一張Sign In 畫面。

有關Figma 的使用方法可以參考這一篇文章

#129 從 Figma Community 練習實作 App 畫面

分析

首先先分析這個Page 的元件尺寸大小，還有距離，字形，字形大小。

Figma 提供了非常方便的頁面資訊可以讓我們參考

只要選擇左邊選擇你想要的Frame，然後選擇右上角的Inspect，然後查看Properties，就可以找到我們想要的訊息。

基本上，這個畫面我會分成2個部分

一個是左上角的返回鍵

另外就是下面signup的部分

左上角的返回鍵

左上角的返回鍵根據Figma，大小為48*48，距離safe area top 為54，距離safe area leading 為24，所以我們的AutoLayout 便這樣設定。

SignUp 的部分

從上往下，

SignUp label,距離safe area top 為154，距離safe area leading 為24，AutoLayout 便這樣設定。

因為只有單行，這樣設定就可以了。

SignUp 下面的說明欄，距離sign up bottom為12，距離safe area leading 為24，距離safe area leading trailing為24，AutoLayout 便這樣設定。

注意，因為這個Label 字比較多，所以需要設2行，便要設safe area leading trailing為24，不然沒辦法變2行。

要注意，這個Label 的Lines 要設0，這樣就沒有限定幾行。

再來就是底下4個TextField，一樣確認出距離，然後AutoLayout就跟上方一樣設定。

TextField 邊框顏色，圓角，程式碼如下

每一個textfield 拉@IBOutlet，然後設定

import UIKit
class ViewController: UIViewController {
@IBOutlet weak var fullName: UITextField!
@IBOutlet weak var emailAddress: UITextField!
@IBOutlet weak var passWord: UITextField!
override func viewDidLoad() {
super.viewDidLoad()
fullName.layer.borderWidth = 2
fullName.layer.borderColor = UIColor.black.cgColor
fullName.layer.cornerRadius = 10
emailAddress.layer.borderWidth = 2
emailAddress.layer.borderColor = UIColor.black.cgColor
emailAddress.layer.cornerRadius = 10
emailAddress.attributedPlaceholder = NSAttributedString(string: "    Email address", attributes: [NSAttributedString.Key.foregroundColor : UIColor.red])
passWord.layer.borderWidth = 2
passWord.layer.borderColor = UIColor.black.cgColor
passWord.layer.cornerRadius = 10
}
}

TextField PlaceHolder 的文字顏色，請參考下面文章

#14 UITextField PlaceHolder 文字改變顏色

結果，就程式這麼多Auto Layout Constrains，

成果如下，在不同的iphone 尺寸，顯示的大小就不一樣。

左邊 iphone 11， 右邊iphone 12 mini

GitHub：

GitHub - bryan0011/AutoLayout01