[스탠포드 iOS] 11강 & 12강 드래그 & 드랍, 테이블 뷰와 컬렉션 뷰

11강 목표

  • Drag and Drop
  • UITableView
  • UICollectionView

Drag and Drop

Demo

class EmojiArtViewController: UIViewController, UIDropInteractionDelegate {

    @IBOutlet weak var dropZone: UIView! {
        didSet {
            dropZone.addInteraction(UIDropInteraction(delegate: self))
        }
    }
    
    // 관심있는 것은 이미지와 이미지에 대한 URL
    func dropInteraction(_ interaction: UIDropInteraction, canHandle session: UIDropSession) -> Bool {
        return session.canLoadObjects(ofClass: NSURL.self) && session.canLoadObjects(ofClass: UIImage.self)
    }
    
    // 복사해서 가져온다.
    func dropInteraction(_ interaction: UIDropInteraction, sessionDidUpdate session: UIDropSession) -> UIDropProposal {
        return UIDropProposal(operation: .copy)
    }
    
    var imageFetcher: ImageFetcher! // 강의 Utilities.swift 파일
    
    func dropInteraction(_ interaction: UIDropInteraction, performDrop session: UIDropSession) {
        imageFetcher = ImageFetcher() { (url, image) in
            DispatchQueue.main.async {
                self.emojiArtView.backgroundImage = image
            }
        }
        
        session.loadObjects(ofClass: NSURL.self) { nsurls in
            if let url = nsurls.first as? URL {
                self.imageFetcher.fetch(url)
            }
        }
        session.loadObjects(ofClass: UIImage.self) { images in
            if let image = images.first as? UIImage {
                self.imageFetcher.backup = image
            }
        }
    }
}


Table View, Collection View

  • UIScrollView의 서브 클래스
  • 무한한 양의 정보에 무한한 접근을 제공하기 위해 사용된다.
TableViewCollectionView
  • dataSource : 데이터 요청
  • delegate : 데이터가 어떻게 보여지는지 설정

Demo

class EmojiArtDocumentTableViewController: UITableViewController {
    
    var emojiArtDocuments = ["One", "Two", "Three"]
    
    // MARK: - UITableViewDataSource

    // section의 개수
    override func numberOfSections(in tableView: UITableView) -> Int {
        return 1
    }

    // section마다 행의 개수
    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return emojiArtDocuments.count
    }

    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        // 재사용할 수 있는 큐
        let cell = tableView.dequeueReusableCell(withIdentifier: "DocumentCell", for: indexPath)

        cell.textLabel?.text = emojiArtDocuments[indexPath.row]

        return cell
    }

    // + 버튼 클릭 시 배열에 Untitled를 추가하지만 Utilities.swift에 있는 메소드를 활용해 이름 중복이 발생해도 숫자가 뒤에 붙는다.
    @IBAction func newEmojiArt(_ sender: UIBarButtonItem) {
        emojiArtDocuments += ["Unititled".madeUnique(withRespectTo: emojiArtDocuments)]
        tableView.reloadData() // 테이블뷰 새로고침
    }
    
    /*
    // 행 편집 가능 (기본값: true)
    // Override to support conditional editing of the table view.
    override func tableView(_ tableView: UITableView, canEditRowAt indexPath: IndexPath) -> Bool {
        // Return false if you do not want the specified item to be editable.
        return true
    }
    */
    
    // 행 삭제일 경우에 배열에서 삭제하고 테이블뷰에서도 삭제
    override func tableView(_ tableView: UITableView, commit editingStyle: UITableViewCell.EditingStyle, forRowAt indexPath: IndexPath) {
        if editingStyle == .delete {
            emojiArtDocuments.remove(at: indexPath.row)
            tableView.deleteRows(at: [indexPath], with: .fade)
        } else if editingStyle == .insert {
            
        }    
    }
}


12강 목표

  • 11강 이어서
  • UITextField

CollectionView

  • 컬렉션뷰의 width, height보다 셀 크기를 크게하지 않아야 한다.

Demo


UITextField

  • 수정할 수 있는 UILabel
  • 키보드를 나타나서 입력하게 한다.
  • becomeFirstResponder : 최초 응답자는 키보드에서 키보드 이벤트를 받는다.
  • resignFirstResponder : 최초 응답자가 되는 것을 멈추고 키보드 사라진다.
  • textFieldShouldReturn(sender: UITextField) -> Bool : Return 클릭 시
  • textFieldDidEndEditing(sender: UITextField) : 텍스트 필드 수정하다가 다른 텍스트 필드를 클릭했을 경우 최초 응답자가 바뀐다.

링크

좋은 웹페이지 즐겨찾기