party rock app 스터디1

제작할 앱 예시화면

controller 안에 MainVC와 VideoVC가 있으며 각각 테이블뷰와 cell detail view에 대한
내용입니다.

먼저 Model은 현재 사용할 데이터 포맷을 정의해준 파일입니다

class PartyRock {
    private var _imageURL: String!
    private var _videoURL: String!
    private var _videoTitle: String!
    
    var imageURL: String {
        return _imageURL
    }
    
    var videoURL: String {
        return _videoURL
    }
    
    var videoTitle: String {
        return _videoTitle
    }
    
    init(imageURL: String, videoURL: String, videoTitle: String) {
        
        _imageURL = imageURL
        _videoURL = videoURL
        _videoTitle = videoTitle
    }
}
 

되도록 데이터 포맷은 private으로 설정하며 각각 getter와 setter 형식의 데이터를 만들며
내부에서는 언더바변수를 이용하도록 하고 외부에서 변수를 받아 초기화 시킵니다.

 
import UIKit
 
//테이블을 쓸경우 UITableViewDelegate와 UITableViewDataSource를 상속받습니다.
 
class MainVC: UIViewController, UITableViewDelegate, UITableViewDataSource {
 
    @IBOutlet weak var tableView: UITableView!
 
    //조금 전 선언한 데이터 포맷을 배열의 형태로 가져옵니다.
    var partyRocks = [PartyRock]()
    
    override func viewDidLoad() {
        super.viewDidLoad()
 
 
        //p1~p5까지의 데이터 초기화
        let p1 = PartyRock(imageURL: "http://www.wavefm.com.au/images/stories/2015/04/redfoo.jpg", videoURL: "<iframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/ev4bY1SkZLg\" frameborder=\"0\" allowfullscreen></iframe>", videoTitle: "Lights Out")
        
        let p2 = PartyRock(imageURL: "http://www.croshalgroup.com/wp-content/uploads/2015/05/Redfoo-Website.jpg", videoURL: "<iframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/1w9DiGlZksU\" frameborder=\"0\" allowfullscreen></iframe>", videoTitle: "Let's Get Ridiculous")
        let p3 = PartyRock(imageURL: "https://i.ytimg.com/vi/2wUxw6GH3IM/hqdefault.jpg", videoURL: "<iframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/vg_nvEGryA4\" frameborder=\"0\" allowfullscreen></iframe>", videoTitle: "Juicy Wiggle Lesson")
        let p4 = PartyRock(imageURL: "http://www.billboard.com/files/styles/article_main_image/public/media/lmfao-party-rock-anthem-2011-billboard-650.jpg", videoURL: "<iframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/gZIqW92GaTQ\" frameborder=\"0\" allowfullscreen></iframe>", videoTitle: "Party Rock Commercial")
        let p5 = PartyRock(imageURL: "http://direct-ns.rhap.com/imageserver/v2/albums/Alb.219913217/images/600x600.jpg", videoURL: "<iframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/tWyuglGCKgE\" frameborder=\"0\" allowfullscreen></iframe>", videoTitle: "Juicy Wiggle")
        
 
        //조금 전 만들어준 배열에 데이터를 넣습니다.
        partyRocks.append(p1)
        partyRocks.append(p2)
        partyRocks.append(p3)
        partyRocks.append(p4)
        partyRocks.append(p5)
 
        //테이블뷰를 이용하기 위해선 datasource와 delegate를 뷰와 연결하여줍니다.
        tableView.delegate = self
        tableView.dataSource = self
    }
 
    //각각의 테이블뷰 cell 데이터를 파싱하여줍니다.
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
 
        //식별자를 PartyCell로 사용한 cell을 이용합니다.
        if let cell = tableView.dequeueReusableCell(withIdentifier: "PartyCell", for: indexPath) as? PartyCell {
 
            //인덱스에 해당하는 데이터를 partyRock 변수에 담습니다.
            let partyRock = partyRocks[indexPath.row]
 
            //담을 변수를 updateUI 메서드를 통해 cell에 넣은 후
            cell.updateUI(partyRock: partyRock)
 
            //리턴하여줍니다.
            return cell
            
        } else {
            return UITableViewCell()
        }
    }
    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        //테이블의 개수반환
        return partyRocks.count
    }
    
 
 
}
 
 

먼저 parycell 내용을 보겠습니다.

class PartyCell: UITableViewCell {
 
    //이미지 부분과 레이블 선언
    @IBOutlet weak var videoPreviewImage: UIImageView!
    @IBOutlet weak var videoTitle: UILabel!
    
    override func awakeFromNib() {
        super.awakeFromNib()
        
    }
 
    데이터를 받아 updateUI 메서드로 들어올 경우 데이터를 맵핑하게 된다.
    
 
    func updateUI(partyRock: PartyRock) {
        videoTitle.text = partyRock.videoTitle
        
        let url = URL(string: partyRock.imageURL)!
 
 
      //이미지 데이터 비동기 처리
      
        DispatchQueue.global().async {
            do {
                let data = try Data(contentsOf: url)
                //위의 이미지 가져오는 무거운 데이터를 처리하고나면 아래 데이터 맵핑같은
                //가벼운 일은 동기처리화 
                DispatchQueue.global().sync {
                    self.videoPreviewImage.image = UIImage(data: data)
                }
            } catch  {
                //handle the error
            }
        }
 
    }
 
}
 

클릭시 테이블뷰 디테일 보는 로직

func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
 
        //눌렀을경우 해당 누른 데이터를 partyRock 변수에 넣는다
        let partyRock = partyRocks[indexPath.row]
 
        //videoVC로 partRock 변수와 함께 보낸다
        performSegue(withIdentifier: "VideoVC", sender: partyRock)
        
    }
 
 
    //데이터 넘기기
    override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
 
        //목표 세그가 videoVC일 경우
        if let destination = segue.destination as? VideoVC {
 
            //sender로 받은 데이터를 destination(목표지점) partRock 변수에 넘긴다.
            if let party = sender as? PartyRock {
                destination.partyRock = party
            }
            
        }
        
    }