[Swift] Anchor 사용해서 UIView 넣기

들어가기에 앞서...

Programmatically 뷰에 뷰를 추가하는 방법입니다. interface builder 에서 UIView를 추가하고 frame을 지정해 줘도 되지만 코드로 view를 생성해서 addSubView 해주거나 휴대폰 방향(width가 바뀌는 경우), safe Area 등은 Anchor를 이용하는 것이 편할 때가 있습니다.

이전에 포스팅 한 collectionView에서 시작하며 이때 발생한 오류는 width가 제대로 나오지 않아 짤리는 경우였습니다. Anchor를 통해서 어떻게 고칠 수 있는지 알아봅시다.

---

코드를 이용하여 view를 작성해서 넣어주기 위해 storyboard에 추가한 뷰를 삭제해주었습니다

연결된 IBOutlet 삭제도 꼭 해줍니다

 

 

ViewController.swift 파일로 갑니다

우선 추가해 줄 뷰인 UICollectionView로 선언해 준 프로퍼티에서 

translatesAutoresizingMaskIntoConstraints를 false로 지정해 줍니다.

    let collectionView: UICollectionView = {
        let layout = UICollectionViewFlowLayout()
        layout.minimumLineSpacing = 0
        
        layout.scrollDirection = .vertical
        layout.sectionInset = .zero
        
        let cv = UICollectionView(frame: .zero, collectionViewLayout: layout)
        cv.backgroundColor = .green
        
        // collectionView의 Autorezing mask를 false로 지정해 줍니다
        cv.translatesAutoresizingMaskIntoConstraints = false
        
        return cv
    }()

코드로 제약 사항을 지정해 줄 것이기 때문에 

autoresizing mask를 false로 지정해 주는 것입니다.

+) default 값은 true

 

다음은 viewDidLoad()를 작성해 줍니다

뷰가 로드 될때 self.view에 collectionView를 계층 구조에 추가해 주겠습니다.

anchor를 사용할 때 주의 할 점은 anchor만 지정한다고 되는 것이 아니라

계층 구조에 추가해 주어야 제약 조건을 코드로 작성할 수 있다는 것입니다.

 

view.addSubview(collectionView)

이제 constraints를 작성해 줍니다

이 constraints는 activate 해주어야 실행됩니다. 아래와 같이 작성해 줍니다.

        let constraints = [
            collectionView.heightAnchor.constraint(equalToConstant: 180),
            collectionView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor),
            collectionView.trailingAnchor.constraint(equalTo: self.view.trailingAnchor),
            collectionView.topAnchor.constraint(equalTo: self.view.topAnchor, constant: 300)
        ]
        
        NSLayoutConstraint.activate(constraints)

collectionView의 높이를 180으로 지정하고

collectionView의 leading을 self.view의 leading과 0으로 지정하면

collectionView의 시작점이 view의 시작점과 같아집니다

trailing도 똑같이 지정해 줍니다

이때 bottom은 안 작성하고 top만 지정해 주는 이유는

높이가 있기 때문에 레이아웃 상 오류가 없습니다.

 

실행해 보면

이러한 결과를 얻을 수 있습니다

 

 

 

왜 xcode 12 Show Quick Help inspector의 Open in Developer Documentation 누르면

xcode 종료되는 건가요... 🧐🧐🧐

 

틀리거나 이상한 부분이 있다면 댓글 부탁드려요! 언제나 환영입니다!