[ios][swift] custom UIView 만들기

*개발 환경 : Xcode 12.4 / 사용언어 : swift

UI를 구성하다 보면 반복적인 사용 혹은 동적인 생성 해서 구성하는 경우에 custom view를 만들어서 사용하게 되는데

custom view를 만드는 방법에 대해서 정리하려고 한다.

만들고 싶은 customview는 UIView를 base로 하고 Label 1개, Button 1개 있는 파란색 View로 가정한다.

만들고 싶은 custom view

< xib 없이 custom view 만들기>

1. UIView를 상속 받은 클래스 파일을 추가한다.

2.. 초기화 함수를 선언해준다. 

3.. 필요한 UI 요소들들 추가해준다. - 필요한 constraint를 추가한다.

 

UI를 모두 코드로 만드는 것에 익숙하지 않거나 스토리보드를 이용하고자 한다면 다음과 같이 추가하시면 됩니다.

< xib 를 이용해서 custom view 만들기>

1. UIView를 상속받은 클래스 파일을 추가한다.

2. 1번에서 추가한 클래스가 사용할 xib 파일을 추가합니다.

- 1과 2번의 파일 이름이 동일해야 하는 것은 아니지만 가독성을 해치지 않기 위해서 가급적 동일하게 맞추는 것이 낫습니다.

3. 초기화 함수를 선언해줍니다. 이때 어떤 xib를 읽어올지에 대한 코드가 추가되어야 합니다.

4. xib 파일로 가서 다음과 같이 owner를 지정해줍니다.

4-1. File's Owner를 선택한다.

4-2. 우측의 Identity inspector에서 NSObject를 1번 클래스 명으로 바꿔줍니다.

5. 스토리보드에 Label, Button을 추가합니다.

 

<사용하는 방법>

어떻게 customv view를 만들었는지는 상관이 없으며

해당 custom view를 사용하는 화면에서

코드로 추가한다면 customview를 생성하고 추가한다.

스토리보드에서 추가한다면 UIView를 원하는 위치에 추가한 다음에 해당 UIView의 클래스명을 custom 클래스 이름으로 바꿔준다.

최종 적용한 화면은 다음과 같습니다.