iOS :: TableView xib로 구현하기
안녕하세요! 상어입니다.
이제 드디어 TableView를 구현하는 방법중 세번째 방법인 xib를 소개합니다!!
저도 처음 TableView를 할 땐 cell에 일일히 그렸는데 xib를 안 이후는 요것만 사용해요 ㅎㅎ
관리가 넘나 편하다눙~><
xib는 크게 어렵지 않아요~ 처음 접하시는 분들은
엇, 이게모야 할 수 있는데
간단하게 cell을 따로 빼서 관리한다고 생각하시면 됩니다.
우선, xib를 만들어야하니 파일을 하나 만들어줍니다.
파일은 이전에 UITableViewCell파일을 만든 것처럼 NewFile을 눌러주세요!
그 다음 이름을 적고, 밑에 Also create XIB file을 체크해주세요!
그러면
이렇게 .swift파일과 .xib파일이 만들어져있습니다.
여기서 xib파일을 클릭하면
이런 형태의 빈화면이 나오는데 화면이 너무 작지요?
일단 크기를 늘려보겠습니다.
cell을 클릭한 후 width는 375로 height는 80으로 늘려줍니다.
속이 후련하네요ㅋㅋ
자! 다들 잘하시는 그 오토레이아웃을 이용하여 원하는 형태로 cell을 만들어줍니다.
저는 이전편과 같이 image와 label 하나씩 넣었습니다.
네네 죠아용~~
추가로 저희가 늘 cell을 만들면 하는 일이 있지요?
맞습니다! identifier을 설정해줍니다.
원래는 TableViewCell class도 함께 지정을 해주어야 하지만, xib로 만들면 자동으로 지정이 되어있기 때문에 이 과정은 생략합니다.
저는 sharkTableCell이라고 지정했습니다.
다 되었으면 다시 ViewController로 돌아갑니다.
그리고 TableView를 추가합니다.
저는 TableView를 꽉채우지만, 기호에 따라 맞게 조절하시면 됩니다 :)
TableViewCell.swift파일은 Storyboard에서 cell을 만들 때와 마찬가지로 IBOutlet 연결하셔서 작업하시면 된답니다.
달라지는건 없찌용!! 헤헿
이제 거의 다 했으니 마지막으로 xib만 TableView에 등록시켜주면 끝입니다!
ViewController를 여시고 TableView를 IBOutlet으로 연결시켜줍니다.
그 다음, register하는 코드를 추가해주세요!
private func registerXib() { let nibName = UINib(nibName: "SharkTableViewCell", bundle: nil) tableView.register(nibName, forCellReuseIdentifier: "sharkTableCell") }
nibName에는 TableViewCell.swift파일 이름을 쓰시면 되고,
forCellReuseIdentifier에는 아까 지정한 cell의 identifier을 쓰면 됩니다.
그럼, 모든 세팅이 끝났습니다.
ViewController에 UITableViewDelegate와 UITableViewDataSource 프로토콜을 채택해준 후 실행 해주면
이런 화면이 쨘하고 뜬답니다. 히히
정말 쉽죠? register하는 작업만 제대로 해준다면 큰 무리없이 화면을 나타낼 수 있을거에요 :)
그럼 아래에 ViewController 코드를 올려놓겠습니다.
행여, 잘 안되는 부분이나 모르는 부분은 꼭 알려주세용><
안뇽!