swift autolayout - 그래프를 통한 오토레이아웃의 동적 컨트롤

swift autolayout - 그래프를 통한 오토레이아웃의 동적 컨트롤

 

 

1. 아래 그림처럼 바탕뷰 하나를 생성하고 그 안에 5개의 뷰를 만든다. 그리고 5개의 뷰 전부를 선택한 후 왼쪽, 오른쪽 20 간격을 주고, 바텀을 0으로 준다. 탑 간격은 아직 지정을 안해 준다.

 

 

2. 그래프에 대한 크기 개념이 잡혀있지 않아서 에러가 발생한다. 안쪽 뷰들의 높이는 최대 회색뷰의 높이와 같기 때문에, 각각의 뷰를 우클릭 후, 회색뷰 쪽으로 드래그 한다. equal height 로 지정해준다.

 

 

3.여전히 에러가 난다. 이유는 각각의 뷰들의 넓이가 지정이 안되어 있기 때문이다. 뷰를 전부 클릭하고, 아래 제약조건 아이콘을 클릭 후, Equal Widths를 설정해준다.

 

 

4.어떻게 사용을 할까? 현재 가운데 5개의 뷰들의 높이는 회색 바탕 뷰와 같게 (equal width) 맞춰져 있다. 그래서 각각의 뷰의 equal height를 클릭하고 multiplier를 조정한다. multiplier는 비율이다. 현재는 1이 되어 있는데, 이것을 0.5로 바꾸면 반정도로 줄어든다. 50%라고 기입해도 된다. multiplier는 퍼센테이지! 비율 값이다~! 수치를 바꾸면 propotional 로 명칭이 바뀐다.

 

 

5.위에서 설정한 각뷰들의 propotional height를 IBOutlet으로 연결시켜준다.

 

 

[!]참고. multiplier 는 constant 처럼 코드에서 값을 set 해줄 수 없다. 오류가 난다. 오직 get 만 된다. 그래서 새로운 NSLayoutConstraint 객체를 생성해서 사용해야 한다.

 

 

 

6. NSLayoutConstraint를 새로 만들건데, 내가 가지고 있는 (self) 값을 기준으로 multiplier 값만 받아서 적용시켜 주면 된다.

deactivate와 activate 가 없으면 NSLayoutConstraint 가 계속 누적된다. 그래서 안 쌓이게, 처음에 설정된 값을 deactivate 후 새로만든 객체를 activate 로 적용시켜준다.

 

 

 

7. 호출하기. self.view.layoutIfNeeded() 는 화면을 갱신하는 코드이다.