iOS 3차 과제 #7
iOS 3차 과제 #7
Conversation
There was a problem hiding this comment.
scrollView안에 tableView와 collectionView를 넣어둔 상태인데 이렇게 했을때 스크롤 뷰의 높이를 어떻게 줘야하는지 모르겠습니다 🥲
ScrollView는 ContentLayoutGuide를 통해 자신의 content size(내부에 들어갈 cell 혹은 layout에 따라 정해진 크기)를 정확히 알아야 그에 따라 늘어나기 때문에,
세로 스크롤뷰의 경우 내부에 들어갈 것들의 높이와 위아래 constraints를 미리 다 설정해주어야 합니다.
(CollectionView , TableView 모두 ScrollView를 상속받기 때문에 똑같이 적용되는 이야기)
하지만 데이터에 따라 계속해서 개수도 변하고 cell 높이도 변할 수 있는 tableView height을 고려하기 위해선
조금 다른 방법을 써야할 것 같죠 ??
- 스토리보드의 tableView height을 임의의 숫자로 고정
- 방금 설정한 height constant를 IBOutlet으로 설정 (height 파란 막대기를 선택한 다음 보통 IBOutlet연결하듯 끌고와서 변수로 지정해줍시다)
@IBOutlet weak var tableViewHeight: NSLayoutConstraint!- tableViewHeight을 contentSize의 height으로 업데이트 해줍니다
self.tableViewHeight.constant = self.tableView.contentSize.height3번을 조금 풀어서 설명하자면, tableView 내에 들어가야할 cell의 개수와 각 cell의 높이가 정해지고나면, tableView의 contentSize가 정해지게 되는데요, 이 이후에 아까 변수로 만들어준 tableViewHeight의 constant를 업데이트 시켜준다고 생각하면 되겠죠 ? 그럼 정해진 tableViewHeight가 적용되어 ScrollView 전체 높이가 그만큼 늘어나게 됩니다 !
여러 방법 중 한 해결방법이라고 생각되어요 .. 이게 Best인지 잘 모르겠지만 간단하게 이렇게 해결할 수 있슴다 ㅎㅎ
| let cellHeight = cellWidth * (72/58) | ||
|
|
||
| return CGSize(width: cellWidth, height: cellHeight) | ||
| } |
| func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat { | ||
| return 488 | ||
| } | ||
| } |
There was a problem hiding this comment.
심화 과제 중에 피드 영역의 셀 크기를 동적으로 조절해보는 것이 있었는데여
무슨 말이냐면 Feed의 TableView Cell 의 높이를 특정 숫자로 지정하지 않고
올리는 사진의 비율에 따라, 그리고 글 내용의 높이에 따라 전체 Cell height이 동적으로 변하도록 하면 됩니다
그럼 어떻게 하느냐
- 특정 숫자가 아닌 UITableView.automaticDimension 을 리턴해준다
return UITableView.automaticDimension- 동적으로 Height을 다르게 하고 싶은 object (ex. postImage 등) 은 높이를 지정해주지 않는다.
- Cell의 xib 파일에서 맨 위부터 맨 밑까지 오브젝트들의 constant(top & bottom)가 잘 잡혀있는지 다시 확인 !
이게 진짜 중요합니다! 다른 부분에서도 말했지만 세로 ScrollView (TableView도 스크롤뷰 상속받은 것이라 똑같음) 를 구현할 땐 항상 '스크롤 될 전체 height'을 알 수 있도록 위 아래 constraints를 모두 잡아주어야 해요
다시 정리하자면
- 원래는 488 이라는 특정 숫자로 cell 높이를 지정해주었기 때문에 테이블 뷰 전체 스크롤에 문제가 없었음
- 동적 높이를 Return 해주게 되면, cell 마다 높이가 달라지기 때문에 각 cell의 height을 계산할 수 있게끔 만들어주어야 함
- 그러기 위해선 각 오브젝의 top, bottom, 그리고 동적으로 변하지 않아도 되는 오브젝트들의 height을 지정해준다
우선은 이렇게 해도 되는데 조금만 수정하면 될 것 같아서 올려보아요 😘😘😘
There was a problem hiding this comment.
@Jihyun247 와 헐. . 바로 이해해버린,, 너무나 친절한 설명 눈물나요 .. 쇽샥해서 수정해두겠습니다 💪🏻
…leview Feature/#3 prac tableview
| feedImgView.image = UIImage(named: feedData.feedImageName) | ||
| userNameLabel.text = feedData.userName | ||
| commentUserNameLabel.text = feedData.userName | ||
| likeCountLabel.text = "좋아요 \(String(feedData.likeCount))개" |
There was a problem hiding this comment.
요부분 String 안쓰고 (feedData.likeCount) 만 써줘도 될 것 같아요!
| func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat { | ||
| return 488 | ||
| } | ||
| } |
| return cell | ||
| default: | ||
| return UITableViewCell() | ||
| } |
|
|
||
| class StoryCollectionViewCell: UICollectionViewCell { | ||
| // MARK: - @IBOutlet | ||
| static let identifier = "StoryCollectionViewCell" |
There was a problem hiding this comment.
요건 // MARK: - Properties 로 구분해주면 좋을 것 같아요!
| guard let cell = tableView.dequeueReusableCell(withIdentifier: FeedTableViewCell.identifier, for: indexPath) as? FeedTableViewCell else { return UITableViewCell() } | ||
| cell.setData(FeedDataModel.sampleData[indexPath.row]) | ||
| cell.index = indexPath.row | ||
| cell.delegate = self |
There was a problem hiding this comment.
좋아요 버튼 클릭시에 delegate pattern사용해서 이벤트를 발생시켜주었는데, 정작 좋아요 눌렀을 때 채워진 하트 이미지로 변경하는건 tableViewCell 내부에서 진행해주었습니다,, 이렇게 하는게 맞는걸까요 ? 😇
셀 안에서 버튼 이미지를 바꿔줄 수는 있지만, 고렇게 한다면 셀이 재사용되기 때문에 0번째 index의 버튼 이미지를 바꿔주었는데 재사용된 ex)5 번 셀의 버튼 이미지도 바뀌는 문제가 생길 수 있을 것 같네요!
셀 재사용 문제를 방지하기 위해서는 delegate 프로토콜 내의 함수 파라미터로 선택된 cell의 index를 전달받아서 VC의 cellForRowAt에서 해당 버튼의 이미지만 바뀌도록 구현하면 될 것 같습니다!
| private func registerDelegate(){ | ||
| feedTableView.delegate = self | ||
| feedTableView.dataSource = self | ||
| } |
🌱 작업한 내용
기본 과제도전 과제심화 과제🌱 PR Point
📸 스크린샷
📮 관련 이슈