[UIKit]테이블뷰(TableView) 만들기

테이블뷰를 만들어보아오

 

새로운 파일 추가!!

Cocoa Touch Class -> Next ->

subclass of : UITableViewCell 입력, Also create XIB file 체크!!!

 

체크하고 만들면 두개 파일이 세투세투로 한번에 생성!!

 

xib 파일을 클릭하여 셀 하나를 아름답게 생성

 

이제 tableview가 있는 view controller로 가서 tableview를 사용할 수 있게 한다

UITableViewDelegate, UITableViewDataSource 추가

 

Type 'ViewControllerOrderCategory' does not conform to protocol 'UITableViewDataSource'

Do you want to add protocol stubs?

이러한 오류가 뜨면 옆에 Fix를 눌러준다 

그러면 이러한 함수들이 자동으로 생성될 것이다

이제 준비는 끝났다!! 셀에 데이터를 넣어주자!!

 

하나의 셀을 만들어놨던 곳으로 다시 이동!!

그리고 이제 이미지와 라벨에 접근할 수 있게 아울렛을 만들어준다

요롷게 다 설정해주면 된다 요로코롬~요로코롬~

awakeFromNib 안에 추가한 코드는 이미지뷰를 원으로 설정한 것이다!@!@

 

 

다시 테이블뷰가 있는 뷰컨트롤러로 돌아와서 이제 방금 만든 셀 파일과 연결시킨다

테이블뷰를 오른쪽마우스로 드래그앤드롭하던가 컨트롤누르고 드래그앤드롭하면 아울렛을 생성할 수 있다

viewDidLoad() 에 작성한다

let tableViewCellNibCategory = UINib(nibName: "TableViewCellOrderCategory", bundle: nil)

만들어 높은 셀 파일을 불러오는 것! nibName은 nib파일(xib)의 이름을 적어주면 된다!

 

self.tableViewCategory.register(tableViewCellNibCategory, forCellReuseIdentifier: "TableViewCellOrderCategory")

불러온 파일이랑 나의 테이블뷰와 연결해주는 것!!

 

self.tableViewCategory.delegate = self
self.tableViewCategory.dataSource = self

 델리게이트와 데이터소스를 나의 테이블뷰와 연결시켜준다!! 이거 연결안하면 안보여지고 작동안된다 ㅎㅎ

이제 viewDIdLoad에서는 끝!

 

 

데이터를 셀과 연결시켜주는 작업!

일단 이런식의 더미데이터를 작성

이제 datasource로 가서 작성하면된다

완성코드부터보자면 이렇게다!

 

 

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

테이블뷰의 개수를 알려주는 함수 (Fix눌렀을 때 기본적으로 생성된 함수)

 

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        //이것을 작성함으로 셀에 만든 이비지뷰와 라벨에 접근가능하다
	let cell = tableViewCategory.dequeueReusableCell(withIdentifier: "TableViewCellOrderCategory", for: indexPath) as! TableViewCellOrderCategory
        
        //셀 내용넣기
	cell.imageViewcategoryMenu.image = UIImage(named: arrayCategoryImage[indexPath.row])
	cell.labelCategoryMenuTitle.text = arrayCategoryTitle[indexPath.row]
	cell.labelCategoryMenuEngTitle.text = arrayCategoryEngTitle[indexPath.row]
	cell.labelCategoryMenuPrice.text = "\(numberFormatter(number: arrayCategoryPrice[indexPath.row]))원"
        
	cell.selectionStyle = .none


	return cell
}

이 함수도 Fix눌렀을 때 기본적으로 생성되는 함수로 각 셀에 대한 설정을 하는 함수!!

(참고 numberFormatter 함수는 세자리수에 콤마를 찍어주고 Int타입을 String타입으로 반환해주는 함수)

마지막에 selectionStyle=.none 클릭했을 때 회색으로 변하는 스타일을 없애주었다.

 

 

self.tableViewCategory.rowHeight = 110

이거는 viewDidLoad에 작성하며 테이블셀 하나의 높이를 지정해주는 것이다.

 

마지막으로 셀 라인을 없애고 싶으면 

테이블뷰를 클릭하고 인스펙터에서 Separator의 옵션을 None으로 변경해주면 없어진다!!!

 

 

 

완성!!!

 

 

 

 

 

[참고자료]

https://youtu.be/Z_aJWjarRpg

 

 

 

다음에는 이거!!

https://nlestory.tistory.com/74

[iOS/Swift] 테이블뷰(TableView)안에 컬렉션뷰(CollectionVeiw)