iOS개발하기 #27. 웹뷰 (WebView) <1>

오늘의 주제

  • UIWebView 
  • UIToolBar

스물 일곱번째 시간입니다.^^

지난 번까지는 프로젝트를 계속 사용했는데, 이번에 새로 프로젝트를 하나 만들어 보겠습니다.
어찌되었든간 지난 번 까지 했던 내용들은 마음에 드셨는지 모르겠습니다...^^
지금까지 해 본것들은 예제이고 앞으로도 예제를 통해 내용이 진행되니, 디자인이 이쁘지 않더라도, 지금 당장 뭐가 없어보여도 쭉 한번 따라해 보세요..^^
그럼 어느순간 머릿속에 정리가 되고 느낌이 올 때가 있습니다.
그 때, 필요한 것들만 검색하고 취합해서 자신만의 프로젝트를 만들어 가시면 됩니다.
아직 그정도는 안온 것 같죠?ㅎ

그럼 오늘 또 새로운 세상을 향하여 한 걸음 내딛어 봅시다^^

출발!

UIWebView, UIToolBar

UIWebView...
음~ 이녀석은 뭘까요?ㅎ
딱, 이름만 봐도 웹뷰.
즉, 웹페이지를 보여주는 녀석이라는 것을 알 수 있죠?ㅎ

오늘은 이녀석과 한 번 놀아봅시다^^

아까 말씀드린대로 오늘은 새로운 프로젝트를 생성하여 진행 하도록 하겠습니다.
물론 이후 포스팅에서도 이 프로젝트를 계속 사용할 예정입니다~
프로젝트 템플릿은 Single View Application으로 하겠습니다.

프로젝트 이름은 WithYagom으로 했구요~
아래 여러 옵션들을 유심히 보시고, 실수 하지 않도록 하세요~
질문 주시는 분들중에 스토리 보드에 체크하고 프로젝트를 생성하셔서 질문하시는 분들이 몇분 계시더라구요^^;
너무 조급히 생각하지 마시고 천천히 꼼꼼하게 보며 진행하시기 바랍니다.
조급히 달리다 보면 소소한 기초들과 개념들을 놓치게 됩니다!

일단 앞으로 당분간은 세로모드 고정으로 진행할 계획입니다.~

자, 새로운 프로젝트를 생성하고, 이제 WebView를 얹어 볼 새로운 뷰 컨트롤러 생성을 할 차례입니다.
WithYagom폴더에서 오른쪽 버튼 또는 커맨드 클릭을 하여 New File을 선택합니다.

Objective-C class를 선택해 주시구요~

클래스 이름은 ViewControllerForWeb이라고 하겠습니다. XIB파일 생성에도 체크해 주시구요~

자, 이렇게 새로운 클래스가 생성되었죠?
그런데 이렇게 클래스를 새로 생성 할때마다 파일이 쭉쭉 늘어나고 복잡해 지는데... 정말 많아지면 정신없겠죠? (지난 프로젝트 한 번 보세요..ㅎㅎ)
이참에 정리를 좀 해볼까요?

WithYagom폴더에서 우클릭을 하고 NewGroup을 선택합니다.

새로운 그룸이 생성되면 이름을 써서 그룹을 만들어 주고, 파일들을 알맞게 정리해 줍니다. 저는 이런식으로 정리를 해 보았습니다~
자, 좀 깔끔하죠?ㅎ

그렇다면 이제 본격적으로 시작해 봅시다.
ViewControllerForWeb.xib파일로 이동합니다.
ToolBar라는 녀석을 하단에 쭈욱 넣어주시고,
Bar Button Item이라는 녀석을 하나 넣고, Flexible Space Bar Button Item 을 넣고, 다시 BarButton Item을 넣고...
그렇게 Bar Button Item을 다섯 개 넣어줍니다.

자, 그리고 Bar Button Item들의 이름을 이렇게 바꿔주시고요~
ToolBar위쪽으로 Web View를 똻!!!!!!! 올려줍니다~

그리고 오른쪽 버튼을 누른 상태로 File's Owner로 쭈욱 끌어당겨 줍니다.

그리고 delegate를 클릭!!
이제 이 클래스(ViewControllerForWeb)의 인스턴스가 이 WebView의 delegate가 됨을 말하는 것입니다. WebView의 동작처리를 ViewControllerForWeb이라는 녀석이 하겠다는 뜻이죠?

그 이후에 Assistance 모드로 전환해서 ViewControllerForWeb.h파일에다가 아울렛을 선언해 줍니다.

자, 그러면 ViewControllerForWeb.h에 이렇게 이쁘게 생성이 되겠죠?ㅎ

자, 그럼 이제 Bar Button Item들도 액션 선언을 해 주어야 하는데, Bar Button Item 선택이 한 번에 안됩니다.
버튼을 누르면 처음에 Tool Bar 전체가 선택이 됩니다. 그러면 그 후에 버튼을 한 번 더 눌러주면 그 때 버튼이 선택이 됩니다.
(아래 두 그림을 참고하세요)


자, 그러면 첫 번째 버튼의 액션을 연결 해 봅시다.
오른쪽버튼을 누른채로 쭈욱 당여옵니다.
그 후에 액션을 아래처럼 연결해 주시구요. 이 그림만 보고 성질 급하게 다섯 번 째 까지 연결 하실 분들을 위해 한 줄 더 쓰고 다음 그림으로 갑니다 ㅋㅋ
두 번 째 버튼부터는 아래 그림을 참고하세요.

두 번 째 버튼부터는 위에 만들어 두었던 메서드로 연결을 해줍니다.
오른쪽 버튼을 가지고 쭈욱 끌어서 만들어 놓은 메서드 위로 올리면 Connect Action이라고 나옵니다. 그 때 마우스를 떼면 빤짝빤짝 해요~
연결 된 겁니다.

자, 그런데 버튼들에 이름을 직접 새겨 넣는 것 보다 좀 더 직관적으로 표현해 보고 싶습니다.
네 번째 새로고침 버튼의 스타일을 변경 해 봅시다. 좀 더 직관적으로 보이죠?ㅎ

 다섯 번 째 녀석도 한 번 바꿔 봅니다. 물론 실제로 컬업으로 닫히게 하지는 않을거예요..ㅎㅎ 그냥 스타일 한 번 줘 봅니다~

그리고 이제부터 첫 번째 버튼 부터 태그를 하나씩 지정해 줍니다.
태그는 그 녀석만의 식별 숫자라고 생각하시면 되겠습니다.
물론 다른 객체도 같은 태그를 가질 수 있습니다만, 객체별로 구분하고 싶다면 태그를 다르게 입력해 주는게 좋겠죠?
첫 번째 버튼의 태그는 10

두 번째는 20

세 번째는 30... 네 번째 다섯 번 째 까지 쭈욱 넣어줍니다.

그 후에 이제 메인 뷰 컨트롤러인 ViewController.xib로 이동하여 버튼을 하나 만들어 줍니다.
그리고 액션을 그림처럼 연결 해 주세요~

그리고는 새로 우리가 만든 클래스의 헤더를 import 해 주시고,
버튼과 연결된 메서드인 webButtonClick: 에 내용을 넣어줍니다.
코드는 아래 소스의 주석을 확인하세요.^^

그리고 ViewControllerForWeb.m으로 옵니다.
아래 소스를 작성해 주세요.

실행해 봅니다!
자, 잘 나오나요?ㅎ
아래 툴바의 버튼들은 아무 동작을 하지 않죠?ㅎ 물론 우리가 아무것도 작성하지 않았기 때문이죠..^^;

오늘은 여기까지..ㅎ

오늘은 양이 많았지만, 결국 나온것은 웹페이지 하나 띄워 본 것 뿐이네요 ㅎㅎ
하지만 다음 포스팅의 밑거름들을 쭈아악~ 깔아 놓은 것이니 다음 포스팅에서는 좀 더 알찬 내용이 나올 것이라고 믿어 의심치 않습니다 ㅎㅎ

그럼 다음에 뵈어요~^^

뾰봉~

by yagom

p.s 제 포스팅을 RSS 피드로 받아보실 수 있습니다.

RSS Feed 받기 

댓글 남기기

Close