✏️ 아래로 당겨서 새로고침

개요

tving, X, instagram 등 다양한 앱에서 우리는 아래로 당겨서 새로고침을 하고 있습니다
이러한 새로고침은 이제 정형화 되어있는만큼 내가 개발하는 앱에도 구현이 되어있으면 좋겠다는 생각이 들어서 구현방법을 알아보게 되었어요☺️

iOS에서는 이러한 새로고침 시에 떠오르는 로딩을 Refresh control이라고 설명하고 있습니다

 

또한 새로고침은 UIRefreshControl 이라는 클래스를 사용하여 구현할 수 있으며 UIScrolleView를 비롯해 이를 상속받는 UITableView, UICollectionView에서 사용할 수 있다고 하네요!

 

구현방법

아래로 당겨서 새로고침하는 기능은 생각보다 구현하기 어렵지 않았습니다
간단하게 아래의 세 단계를 거쳐서 해당 기능을 구현할 수 있습니다!

1. configureRefreshControl()이라는 이름으로 새로고침 생성
   ❗️주의할 점 : for에서는 valueChanged를 필수적으로 사용해야 하는데, 이는 드래그와 같은 행위로 다른 값을 불러오는 이벤트이기 때문!
2. 새로고침에 사용할 @objc메서드 구성
3. viewDidLoad()에서 configureRefreshControl() 호출 **

그리고 이를 코드로 보면 아래와 같습니다
(저같은 경우에는 collectionView에 새로고침을 넣어주는거라 예시에 collectionView가 들어갔어요)

        // 1. 새로고침 구성
    private func configureRefreshControl() {
        // 1-1. collectionView에 refreshControl(새로고침) 추가 
        collectionView.refreshControl = UIRefreshControl()
        // 1-2. refreshControl(새로고침)을 타겟으로 하는 메서드 추가
        collectionView.refreshControl?.addTarget(self, action: #selector(handleRefreshControl), for: .valueChanged)
    }

    // 2. 새로고침하는데 사용되는 메서드 구성 
    @objc func handleRefreshControl() {
        // DispathQueue.main.async : UI 업데이트에는 main 스레드를 비동기적으로 사용
        // .asyncAfter(deadline: .now()+0.6) : 지금으로부터 로딩화면이 0.6초간 나오고 UI 업데이트  
        DispatchQueue.main.asyncAfter(deadline: .now() + 0.6) {
            // 모델의 데이터 변경 등 필요한 이벤트 처리
            ... 
            // 새로고침이 끝남을 표시
            // 해당 코드가 없으면 데이터를 불러온 후에도 무한로딩이 보임
            self.collectionView.refreshControl?.endRefreshing()
        }
    }

 

애플의 예제 코드에서는 DispathQueue.main.async를 사용하고 있지만 저는 다른 분의 글을 참고하여 새로고침을 표시해주는 indicator을 잠시간 그 상태로 머무르게 하도록 하기위해 DispatchQueue.main.asyncAfter(deadline: .now() + 0.6)를 통해 0.6초간 새로고침이 표시된 다음 새로운 뷰를 불러오도록 했습니다

 

+@

로딩 중을 보여주는 indicator는 사실 UIView를 상속받고 있는 UIActivityIndicatorView라고해요

그렇기 때문에 제목을 넣어줄 수도 있고 tintColor를 변경할 수도 있다고 합니다
만약 해당 부분을 커스텀하고 싶다면 아래와 같이 코드를 작성해주세요!

private func configureRefreshControl() {
    collectionView.refreshControl = UIRefreshControl()
    collectionView.refreshControl?.addTarget(self, action: #selector(handleRefreshControl), for: .valueChanged)
    // 로딩 표시 색 변경
    collectionView.refreshControl?.tintColor = .systemPink
    // 로딩에 제목 추가 
    collectionView.refreshControl?.attributedTitle = NSAttributedString(string: "새로고침", attributes: [.foregroundColor: UIColor.black])
}

 

그리고 이렇게 작성한 코드는 아래처럼 적용되어 나타납니다!

 

 

이와 관련하여 보다 자세한 글이 필요하다면 참고의 포스트를 참조해보면 좋을 것 같습니다
친절하게 설명되어있어서 많은 도움이 되더라고요!👍

 

 

📚 참고

[iOS] 당겨서 새로고침(Pull to Refresh) 상용앱처럼 구현하는 방법