From 651fdb54d3de1afd881ed841844884af70b2bca7 Mon Sep 17 00:00:00 2001 From: YuJeong Date: Mon, 14 Oct 2024 00:35:01 +0900 Subject: [PATCH] =?UTF-8?q?[feat]=20FeedDetail=20UI=20=EC=9E=91=EC=97=85?= =?UTF-8?q?=20(#48)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - ScrollView 내의 TableView의 높이를 받아와 scroll 동작 - TableView enableScroll 적용 - 레이아웃 갱신 --- PLUV/Feed/FeedDetailViewController.swift | 116 +++++++++++++++++++++++ 1 file changed, 116 insertions(+) diff --git a/PLUV/Feed/FeedDetailViewController.swift b/PLUV/Feed/FeedDetailViewController.swift index 69ee44c..0016062 100644 --- a/PLUV/Feed/FeedDetailViewController.swift +++ b/PLUV/Feed/FeedDetailViewController.swift @@ -6,11 +6,39 @@ // import UIKit +import SnapKit +import RxSwift +import RxCocoa class FeedDetailViewController: UIViewController { + private var viewModel = FeedViewModel() + + private let scrollView = UIScrollView() + private let contentView = UIView() + + private let feedDetailImageView = UIImageView() + + private let feedDetailTitleView = UIView() + private let feedDetailContentView = UIView() + private let playlistTitleImageView = UIImageView().then { + $0.image = UIImage(named: "menu_image") + } + private let playlistTitleLabel = UILabel() + private let songCountAndDateLabel = UILabel() + private let sharePersonNameLabel = UILabel() + + private let feedDetailTableView = UITableView().then { + $0.separatorStyle = .none + $0.register(FeedDetailTableViewCell.self, forCellReuseIdentifier: FeedDetailTableViewCell.identifier) + } + private var feedDetailTableViewHeightConstraint: NSLayoutConstraint! + + private let disposeBag = DisposeBag() + init(viewModel: FeedViewModel) { super.init(nibName: nil, bundle: nil) + self.viewModel = viewModel } required init?(coder: NSCoder) { @@ -22,11 +50,92 @@ class FeedDetailViewController: UIViewController { setUI() setNavigationBar() + setPlaylistData() } + + override func viewDidLayoutSubviews() { + super.viewDidLayoutSubviews() + setTableViewHeight() // 레이아웃이 갱신될 때마다 테이블 뷰 높이 갱신 } private func setUI() { self.view.backgroundColor = .white self.navigationItem.setHidesBackButton(true, animated: false) + + self.view.addSubview(scrollView) + scrollView.snp.makeConstraints { make in + make.top.bottom.leading.trailing.equalTo(view.safeAreaLayoutGuide) + } + + self.scrollView.addSubview(contentView) + contentView.snp.makeConstraints { make in + make.edges.equalTo(scrollView) // scrollView 안에서 contentView의 모든 가장자리를 맞춤 + make.width.equalTo(scrollView) // 가로 고정 + } + + self.contentView.addSubview(feedDetailImageView) + feedDetailImageView.snp.makeConstraints { make in + make.top.leading.trailing.equalTo(contentView) + make.height.equalTo(feedDetailImageView.snp.width) // 정사각형 비율 + } + + self.contentView.addSubview(feedDetailTitleView) + feedDetailTitleView.snp.makeConstraints { make in + make.top.equalTo(feedDetailImageView.snp.bottom) + make.leading.trailing.equalTo(contentView) + make.height.equalTo(132) + } + + self.feedDetailTitleView.addSubview(feedDetailContentView) + feedDetailContentView.snp.makeConstraints { make in + make.top.leading.trailing.bottom.equalToSuperview().inset(24) + } + + self.contentView.addSubview(feedDetailTableView) + feedDetailTableView.snp.makeConstraints { make in + make.top.equalTo(feedDetailTitleView.snp.bottom) + make.leading.trailing.equalTo(contentView) + // 높이 제약은 따로 설정하지 않고, 테이블 뷰의 contentSize에 맞춰 동적으로 설정 + } + + // 테이블 뷰 높이 제약 추가 + feedDetailTableViewHeightConstraint = feedDetailTableView.heightAnchor.constraint(equalToConstant: 0) + feedDetailTableViewHeightConstraint.isActive = true + + // ContentView의 마지막 요소와 ScrollView의 bottom을 맞추기 위한 제약 설정 + feedDetailTableView.snp.makeConstraints { make in + make.bottom.equalTo(contentView.snp.bottom) // 테이블 뷰의 아래쪽을 contentView의 아래쪽에 맞춤 + } + + feedDetailTableView.isScrollEnabled = false // 테이블 뷰 스크롤 비활성화 + } + + private func setTableViewHeight() { + feedDetailTableView.layoutIfNeeded() // 테이블 뷰 레이아웃 갱신 + let contentHeight = feedDetailTableView.contentSize.height // 테이블 뷰 전체 셀 높이 + feedDetailTableViewHeightConstraint.constant = contentHeight // 높이 제약 업데이트 + + // 이미지 높이 + 테이블 뷰 높이를 합산하여 스크롤뷰의 contentSize 설정 + let totalHeight = feedDetailImageView.frame.height + feedDetailTitleView.frame.height + contentHeight + scrollView.contentSize = CGSize(width: view.frame.width, height: totalHeight) + + // 레이아웃 재설정 + scrollView.layoutIfNeeded() + } + + private func setPlaylistData() { + guard let urlString = self.viewModel.selectFeedItem?.thumbNailURL else { return } + let thumbnailURL = URL(string: urlString) + feedDetailImageView.kf.setImage(with: thumbnailURL) + + /* + sourceToDestinationLabel.text = sourcePlatform.name + " > " + destinationPlatform.name + sourcePlatformLabel.text = sourcePlatform.name + playlistNameLabel.text = self.viewModel.playlistItem.name + self.viewModel.musicItemCount { count in + self.playlistSongCountLabel.text = "총 \(count)곡" + self.songCountLabel.text = "\(count)곡" + } + */ } private func setNavigationBar() { @@ -42,3 +151,10 @@ class FeedDetailViewController: UIViewController { self.navigationController?.popViewController(animated: true) } } + +extension FeedDetailViewController: UITableViewDelegate { + + func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat { + return 66 + } +}