Ios AutoLayout 1 - 소개

Ios AutoLayout 1  - 소개

● 들어가기 전

이번 포스팅에서는 ios의 autolayout에 대해서 한번 알아보겠다. storyboard를 사용하는 대신에 autolayout관련 함수만으로 간단한 ios 어플리케이션을 만들어보면서 autolayout에 대해 이해해보자. 참고로 이 포스팅은 유튜브 "Lets Build That App" 채널을 참고해서 정리한 포스팅이다.

● 소개

UICollectionViewController을 이용해서 이미지와 글이 담긴 페이지가 좌우로 넘어가는 간단한 어플을 만들어보려고 한다.

● 실습순서

1.ios클로저로 imageView 객체 만들기 , textView 객체 만들기

2.속성 정의

3.view에서 1번에서 만든 객체를 삽입해준다.

4.위에서 만든 객체 autolayout 지정

1. 객체만들기

viewdidload() 함수 위에 클로저로 각 객체를 만들어 준다.

    //클로저 기능으로 이미지객체 만들어주기(내부에서 속성정의)
    let myImageView: UIImageView = {
        let imageView = UIImageView(image: #imageLiteral(resourceName: "mypic1"))
        // 이속성은 autolayout을 이용할 수 있게한다.
        imageView.translatesAutoresizingMaskIntoConstraints = false
        return imageView
    }()

    ////클로저 기능으로 textView객체 만들어주기(내부에서 속성정의)
    let myTextView: UITextView = {
        let textView = UITextView()
        textView.text = "ios기초 레슨 프로그램"
        textView.font = UIFont.boldSystemFont(ofSize: 18)
        textView.translatesAutoresizingMaskIntoConstraints = false
        textView.textAlignment = .center
        textView.isEditable = false
        textView.isScrollEnabled = false
        return textView
    }()

2. view에 넣어주기

viewdidload() 함수안에 addsubview를 이용해서 위에서 만든 객체를 넣어준다.

    override func viewDidLoad() {
        super.viewDidLoad()
        // view에 위에서 만든 객체뷰를 넣어준다.
        view.addSubview(myImageView)
        view.addSubview(myTextView)
        
        //위에서 만든 객체뷰 autolayout 정해주기
        setupLayout()
    }

3. 각 객체 위치 정하기

autolayout함수를 이용해서 각 객체의 위치를 지정해 보자. 각 객체의 위치 로직은 viewdidload 함수 안에 있는 setupLayout() 함수가 호출한다.

    private func setupLayout() {
        //이미지뷰의 x축을 view의 x축에 맞추기
        myImageView.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
        myImageView.topAnchor.constraint(equalTo: view.topAnchor, constant: 100).isActive = true //탑엥커
        myImageView.widthAnchor.constraint(equalToConstant: 200).isActive = true    //넓이
        myImageView.heightAnchor.constraint(equalToConstant: 200).isActive = true   //높이
        
        //myTextView의  topAnchor를 이미지뷰 아래에 맟추고 120 만큼 간격 띄어주기
        myTextView.topAnchor.constraint(equalTo: myImageView.bottomAnchor, constant: 120).isActive = true
        myTextView.leftAnchor.constraint(equalTo: view.leftAnchor).isActive = true
        myTextView.rightAnchor.constraint(equalTo: view.rightAnchor).isActive = true
        myTextView.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: 0).isActive = true
    }

4.마무리

이번 포스팅에서는 간단한 프로젝트 소개와 각 view객체 생성, autolayout을 이용한 위치지정을 구현했다. 클로저 개념과 각 객체안에 autolayout 함수가 있다는 것을 인지하고, 어떤 autolayout 함수가 있는지 구글링해보면 좋을 것 같다.

5.전체소스코드

MyAutoLayOut.zip