AutoLayout.swift

//
//  Layout.swift
//  App
//
//  Created by 默司 on 2017/12/1.
//  Copyright © 2017年 GTS. All rights reserved.
//

import UIKit

class AutoLayout {
    var view: UIView!
    var superView: UIView!
    
    init(_ view: UIView) {
        self.view = view
        self.superView = view.superview!
    }
    
    public static func size(_ px: CGFloat, of screenWidth: CGFloat = 1080) -> CGFloat {
        let w = UIScreen.main.bounds.size.width
        return px * (w/screenWidth)
    }
    
    @available(iOS 11.0, *)
    @discardableResult
    func top(_ margin: CGFloat) -> Self {
        view.topAnchor.constraint(equalTo: superView.safeAreaLayoutGuide.topAnchor, constant: margin).isActive = true
        return self
    }
    
    @available(iOS 11.0, *)
    @discardableResult
    func left(_ margin: CGFloat) -> Self {
        view.leftAnchor.constraint(equalTo: superView.safeAreaLayoutGuide.leftAnchor, constant: margin).isActive = true
        return self
    }
    
    @available(iOS 11.0, *)
    @discardableResult
    func right(_ margin: CGFloat) -> Self {
        view.rightAnchor.constraint(equalTo: superView.safeAreaLayoutGuide.rightAnchor, constant: -margin).isActive = true
        return self
    }
    
    @available(iOS 11.0, *)
    @discardableResult
    func bottom(_ margin: CGFloat) -> Self {
        view.bottomAnchor.constraint(equalTo: superView.safeAreaLayoutGuide.bottomAnchor, constant: -margin).isActive = true
        return self
    }
    
    @available(iOS 11.0, *)
    @discardableResult
    func edge(_ margin: CGFloat) -> Self {
        top(margin)
        left(margin)
        bottom(margin)
        right(margin)
        return self
    }
    
    @available(iOS 9.0, *)
    @discardableResult
    func width(_ size: CGFloat) -> Self {
        view.widthAnchor.constraint(equalToConstant: size).isActive = true
        return self
    }
    
    @available(iOS 9.0, *)
    @discardableResult
    func height(_ size: CGFloat) -> Self {
        view.heightAnchor.constraint(equalToConstant: size).isActive = true
        return self
    }
    
    @available(iOS 9.0, *)
    @discardableResult
    func size(_ size: CGFloat) -> Self {
        width(size)
        height(size)
        return self
    }
    
    @available(iOS 9.0, *)
    @discardableResult
    func aspectRatio(_ ratio: CGFloat) -> Self {
        view.heightAnchor.constraint(equalTo: view.widthAnchor, multiplier: 1/ratio).isActive = true
        return self
    }
    
    @available(iOS 9.0, *)
    @discardableResult
    func horizontal(_ constant: CGFloat) -> Self {
        view.centerXAnchor.constraint(equalTo: superView.centerXAnchor, constant: constant).isActive = true
        return self
    }
    
    @available(iOS 9.0, *)
    @discardableResult
    func vertical(_ constant: CGFloat) -> Self {
        view.centerYAnchor.constraint(equalTo: superView.centerYAnchor, constant: constant).isActive = true
        return self
    }
    
    @available(iOS 9.0, *)
    @discardableResult
    func center(_ constant: CGFloat) -> Self {
        horizontal(constant)
        vertical(constant)
        return self
    }
    
    @available(iOS 9.0, *)
    @discardableResult
    func relativeWidth(_ multiplier: CGFloat) -> Self {
        view.widthAnchor.constraint(equalTo: superView.widthAnchor, multiplier: multiplier).isActive = true
        return self
    }
    
    @available(iOS 9.0, *)
    @discardableResult
    func relativeHeight(_ multiplier: CGFloat) -> Self {
        view.heightAnchor.constraint(equalTo: superView.heightAnchor, multiplier: multiplier).isActive = true
        return self
    }
}

extension UIView {
    var al: AutoLayout {
        assert(superview != nil, "must be a subview")
        self.translatesAutoresizingMaskIntoConstraints = false
        return AutoLayout(self)
    }
}

stackview.swift

/// 
/// Codes in ViewController
///

lazy var menButton: UIButton = {
        let b = UIButton(type: .custom)
        b.setTitle("MEN", for: .normal)
        b.setTitleColor(#colorLiteral(red: 0.3725490196, green: 0.3725490196, blue: 0.3725490196, alpha: 1), for: .normal)
        b.titleLabel?.font = UIFont.源柔ゴシックP_Bold(size: AutoLayout.size(40))
        return b
    }()
    
    lazy var womenButton: UIButton = {
        let b = UIButton(type: .custom)
        b.setTitle("WOMEN", for: .normal)
        b.setTitleColor(#colorLiteral(red: 0.3725490196, green: 0.3725490196, blue: 0.3725490196, alpha: 1), for: .normal)
        b.titleLabel?.font = UIFont.源柔ゴシックP_Bold(size: AutoLayout.size(40))
        return b
    }()
    
    lazy var boysButton: UIButton = {
        let b = UIButton(type: .custom)
        b.setTitle("BOYS", for: .normal)
        b.setTitleColor(#colorLiteral(red: 0.3725490196, green: 0.3725490196, blue: 0.3725490196, alpha: 1), for: .normal)
        b.titleLabel?.font = UIFont.源柔ゴシックP_Bold(size: AutoLayout.size(40))
        return b
    }()
    
    lazy var girlsButton: UIButton = {
        let b = UIButton(type: .custom)
        b.setTitle("GIRLS", for: .normal)
        b.setTitleColor(#colorLiteral(red: 0.3725490196, green: 0.3725490196, blue: 0.3725490196, alpha: 1), for: .normal)
        b.titleLabel?.font = UIFont.源柔ゴシックP_Bold(size: AutoLayout.size(40))
        return b
    }()
    

lazy var categoriesStack: UIStackView = {
        let v = UIStackView(arrangedSubviews: [
            menButton, womenButton, boysButton, girlsButton
        ])
        
        v.spacing = AutoLayout.size(40)
        v.axis = .horizontal
        v.alignment = .top
        v.distribution = .equalSpacing
  
        // 實測沒有生效
        v.translatesAutoresizingMaskIntoConstraints = false
        v.heightAnchor.constraint(equalToConstant: 50).isActive = true
        
        return v
    }()
    
    func setupLayout() {
      self.view.addSubview(categoriesStack)
      
      // al 請看 autolayout.swift
      self.categoriesStack.al
            .top(AutoLayout.size(160))
            .center(0)
    }