[iOS] TIL_230731

XIB로 테이블뷰 셀 만들기

테이블뷰 컨트롤러에서 만들던 셀을 xib로 따로 꺼내서 만듦

원래 테이블뷰 코드랑 똑같이 짰지만 runtime 오류남.

guard let 구문으로 바꿔줘 봄

guard let 구문에 의해 에러 없이 빈 셀들이 들어가긴 했지만 제대로 원하는 셀이 안 가져와짐.

테이블뷰 셀 등록하기

XIB로 테이블뷰셀을 생성할 경우, 테이블뷰에 사용할 셀을 등록해주는 과정이 필요!

• bundle 이란? 지금은 내 프로젝트 위치정도 라고만 알아두기.(nil로 하면 내 프로젝트 위치)

텍스트 양 만큼 높이 넓히기 (Dynmic Height)

Dynamic Height을 위해 설정해야 할 것

1. automaticDimension

1. numberOfLines

1. Auto Layout(여백)

Dynamic height을 주려면 셀 안에 레이아웃을 잘 잡아야함.

너비나 높이가 고정 되서 유동적으로 늘어나지 않는 경우 발생 할 수도 있음 . (여백 위주로 레이아웃 잡아야함)

Swipe - 셀에서 구현할 수 있는 기능

system 제공 Cell 기능

1. 편집 ( 줄 변경 등)
2. 스와이프 (삭제 등)

custom 기능

System Swipe

셀 스와이프 삭제 기능 넣기

1. canEditRowAt 구현

스와이프 삭제 버튼은 생겼지만 삭제는 안 됨. 기능 넣어줘야함

1. 삭제 후 기능 넣어주기

해당 셀의 인덱스가 삭제 원하는 데이터 인덱스와 같기 때문에 셀 indexPath.row 이용해서 remove 해 줌

→ 오류남 데이터는 사라졌는데 뷰가 그 인덱스에 접근하려해서

오류 과정

list 길이 3, tableview 길이 3

remove 1 (1번인덱스 데이터 지움)

list 길이 2, tableview 길이 3 (테이블뷰가 없어진 인덱스 접근하려고해서 오류남)

해결 방법 : 데이터 삭제 후 테이블 뷰를 갱신해야 함. tableview.reloadData()

Custom Swipe

• 카카오톡 셀의 스와이프 기능들(고정 기능, 방나가기 , ..)
• 직접 커스텀해서 스와이프 기능구현 가능 (다양한 버튼 모양 등 )
• leadingSwipeActionsConfigurationForRowAt (왼쪽에서 나오는 버튼들)
• trailingSwipeActionsConfigurationForRowAt (오른쪽에서 나오는 버튼들)

위의 함수 안에 UISwipeActionsConfiguration 만들어서 구현

• 배열인 이유 : 스와이프해서 나오는 버튼이 여러개 일 수 있음.

화면 전환

같은 버튼으로 다른 화면들로 전환해야 할 일이 많아서 코드로 구현을 많이 함.

더하기 버튼 누르면 화면 전환하기

네비게이션바에 bar button item 추가

add 옵션 선택하면 자동으로 더하기 버튼 됨

1.스토리 보드 파일 찾기

let vc = DetailViewController()

2.스토리보드 파일 내 뷰컨트롤러 찾기

let sb = UIStoryboard(name: "Main", bundle: nil)

스토리보드 id 지정하는 방법 (편의상 클래스 이름과 같게)

 이런식으로 가져오면 스토리보드에 만들어 놓은 그런거 하나도 없이 가져오는 것이 됨.

 

 

3. 화면 전환 방식 설정 (효과 주기 위한 옵션 사항. 없어도 화면 전환 됨)

vc.modalTransitionStyle = .crossDissolve //모달 애니메이션 
vc.modalPresentationStyle = .fullScreen //모달 방식

fullscreen으로 하면 돌아갈 길이 없어서 돌아가는 버튼 만들어 줘야 함 .

 

4. 화면 띄우기

present(vc, animated: true)

 

 

modalTransitionStyle

.coverVertical

.crossdisolve

.fliphorizontal

.partialCurl

nav.modalTransitionStyle = .partialCurl //모달 애니메이션 
nav.modalPresentationStyle = .fullScreen //모달 방식

⚠️ .fullScreen이랑 같이 써야함. 안 그러면 오류남.

dismiss 할때는 animated false로 해줘야 함.

dismiss(animated: false) 

true로 하면 렉 먹음 이상함.

네비게이션 push

navigationController?.pushViewController(vc, animated: true) 

 

override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {         
	let sb = UIStoryboard(name: "Main", bundle: nil)         
	let vc = sb.instantiateViewController(identifier: "DetailViewController") as! DetailViewController         
	navigationController?.pushViewController(vc, animated: true)     
}

• 인터페이스 빌더에 네비게이션 컨트롤러가 임베드 되어 있어야만 Push가 동작! 아래처럼 initial 되면 임베드 안된 셈

네비게이션을 푸시 하고 싶을 때

네비게이션 컨트롤러가 있는 형태(제목바)로 Present 하고 싶은 경우

UINavigationController로 만들어서 present

이 정도만 알면 화면 전환 코드는 다 알고 있는 셈 .

 

Bar Button Item

아래와 같은 LeftBarButton, Title과 dissmis 액션 구현

• style은 99퍼센트 거의 plain → 자유롭게 커스텀 가능
• target은 99퍼센트 거의 self
• #selector은 ObjectC의 잔재 special literal라고 함. 옵젝시거 사용할 수 있게 함.
• action에는 IBaction처럼 코드로 action 만들어서 넣어주기

화면 제거 함수

present → dismiss로 제거

dismiss(animated: true) 

push → pop로 제거

navigationController?.popViewController(animated: true) 

• popToViewController(): 다양한 단계의 이전 컨트롤러로 돌아갈 수 있음
• popViewController(): 한단계만 돌아감

Toolbar

• 메모 하단 바 or 키보드의 bar가 툴바
• 왼,아래,오 마진 0 주면 높이있어서 레이아웃 문제는 안 생김
• but 다른 뷰 요소가 얘를 기준으로 레이아웃 잡으면 확 올라가버릴 수 있음

• 

• 툴바에 bar button item 넣어서 버튼 구현하면 됨.
• 아래 두개는 버튼 사이에 공간 넓히는 용

Extension

어느 뷰컨트롤러에서든 가져다가 쓸 수 있음. 나중에 모든 앱 색깔 한번에 바꾸기 편할 것

Tips

뷰컨 백그라운드 색상 넣었을 때 테이블뷰가 화이트라 거슬림 .

아래처럼 투명으로 해놓으면 좋음

tableView.backgroundColor = .clear 

셀 색깔 투명하게하기

cell.backgroundColor = .clear 

UIKit 기본 특성 처음에 다 변경하는 방법

일괄 적용 됨 .

CollectionView

• 수평 스크롤이 된다.
• 셀 사이즈를 조정 할 수 있다.(테이블뷰셀은 너비 고정)
• 기본적으로 수직 스크롤 → 셀 너비가 기기 너비 반절보다 크면 줄별로 하나밖에 못 들어가서 셀 레이아웃 잡는게 가운데로 옴

CollectionView 구현

기본 생성되어있는 reuseIdentifier 삭제

numberOfItemsInSection : 아이템 개수

cellForItemAt : 셀 설정

register : 셀 등록

레이아웃 조정하기

UICollectionViewFlowLayout 이용해서 컬렉션뷰 구현

sectionInset

minimumLineSpacing

minimumInteritemSpacing

Apple 공식 문서 그림

왼쪽에서 오른쪽으로 셀이 만들어짐

지정 해놓은 section inset은 무조건 확보 한 뒤에 interitemspacing 간격을 뺀 후에 배치 됨

아이폰 디바이스 너비 가져오는 코드

let width = UIScreen.main.bounds.width 

• main은 iOS 16까지만 쓰임.

func setCollectionViewLayout() {         let layout = UICollectionViewFlowLayout()         let spacing: CGFloat = 20         let width = UIScreen.main.bounds.width - (spacing * 4)          layout.itemSize = CGSize(width: width / 3, height: width / 3)         layout.sectionInset = UIEdgeInsets(top: spacing, left: spacing, bottom: spacing, right: spacing)         layout.minimumLineSpacing = spacing         layout.minimumInteritemSpacing = spacing         collectionView.collectionViewLayout = layout              } 

레이아웃 잘 안되면 Estimate Size : None으로 설정

Tip

option누른채로 누르면 아래에 창 열림

데이터 전달 과정

A(VC)→B(VC)

1. B에 변수(공간) 마련
2. A에서 값 전달
3. B의 뷰에 표현

• B에 변수 추가

• A VC에서 변수 접근 가능하게 됨.

• 문자열 데이터 전달하면서 B VC생성

• B의 라벨에 받은 값 넣기

contentsLabel outlet 이 생기기 전에 값을 넣어서 오류 생긴 것. → 스토리 보드에서는 값 전달할때 outlet을 사용할 수 없음. outlet이 늦게 생김 .

프로퍼티 통해서 전달해야함.