iOS에서 StoryBoard를 사용하여 UI 만들기 기초 - 1

이번 포스팅에서는 iOS의 StoryBoard를 사용한 UI 만들기에 대한 방법을 알아보겠습니다.

 

현재 iOS 개발은 Android와 마찬가지로 선언형 UI 제작인 Swift UI가 주류지만 StoryBoard를 건너뛰고

 

Swift UI만 배울수는 없기 때문에 StoryBoard에 대한 학습도 필요합니다.

 

---

Constraints 

안드로이드에서도 많이 사용되는 UI 제약 조건입니다.

 

안드로이드와의 차이점이라 하면...

 

화면 회전, 단말기 사이즈 대응 등에서도 사용되기 때문에 iOS에서는 거의 무조건 사용되는 조건이라는 것입니다.

 

제약 조건

View의 가로, 세로 각 면에 대해 제약 조건을 줄 수 있습니다.

 

스토리 보드 화면에서 특정 뷰를 클릭한 후

 

우측 하단의 다음과 같은 아이콘을 클릭하면 제약 조건을 줄 수 있습니다.

 

 

여기서 다음과 같이 점선을 실선으로 바꾸고 특정 뷰에서 다른 뷰 까지의 거리를 제약 조건으로 입력하면 제약 조건을 줄 수 있다.

 

(Add 4 Constraints 버튼을 꼭 눌러야한다.)

 

 

이렇게 제약 조건을 추가하면 다음과 같이 스토리 보드 구조에 Constraints가 추가 되어있는 것을 확인할 수 있다.

 

---

SuperView

단순히 부모 레이아웃에 딱 붙에 제약 조건을 설정하면 다음과 같이 일부분이 빈칸으로 나오는 것을 알 수 있다.

 

 

iOS에서는 View가 최상위 View를 의미한다.

 

 

그 아래에 Safe Area가 있는데 이는 알림 아이콘이 있거나 다른 기타 요소들이 포함될 수 있는 공간을 의미한다.

 

단순히 가로, 세로 모든 부분에 제약 조건을 넣으면 Safe Area에 설정이 되는데 이를 다음과 같은 부분에서 SuperView로 바꿀 수 있다.

 

 

전부 바꾸면 다음과 같이 가득 채우는 것을 볼 수 있다.

 

---

First Area & Second Area

First Area는 자기 자신 뷰를 의미합니다. (Leading, Trailing, Top, Bottom 중 한 곳)

 

Second Area는 제약 조건이 될 부분을 의미합니다.

 

그렇기 때문에 위 예시에서 Second Area를 Super View로 바꿨습니다.

 

---

뷰 안에서 정렬 제약 조건

특정 뷰 안에 있는 뷰에 대해 제약 조건을 줄 수 있습니다.

 

다음과 같이 오른쪽 하단의 아이콘을 클릭합니다.

 

 

여기서 아무건 수치를 넣지 않고 Horizontally in Container와 Vertically in Container를 클릭하면 

 

해당 뷰 안에서 가운데 정렬 제약 조건을 걸 수 있습니다.

 

이제 해당 뷰는 가로, 세로 회전을 하더라도 가운데에 위치하게 됩니다.

 

이를 Alignment Constraints라고 부릅니다.

 

Alignment Constraints를 사용하면 특정 뷰 안에서
원하는 뷰의 위치를 끝에서 얼마만큼 일정하게 둘지 결정할 수 있습니다.

 

---

Constraints를 사용하여 응용하기

• 특정 뷰와 Constraints 조건 만들기

모든 앱 개발에서 가장 많이 사용되는 기능중 하나라고 생각됩니다.

 

원하는 뷰가 특정 뷰와 항상 얼마만큼 떨어져 있어야 된다. 라는 것을 정의할 수 있습니다.

 

하지만 위에서 알려드린 방법으로는 특정 뷰가 있어야만 해당 뷰를 기준으로 제약 조건을 사용할 수 있다는 것을 알 수 있습니다.

 

그럼 기준이 되는 뷰가 없다면 어떻게 할까요?

 

예를 들면 다음과 같은 Layout이 있고

 

 

각각의 뷰가 화면을 회전하거나 다른 종류의 기기를 사용하더라도

 

항상 같은 비율의 위치에 위치해야한다고 생각해봅시다.

 

이 때는 기준이 되는 뷰가 없기 때문에 해당 뷰 or 컨테이너를 만들어야합니다.

 

해당 예시에서는 컨테이너를 사용하는게 더 좋기 때문에 컨테이너를 사용해서 제약 조건을 만들어보겠습니다.

 

다음과 같이 View를 새롭게 넣어주고 그 안에 각각의 뷰를 넣어줍니다.

 

다음 오른쪽 아이콘을 사용하면 다수의 뷰를 한 번에 자동으로 UiView에 넣을 수 있습니다.

 

간단하게 다수의 View를 Embed 가능

 

위와 같이 뷰를 Embed 하여 3개의 구역으로 다음과 같이 나눕니다.

 

(UiView의 이름도 각각 지정해줍니다.)

 

---

StackView

각각의 뷰를 새로운 UIView로 감싸기만 해서는 제약 조건을 걸 수 없습니다.

 

그 이유는 감싼 UIView의 제약 조건이 설정되어있지 않기 때문에 해당 UIVIew의 전체 크기를 알 수 없기 때문입니다.

 

-> 부모 레이아웃의 크기를 알 수 없으니 제약 조건을 걸 수 없다.

 

이를 해결하기 위해 StackView를 사용할 수 있습니다.

 

StackView란?

 

여러 뷰(View)들을 가로나 세로로 일정한 간격으로 정렬하고 배치하는 데 사용되는 레이아웃입니다.

 

안드로이드에서 보면 LinearLayout과 유사하다.

 

StackView를 사용하면 다음과 같은 것들을 할 수 있다.

 

 

• Axis: StackView 안에 있는 뷰를 어느 방향으로 배치할지 결정
  • 안드로이드의 orientation과 비슷
• Alignment: StackView 안에 있는 뷰를 어떻게 배치할지 결정
  • 안드로이드의 gravity와 비슷
• Distribution: StackView 안에 있는 뷰의 크기를 어떻게 할지 결정
  • 안드로이드의 weight와 비슷
• Spacing: 각 뷰의 일정량의 간격을 줄 수 있다.

StackVieW를 사용하면 다음과 같이 일정한 비율로 배치시킬 수 있다.

 

---

버튼에 텍스트 넣고 크기 조정하기

Roll 버튼의 크기가 매우 작은 것을 볼 수 있다.

 

그 이유는 제약조건만 설정하면 자동으로 버튼의 텍스트 크기에 맞게 제일 작은 사이즈를 유지하면서 제약 조건을 만족 시키기 때문이다.

 

이럴 때는 다음과 같은 방법으로 강제로 크기를 늘릴 수 있다.

 

 

Width와 Height를 강제로 줘서 크기를 고정적으로 사용할 수 있다.

 

하지만 이렇게 하면 다음과 같은 경고가 발생한다.

 

 

이 때 해당 노란색 삼각형을 누르면 다음과 같은 옵션을 볼 수 있다.

 

 

• Remove Constraint (제약 조건 제거)
• Set Constraint to ≥ Current Width (현재 너비보다 크거나 같도록 제약 조건 설정)
  • 최소한의 너비를 보장하면서 유동적인 크기를 원할 때 사용
• Set Constraint to ≥ Minimum Width (최소 너비보다 크거나 같도록 제약 조건 설정)
  • iOS와 같은 플랫폼은 터치 가능한 요소에 대해 권장하는 최소 크기가 있습니다. 이 옵션을 사용하여 뷰가 이 최소 크기 기준을 만족하도록 강제할 수 있다.

이 중에서 제약조건을 설정하면 다음과 같이 부등호가 붙어서 제약 조건이 활성화되는 것을 볼 수 있다.

 

 

하지만 이 방법이 padding과 margin을 대신할 수 없기 때문에 다른 포스팅에서 이를 알아보겠습니다.

---