[Swift 4] Fakebook 만들기 - 5. NavigationBar, Tap Gesture, Dismiss Navigation Bar, Cell Animation

#Add TapGesture #Dismiss NavigationBar #UIView Animation #ZoomIn #Cell Animation

프로젝트 코드 : https://github.com/LeeGwangYong/iOS_swift/tree/master/FaceBook

참고 사이트 : https://www.youtube.com/watch?v=NJxb7EKXF3U&list=PL0dzCUj1L5JHDWIO3x4wePhD8G4d1Fa6N

1. ViewController.swift 추가

ㄱ. CollectionView Cell 에 있는 ImageView를 그대로 ViewController에서 사용가능한 subView로 복제

if let startingFrame = feedImageView.superview?.convert(feedImageView.frame, to: nil)
{
    subView.image = feedImageView.image
    subView.contentMode = feedImageView.contentMode
    subView.clipsToBounds = true
    subView.frame = startingFrame
    view.addSubview(subView)
}

ㄴ. 검정배경 추가

blackView.backgroundColor = UIColor.black
blackView.frame = self.view.frame
blackView.alpha = 0
view.addSubview(blackView)

ㄷ. subView에 화면의 중앙으로 이동하는 Animation

UIView.animate(withDuration: 0.75, animations: {()->Void in
    let height = self.subView.frame.height
    let yPos = self.view.frame.height / 2 - height / 2
    self.subView.frame = CGRect(x: 0, y: yPos,
                                width: self.view.frame.width,
                                height: height)
    self.navigationController?.navigationBar.alpha = 0
    self.blackView.alpha = 1
})

ㄹ. NavigationBar 숨기기

self.navigationController?.navigationBar.alpha = 0

전체코드

    let blackView = UIView()
    let subView = UIImageView()
    var feedImageView: UIImageView?
    
    @objc func animateToCenter(feedImageView: UIImageView)
    {
        self.feedImageView = feedImageView
        
        if let startingFrame = feedImageView.superview?.convert(feedImageView.frame, to: nil)
        {
            feedImageView.alpha = 0
            blackView.backgroundColor = UIColor.black
            blackView.frame = self.view.frame
            blackView.alpha = 0
            view.addSubview(blackView)
            
            subView.image = feedImageView.image
            subView.contentMode = feedImageView.contentMode
            subView.clipsToBounds = true
            subView.frame = startingFrame
            view.addSubview(subView)
            
            UIView.animate(withDuration: 0.75, animations: {()->Void in
                let height = self.subView.frame.height
                let yPos = self.view.frame.height / 2 - height / 2
                self.subView.frame = CGRect(x: 0, y: yPos,
                                         width: self.view.frame.width,
                                         height: height)
                self.navigationController?.navigationBar.alpha = 0
                self.blackView.alpha = 1
            })
        }
    }

ㅁ. CollectionView DataSource 추가

    override func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return postList.count
    }
    
    override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell =  collectionView.dequeueReusableCell(withReuseIdentifier: "FeedCollectionViewCell", for: indexPath) as! FeedCollectionViewCell
        cell.post = postList[indexPath.row]
        cell.feedController = self // [2. CustomCollectionViewCell.swift 수정] 과정 먼저 수행
        return cell
    }

2. CustomCollectionViewCell.swift 수정

var feedController: FeedController?
 
func setupCell(){
    self.contentView.translatesAutoresizingMaskIntoConstraints = false
    widthConstraint.constant = UIScreen.main.bounds.size.width
    self.backgroundColor = UIColor.white
    statusTextView.font = UIFont.systemFont(ofSize: 14)
    statusTextView.isScrollEnabled = false
    feedImageView.contentMode = .scaleAspectFill
    feedImageView.layer.masksToBounds = true
    feedImageView.isUserInteractionEnabled = true
    feedImageView.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(FeedCollectionViewCell.zoomIn)))
}
 
@objc func zoomIn()
{
    feedController?.animateToCenter(feedImageView: feedImageView)
}