iOS) UICollectionView 에서 당겨서 새로고침 구현(UIRefreshControl)

내용

• 인스타그램처럼 뷰를 아래로 당겨서 새로고침을 구현해보자.
• UIRefreshControl 인스턴스를 만들어서 scroll view 의 refreshControl 에 적용해보자.

개발자 문서를 살펴보자!

♻️ UIRefreshControl

scroll view 컨텐츠의 새로고침을 시작할 수 있는 표준 control.

Overview

UIRefreshControl 개체는 table view 와 collection view 를 포함하여 UISrollView 개체에 연결하는 표준 control 입니다.

스크롤 가능한 뷰에 추가해서 사용자에게 컨텐츠를 새로고침할 수 있는 표준 방법을 제공합니다. 사용자가 스크롤 가능한 컨텐츠 영역의 상단을 아래로 드래그하면, scroll view 가 refresh control 을 표시하고, progress indicator 에 애니메이션을 적용하여 앱에 알립니다.

해당 알림을 사용하여 컨텐츠를 업데이트 하고 refresh control 를 해제할 수 있습니다.

refresh control 사용하면 UIControl 의 target-action 메커니즘을 사용해서 컨텐츠의 업데이트할 시기를 알 수 있습니다.

활성화 시 refresh control 는 만들때 구성했던 action method 를 호출합니다. action method 를 추가할때 아래 예제 코드처럼 valueChanged(이벤트를 수신하도록 구성합니다. 콘텐츠를 업데이트한 뒤에 refresh control 의 endRefreshing() 메서드를 호출합니다.

✨ endRefreshing()

refresh operation 이 종료되었음을 control 에게 알린다.

Discussion

refresh control 를 기본 상태로 되돌리기위해서 새로 고침 작업이 끝날때(프로그래밍 방식이든 사용자에 의해서 시작했든) 해당 메서드를 호출합니다.

refresh control 이 최소한 부분적으로 표시되는 경우, 이 메서드를 호출하면 control 도 숨겨집니다. 애니메이션이 활성화된 경우, control 은 애니메이션을 사용해서 컨트롤이 숨겨집니다.

---

• 예제코드

func configureRefreshControl () {
   // Add the refresh control to your UIScrollView object.
   myScrollingView.refreshControl = UIRefreshControl()
   myScrollingView.refreshControl?.addTarget(self, action:
                                      #selector(handleRefreshControl),
                                      for: .valueChanged)
}

@objc func handleRefreshControl() {
   // Update your content…

   // Dismiss the refresh control.
   DispatchQueue.main.async {
      self.myScrollingView.refreshControl?.endRefreshing()
   }
}

UITableViewController 를 사용하는 경우를 살펴보면, 해당 refresh control 프로퍼티를 UIRefreshControl 인스턴스에 할당합니다. 그런다음 valueChanged 이벤트에 대한 action method 를 연결해서 연결된 table view 의 새로고침 동작을 관리합니다.

🚧 Important
UIRefreshControl 은 사용자 인터페이스 idiom 이 UIUserInterfaceIdiom.mac(= 현재 device 에서 사용할 인터페이스 스타일이 Mac 이다.) 인 경우 사용할 수 없다. 그러나 Mac idiom 에서 유사한 기능을 제공하도록 앱을 업데이트 할 수 있다.(즉, Mac 용 앱에 적용되는 이야기이다.)
더 자세한 정보는 Adding Menus and Shortcuts to the Menu Bar and User Interface 를 살펴보자.

Xcode 에서 UIRefreshControl 의 정의를 살펴보자.

• tinitColor 와 title 을 설정할 수 있었다.

@available(iOS 6.0, *)
open class UIRefreshControl : UIControl {


    /* The designated initializer
     * This initializes a UIRefreshControl with a default height and width.
     * Once assigned to a UITableViewController, the frame of the control is managed automatically.
     * When a user has pulled-to-refresh, the UIRefreshControl fires its UIControlEventValueChanged event.
     *
    */
    public init()


    open var isRefreshing: Bool { get }

    // ✅ The tint color for the refresh control.
    open var tintColor: UIColor!

    // ✅ The styled title text to display in the refresh control.
    open var attributedTitle: NSAttributedString?


    // May be used to indicate to the refreshControl that an external event has initiated the refresh action
    @available(iOS 6.0, *)
    open func beginRefreshing()

    // Must be explicitly called when the refreshing has completed
    @available(iOS 6.0, *)
    open func endRefreshing()
}

♻️ 적용하기!

• 서버통신을 통해서 데이터를 UICollectionView 에 보여주는 코드에 적용해보자!

    // ✅ initialize Refresh Control.
    private func initRefreshControll() {
        refreshControl.addTarget(self, action: #selector(refreshCollectionView), for: .valueChanged)
        mainCollectionView.refreshControl = refreshControl
    }

// MARK: - Objc Methods

    @objc
    private func refreshCollectionView() {
        // ✅ initialize.
        habitRoomLastID = -1
        habitRoomList?.removeAll()

        DispatchQueue.main.async {
            // ✅ 서버통신 성공 시 mainCollectionView 를 reload 하고 있다.
            self.habitRoomFetchWithAPI(lastID: self.habitRoomLastID) {
                // ✅ reload 가 된 후 refresh operation 종료.
                self.refreshControl.endRefreshing()
            }
        }
    }

결과

---

• 출처

  Apple Developer Documentation