UISheetPresentation을 통해 수정, 삭제, 닫기 버튼 기능 구현

 

 

UISheetPresentationController를 사용하면 하단에서 올라오는 시트 스타일의 모달을 손쉽게 구현할 수 있습니다. UISheetPresentationController는 iOS 15 이상에서 사용할 수 있는 API로, detents를 통해 시트의 높이를 조절하고, 사용자가 원하는 높이에서 스크롤 가능하게 만드는 등 다양한 설정을 제공합니다.

 

 

1. ProfileFeedEditViewController 만들기

먼저, "수정," "삭제," "닫기" 버튼이 포함된 ProfileFeedEditViewController를 만듭니다.

import UIKit

class ProfileFeedEditViewController: UIViewController {
    
    // MARK: - Variables
    var feedDataManager = FeedDataManager()
    var userFeed: FeedItem?
    
    weak var delegate: ProfileFeedEditDelegate?
    
    // MARK: - UI Components
    let editButton: UIButton = {
        let button = UIButton(type: .system)
        button.setTitle("수정", for: .normal)
        button.setTitleColor(.systemBlue, for: .normal)
        button.titleLabel?.font = UIFont.systemFont(ofSize: 20, weight: .semibold)
        return button
    }()
    
    let deletButton: UIButton = {
        let button = UIButton(type: .system)
        button.setTitle("삭제", for: .normal)
        button.setTitleColor(.systemRed, for: .normal)
        button.titleLabel?.font = UIFont.systemFont(ofSize: 20, weight: .semibold)
        return button
    }()
    
    let closeButton: UIButton = {
        let button = UIButton(type: .system)
        button.setTitle("닫기", for: .normal)
        button.setTitleColor(.label, for: .normal)
        button.titleLabel?.font = UIFont.systemFont(ofSize: 20, weight: .semibold)
        return button
    }()
    
    lazy var buttonStackView: UIStackView = {
        let stackView = UIStackView()
        stackView.backgroundColor = .secondarySystemBackground
        stackView.layer.cornerRadius = 16
        stackView.clipsToBounds = true
        stackView.axis = .vertical
        stackView.spacing = 16
        stackView.alignment = .fill
        stackView.distribution = .fill
        return stackView
    }()
    
    
    // MARK: - Initializations
    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .systemBackground
        configureConstraints()
        
        didTappedButtons()
    }
    
    // MARK - Layouts
    private func configureConstraints() {
        view.addSubview(buttonStackView)
        buttonStackView.addArrangedSubview(editButton)
        buttonStackView.addArrangedSubview(deletButton)
        buttonStackView.addArrangedSubview(closeButton)
        
        buttonStackView.translatesAutoresizingMaskIntoConstraints = false
        editButton.translatesAutoresizingMaskIntoConstraints = false
        deletButton.translatesAutoresizingMaskIntoConstraints = false
        closeButton.translatesAutoresizingMaskIntoConstraints = false
        
        NSLayoutConstraint.activate([
            
            buttonStackView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            buttonStackView.centerYAnchor.constraint(equalTo: view.centerYAnchor),
            buttonStackView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20),
            buttonStackView.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -20),
        ])
    }
}

 

 

2. ProfileFeedEditViewController를 UISheetPresentationController 스타일로 띄우기

UserFeedViewController에 오른쪽 네비게이션바 버튼을 생성하고, 액션을 추가합나다.

    func setupNavigationBar() {
        let setupButton = UIButton(type: .system)
        setupButton.setImage(UIImage(systemName: "list.bullet"), for: .normal)
        setupButton.tintColor = .label
        setupButton.addTarget(self, action: #selector(didTappedSetupButton), for: .touchUpInside)
        
        navigationItem.rightBarButtonItem = UIBarButtonItem(customView: setupButton)
    }
    
       @objc func didTappedSetupButton() {
        print("didTappedSetupButton() - called")
        
        let profileFeedEditVC = ProfileFeedEditViewController()
        profileFeedEditVC.userFeed = userFeed
        
        if let sheet = profileFeedEditVC.sheetPresentationController {
            // sheet.detents = [.medium()]
            
            // sheet 올라오는 높이 조절
            sheet.detents = [
                .custom { context in
                    return 200
                }
            ]
            sheet.prefersGrabberVisible = true
            sheet.prefersScrollingExpandsWhenScrolledToEdge = false
        }
        
        profileFeedEditVC.modalPresentationStyle = .pageSheet
        profileFeedEditVC.delegate = self
        present(profileFeedEditVC, animated: true)
    }

 

---