[iOS : Toy Project] Apple Framework List (3) : Modal

➰ 이전 코드 내용

Apple Framework List(1)

Apple Framework List(2)

 

💡 Apple Framework List(3)에서 할 것은 Modal 구현!

- 각 아이템들을 눌렀을 때, 상태뷰가 모달로 띄워지는 것을 구현할 것이다.

 

 

1️⃣ Detail View를 위한, Storyboard 파일 만들기

Detail.storyboard

 

 

2️⃣ Detail View를 위한 ViewController 만들기

- FrameworkDetailViewController

 

 

 

3️⃣ Detail View 컴포넌트와 AutoLayout 설정

 

 

4️⃣ Modal 띄우기

//  FrameworkListViewController.swift

// item이 선택되었을 때 효과 넣기
extension FrameworkListViewController: UICollectionViewDelegate{
    
    // item이 선택되었을 때 호출되는 method
    func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
//        let framework = list[indexPath.item] // 몇번째 item인지?
        
        // FrameworkDetailViewController 띄우기
        let storyboard = UIStoryboard(name: "Detail", bundle: nil)
        let vc = storyboard.instantiateViewController(withIdentifier: "FrameworkListViewController") as! FrameworkDetailViewController  // FrameworkDetailViewController로 강제 캐스팅
        present(vc, animated: true) // present 메소드로 띄워주기
    }
}

 

 

5️⃣ Detail View의 데이터 업데이트

//  FrameworkDetailViewController.swift

import UIKit

class FrameworkDetailViewController: UIViewController {
    @IBOutlet weak var imageView: UIImageView!
    @IBOutlet weak var titleLabel: UILabel!
    @IBOutlet weak var descriptionLabel: UILabel!
    
    var framework: AppleFramework = AppleFramework(name: "Unknown", imageName: "", urlString: "", description: "")

    override func viewDidLoad() {
        super.viewDidLoad()
        updateUI()
        
    }
    
    func updateUI() {
        imageView.image = UIImage(named: framework.imageName)
        titleLabel.text = framework.name
        descriptionLabel.text = framework.description
    }
    
}

→ 아직 Unknown으로 뜸

framework의 초깃값이 아직 업데이트가 안됐기 때문,, FrameworkListViewController.swift에서 아이템을 클릭했을 때 업데이트가 되도록 해야함

 

// item이 선택되었을 때 효과 넣기
extension FrameworkListViewController: UICollectionViewDelegate{
    
    // item이 선택되었을 때 호출되는 method
    func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
        let framework = list[indexPath.item] // 몇번째 item인지?
        
        // FrameworkDetailViewController 띄우기
        let storyboard = UIStoryboard(name: "Detail", bundle: nil)
        let vc = storyboard.instantiateViewController(withIdentifier: "FrameworkDetailViewController") as! FrameworkDetailViewController  // FrameworkDetailViewController로 강제 캐스팅
        vc.framework = framework    // FrameworkDetailView가 떴을 때, 이미 업데이트가 완료된 상태로 뜨게 됨.
//        vc.modalPresentationStyle = .fullScreen // fullScreen으로 모달이 뜨게 -> 제스쳐로 모달을 닫을 수 없음
        present(vc, animated: true) // present 메소드로 띄워주기
    }
}

vc.framework = framework 

 

 

 

 

 

6️⃣ Learn More 버튼을 눌렀을 때, Safari로!

//  FrameworkDetailViewController.swift

import UIKit
import SafariServices   // 사파리를 띄우기 위한 Framework.

class FrameworkDetailViewController: UIViewController {
    @IBOutlet weak var imageView: UIImageView!
    @IBOutlet weak var titleLabel: UILabel!
    @IBOutlet weak var descriptionLabel: UILabel!
    
    var framework: AppleFramework = AppleFramework(name: "Unknown", imageName: "", urlString: "", description: "")

    override func viewDidLoad() {
        super.viewDidLoad()
        updateUI()
        
    }
    
    func updateUI() {
        imageView.image = UIImage(named: framework.imageName)
        titleLabel.text = framework.name
        descriptionLabel.text = framework.description
    }
    
    // Learn More 버튼을 클릭했을 때, Action target
    @IBAction func learnMoreTapped(_ sender: Any) {
    
    // url 객체 만들기
        guard let url = URL(string: framework.urlString) else {
            return
        }
    
    // Safari View Controller
    let safari = SFSafariViewController(url: url)
    present(safari, animated: true)
        
    }

}

 

 

🚀 구현 완료

 

 

 

---

📌 정리,

1️⃣ 새로운 Storyboard 만들어 띄우기

storyboard.instantiateViewController(withIdentifier: "FrameworkListViewController") as! FrameworkDetailViewController  
present(vc, animated: true)

→ StoryboardIdentifier을 이용!

 

2️⃣ Safari 띄우기

SafariServices Framework 사용

 

---

Reference

• 패스트 캠퍼스