[iOS][Swift] Table View 적용하기

Mary·2022년 9월 28일
1
post-thumbnail

테이블뷰는 "세로형식"으로 나눠진 뷰들의 묶음이다.
테이블뷰의 기본 형태는 세로로만 스크롤이 가능하다.

먼저 storyboard에서 Table View를 추가한다.

margin을 체크해제하고, 0으로 설정하여 오토레이아웃을 잡아준다.

하단까지 조정하고 싶으면 Size inspector에 들어가서 Bottom을 클릭한다.

Safe Area가 아닌 Superview로 설정하면 아래끝까지 Table View가 내려가고, Constant를 0으로 설정하면 완전히 내려간다.

Table View에서 control을 끌어 테이블뷰의 속성을 만든다.

Table View를 사용할 때는 프로토콜을 채택해야 하는데 UITableViewDataSource 프로토콜을 채택한다.
Table View와 View Controller 간 통신을 할 수 있는 프로토콜이다.

class ViewController: UIViewController, UITableViewDataSource {

테이블뷰를 만들면 이 함수를 반드시 실행시켜야 한다.

  1. 몇개의 컨텐츠를 만들면 되는지
    ex ] return 5 라고 하면 컨텐츠 5개 생성
  2. 테이블뷰의 cellForRowAt 몇번째 셀은 어떻게 표시를 하면 되는지
    ex ] return UITableViewCell()
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        <#code#>
    }
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        <#code#>
    }

Tabel View 위에 Tabel View Cell을 올린다.

하나의 프로토타입이 될 수 있는 Prototype Cell이다.

Cell위에 UIImageView를 올린다.

UIImageView 높이와 넓이, 간격을 설정하고, Label을 추가해준다.

Label을 Stack View로 묶어 위 Label에 높이를 설정하고,
UIImageView의 높이와 맞추기 위해 First Item에서 Image View.Bottom과 Image.View Top으로 설정한다.

Relative to margin도 체크해제 하고, Constant를 0으로 설정한다.

스토리보드와 코드를 연결하기 위해 New File을 선택하고, Cocoa Touch Class 파일을 선택한다.

UITableViewCell을 상속한 셀을 만들고, 이름은 FoodCell이라 하였다.

스토리보드에서 Table View Cell을 클릭하고, Custom Class에 FoodCell이라 입력한다.

스토리보드에서 Assistant를 눌러 파일을 연결할 때 잘되지 않으면 "Option"을 누르고 파일을 클릭하면 연결이 된다!

UIImageView를 control을 끌고 mainImageView라 설정해준다.

Label도 동일하게 설정해준다. (foodNameLabel, descriptionLabel)

@IBOutlet weak var mainImageView: UIImageView!
    
@IBOutlet weak var foodNameLabel: UILabel!
    
@IBOutlet weak var descriptionLabel: UILabel!

Models / Views / Controllers 그룹을 만들고,
Models 안에 Food 파일을 추가하였다.

Food 파일 안에 데이터를 구축한다.
3개를 하나의 묶음으로 만들었다고 생각하기!

struct Food {
    var foodImage: UIImage?
    let foodName: String
    let foodDescription: String
}

Assets에 이미지를 추가해준다.

음식 데이터의 Array는 아래와 같이 표현하였다.

foodDataArray = [
Food(foodImage: UIImage(named: "6.png"), foodName: "센자이료쿠", foodDescription: "압구정에 위치한 일본라멘 맛집! 가게 입구부터 일본에 있는 라멘집을 통으로 옮긴 것 같은 분위기이다. 간장베이스의 고기라멘인데 면도 생면이라 굵고, 시금치와의 조합이 Good!")]

FoodCell이라는 identifier를 가진 cell을 꺼내서 쓸 것이라는 뜻이다.

foodDataArray에 접근해서 아이템을 하나씩 꺼내서 할당하게 된다.

테이블뷰에 데이터들이 잘 표시되는 것을 볼 수 있다.

다음에 해야할 것

  • 네비게이션바 적용
  • 상세 페이지 구현
  • 데이터 추가하기 기능 구현
profile
iOS

0개의 댓글