ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • iOS :: TableView Storyboard로 구현하기
    iOS 2019. 2. 19. 18:33

    안녕하세요! 상어입니다.

    출근길에 눈내리는지 모르고 구두신었다가 넘어질뻔했네요ㅠㅠ 일기예보를 잘 봐야겠어요ㅠ


    오늘 다룰 내용은 TableView입니다. 

    ui작업하면서 가장 많이 쓰는 친구이기도 하지용


    그럼 Storyboard에서 tableview를 쉽게 만드는 법! 알아보러갈까요오~


    TableView - Storyboard로 구현


    TableView는 진짜진짜지이이이이이인짜 많이 쓰여요!

    그리고 TableView를 생성하는 방법은 여러가지가 있지만, 그 중에서 

    1) Storyboard로 구현하기

    2) Code로 구현하기

    3) Xib로 구현하기

    이 세가지만 다뤄볼꺼에요.

    다른 방법이 있는지는 잘 모르겠지만, 제가 아는건 이 세가지가 전부라.. 흑


    그래서 TableView의 생성방법에 따라 세개의 블로그를 작성할거구, 기호에 맞게 선택해서 사용하시면 될 듯해요!


    TableView를 Storyboard에서 구현하는 방법에서도 두가지가 나뉘는데 

    ViewController에 TableView를 추가하느냐, 아니면 TableViewController를 사용하냐 인것 같아요.


    ViewController + TableView 

    • ViewController class에 UITableViewControllerDelegate, UITableViewControllerDataSource 채택
    • TableView의 delegate, datasource가 ViewController(자신 self)임의 지정
    • 내가 원하는대로 custom하기 좋음


    TableViewController

    • TableiVew의 delegate, datasource가 이미 지정되어 있음
    • 원하는 대로 custom하기 불편

    저 같은 경우에는 두개 다 써봤는데, custom작업을 많이 하다보니 ViewController + TableView를 많이 사용하고 있어요 ㅎㅎ 
    그치만, 각자의 기호에 맞게 사용하시면 되기 때문에 두개의 차이를 잘 모르겠다면 실제로 사용해보고 익혀가는걸 추천드려요~!

    ViewController + TableView

    Storyboard에서 cmd + shift + L 누르고 TableView선택


    constraint 전부 0으로 설정



    다시 cmd + shift + L 누르고 TableViewCell 선택



    그러면 Storyboard에 다음과 같이 됩니다.



    이제 간단하게 ViewController에서 작업을 해줄겁니다.

    우선, UITableViewDelegate와 UITableViewDataSource 프로토콜을 채택해줍니다.


    여기서!! UITableViewDelegate와 UITableViewDataSource를 채택하면 필수적으로 numberofRowsInSection, cellForRowAt을 구현해주어야합니다.

    두 함수 전부 return 형태가 있고, 현재는 화면만 띄울 것이니 아래와 같이 코딩해줍니다.

    ** 물론, 추후에 변경할 예정이에요!! **

    extension ViewController: UITableViewDelegate, UITableViewDataSource { func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int { return 1 } func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { return UITableViewCell() } }


    그러면 이제 결과를 볼까용?!



    쨘,!

    아직 아무것도 나오지 않아요. 왜냐면 cell안의 뷰를 어떻게 나오게 할지 꾸미지 않았거든요 ㅎㅎ


    cell은 행 하나하나를 cell하나하나라고 보시면 됩니다.

    그리고 그 cell의 모양은 꾸미기 나름이랍니닿ㅎㅎ


    이제 Storyboard에서 cell의 모양을



    이렇게 만들어주세요. 여기선 오토레이아웃을 다루진 않을거기 때문에 원하시는대로 작업하시면 됩니다.

    저는 ImageView와 Label을 추가했습니다.


    다 하신 후, 'CustomTableViewCell'이라는 새로운 swift파일을 만들어줍니다. 



    파일을 만드셨으면, Storyboard에서 ImageView, Label을 만든 cell을 선택하시고, Attribute Inspector에서

    위와 같은 형태를 클릭한 후, custom cell을 CustomTableViewCell로 지정하세요.



    그 다음 옆에 있는 

    모양을 선택한 후, Identifier을 지정하세요. 원하시는 이름을 적어주시면 됩니다. 

    저는 나중에 헷갈림을 방지하기 위해 UITableViewCell의 파일이름과 동일하게 해주는 편입니다 :)



    설정이 완료되셨다면 CustomTableViewCell에 ImageView와 Label을 연결시켜주세요.


    class CustomTableViewCell: UITableViewCell { @IBOutlet weak var customImageView: UIImageView! @IBOutlet weak var customLabel: UILabel! override func awakeFromNib() { super.awakeFromNib() // Initialization code } override func setSelected(_ selected: Bool, animated: Bool) { super.setSelected(selected, animated: animated) // Configure the view for the selected state } }

    할일이 좀 많죠?ㅎㅎ 아직 끝나지 않았습니다!!

    아까 ViewController에서 추후에 변경할 예정이라고 한 코드들을 기억하시나요??

    numberofRowsInSection에는 각 section에 몇개의 row를 노출시킬 것인지 설정하는 곳입니다.

    현재 section은 한개이기때문에 나타내고 싶은 row갯수만 적어주면 됩니다. 저는 5개로 설정하겠습니다.

    그리고, cellForRowAt에는 cell마다 나타내고픈 cell의 class를 적으면 됩니다. 


    extension ViewController: UITableViewDelegate, UITableViewDataSource { func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int { return 5 } func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { guard let cell = tableView.dequeueReusableCell(withIdentifier: "CustomTableViewCell", for: indexPath) as? CustomTableViewCell else { return UITableViewCell() } return cell } }

    withIdentifier에 있는 String 값은 Storyboard에서 Identifier에 지정해준 값

    as? 이후의 클래스는 해당 cell의 클래스 이름으로 지정하면됩니다.


    이제 실행시켜 보겠습니다.



    넴 아무것도 안나오죠? 정상입니다.

    왜냐하면 TableView에서 delegate와 datasource의 프로토콜을 채택했지만, 대리자는 위임을 안했기 때문입니다.

    TableView를 구현하시다가 화면이 안나온다면 대리자를 위임했는지 먼저 꼭!!! 확인해보세요. 

    은근 놓치시는 분들이 많이 계시더라구욯ㅎㅎ

    그럼 대리자 위임~~



    Storyboard에서  TableView를 선택하고 오른쪽 마우스 클릭한 후, ViewController까지 끌어당기면



    이렇게 나타납니다. 그러면 dataSource와 delegate를 선택해주시면 대리자 위임이 완성되었답니다.

    이 방법 이외에는


    class ViewController: UIViewController {
    
        @IBOutlet weak var tableView: UITableView!
        
        override func viewDidLoad() {
            super.viewDidLoad()
            tableView.delegate = self
            tableView.dataSource = self
        }
    }
    

    TableView를 ViewController에 연결시키고, .delegate = self, .dataSource = self를 해주면 됩니다.


    자 이제 다시 실행을 해보면



    우왕 나왔습니다!!!!

    제가 설정한대로 cell의 갯수가 5개 나왔네요 ㅎㅎㅎㅎ


    UITableViewController


    TableViewController는 이전 ViewController에 TableView를 추가한 방법과 크게 다르진 않습니다.

    Storyboard에서 UITableViewController를 끌어다놓습니다.



    그럼


    이렇게 나옵니다. 아까는 TableView를 추가하고, Cell을 추가해야지만 나오는 모양이 

    TableViewController를 한번만 추가하면 똑같은 모양이 나옵니다.

    이제 cell을 꾸며보겠습니다.




    cell의 모양은 똑같이 가져갈게요 ㅎㅎ


    그 다음, 

    UITableViewController를 상속받는 swift파일을 만들어줍니다.



    만들면 어디서 마아아안히 보던 func들이 보일거에요 ㅎㅎ

    cellForRowAt 메소드는 사용해야하기 때문에 주석을 풀어주시고, 

    나머지 주석처리 되어있는 친구들은 쓰고싶을 때 쓰면 되기 때문에 일단은 지울게용 :)


    class CustomTableViewController: UITableViewController { override func viewDidLoad() { super.viewDidLoad() } // MARK: - Table view data source override func numberOfSections(in tableView: UITableView) -> Int { // #warning Incomplete implementation, return the number of sections return 1 } override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int { // #warning Incomplete implementation, return the number of rows return 5 } override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { guard let cell = tableView.dequeueReusableCell(withIdentifier: "CustomTableViewCell", for: indexPath) as? CustomTableViewCell else { return UITableViewCell() } return cell } }


    네, 아까 ViewController과 똑같이 가져가겠습니다 ㅎㅎ

    여기서 numberOfSection은 ViewController 예시에는 없었는데, 이 메소드를 이용해서

    section의 갯수를 지정해주면 됩니다. 현재는 section을 크게 사용하지 않기 때문에 지워주셔도 되고

    section 1개는 무조건 존재하기 때문에 return 1로 설정해주어도 됩니다.


    그리고, 

    ViewController에서는 위와같은 메소드들이 override가 없었는데, 여기선 override가 있네요?

    그 이유는



    UITableViewController를 타고 들어가보시면 UIViewController를 상속받고,

    UITableViewDelegate, UITableViewDataSource는 채택되어 있는걸 보실 수 있으실거에요.


    즉! TableViewController가 이미 delegate, datasource 프로토콜을 구현하고 있으므로 구현체가 존재한다는 이야기이고, 구현체가 있다면 override하여 사용해야하기 때문에 override되어 있는거랍니다. :)


    쪼꼼 복잡하긴 하지만 UITableViewController를 상속받을 땐

    위와같은 메소드들을 override하면 돼! 라고 쉽게 생각하시면 편할 듯 해요 ㅎㅎ


    이제, 전부 다 했으면 Storyboard에서 연결을 시켜줘야겠지용?


    1) TableViewController의 class를 CustomTableViewController로 지정

    2) cell의 class를 CustomTableViewCell로 지정

    3) cell의 Identifier을 원하는 이름으로 지정





    자, 이제 끝났습니다. 그럼 실행해볼까요??



    퍼펙트 합니다 퍼풱트!!!


    그리고 여러분! 혹시 눈치채셨나요?!!

    넹 마쟈요 >< TableViewController를 이용하면 delegate, datasource의 대리자를 위임하지 않아도 된다는 사실! 

    왜냐면 

    CustomTableViewController에서 UITableViewDelegate와 UITableViewDataSource 프로토콜을 채택하는게 아니라, 

    UITableViewController에서 채택하기 때문에 대리자를 위임하지 않아도 됩니다.😃

    간편하쥬?



    TableView은 한번 제대로 익혀놓는다면 무궁무진하게 사용할 수 있는 친구이니 

    꼬오오옥 익혀놓으시는걸 추천드립니다 :)

    그럼 감기조심하세요 여러분//



    안뇽!

    'iOS' 카테고리의 다른 글

    iOS :: ARC, strong, weak, unowned  (0) 2020.04.28
    iOS :: URI와 URL 차이 (URI VS URL)  (0) 2019.07.20
    iOS :: SQLite와 Realm 장단점  (0) 2019.07.15
    iOS :: TableView xib로 구현하기  (1) 2019.03.11
    iOS :: TableView Code로 구현하기  (0) 2019.03.08

    댓글

Designed by Tistory.