리스트 뷰 구현 - 1) 테이블뷰로 업비트따라하기

리스트뷰를 구현하기 위한 방법은 테이블뷰와 컬렉션뷰가 있다

기본 구현 난이도는 별 차이가 없지만 컬렉션뷰가 그리드 표현의 자유도가 높기 때문에 레이아웃 형식이 더 다양해진 요즘엔 컬렉션뷰를 많이 사용한다.
그러나 내가 나중에 어떤 쪽을 작업하게될지 모르므로 둘 다 해볼 것이다. 정말 둘은 구현방식의 큰 차이가 없다

✅구현되어야 할 것

• presentation, data, layout

• presentation -> UITableViewDelegate
• data -> UITableViewDataSource
• layout -> 오늘은 기본적인 리스트형식 -기다란 횡이 세로로 나열되는- 일 것이기 때문에 필요하지 않다. 그러나 조금 복잡한 레이아웃, 커스터마이징이 필요할 경우 예제 메모를 남겨둠

• 길고 띄어쓰기도 없어서 처음보면 숨막히는데 대충 맨 뒤에 단어만 알고 있으면됨

  (delegate, datasource)
  
  
  

---

• 만일 테이블뷰로 그리드형식이나 다른 커스터마이징을 구현해야할 경우의 예제

extension ViewController: UITableViewDelegate, UITableViewDataSource {

    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return items.count
    }// 몇개를 표현할래? -> 아이템갯수만큼
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "CustomCell", for: indexPath)
        cell.textLabel?.text = items[indexPath.row]
        return cell
    }//무엇을 표현?
    
    🔥🔥---------layout part--------🔥🔥
    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        let totalCellHeight = cellHeight * CGFloat((items.count + numberOfColumns - 1) / numberOfColumns)
        let totalSpacingHeight = CGFloat(numberOfColumns - 1) * 10 // 셀 사이의 간격
        return (totalCellHeight + totalSpacingHeight) / CGFloat(items.count)
    }//어떻게 표현? TableView의 높이를 3x3 그리드로 설정하기 위해 셀의 높이를 조정
	
}

---

나는 오늘 업비트 화면을 따라해볼 것이다.

1. 프로젝트 생성
2. 파일추가-> swift file 형식으로 upbitModel 생성, cocoa형식으로 upbitCell만듬
3. 모델파일에 컬렉션 작성하기
   
   아직 네트워킹이 안되기 때문에 하나하나 써줘야한다. 매우 귀찮은 과정이었다..

4. 스토리보드에서 레이아웃 그리는 작업

• 라이브러리추가cmd + shift + L -> TableView 꽉차게 넣고 다시추가-> TableViewCell를 그 안에 넣어줌
• 헤드와 세부사항은 너무 귀찮아서 그냥 이미지로 박아놓고 나중에 작업해볼 예정

그러나 모든 요소의 배경색상을 다 똑같은 색상으로 지정했음에도 불구하고 리스트부분만 색상이 달라보인다. 😠😠😠
해결방법은 Content View의 배경색상은 지정하지 않고 Default로 놔두었다

5. 코드구현

• 테이블뷰와 mainVC iboutlet으로 연결
• 데이터파일 연결
• cell에 identifier연결

@IBOutlet weak var 업비트테이블뷰: UITableView!
let 업비트리스트: [CoinList] = CoinList.list

• 그리고 확장프로토콜로 데이터와 레이아웃을 구현해줘야하는데 delegate, datasource만 기억하면된다.
  
  이까지만 쓴다 그럼 에러가 나는데 Fix를 누르면 알아서 뭐 작성해야하는지 알랴줌

extension ViewController: UITableViewDelegate, UITableViewDataSource {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 업비트리스트.count
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        guard let cell = 업비트테이블뷰.dequeueReusableCell(withIdentifier: "upbitCell", for: indexPath)as? upbitCell else {
            return UITableViewCell()
        }
        let 코인 = 업비트리스트[indexPath.item]
        cell.configure(코인)
        cell.backgroundColor = tableView.backgroundColor
        return cell
    }
}

swift는 한글로 이름을 정해도되고 한자도되고 일본어도된다. 아마 애플이 정식서비스하는 나라라면 그 외에 외국어도 다 될 것 같다.

실제 서비스할 프로젝트에서는 그러면 안되겠지만 학습하는 단계이고 구조파악을 위해 한글로 이름을 정해도 문제없다. 눈에 잘 띄고 이름짓기도 편하고 좋기 때문이다.



갈 길이 멀지만 리스트부분만 색이 튀던 문제는 없어졌고 데이터도 잘 연결되었음을 확인할 수 있다