부족한 점이 있다면 댓글 부탁드립니다.
Dynamic TableView : 안의 내용물에 따른 크기가 정해지고 그것에 대한 오토레이아웃도 잘 설정되게 한다.
만드는 방법은 많지만 이번에는 .xib파일을 만들어서 구성해 볼 예정이다.
코딩을 하면서 느끼는 거지만 생각보다 custom으로 무엇인가를 처리 할 일이 많다.
이전의 셀프사이즈 여기서 나온 개념이 활용된다.
constraint
Top = T
Leading = L
Trailing = R
bottom = B
width = W
height = H
라고 이하 생략하겠습니다.
tableView 설정
T,L,R,B 를 전부 0으로 주고 ViewController에 추가한다.
bottom의 Constraint가 Safe.Area에 걸려있어서 그런데 이것을
-
FirstItem,relation,SecondItem을 수정해주면
-
여백없이 TableView가 설정된다.
.xib파일, .swift 생성
프로젝트 네비게이션에서 프로젝트에 우클릭 or
commend+ n 을눌러서 newFile을 눌러 생성을합니다.
1. .xib 생성 ( DynamicTableViewCell.xib )
2. .swift 생성 (DynamicTableViewCell.swift)
이름을 동일하게 짓는게 좋다.
.xib 설정 ( CustomCell )
우리는 TableView에 추가 할 셀을 설정 할 것이기 때문에~
- TableViewCell 추가 & 적당히 크기 설정 ( autolayout X )
ImageView
W,H = 40, T = 8, L =8
Label
- 2개를 수직( Vertical ) 스텍뷰
L = 8, t = 8, R = 10 ( Greater than Equal )
stackView설정
commend누른채 두개의 label을 클릭하고 제일 우측하단의 스택뷰 클릭!
- Axis : 방향
- Alignment : 정렬
- Distribution : 채우기
- Spacing : 객체 간 간격
- 각 요소에 대한 정보는
StackView 속성 정리 여기 가면 볼 수 있다.
결과
- velog 글자 색상은 font
Color를 조절하면 됩니다.
Label( 내용 )
Label을 ImageView와 동일한 선상에 위치를 시키고
-
우클릭 or
ctrl+드래그하면
-
leading을 눌러주면
동일한 위치에 Constraint가 걸리는 것을 확인 할 수 있다. -
동일한 위치가아니라면
Leading Alignment Constraint, constant 값을 확인하면 된다.
나머지는 아래와 같이 설정
W = 10, R = 10
Button 3개 ( StackView )
T = 10, L = 위와같은방법으로 Label(내용)과 같게 , B = 10
- 가로 스택뷰를 올려놓는다.
- 여기에 Button을 추가하고 stackView안에 추가한다.
- document Outline 에서 추가된 버튼을 드래그해서 넣는다.
- 스토리보드 상에서 드래그해서 넣는다.
button : Width,Height
W :20 ,H 20
- button Image ->
hand.thumb.fill,heart.fill,arrowarrowshape.turn.up.right.fillarrowshape.turn.up.right.fill바꿔서 넣어주면된다.
- stackView에 spacing 은 5를주게되면
결과
스토리보드 상에서
기초적인 틀이 완성됐다.
이러면 왜 dynamicTableView야 ??
Label ( 내용 ) 에서 우리는 height를 설정하지않고 lines도 0 으로 설정 즉, 내용이 길어지게되면 자동적으로 셀의 크기가 커질 것이다.
내가 이해한 것은 AutoLayout 수평 수직의 모든 객체의 위치와 크기를 설정한다. 크기를 설정 하지 않았더라도 수직,수평 의 모든 객체의 연결이 Constraint가 충돌되지않고 연결되어있다면 AutolayOut은 제대로 설정된것이라 할 수있다.
전부 걸어서 뷰의 수직방향의 처음과 끝을 Constraint로 연결시키는 느낌
mainStoryBoard에서 핸드폰기기로 autolayout을 잡을때는 주의하여야한다.
크기와 constraint를 임의로 설정 했을 때 다른기기에서는 그 오토레이아웃이 제대로 작동이 안 될 수 있다는 것이다. 무리하게 크기를 크게 잡거나 했을 때 주의해야된다.
하나의 기기가 총 길이가 300 인데 객체 1 2 3 수직방향 constraint값 + Height 값의 합이 300이상이 되게되면 greater than equal, priority 수정 등 작업을 해주거나 다시 설정해 주어야한다.
Code
DynamicTableView 설정
- .xib에서
Class와identifier설정
- 인스펙터 영역에서 3번째 class를 DynamicTableViewCell과 연결
identifier설정
인스펙터 영역에서identifier설정
identifier랑 .swift 이름과 일치시키는것이 좋다.
-
DynamicTableViewCell.swift에 IBOutlet을 설정
ImageView,Content(내용)
-
awakeFromNib() 설정
ViewController 설정
-
크기가 다른 문자열 배열을 생성
-
TableView에 Cell 등록
- 셀 리소스파일을 등록
- tableview에 셀 등록
- Dynamic을 위해 내용에 맞게 셀의 높이를 설정
- 예상 높이를 설정
아주중요
TableView의 dataSource와 Delegate를 등록해주어야한다.
Delegate, DataSource 설정
가독성을 위해 extension으로 datasource를 밑으로 옮겼다.
DataSource를 상속받게되면 numberOfRowInSection과
cellForRowAt을 설정하라고 오류가 나오는데 이것을 fix하면 자동으로 두개의 함수가 설정된다.
numberOfRowInSection: 하나의 섹션의 테이블 셀의 갯수 설정 (기본적으로 섹션은 1개로 잡는다. )cellForRowAt: 셀에 대한 indexPath와 데이터를 설정
DataSource 설정
- 섹션의 셀의 개수는 ContentArray의 개수이다.
- mytable뷰에 DynamicTableViewCell 타입으로 셀을 넣는다.
여기서 String(describing : DynamicTableViewCell.self) 는 "DynamicTableViewCell" 로 설정된다. - DynamicTableViewCell 의 content에 접근하여 contentArray의 해당 인덱스에 해당하는 값들을 넣는다.
결과
완성코드
참고 : 정대리유튜브
