[iOS] 버튼을 눌렀을때 WKWebView 띄워버리기! - HoonIOS

안녕하세요, HoonIOS입니다. :)

저번 포스팅에는 WKWebView의 델리게이트 메서드에 대해서 포스팅을 해봤습니다.

<웹뷰의 델리게이트 메서드>

 

이번에는 이 웹뷰의 델리게이트 메서드를 통해 웹뷰를 한번 띄어 보겠습니다.

 

 

 WKWebView 구현

※ 디자인

전체적인 형태는 UINavigationController에서 버튼을 두 개 만들어주겠습니다.

한 개는 github사이트로 가는 버튼 다른 하나는 블로그로 가는 버튼으로 구현을 하겠습니다.

둘 다 버튼으로 웹뷰를 띄울 때는 WKWebView을 이용할 것이고 블로그 웹뷰에서 만약에 url이 잘못되어 있거나 네트워크가 오류가 발생했을 때는 url을 다시 입력하라는 알림 창을 구현해주고 로딩 동안에는 인디케이터 뷰를 띄어주겠습니다.

 

github의 웹뷰에서 url, 네트워크오류가 발생하면 취소를 눌렀을 때 뒤로 가는 기능을 구현하겠습니다.

 

 

제일먼저 시작할 때는 UI를 만들어줘야겠죠! 

 

스토리 보드를 한번 구상해주겠습니다. 기본적으로 내비게이션 컨트롤러에서 버튼을 만들고 해당 버튼 하고 스토리보드를 세그웨이로 구상을 해주겠습니다.

 

* 설명

• 웹뷰의 크기는 오토레이아웃으로 잡아줬는데요, safeArea에 딱 맞게 위아래 오른쪽 왼쪽을 잡아줬습니다.
• 우선 각 버튼을 각 컨트롤러에 연결을 하기 위해서 세그웨이로 잡아줬습니다.

우선 큰틀은 이렇게 잡고 웹뷰를 스토리보드에 구성하기 위해서는 스토리보드에서 라이브러리를 webkitView에 넣어줘야 합니다.

 

 

* 설명

• 오브젝트 라이브러리를 통해서 webKitView를 넣어주고 해당 webkitView를 위아래 오른쪽 왼쪽 모두 safe Area에 0으로 딱 맞게 구현을 해줬습니다.

이제 블로그를 띄어줄 뷰컨트롤러를 blogViewController로 가서 작업을 해주겠습니다.

 

그전에 WKWebView를 사용하게 되면 제일 먼저 해줘야 하는 게 있다고 했는데요,, 바로 WebKit을 임포트 해줘야 한다고 했습니다. :)

한번 임포트를 시켜주겠습니다.

 

 

이제 WKWebView를 아울렛 변수 설정을 해주겠습니다. 만약 위에 임포트를 안하고 아울렛 변수로 설정을 해줬으면 에러가 발생했을 것입니다.

 

 

이제 url을 읽어와서 표현해줘야겠죠?

 

* 코드 설명

• 옵셔널 바인딩을 통해서 만약에 해당 url이 없으면 에러 로그가 발생을 하게 작성해줬습니다.
• url을 로그하기 위해서 url을 작성해준 String을 URL객체로 만들어주고 그 만든 것을 URLRequest를 통해 URL요구 객체를 만들어 주었습니다.
  
  이렇게 URLRequest를 통해 만들어준 요구 객체를 load해주면 됩니다.

아 내비게이션 바에 이건 무슨 내용이야 표현을 해야 사용자가 알기 쉽겠죠?

 

* 코드설명

• 위에 내비게이션 바의 title에 접근을 하기 위해서는 navigationItem.title을 이용해야 합니다.
  
  저는 HooniOS 블로그임돠~라고 표현을 해줬습니다 ㅎㅎ

그럼 실행했을 때 어떻게 나오는지 확인해볼까요?

 

위에 내비게이션 바에 title도 잘 보이고 블로그 url도 잘 로드돼서 보이네요 ㅎㅎ

 

웹뷰를 로딩해서 표현할 때 로딩 시간이 좀 있다고 합니다. 그래서 로딩 중이라고 사용자한테 표현을 해주기 위해서 인디케이터 뷰를 설정해주겠습니다.

 

* 설명

• 인디케이터 뷰 속성의 크기 설정이 이렇게 많지만 저는 large white로 큰 화이트의 로딩 모양으로 설정을 해주겠습니다.
• 여기 안에 있는 옵션들은 그냥 직독 직해해주셔서 이해해주시면 됩니다. ㅇ.ㅇ

이제 인디케이터 뷰랑 모양을 잡아줬으니 위치를 잡아줘야겠죠!

 

위치는 뷰의 딱 중간으로 잡아주기 위해서 Align Center로 x, y축을 잡아주겠습니다.

 

 

위치도 잡아줬겠다 이제 좀 꾸며줘야겠죠!

 

* 설명

• 이 두 속성은 인디케이터 뷰를 사용할 때 많이 사용하는 속성입니다.
  
  1. Animating
  - 이것을 체크하게 되면 인디케이터 뷰가 등장할 때 이 뷰가 회전하게 보여주도록 도와주는 것입니다.
  
  2.Hides when Stopped
  - 이것을 체크하게 두면 멈췄을 때 해당 인디케이터 뷰가 숨겨지게 됩니다.

고럼 인디케이터 뷰를 사용하기 위해 아울렛 변수로 설정해주겠습니다.

 

 

이제 이 인디케이터 뷰를 적절한 상황? 에서 띄어주는 게 중요한데요 그러기 위해서는 델리게이트 메서드를 사용하겠습니다.

 

앞 포스팅에서 WKWebkit에는 총 2개의 델리게이트 프로토콜을 지원한다고 하였습니다.

WKNavigationDelegate와 WKUIDelegate가 있습니다. 그렇지만 인디케이터 뷰는 특정 콘텐츠를 받기 시작할 때나 탐색을 시작할때 구현해줘야 합니다. 

 

따라서 WKNavigationDelegate 프로토콜의 델리게이트 객체만 지정해주겠습니다.

 

* 코드 설명

• WKNavigationDelegate에 webView(_:didCommit:)의 메서드는 웹뷰에서 HTML 페이지의 콘텐츠를 읽기 시작할 때 발생하는 메서드입니다.
  
  따라서 이 메서드에 구현을 하는 것이 좋습니다. 그 이유는 웹뷰에서 읽어 들일 때 로딩이 등장하는 것 맞습니다.
  ( 뭐지 뭔가 작성하면서 당연 한말을 적고 있다는 느낌이 드네요...ㅎ )
• 인디케이터 뷰를 표시해줘야 됩니다.. isHidden속성을 통해 숨어있는 인디케이터 뷰를 다시 나타나게 해 줬습니다.
  
  이속성을 이용해서 해당 객체를 숨길 수도 표현할 수도 있습니다.
• . startAnimating() 메서드는 앞에서 설정해준 Animating을 해준 것으로 로딩이 시작하면 인디케이터 뷰가 회전을 하는 것을 볼 수 있습니다.

이제 애니메이션을 돌아가게 설정해줬으니 꺼야겠죠 만약 끄지 않으면 로딩이 완료가 됐는데도 가운데 인디케이터 뷰가 계속 돌아가는 불상사가 일어나게 됩니다...ㅠ

 

* 코드 설명

• 인디케이터 뷰를 멈추고 사라지게 하기 위해서 제일 좋은 순간은 페이지를 읽어오는 것이 완전히 끝나게 될때 입니다. 
  
  바로 webView(:didFinish:) 메서드가 페이지를 읽어오는것이 완전히 끝나게 되면 동작하는 메서드로 웹페이지를 다 읽으면었을때 발생하는 메서드입니다. 
• 사라지게 하기 위해서는. isHidden속성을 true로 해주고. stopAnimating메서드는 startAnimating해준 동작을 멈추게 해 주는 것입니다

한번 돌아가는지 확인을 해보겠습니다.

 

 

클릭하고 로딩을 하는 순간 인디케이터 뷰가 등장하고 완전히 웹페이지가 등장하게 되면은 종료되는 것을 볼 수 있습니다. :)

 

그런데 만약 로딩을 했는데 URL이 잘못되었거나  네트워크 오류를 통해 웹페이지를 읽어오지 못했을 때 알림 창을 통해 url을 다시 입력하라고 알려주고 텍스트 필드를 통해 url을 입력했을 때 해당 로딩 페이지를 다시 load 하게 만들어주겠습니다.

 

* 코드 설명

• 코드 작성한 델리게이트 메서드는 webView(_:didFailProvisionNavigation:withError:)에 작성해야 됩니다.
  
  이 델리게이트 메서드는 url이 잘못되었거나 네트워크에서 오류가 발생해 웹페이지를 아예 읽지 못했을 때 호출이 됩니다.
• 나머지 코드는 위의 포스팅 링크를 달아줬던 델리게이트 메서드에서 포스팅을 많이 했으니 다른 메서드를 알고 싶으시면 해당 포스팅으로 들어가셔서 확인 부탁드리겠습니다. :)
• cancel의 버튼 액션의 클로저에 대해 확인해보겠습니다.
  
  텍스트 필드의 텍스트 값을 가져오고 이 url을 상대로 다시 URLRequest를 생성해줘 load 해주는 메서드입니다.

결과를 한번 확인해보겠습니다.

 

이렇게 블로그 URL을 불러와 로딩하는 작성을 모두 해봤습니다.

 

이제는 깃허브 주소를 불러오는 것을 작성해주겠습니다. 나머지 설정 방법은 블로그 URL을 읽어오는 것과 같습니다. 대신에 ok를 눌러줬을 때 링크를 다시 선택하게 해 주고 만약에 cancel버튼을 눌렀을 때 뒤로 가게 만들어주겠습니다.

 

* 코드 설명

• 이 코드도 같은 webView(_:didFailProvisionalNavigation:withError:) 작성을 해야 됩니다. 에러가 발생했을 때 호출돼야 하니깐요~!
• 이 AlertAction은 취소를 눌렀을 때 뒤로 가게 만드는 코드입니다.

한번 결과를 봐보겠습니다. :)

 

 

동작이 잘되네요! ㅎㅎㅎㅎ 

 

이렇게 WKWebView를 이용해서 웹뷰를 띄우는 동작을 한번 해봤습니다. :)

 

WKWebView는 보시다시피 구현을 할 수 있지만 뒤로 가기 앞으로 가기 버튼을 직접 구현해줘야 하기 때문에 SFSafariViewController를 사용하는 것을 많이 추천한다고 하네요!