IOS Swift Study 10

Bounty List

• 원피스 현상금 리스트
• 이미지, 라벨
• 2개의 View ControllerTable View

1. 새 프로젝트를 생성합니다.
   Main.storyboard 에서 + 버튼을 통해
   Table View를 추가합니다.
2. 적당히 테이블 뷰의 넓이를 넓혀준 후, control 키와 함께 Table View 에서 View 로 드래그하여 auto Layout을 설정해줍니다.
   (드래그를 한 후에 Shift 버튼을 함께 사용하면 한번에 클릭이 가능)
3. Table View 의 데이터를 표시해줄 Table View Cell을 추가합니다.
   )
4. 빌드를 통해 확인합니다.
   

---

• 보여줄 테이블 뷰의 셀 개수?

  func tableView(_ tableView: UITableView, numberofRowsInSection section: Int) -> Int {
    return nameList.count
  }

• 셀의 표현

  func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    guard let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath) as? ListCell else{
        return UITableViewCell()
    }
  
    //img, name, bounty
    let img = UIImage(named: "\(nameList[indexPath.row]).jpg")
    cell.imgView.image = img
    cell.nameLabel.text = nameList[indexPath.row]
    cell.bountyLabel.text = "\(bountyList[indexPath.row])"
    return cell
  }
  

- 셀이 클릭되었을 때

```swift
func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
    print("\(indexPath.row)")
    performSegue(withIdentifier: "showDetail", sender: indexPath.row)
}

---

ViewController: DataSource, Delegate

5. ViewController로 가서 DataSource, Delegate 를 추가합니다.
   
6. 우측 경고 문구에서 fix 를 눌러 protocol을 추가시킵니다.
   )
7. Table View Cell 의 Identifier을 cell이라고 정해줍니다.
   UITableViewDataSource
8. 다음 사진과 같이 ViewController에 코드를 추가합니다.
9. Control 키와 함께 Table View 에서 ViewController 로 드래그하고, dataSource, delegate를 체크해줍니다.)
10. 우측 바 Outlets에서 연결된 것을 확인할 수 있습니다.
11. 확인을 위해 cell 에서 Accessory - Checkmark 를 추가합니다.
12. 빌드하여 확인
    

---

UITableViewDelegate

13. 다음 사진과 같이 코드를 추가합니다.
    
14. 클릭이 되었음을 확인하기 위해 print를 추가합니다.
    몇 번째 cell이 클릭되었는지 확인하기 위해 indexPath.row 를 받아옵니다.
    
15. 빌드하여 확인
    (첫 번째 index 값은 0이기 때문에 첫 번째 cell = 0, 두 번째 cell = 1)
16. cell의 개수를 늘려서 확인해봅니다.
    )

---

Custom Cell

17. ViewController에 코드를 추가합니다.
    
18. Main.storyboard - cell - identity inspector 에서 class를 ListCell로 설정합니다.
19. 확인을 위해 추가하였는 Checkmark를 해제합니다.
    
20. 다음과 같이 cell과 Table View의 높이를 설정합니다.
    )
21. cell을 누르고 + 버튼을 통해 UIImageView, Label 을 추가합니다.
    (원하는 모양의 Cell)
22. AutoLayout을 잡아줍니다.

• imageView ( Img View )
• label 1 ( NameLabel )
• label 2 ( BountyLabel )

23. imgView, nameLabel, bountyLabel을 각각 해당하는 곳에 연결해줍니다.
    (빈 원을 잡고 드래그 하여 해당하는 곳에 드래그 드랍합니다.)
    
24. ViewController 상단에 nameList, bountyList를 추가시킵니다.

    let nameList = ["브룩","쵸파","프랑키","루피","나미","로빈","상디","조로"]
    let bountyList = [83000000,100,94000000,1500000000,66000000,130000000,330000000,320000000]

25. 5 로 설정해주었던 cell의 개수를 bountyList의 개수만큼으로 설정합니다.
    )
26. 프로젝트 - Assets 폴더에 필요한 .jpg 파일을 넣어줍니다.
    nameList에 있는 인물과 사진이 맞게 이름을 똑같이 정해줍니다.
    
27. UITableViewDataSource 부분을 수정합니다.
    
28. 빌드하여 확인
    

guard let과 if let의 차이점
참고 : 레나참나

29. guard 를 사용해서 코드를 수정할 수 있습니다.
    

Present ViewController

30. DetailViewController.swift 파일을 추가합니다.
    (커맨드(⌘) + n 누르면 빠르게 생성할 수 있습니다.)
31. Main.storyboard 에서 + 버튼을 통해 view Controller 를 추가합니다.
    )
32. 새로 생성한 view Controller를 DetailViewController와 연결해줍니다.closs (feat.dismiss)
33. Assets 폴더에 닫기 버튼의 이미지 (close.jpg) 를 추가합니다.
    
34. '+' 버튼을 통해 button을 추가하고, Image = close
    (close.jpg 혹은 닫기 버튼 이미지의 이름) 로 설정해줍니다.
35. 버튼의 크기와 AutoLayout을 맞춰줍니다.
    
    
36. Control 키와 함께 Button을 DetailViewController와 연결해줍니다.
    
37. 창을 닫는 효과를 주기 위해 dismiss를 합니다.
    performSegue
38. Bounty View Controller를 누르고 Control 키와 함께 오른쪽 Detail View Controller 로 드래그 & 드랍을 합니다.
39. 드래그 & 드랍 후 Present Modally 를 선택합니다.
40. 연결된 Segue를 클릭하고 Identifier를 showDetail로 정해줍니다.
41. BountyViewController.swift 로 돌아와서 performSegue를 입력합니다. (위에서 정해준 "showDetial" Segue 선택)
42. 빌드하여 확인합니다.
43. 특정 Cell을 클릭했을 때, 클릭 효과로 gray 색상을 보여주는 효과를 없애고 싶다면,
    Cell - Selection - None 을 선택해줍니다
    .)

updateUI()

44. 특정 cell을 눌렀을 때 해당 cell을 자세히 볼 viewcontroller를 꾸며줍니다.
    (이미지, 라벨, 가격 등)
45. 앞서 BountyViewController에서 했던 것 처럼 DetailViewController에서도 코드를 입력하고 해당하는 곳에 연결해줍니다.

(23번 참조)

46. 먼저 DetailViewController가 데이터를 받을 준비를 해줍니다.

prepare(for segue:)

47. BountyViewController 에서 -> DetailViewController로 값을 전달할 준비를 합니다. BountyViewController의 func tableView - perforSegue에서 sender를 indexPath.row로 값을 변경합니다.
    (Cell을 선택했을 때 우리는 row 의 값을 알 수 있기 때문에 indexPath.row)
48. 추가로 BountyViewController에

'override func prepare(for segue: UIStoryboardSegue, sender: Any?)' func을 추가합니다.
(설명은 사진 속 주석)

49. 빌드하여 값이 잘 전달되는지 확인합니다.