카테고리 없음

MemoUpgrade part 1. 테이블 뷰(tableView) 만들기

Thor_yeom 2022. 8. 24. 22:29

네비게이션 바 적용

메모를 만들 때 테이블 뷰의 오토레이아웃을 0으로 맞춰준다.

( 네비게이션 바를 적용하면 그 범위를 제외하고 오토레이아웃이 맞춰진다.)

 

 

네비게이션 바를 쓴 이유? : 할 일 이라는 제목을 정하기 위해서 

 

 

bar Button Item 적용

바 버튼 아이템을 적용해서 edit 과 add( + ) 버튼을 만들어준다. 

 

Q. 일반  버튼을 써도 되지 않나요??  

A. 사용 가능하긴 하지만 되도록이면 bar Button Item을 사용하도록 하자. ( 자세한 이유는 모르겠다...ㅠ)

어트리뷰트의 시스템 아이템에서 edit 과 add를 설정

어트리뷰트에서 edit 과 add를 손쉽게 바꿔줄 수 있다. ( 애플에서 많이 쓰이는 것들을 미리 만들어 놓아 손쉽게 바꿀 수 있다 )

 

자 테이블 뷰를 설정 했으니 이제 Cell을 만들어 보자 ( 여러 가지 방법이 있겠지만 간단하게 어트리뷰트로 만들수 있는 방법이 있다.)

 

 

어트리 뷰트에 있는 프로타입 쎌의 숫자를 1로 바꿔주면 테이블 뷰 위에 셀이 하나 생긴다.

 

셀을 선택하고 어트리뷰트에 있는 스타일로 원하는 스타일로 바꿀 수 있다. ( 베이직으로 설정 )

basic으로 설정 시 Label(Title)이 하나 생김

 

자 이제 IBOutlet으로 연결해주자.

 

테이블 뷰를 연결해주고  테이블 뷰 같은경우 테이블뷰 데이터소스테이블 뷰 델리게이트 같이 활용된다. 

 

테이블뷰 데이터소스를 사용 할 때는 쉽게 말해 numberOfRowsInSection으로 셀의 행의 갯수를 지정하고 , 

cellForRowAt으로 셀의 구성요소를 설정한다. 

ex) numberOfRowsInSection  리턴 값이 3면 테이블 뷰에 3개만 나타나고, 리턴 값이 5이면 5개만 나타남

 

var memoArray의 변수를 지정해서 테이블 뷰에 올라갈 배열을 만들고,  배열의 숫자 만큼 행의 갯수를 정해주기 위해

numberOfRows에 count로 설정해준다. 

 

cell 파일을 만들어 주고 클래스의 이름을 입력해주고 title을 연결해준다.

 

 

 

 

 

그리고 빠뜨리지 말아야 할 것은 identifier를 꼭 입력해주는 것이다. ( 간혹 빠뜨리는 경우가 있으니 조심하자 ) 

identifier를 입력

다음 뷰 컨트롤러로 돌아와서 cellForRowAt을 마무리 짓는다.

 

myTableViewCell으로 타입 캐스팅 해줘서 변수 cell에 담게 되면, cell에 title을 연결한 mainLabel의 text를 불러 올수 있다. 

불러온 text에 배열의 인덱스를 넣게 되면 화면과 같이 테이블 뷰에 표시 된다. 

 

 

셀을 클릭하게 되면 회색으로 표시가 되는데 표시는 없애려면 cell.selectionStyle을 설정해준다.

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "toCell", for: indexPath) as! MyTableViewCell
        cell.mainLabel.text = memoArray[indexPath.row]
        cell.selectionStyle = .none
        return cell
    }