251. (ios/swift) NSLayoutConstraint 사용해 UILabel 라벨 동적 생성 및 오토 레이아웃 설정 실시 - AutoLayout

---

[개발 환경 설정]

​

개발 툴 : XCODE

개발 언어 : SWIFT

​

 

---

[소스 코드]

​

    // MARK: - [테스트 메인 함수 정의 실시]
    func testMain() {
        print("")
        print("====================================")
        print("[\(self.ACTIVITY_NAME) >> testMain() :: 테스트 함수 시작 실시]")
        print("====================================")
        print("")
        
        
        /*
         // -----------------------------
         [요약 설명]
         // -----------------------------
         1. NSLayoutConstraint : 오토 레이아웃 설정 시 사용됩니다
         // -----------------------------
         2. attribute 속성 :
         
         - left : 개체의 정렬 사각형의 왼쪽입니다
         - right : 개체의 정렬 사각형의 오른쪽입니다
         - top : 개체의 정렬 사각형의 맨 위입니다
         - bottom : 개체의 정렬 사각형의 아래쪽입니다
         - leading : 개체 정렬 사각형의 선행 가장자리입니다
         - trailing : 개체 정렬 사각형의 후행 가장자리입니다
         - width : 개체의 정렬 사각형 너비입니다
         - height : 개체의 정렬 사각형 높이입니다
         - centerX : 개체의 정렬 사각형의 x축을 따라 중앙입니다
         - centerY : 개체의 정렬 사각형의 y축을 따라 중앙입니다
         - lastBaseline : 개체의 기준선입니다
         - firstBaseline : 개체의 기준선입니다
         - leftMargin : 개체의 왼쪽 여백입니다
         - rightMargin : 개체의 오른쪽 여백입니다
         - topMargin : 개체의 위쪽 여백입니다
         - bottomMargin : 개체의 아래쪽 여백입니다
         - leadingMargin : 개체의 선행 여백입니다
         - trailingMargin : 개체의 후행 여백입니다
         - centerXWithinMargins : 개체의 왼쪽과 오른쪽 여백 사이의 x축 중심
         - centerYWithinMargins : 개체의 위쪽 여백과 아래쪽 여백 사이의 y축 중심입니다
         - notAnAttribute : 제약 조건의 두 번째 항목 및 두 번째 속성이 계산에 사용되지 않음을 나타내는 자리 표시자 값입니다
         // -----------------------------
         3. 예제 설명
         
         - 좌측 / 우측 마진 설정 >> 컴포넌트 width 지정됨
         - 컴포넌트 height 설정
         - 컴포넌트 수직 간격 설정
         // -----------------------------
         */
        
        
        // [비동기 처리 수행]
        DispatchQueue.main.async {

            // [초기 컴포넌트 선언 실시]
            let label = UILabel()
            
            
            // [컴포넌트 속성 설정]
            label.text = "TWOK"
            label.textColor = UIColor.white
            label.backgroundColor = UIColor.blue
            label.textAlignment = .center
            label.font = UIFont.systemFont(ofSize: CGFloat(50))
            
            
            // [뷰에 추가 실시]
            self.view.addSubview(label)

            
            // [오토레이아웃 리사이징 충돌 방지]
            label.translatesAutoresizingMaskIntoConstraints = false // 리사이징 false 설정
            
            
            // [좌측 간격]
            NSLayoutConstraint.init(
                item: label, // 제약을 지정할 UI
                attribute: .leading, // 제약을 지정할 UI 제약 속성
                relatedBy: .equal, // 제약을 지정할 UI와 제약의 기준이 되는 UI 사이 관계
                toItem: self.view, // 제약의 기준이 되는 UI
                attribute: .leading, // 제약의 기준이 되는 UI 제약 속성
                multiplier: 1.0, // 제약 비율
                constant: 30 // 제약의 상수 값
            ).isActive = true
            
            
            // [우측 간격]
            NSLayoutConstraint.init(
                item: label, // 제약을 지정할 UI
                attribute: .trailing, // 제약을 지정할 UI 제약 속성
                relatedBy: .equal, // 제약을 지정할 UI와 제약의 기준이 되는 UI 사이 관계
                toItem: self.view, // 제약의 기준이 되는 UI
                attribute: .trailing, // 제약의 기준이 되는 UI 제약 속성
                multiplier: 1.0, // 제약 비율
                constant: -30 // 제약의 상수 값
            ).isActive = true
            
            
            // [컴포넌트 높이]
            NSLayoutConstraint.init(
                item: label, // 제약을 지정할 UI
                attribute: .height, // 제약을 지정할 UI 제약 속성
                relatedBy: .equal, // 제약을 지정할 UI와 제약의 기준이 되는 UI 사이 관계
                toItem: nil, // 제약의 기준이 되는 UI
                attribute: .height, // 제약의 기준이 되는 UI 제약 속성
                multiplier: 1.0, // 제약 비율
                constant: 100 // 제약의 상수 값
            ).isActive = true


            // [수직 간격 : vertical spacing]
            NSLayoutConstraint.init(
                item: label, // 제약을 지정할 UI
                attribute: .top, // 제약을 지정할 UI 제약 속성
                relatedBy: .equal, // 제약을 지정할 UI와 제약의 기준이 되는 UI 사이 관계
                toItem: self.view, // 제약의 기준이 되는 UI
                attribute: .top, // 제약의 기준이 되는 UI 제약 속성
                multiplier: 1.0, // 제약 비율
                constant: 50 // 제약의 상수 값
            ).isActive = true
            
        }
    }

 

---

[결과 출력]

​

 

---