[UIKit] UITableViewController

s넘...... 힘들구 어렵다 이럴 수 있나?!?!?!?!?!

 

일단 UITableViewController를 구성하는 친구들이 뭐가 있는지와 그 특징을 본 뒤에 Xcode 내에서 기본적인 테이블뷰를 구성하려면 어떻게 작성해야 하는지를 정리해 보려고 한다.

 

자꾸 모르겠고 그림을 그려서 이해하면 좀 괜찮을까 하고 한번 그려봤다. 

 

 

 

✔︎ UITableViewController

상속 관계가 UIView -> ScrollView -> TableView로 되어 있어 UITableViewController는 UIView와 ScrollView의 특성을 모두 가지고 있다.

 

그러니까 기본적으로 뷰이고... ... (당연하다. 태초에는 뷰가 있었으니까.) 스크롤 뷰를 상속받았기 때문에 기본적으로 스크롤이 가능하다.

 

 

위처럼 주로 많은 데이터를 반복적으로 다룰 때 간단하게 표현하기 위해 사용하며 위와 같이 멜론 차트나 인스타 피드도 TableView를 이용한 것이다.

 

 

TableView

• Content
  • Dynamic
    • 그때그때 다양한 내용들을 넣을 수 있는 것을 말한다.
    • 어떤 사용자가 어떻게 앱을 사용하느냐에 따라 그 요소가 달라진다.
    • 그 예시로는 카카오톡이나 유튜브, 인스타 피드가 있다.
  • Static
    • 누구에게든 항상 같은 내용을 보이고자 할 때 사용한다.
    • 주로 아이폰 설정 창이나 앱의 기본 설정창이 이에 해당할 것이다. 
• View
  • Header
    • 반복되는 위쪽 영역을 말하며, 주로 배너를 넣으려고 할 때 많이 사용한다. 인스타그램에서 피드 위쪽에 스토리 부분이 헤더 영역에 해당한다.
  • Footer
    • 정보들을 기재할 때 많이 사용한다. 웹 페이지 가장 하단을 내리면 사업자 정보나 여러 전화번호가 적혀 있듯이 앱 가장 아래로 가게 되면 비슷한 내용이 나온다. 이 부분들이 Footer이다.
• Style
  • Plain
  • Grouped
  • Inset Grouped

순서대로 plain, grouped, inset grouped이다.

 

Section

• 셀을 그룹화해서 보여주는 것을 말한다.
• header, row(cell), footer가 하나의 section으로 묶이며, Section / Row 모두 index로 접근이 가능하다.

 

Cell 

보통 cell의 경우에는 앱을 조금 더 효율적으로 사용할 수 있도록 데이터 자체가 아니라 틀로 쓰이며, 스크롤 될 때 데이터가 바뀌면서 재사용된다.  보통 스크린에 보이는 셀 만큼 준비하며, 이러한 방식을 재사용 매커니즘이라고 한다. 

 

부르는 친구들은 이따 다시 보겠지만, tableView.dequeueReusableCell(withIdentifier:)를 이용하여 재사용한다.

 

아무튼 Cell에 대해서 조금 더 보자면, 

• system
  • basic
    • 타이틀이 하나만 되어 있음
    • imageView / textLabel
  • subtitle
    • textLabel, detailTextLabel, imageView
  • rightDetail
    • textLabel, detailTextLabel, imageView
  • LeftDetail
    • textLabel, detailTextLabel,
• custom
  • 말 그대로 커스텀이다!
  • 원하는 요소를 얹어서 디자인하며, switch / DatePicker의 경우에는 custom 영역에서 버튼을 집어넣어야 한다.

 

 

 

 

 

 

✔︎ Xcode에서의 사용법

이어서 완존 기초적이고,,, 필수적인 사용법을 알아보려고 한다.\

 

테이블 뷰 필수 메서드를 꼽아보자면,

• 셀 갯수
• 셀 디자인 및 데이터 처리
• 셀 높이(사실얜필수는아님)

 

 

 

1. 셀 갯수

    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return list.count
    }

요 method를 이용하면 된다. 반환값으로 몇 개의 셀을 쓸 건지 보내주면 댐.

 

 

번외)

 

    override func numberOfSections(in tableView: UITableView) -> Int {
        // 나 section 2개 쓸 거야!
        return 2
    }

요런 메서드를 이용해서 섹션을 여러 개로 나눌 수 있는데, 그럼 셀 갯수를 설정하는 메서드에서 섹션 하나당 셀의 갯수를 리턴해 줄 수 있다.

 

 

    // numberOfRowsInSection
    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        // 섹션 하나당 셀의 갯수
        return section == 0 ? studyList.count : 3
    }

이런 식으루!

아님 if문을 이용해서 분기처리해도 아주 goood 

 

 

 

 

 

2. 셀 디자인 및 데이터 처리

 	// 2. 셀의 디자인 및 데이터 처리: 카톡 프로필 모서리 둥글게 같은 거
    //프로필 이미지와 상테 메세지 변경 등
    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        
        // Identifier는 인터페이스 빌더에서 설정!
        let cell = tableView.dequeueReusableCell(withIdentifier: "settingCell")!
        
        // 데이터 넣어주기
        cell.textLabel?.text = list[indexPath.row]
        
        // 셀 색깔 정해주는 거임
        cell.backgroundColor = indexPath.row % 2 == 0 ? .lightGray : .white
        
        // 디테일 데이터 넣어주고 디자인
        cell.detailTextLabel?.text = "디테일 텍스트"
        cell.detailTextLabel?.textColor = .blue
        cell.detailTextLabel?.font = .systemFont(ofSize: 15)
        
        // 이미지도 넣어줬네용 ^_^ .. 
        cell.imageView?.image = UIImage(systemName: "star.fill")
        
        return cell
    }

 

 

 

 

 

 

3. 셀의 높이

    // 3. 셀의 높이
    override func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        return 70 // 셀의 높이 값을 Int값으로 반환하면 된다.
    }

서비스 구현에 따라 필요한 경우가 많지만, 항상 같은 높이를 셀에서 사용한다면 비효율적일 수 있음.

왜냠 셀이 로딩될 때마다 계속 함수가 시행되어야 하기 때문이다. 

 

 

 

 

 

 

 

아힘들어

그래도 정리하면서 쓰니까 좀 알 게 댄 거 같고 그렇다 ㅋㅋ

낼 수업 때 잼는 거 한대서 기대댄당

요즘 맨날맨날재밋음

어떻게등하교시간합쳐서2시간인데일케재밋을수가...

이제집가야겟다