Spinner의 필요성

문제점

Cell을 클릭 시 detailView로 화면을 전환하는 동안 API-Call을 하는 시간이 있기에 흰색 화면이 보여지는 것을 확인 할 수 있습니다.

해결

우리가 평소에도 웹이나 앱을 이동할 때 아래와 같은 로딩 아이콘을 접한다.

• Spinner와 백그라운드를 만든다.
• API-Call이 완료되면 Spinner와 백그라운드를 제거한다.

Spinner와 백그라운드를 만든다.

    func addSpinner() {
        let background = UIView()
        addSubview(background)
        background.backgroundColor = .init(white: 0, alpha: 0.7)
        background.translatesAutoresizingMaskIntoConstraints = false
        background.topAnchor.constraint(equalTo: topAnchor).isActive = true
        background.bottomAnchor.constraint(equalTo: bottomAnchor).isActive = true
        background.leadingAnchor.constraint(equalTo: leadingAnchor).isActive = true
        background.trailingAnchor.constraint(equalTo: trailingAnchor).isActive = true
        
        let spinner = UIActivityIndicatorView()
        spinner.startAnimating()
        addSubview(spinner)
        spinner.color = .systemPink
        spinner.translatesAutoresizingMaskIntoConstraints = false
        spinner.widthAnchor.constraint(equalToConstant: 500).isActive = true
        spinner.heightAnchor.constraint(equalToConstant: 500).isActive = true
        spinner.centerXAnchor.constraint(equalTo: centerXAnchor).isActive = true
        spinner.centerYAnchor.constraint(equalTo: centerYAnchor).isActive = true
    }

webView를 추가 및 제약 걸어주는 곳 하단에 spinner를 추가했다.

현재 이 상태에서 웹뷰가 정상적으로 잘 띄워지면 Spinner와 회색 백그라운드를 제거해야한다.

swift에 tags를 이용해 View에 정수 값을 대입하여 개체를 식별하는 데 사용할 수 있는데, 이것을 활용하고자 한다.

addSpinner()

addSpinner메서드 내부에 아래 tag값을 초기화 해준다.

        background.tag = 0001
        spinner.tag = 0002

Spinner와 백그라운드 삭제

    func removeSpinner() {
        let views = subviews.filter { view in
            return view.tag == 0001 || view.tag == 0002
        }
        
        views.forEach { view in
            view.removeAllConstraints()
            view.removeFromSuperview()
        }
    }

[
<UIView: 0x7f83dc7111d0; frame = (0 0; 320 568); tag = 1; layer = <CALayer: 0x600001308a20>>, 
<UIActivityIndicatorView: 0x7f83dc7155a0; frame = (-90 34; 500 500); tag = 2; layer = <CALayer: 0x600001308a80>>
]

subviews.filter로 tag값이 0001과 0002인 View를 배열에 담는다.

그 후, forEach로 돌면서 제약조건을 전부 없애준다.

WKNavigationDelegate으로 웹뷰 제어

	webView.navigationDelegate = self

navigationDelegate를 StoryViewController에서 사용한다고 지정한다.

  extension StoryViewController: WKNavigationDelegate {
      func webView(
          _ webView: WKWebView,
          didFinish navigation: WKNavigation!
      ) {
          webView.removeSpinner()
      }
  }

didFinish 웹뷰가 로드되는 시점에 removeSpinner메서드를 호출한다.