[iOS] Nib, Xib에 대해 & 구현까지! - HoonIOS

안녕하세요, HoonIOS입니다. :)

 

이번 포스팅은 스토리보드로 UI를 구성하는 도중에 Xib, Nib로 구현하면 편하고 세세하게 구현할 수 있다고 해서 저 같은 신입 개발자한테는 다루기 힘든 부분이라 한번 정리를 해보기로 했습니다. :)

 

 

 Nib & Xib란?

 

Nib, Xib는 유저 인터페이스 필드를 저장하기위한 파일이라고 합니다.!

 

이것은 UITableViewController, UITalbeViewCell, UICollectionCell클래스, CustomView에서만 지원을 합니다.

 

그럼 Nib파일하고 Xib파일의 차이는 뭐지?라고 생각을 하실 텐데요.

Nib는 바이너리 형태, Xib는 xml형태라고 합니다. :)

 

그런데 nib파일을 컴파일하면 xml파일이 된다고 하니 사실상 같은 의미라고 생각을 하시면될꺼 같습니다.

 

간단한 테이블 뷰셀을 xib로 한번 만들어보겠습니다.

 

 구현하기

 

※구현

테이블 뷰 컨트롤러를 베이스로 하고 왼쪽에 테이블 뷰 셀의 왼쪽에는 강아지 사진 오른쪽에는 텍스트를 추가해주겠습니다.

 

 

우선은 스토리보드 가서 viewController에 테이블 뷰만 넣어줍니다.

 

그다음으로 파일을 새로 추가해주겠습니다.

 

control + n을 눌러서 Cocoa Touch Class파일을 추가해주겠습니다.

 

 

여기서 테이블 뷰 셀을 그냥 추가하는 게 아니라 next 버튼을 누르게 되면 Also create Xib file을 추가해주고 테이블 뷰 셀 이름을 xibViewCell로 바꿔서 설정해주면됩니다.
( 아 이거는 자유입니다. 저는 셀 이름을 이걸로 해줄 거라 ㅎㅎ, 원하느것으로 추가해주시면 됩니다. )

 

이렇게 추가를 하게 되면 2개의 파일이 만들어집니다.

 

* 설명

• 이 두 개는 서로 연결이 되어 있습니다. 무슨 말이면은. xib에 있는 셀을 눌러보면 이미 해당 셀을 위의. swift파일 하고 짝이 되어 있어서 다시 연결해야 되는 번거로움이 없습니다.
• . swift파일은 UITableViewCell을 상속받은 파일이고 하나는. xib파일로 테이블 뷰 셀만을 보이는 것을 확인할 수 있습니다.

• 만약에 너무 셀의 크기가 작다 그러면 웹페이지 늘리고 줄이듯이 가장자리를 이용하여 크기를 조절할 수 있습니다.!
  ( 대신 왼쪽 위는 삭제 버튼이므로 왼쪽 위 버튼을 누르다가는 해당 셀이 삭제가 될 수 있습니다...ㅎ )

이제 똑같이 오른쪽 위 +버튼을 눌러서 오브젝트 라이브러리를 추가해줄 수 있습니다.

 

저는 imageView 하고 label을 넣어줬습니다.

 

그다음으로 이제 스토리보드에서 했던 것과 같이 테이블 뷰 셀의 식별자를 지정해줘야 합니다.

그다음으로 테이블 뷰셀에 들어간 이미지 뷰랑 label을 아울렛 변수 지정해 줘야 추후에 데이터를 넣을 때 사용할 수 있겠죠?

 

이제는 datasource, delegate를 지정해주기 위해서 뷰 컨트롤러에서 설정해주었던 tableView를 아울렛 변수로 지정해주고 델리게이트랑 데이터 소스를 지정해주겠습니다.

 

 

이제는 확장을 통해서 각 delegate, 와 datasource를 구현해주겠습니다. :)

데이터 소스의 필수 메서드를 안 적어줬다고 말을 하니 데이터 소스의 필수 메서드를 적어줘야겠습니다. 

 

여기서 label에는 몇 번째 인지 표시만 해주고 image에는 해당 모듈에 넣어준 이미지를 사용할 것이기 때문에 따로 데이터를 담은 배열을 사용해줄 필요가 없습니다.

 

해당 델리게이트의 소스에 관한 것은 설명하지 않겠습니다 ㅎㅎ 혹시 이해가 잘 안 되시면 아래 포스팅을 확인해보시면 좋아요!

<테이블 뷰 컨트롤러의 데이터 소스 & 델리게이트 >

 

이게 끝인 줄 알았지만 Xib 파일 하고 뷰 컨트롤러 하고 지금 따로 놀고 있으니 둘을 연결해줘야 합니다.

* 코드 설명

• UINib(nibName:,bundle:)의 클래스 객체를 한번 봐보겠습니다.
  
  이 이니셜 라이저의 nibName 매개변수를 한번 먼저 살펴보겠습니다. 이 매개변수는 xibViewCell의 xib파일 이름을 찾는 것으로 파일명을 적어주면 됩니다.
  
  여기서 xib파일인데 UINib를 해준 이유는 nib파일을 컴파일해주면 xib가 되기 때문이라고 하더라고요!
  
  bundle은 xib파일 위치를 찾을 위치로 nil을 작성해주면 메인에서 찾는 거 같은데 공식문서에서는 안 나오네요...ㅠ
• 두 번째 코드는 테이블 뷰에 연결을 해주는 코드입니다. UINib로 만들어준 객체를 넣어주고 forCeollReuseIdentifier은 테이블 뷰 셀의 식별자를 구현해주면 됩니다.

이제 한번 컴파일해보고 원하는 데로 잘 구현이 되었는지 확인해보겠습니다. :)

 

 

스토리보드로 구현했을 때와 같이 나오네요!! ㅎㅎ 

 

음 뭔가 스토리보드로 구현을 할 때는 작은 셀에 여러 객체들을 넣는 게 불편했는데, xib를 이용하니 좀 더 수월하게 작업을 할 수 있었습니다. :)