สร้างโปรเจ็คใหม่ด้วย UIKit
บทความนี้คิดว่าจะเป็นประโยชน์สำหรับมือใหม่หัดเขียน UIKIt โดย WGO เชื่อว่าการเริ่มต้นที่ดีมีชัยไปกว่าครึ่ง
Constant values เป็นสิ่งแรกๆ ที่ WGO นึกถึง เช่น ขนาดตัวอักศรที่ใช้ สีที่ใช้ในโปรเจ็ค ระยะห่างจากขอบหรือ View ต่างๆ ซึ่ง ค่าพวกนี้เราอาจจะเปลี่ยนแปลงในภายหลังได้ ลองจินตนาการดูหากเราใช้ระยะห่างขอบสัก 8px แล้วลูกค้าบอกว่าขอ 10px หากไม่ทำเป็น Constant Value ไว้ก็แก้กันตาเหลือก
Remark Code อันนี้เพื่อให้ Developer ที่มาทำต่อสามารถไล่โค๊ตได้ดีขึ้น ซึ่งจะดูตัวอย่างได้จาก ไฟล์ ViewWithRadiusViewController.swift ใน Git Repo ค่ะ
View Extension เป็นตัวช่วยที่ทำให้ชีวิตการเขียนโค๊ตง่ายขึ้น ตัวอย่างใน Git Repo จะเป็น UIColor Extension UIView Extension
Source Code
import UIKit
struct Padding {
static let size8px: CGFloat = 8
static let size16px: CGFloat = 16
static let size24px: CGFloat = 16
static let size32px: CGFloat = 32
static let size40px: CGFloat = 40
static let size48px: CGFloat = 48
static let size56px: CGFloat = 56
static let size64px: CGFloat = 64
static let size72px: CGFloat = 72
static let size80px: CGFloat = 80
static let size88px: CGFloat = 88
static let size96px: CGFloat = 96
static let size104px: CGFloat = 104
static let size112px: CGFloat = 112
static let size120px: CGFloat = 120
}
struct Screen {
static let width: CGFloat = UIScreen.main.bounds.width
static let height: CGFloat = UIScreen.main.bounds.height
}
struct Fontsize {
static let common: CGFloat = 16
static let extraSmall: CGFloat = 12
static let small: CGFloat = 14
static let medium: CGFloat = 16
static let large: CGFloat = 18
static let extraLarge: CGFloat = 20
static let extraLarge2: CGFloat = 25
static let extraLarge3: CGFloat = 30
}
enum Fontweight: String {
case regular
case semibold
case bold
case extraBold
}
struct Color {
static let white: UIColor = .white
static let black: UIColor = .black
static let lightblue: UIColor = .systemCyan
static let blue: UIColor = .systemBlue
static let lightgray: UIColor = UIColor(hexString: “#cccccc”)!
static let gray: UIColor = .gray
static let green: UIColor = .systemGreen
static let red: UIColor = .red
}
import UIKit
class ViewWithRadiusViewController: UIViewController {
// MARK: – Properties
// MARK: – LifeCycle
override func viewDidLoad() {
super.viewDidLoad()
configureUI()
}
// MARK: – Actions
// MARK: – Helper
func configureUI() {
// Note: – hidden navigation bar
view.backgroundColor = .systemPink
navigationController?.navigationBar.isHidden = true
}
}
import UIKit
extension UIView {
func anchor(top: NSLayoutYAxisAnchor? = nil,
left: NSLayoutXAxisAnchor? = nil,
bottom: NSLayoutYAxisAnchor? = nil,
right: NSLayoutXAxisAnchor? = nil,
paddingTop: CGFloat = 0,
paddingLeft: CGFloat = 0,
paddingBottom: CGFloat = 0,
paddingRight: CGFloat = 0,
width: CGFloat? = nil,
height: CGFloat? = nil) {
translatesAutoresizingMaskIntoConstraints = false
if let top = top {
topAnchor.constraint(equalTo: top, constant: paddingTop).isActive = true
}
if let left = left {
leftAnchor.constraint(equalTo: left, constant: paddingLeft).isActive = true
}
if let bottom = bottom {
bottomAnchor.constraint(equalTo: bottom, constant: -paddingBottom).isActive = true
}
if let right = right {
rightAnchor.constraint(equalTo: right, constant: -paddingRight).isActive = true
}
if let width = width {
widthAnchor.constraint(equalToConstant: width).isActive = true
}
if let height = height {
heightAnchor.constraint(equalToConstant: height).isActive = true
}
}
func center(inView view: UIView, yConstant: CGFloat? = 0) {
translatesAutoresizingMaskIntoConstraints = false
centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
centerYAnchor.constraint(equalTo: view.centerYAnchor, constant: yConstant!).isActive = true
}
func centerX(inView view: UIView, topAnchor: NSLayoutYAxisAnchor? = nil, paddingTop: CGFloat? = 0) {
translatesAutoresizingMaskIntoConstraints = false
centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
if let topAnchor = topAnchor {
self.topAnchor.constraint(equalTo: topAnchor, constant: paddingTop!).isActive = true
}
}
func centerY(inView view: UIView, leftAnchor: NSLayoutXAxisAnchor? = nil,
paddingLeft: CGFloat = 0, constant: CGFloat = 0) {
translatesAutoresizingMaskIntoConstraints = false
centerYAnchor.constraint(equalTo: view.centerYAnchor, constant: constant).isActive = true
if let left = leftAnchor {
anchor(left: left, paddingLeft: paddingLeft)
}
}
func fullWidth(inView view: UIView) {
translatesAutoresizingMaskIntoConstraints = false
widthAnchor.constraint(equalTo: view.widthAnchor).isActive = true
}
func setDimensions(height: CGFloat, width: CGFloat) {
translatesAutoresizingMaskIntoConstraints = false
heightAnchor.constraint(equalToConstant: height).isActive = true
widthAnchor.constraint(equalToConstant: width).isActive = true
}
func setHeight(_ height: CGFloat) {
translatesAutoresizingMaskIntoConstraints = false
heightAnchor.constraint(equalToConstant: height).isActive = true
}
func setWidth(_ width: CGFloat) {
translatesAutoresizingMaskIntoConstraints = false
widthAnchor.constraint(equalToConstant: width).isActive = true
}
func fillSuperview() {
translatesAutoresizingMaskIntoConstraints = false
guard let view = superview else { return }
anchor(top: view.topAnchor, left: view.leftAnchor,
bottom: view.bottomAnchor, right: view.rightAnchor)
}
func anchorRow(viewAbove: UIView?,
view: UIView,
paddingTop: CGFloat = Padding.size8px,
horizontalPadding: CGFloat = Padding.size16px
) {
translatesAutoresizingMaskIntoConstraints = false
anchor(top: viewAbove != nil ? viewAbove?.bottomAnchor : superview?.topAnchor,
left: view.leftAnchor,
right: view.rightAnchor,
paddingTop: paddingTop,
paddingLeft: horizontalPadding,
paddingRight: horizontalPadding
)
}
}