autolayout - constraints 정리 (2)

autolayout  - constraints 정리 (2)

 

1. constraints 가로 길이와, 높이만 지정

뷰의 높이와 넓이만 지정을 했을때 아래와 같이 "뷰의 위치를 알 수 없다" 고 오류가 난다. 즉 뷰의 x 좌표와, y좌표를 지정해 주어야 한다. 아래 처럼 크기만 저징하고 위치를 지정안했을때 아이폰 기종에 따라 뷰가 밖으로 나갈 수 있다. 뷰는 크기를 알 수 없거나, 위치를 알 수 없을때 오류를 출력한다. constraints Top과 constraints Leading 을 각각 50씩 줘보자. 

참고로 constraints Top 50과 constraints Leading 50은 뷰의 x좌표를 부모뷰 top에서 50만큼 떨어진 곳에 위치시키고, 뷰의 y좌표를 부모뷰 left에서 50만큼 떨어진 곳에 위치 시키라는 뜻이다.

 

constraints 가로 길이와, 높이만 지정

 

 

2. 부모 뷰 기준으로 가운데 정렬

이번에는 뷰 alignment를 부모뷰 기준으로 가운데 정렬해보았다. 아래와 같은 오류가 발생한다. 이유는 위치는 부모뷰 기준으로 가운데 정렬한것을 알겠는데, 크기를 알 수 없기 때문이다. 이럴때는 크기를 지정해야 한다.

Horizontally in Container는 부모뷰 기준으로 뷰의 X좌표를 Center에 위치 시키는 것이고 Vertically in Container는 부모뷰 기준으로 뷰의 Y좌표를 Center에 위치시키는 것이다.

 

부모뷰 기준으로 가운데 정렬

 

3. 두개의 뷰

두개의 뷰를 만들고, 왼쪽 뷰의 제약조건을 아래와 같이 주었는데, 오류가 난다. 이유는 노란색 뷰의 제약조건이 설정되어 있지 않아서 오류메시지가 " 노란색 뷰의 y 좌표, 높이 제약조건을 설정해" , "노란색 뷰의 넓이를 지정해" 라고 출력된다. 참고로 노란색 뷰를 클릭해 보면  노란색 뷰의 Leading Constraints 가 지정되어 있다. 왜냐면  녹색뷰가 위, 아래, 왼쪽, 우측 제약 조건을 걸었기 때문에 노란색 뷰의 왼쪽 제약조건이 자동으로 생성되었기 때문이다. 

 

뷰 두개 제약조건

 

노란색 뷰의 탑, 오른쪽, 아래 제약조건을 걸어보자. 그래도 오류가 난다. 이유는 두개의 뷰가 있는데, 각각의 뷰의 넓이를 가늠 할 수 없기때문이다. 이때는 노란색 뷰의 넓이를 지정하면 오류가 사라진다. 노란색 뷰의 위치와 넓이가 지정되었고, 거기에 맞춰서 녹색 뷰도 위치와 크기를 만들 수 있기 때문이다. 

 

뷰가 두개일때는 노란색 뷰의 위치와 크기를 명확히 한 다음 초록색 뷰를 맞춰주자.

 

두개의 뷰를 선택하고 아래와 같이 Equal Widths 로 두개 뷰의 넓이를 같게 하겠다고 지정해 주어도 된다. 중요한 것은 각각의 뷰가 자신의 크기와 위치를 알 수 있게 값을 지정해 줘야 한다는 점이다.

 

뷰의 넓이 동일하게 설정

 

4. 세개의 뷰 - 넓이

이번에는 세개의 뷰를 생성하고, 세개 모두 선택한 다음 모두 제약조건을 50, 50, 50, 50으로 주었다. 오류가 난다. 세개의 뷰 모두 위치는 정해 졌지만 넓이를 모르기 때문에 넓이를 지정해 주어야 오류가 해결된다. 모든 뷰의 넓이를 같게 해주든,  녹색 뷰와 파란색 뷰의 넓이를 설정해주든 넓이 값을 처리해주면 해결된다. 참고로 녹색뷰 하나만 넓이를 설정해 주면 오류난다. 나머지 두개의 뷰의 넓이를 모르기 때문이다. 녹색 뷰와 파란색 뷰의 넓이만 설정해주면 노란색 뷰의 넓이는 동적으로 변경된다.

 

세개의 뷰 - 넓이

 

5. 세개의 뷰 - 높이

이번 상황은 세개의 뷰 모두 위, 아래, 좌, 우 제약 조건을 동일하게 20으로 주었지만, 오류가 발생하는 상황이다. 뷰가 세로로 배치되어 있을때, 왼쪽 , 오른쪽 제약 조건이 걸려있으면 넓이는 자동으로 알 수 있다. 문제는 각 뷰의 높이를 알 수 있는 방법이 없다. (각 뷰의 높이를 xcode가 자동으로 지정해주면 좋은데 그렇게 셋팅이 안되어 있다.)

 

 

 각 뷰의 높이를 같게 지정해 주거나, 녹색 뷰의 높이와 파란색 뷰의 높이를 지정해서 노란색 뷰의 높이는 동적으로 설정되게 지정 할 수 도 있다. 노란색 뷰 높이 기준으로 파란색 뷰 높이를 같게 설정할려면 노란색 뷰를 우클릭해서 드래그 한다음 파란색 뷰에 놓고 Equal Heights 를 클릭 한다.

 

5.세부 설정

아래는 두개의 뷰를 모두 선택하고 제약조거을 위, 아래, 좌, 우 20으로 주고 Equal Widths를 선택해 주었다. 녹색뷰를 마우스 우클릭하고 노란색 뷰로 드래그해서 Equal Widths를 선택해 주어도 된다. 두개의 뷰 넓이는 동일하다. 

 

녹색뷰를 마우스 우클릭하고 노란색 뷰로 드래그해서  Equal Widths를 선택

 

이때 녹색 뷰가 노란색 보다 항상 100이 더 넓어야 한다고 하면 우측뷰를 선택하고 인스펙터에서 Equal Width to View를 클릭 후, Constant를 100 작성해 주면 녹색 뷰는 노란색 뷰 보다 100 넓게 출력이 된다. 노란색 뷰를 클릭하고 인스펙터에서 Equal Width to View의 Constant값을 변경해도 결과는 동일하다.

왜나하면 녹색뷰를 마우스 우클릭하고 노란색 뷰로 드래그해서 Equal Widths를 선택해 주었기 때문에, Equal Widths는 녹색뷰 기준으로 움직인다. 

 

  Equal Width to View 설정

 

 

연재포스터

autolayout - constraints 정리 (1)