1 레이아웃

//
//  ViewController.swift
//  study
//
//  Created by MacBookPro on 2017. 9. 29..
//  Copyright © 2017년 MacBookPro. All rights reserved.
//
 
import UIKit
 
class ViewController: UIViewController {
    
    //뷰 덩어리 만들기
    let firstView = UIView()
    let secondView = UIView()
    let thirdView = UIView()
    let fourthView = UIView()
    let fiveView = UIView()
    let sixView = UIView()
    let sevenView = UIView()
    let eightView = UIView()
    let nineView = UIView()
    let tenView = UIView()
    let elevenView = UIView()
    let twoelvenView = UIView()
    let thirteenView = UIView()
    let fourteenView = UIView()
    
    
    
    //로드 될때 뷰
    override func viewDidLoad() {
        super.viewDidLoad()
        
        //위에서 만든 view 4개 삽입
         view.addSubview(firstView)
         view.addSubview(secondView)
         view.addSubview(thirdView)
         view.addSubview(fourthView)
        
        setLayOut()
        setDetailLayout()
        setLastLineLayout()
    }
 
    //메인 네모 4개 셋팅 함수
    func setLayOut() -> Void {
        
        //제일위에 검은색 네모
        firstView.translatesAutoresizingMaskIntoConstraints = false
        firstView.backgroundColor = UIColor.black
        firstView.heightAnchor.constraint(equalToConstant: view.bounds.size.height * 0.3).isActive = true   //세로로 3분의 1
        firstView.widthAnchor.constraint(equalToConstant: view.bounds.size.width).isActive = true           // 가로로 가득 채우기
        
        //검은 색 네모 밑에 파란색 네모
        secondView.translatesAutoresizingMaskIntoConstraints = false
        secondView.backgroundColor = UIColor.blue
        secondView.heightAnchor.constraint(equalToConstant: view.bounds.size.height * 0.3).isActive = true
        secondView.widthAnchor.constraint(equalToConstant: view.bounds.size.width).isActive = true
        //두번째 뷰.위에.constraint (첫번째뷰 아래)
        secondView.topAnchor.constraint(equalTo: firstView.bottomAnchor).isActive = true
        
        //파란색 네모 밑에 브라운색 네모
        thirdView.translatesAutoresizingMaskIntoConstraints = false
        thirdView.backgroundColor = UIColor.brown
        thirdView.heightAnchor.constraint(equalToConstant: view.bounds.size.height * 0.3).isActive = true
        thirdView.widthAnchor.constraint(equalToConstant: view.bounds.size.width).isActive = true
        thirdView.topAnchor.constraint(equalTo: secondView.bottomAnchor).isActive = true
        
        //브라운색 네모 밑에 보라색 네모
        fourthView.translatesAutoresizingMaskIntoConstraints = false
        fourthView.backgroundColor = UIColor.purple
        fourthView.heightAnchor.constraint(equalToConstant: view.bounds.size.height * 0.1).isActive = true
        fourthView.widthAnchor.constraint(equalToConstant: view.bounds.size.width).isActive = true
        fourthView.topAnchor.constraint(equalTo: thirdView.bottomAnchor).isActive = true
        
    }
    
        //2나눠진 네모 부분을 더 잘개 쪼개기
    func setDetailLayout() -> Void {
        
        //첫번째 뷰에 다섯번째 뷰와 여섯번째 뷰 삽입
        firstView.addSubview(fiveView)
        firstView.addSubview(sixView)
        
        fiveView.translatesAutoresizingMaskIntoConstraints = false
        fiveView.backgroundColor = UIColor.white
        fiveView.heightAnchor.constraint(equalTo: firstView.heightAnchor).isActive = true
        fiveView.widthAnchor.constraint(equalToConstant: view.bounds.size.width/2).isActive = true
        
        
        sixView.translatesAutoresizingMaskIntoConstraints = false
        sixView.backgroundColor = UIColor.orange
        sixView.heightAnchor.constraint(equalTo: firstView.heightAnchor).isActive = true
        sixView.widthAnchor.constraint(equalToConstant: view.bounds.size.width/2).isActive = true
        sixView.leftAnchor.constraint(equalTo: fiveView.rightAnchor).isActive = true //fiveview의 오른쪽에 sixview
        
        
        
        //-------------------------- 제일 윗줄 끝 ---------------------
        
        
        
        secondView.addSubview(sevenView)
        secondView.addSubview(eightView)
        
        sevenView.translatesAutoresizingMaskIntoConstraints = false
        sevenView.backgroundColor = UIColor.orange
        sevenView.heightAnchor.constraint(equalTo: firstView.heightAnchor).isActive = true
        sevenView.widthAnchor.constraint(equalToConstant: view.bounds.size.width/2).isActive = true
        //7뷰 위에 무엇이 있나?
        sevenView.topAnchor.constraint(equalTo: fiveView.bottomAnchor).isActive = true
        
        eightView.translatesAutoresizingMaskIntoConstraints = false
        eightView.backgroundColor = UIColor.white
        eightView.heightAnchor.constraint(equalTo: firstView.heightAnchor).isActive = true
        eightView.widthAnchor.constraint(equalToConstant: view.bounds.size.width/2).isActive = true
        //8뷰 왼쪽에 무엇이 있는가?
        eightView.leftAnchor.constraint(equalTo: sevenView.rightAnchor).isActive = true
        //8뷰위에 무엇이 있는가?
        eightView.topAnchor.constraint(equalTo: sixView.bottomAnchor).isActive = true
        
         //-------------------------- 두번째 줄 끝 ---------------------
        
        
        thirdView.addSubview(nineView)
        thirdView.addSubview(tenView)
        
        
        
        nineView.translatesAutoresizingMaskIntoConstraints = false
        nineView.backgroundColor = UIColor.white
        nineView.heightAnchor.constraint(equalTo: firstView.heightAnchor).isActive = true
        nineView.widthAnchor.constraint(equalToConstant: view.bounds.size.width/2).isActive = true
        nineView.topAnchor.constraint(equalTo: sevenView.bottomAnchor).isActive = true
        
        
        tenView.translatesAutoresizingMaskIntoConstraints = false
        tenView.backgroundColor = UIColor.orange
        tenView.heightAnchor.constraint(equalTo: firstView.heightAnchor).isActive = true
        tenView.widthAnchor.constraint(equalToConstant: view.bounds.size.width/2).isActive = true
        tenView.leftAnchor.constraint(equalTo: nineView.rightAnchor).isActive = true
        tenView.topAnchor.constraint(equalTo: eightView.bottomAnchor).isActive = true
        
    }
    
   
 
    //제일 밑 레이아웃
    func setLastLineLayout() -> Void {
        
        
        fourthView.addSubview(elevenView)
        fourthView.addSubview(twoelvenView)
        fourthView.addSubview(thirteenView)
        fourthView.addSubview(fourteenView)
        
        
        //위에 무엇이 있는가?
        elevenView.topAnchor.constraint(equalTo: nineView.bottomAnchor).isActive = true
        
        
        
        twoelvenView.translatesAutoresizingMaskIntoConstraints = false
        twoelvenView.backgroundColor = UIColor.blue
        twoelvenView.heightAnchor.constraint(equalTo: firstView.heightAnchor).isActive = true
        twoelvenView.widthAnchor.constraint(equalToConstant: view.bounds.size.width/4).isActive = true
        twoelvenView.leftAnchor.constraint(equalTo: elevenView.rightAnchor).isActive = true
        //위에 무엇이 있나?
        twoelvenView.topAnchor.constraint(equalTo: nineView.bottomAnchor).isActive = true
        
        
        thirteenView.translatesAutoresizingMaskIntoConstraints = false
        thirteenView.backgroundColor = UIColor.magenta
        thirteenView.heightAnchor.constraint(equalTo: firstView.heightAnchor).isActive = true
        thirteenView.widthAnchor.constraint(equalToConstant: view.bounds.size.width/4).isActive = true
        thirteenView.leftAnchor.constraint(equalTo: twoelvenView.rightAnchor).isActive = true
        //위에 무엇이 있나?
        thirteenView.topAnchor.constraint(equalTo: tenView.bottomAnchor).isActive = true
        
        
        fourteenView.translatesAutoresizingMaskIntoConstraints = false
        fourteenView.backgroundColor = UIColor.green
        fourteenView.heightAnchor.constraint(equalTo: firstView.heightAnchor).isActive = true
        fourteenView.widthAnchor.constraint(equalToConstant: view.bounds.size.width/4).isActive = true
        fourteenView.leftAnchor.constraint(equalTo: thirteenView.rightAnchor).isActive = true
        fourteenView.topAnchor.constraint(equalTo: tenView.bottomAnchor).isActive = true
        
        
    }
    
    
    
    
    
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
 
 
}

출처:하울의 코딩 채널