오늘의 주제

1. UIWebView 
2. 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

twitter : @yagomsoft

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

RSS Feed 받기   


↓↓↓저 열심히 썼는데 추천 한방 꾹 눌러주고 가시는 건 어떨까요? 로그인이 필요 없습니다. ^~^ 고맙습니다~ ↓↓↓ 



Posted by yagom

댓글을 달아 주세요

  1. 이전 댓글 더보기
  2. 편안한비 2012.05.15 11:03  댓글주소  수정/삭제  댓글쓰기

    좋은자료 잘 보고 갑니다~

  3. 노가다개발자 2012.05.17 18:25  댓글주소  수정/삭제  댓글쓰기

    혹시 폰갭 이용시 웹페이지를 불러올때 웹뷰로 불러오는게 아니라.. 사파리 웹으로 전환이 되서 열리는데..

    이것에 대한 폰갭에 대한 설정이 있는지 아니면 코딩상으로 제어를 해야하는지 알수있을까요??

    스크립트로 보내서 document.href 로 열어도 다른분 댓글보면 웹뷰를 통해서 열린다는 분도 계시는거 같은데..

    웹으로 전환이 되어버리네요..

    • Favicon of https://blog.yagom.net BlogIcon yagom 2012.05.18 05:47 신고  댓글주소  수정/삭제

      흠... 글쎄요^^;
      폰갭에서 웹뷰를 띄워본 적이 없어서 잘 모르겠습니다..^^;
      맥부기나 스택 오버플로에서 정보를 얻으심이 빠르실 것 같습니다..
      확답을 드리지 못해 죄송합니다..!

  4. 인절미후후 2012.06.06 16:09  댓글주소  수정/삭제  댓글쓰기

    항상 알찬 포스팅 감사합니다~~

    와서 볼때마다 느끼는데 딱 저한테 필요한 내용이 정말 많은거 같아요 유용하게 잘 보고 있습니다.
    다음강좌 이동하겠습니다~

  5. 박병훈 2012.07.14 16:58  댓글주소  수정/삭제  댓글쓰기

    안녕하세요?? 요즘 아이폰 입문자입니다.ㅋㅋㅋㅋㅋㅋㅋ
    아주 좋은 자료 감사합니다.
    이번 포스팅을 보고나서 다른 페이스북 페이지로 연결 시키려고하는데 안되네요
    페이스북은 연결이 안되나요?

    • Favicon of https://blog.yagom.net BlogIcon yagom 2012.07.15 20:28 신고  댓글주소  수정/삭제

      안녕하세요 박병훈님.
      페이스북을 어떻게 연결하고자 하시는지요?
      페이스북 페이지를 열고 싶으신 건지, 아니면 페이스북에 글을 남기고 싶으신 건지에 따라 방법이 다릅니다 :-)
      게다가 이제 iOS 6.0 이 정식으로 나오면 또 다른 방법이 생기구요 ㅎ
      어떤 방법으로 연결을 원하시는지 구체적으로 말씀해 주세요~

  6. 앱만들자 2012.07.15 00:18  댓글주소  수정/삭제  댓글쓰기

    참쉽게 설명과 그림을 보니 이해가 자꾸만 가네요 정말 감사합니다........

  7. Sio 2012.07.18 13:09  댓글주소  수정/삭제  댓글쓰기

    웹뷰 같은건 왠지 어려울것 같았는데
    아직까지는 따라갈만 해서 좋네요 ㅎㅎㅎ
    설명을 너무 잘해주셔서 그런가봐요 ^^

  8. 나에게넌 2012.08.13 09:34  댓글주소  수정/삭제  댓글쓰기

    야곰님 지식을 쪽쪽쪽 다 빨아가겠습니다..항상 감사합니다..

  9. mhy 2012.09.12 11:16  댓글주소  수정/삭제  댓글쓰기

    안녕하세요 야곰님 글에 많은 도움을 받고 있습니다.

    현재 내용을 따라하다 문의 드릴게 있엇 글남깁니다.

    위내용에 웹표 표현되는것이 시뮬레이터에서는 잘보이는데

    폰으로 확인하면 아무내용도 표시가 되질않는데 어떤이유때문에 그런가요..

    웹뷰가 그냥 흰색화면으로만 나오네요...

    도움주시길 바랍니다.

    • Favicon of https://blog.yagom.net BlogIcon yagom 2012.10.03 21:46 신고  댓글주소  수정/삭제

      혹시 아이폰의 버전이 5.x대가 맞나요?
      6.x대에서는 아직 제가 테스트를 해보지 못했습니다.
      버전이 달라서 그럴 수도 있을 것 같습니다 ^^;
      그게 아니라면 어떤 이유 때문인지 다시 알아봐야겠네요~

  10. Parkep 2013.01.02 10:07  댓글주소  수정/삭제  댓글쓰기

    덕분에 공부 열심히 하고있습니다 감사합니다 ㅎㅎㅎ

  11. dumbo 2013.01.15 15:36  댓글주소  수정/삭제  댓글쓰기

    안녕하세요 야곰님 덕분에 ios 재미있고 쉽게 배우고 있습니다.

    현재 6.0버전으로 따라가고 있는데 loadRequest부분에서 thread 1 break point 1.1 메시지가 나오면서 구동이 멈추는데요.

    어떤 문제로 메시지가 뜨는지 문의드립니다.

    늦게나마 새해 복 많이 받으세요~~

    • Favicon of https://blog.yagom.net BlogIcon yagom 2013.01.16 13:04 신고  댓글주소  수정/삭제

      혹시 Break Point로 지정되어있진 않은가요?^^

      코드 옆에 파란색 화살표가 있는지 확인해 보시고 혹시나 있으면 제거해 주세요 ㅎ

  12. dumbo 2013.01.17 22:34  댓글주소  수정/삭제  댓글쓰기

    .....감사합니다 ㅎㅎ

  13. seunggon 2013.02.25 19:21  댓글주소  수정/삭제  댓글쓰기

    웹뷰의 소스를 얻을 수 있을까요 ? 따라하는데 계속 실패하네요 ㅠㅜ

  14. Help 2013.02.28 10:23  댓글주소  수정/삭제  댓글쓰기

    좋은 강의 잘 보고있어요 정말 큰도움되었답니다!!ㅠㅠ

    아이폰 앱을 다 만들고 앱스토어에 등록하는 강의생각은 없으신가요?ㅠㅠㅠ

    열심히 구글링하고 있는데 원하는 정보가 안나와요...

    만든 앱을 올리고나서 그걸 업데이트하려면 -info.plist 에서 버전만 올리면 되는건가요??

    그리고 사용자가 다운받아논 앱을 업데이트시키려면 어떻게 해야할지....아무리찾아도안나와요 ㅠㅠ

    • Favicon of https://blog.yagom.net BlogIcon yagom 2013.02.28 10:40 신고  댓글주소  수정/삭제

      안녕하세요~
      지금은 제가 포스팅할 여력은 되지를 않구요...^^
      http://writerkim.pe.kr/1132
      여기를 참고해 보시겠어요?ㅎ
      큰 도움이 되어드리지 못하여 죄송합니다..^^;

  15. 딴또 2013.03.13 16:59  댓글주소  수정/삭제  댓글쓰기

    멋진 강의 정말로 감사합니다.

  16. 배도영 2013.03.16 17:24  댓글주소  수정/삭제  댓글쓰기

    @synthesize ygWebView 가 빠졌네요... ㅠㅠ

    왜 안되나싶어서 엄청 찾아다녔습니다.ㅠㅠ

  17. 노현빈 2013.07.07 22:42  댓글주소  수정/삭제  댓글쓰기

    포스팅 정말 감사합니다
    우연히 블로그를 방문하게 되었는데
    야곰님 덕분에 잘 배우고 있습니다
    프로그래밍은 초심자라 배우면서도 조금 막막했는데 강의보면서 천천히 따라하니까 조금씩 감이 잡히는 것 같습니다.
    정말 감사합니다.

  18. Favicon of http://ohsdsl@naver.com BlogIcon hahahaha 2013.09.02 16:05  댓글주소  수정/삭제  댓글쓰기

    야곰님 잘 보고 있습니다.

    질문이 있는데요

    초기 페이지에서 버튼 눌러서 웹뷰 띄우게 하는게 아니라

    바로 초기페이지에 웹뷰를 넣고 실행하니까 오류가 나는데요

    원래 안되는 것인지 아니면 제가 잘못해서 그런건지 궁금합니다.

    • Favicon of https://blog.yagom.net BlogIcon yagom 2013.09.03 09:17 신고  댓글주소  수정/삭제

      안녕하세요~

      초기화면에서 웹뷰를 띄운다고 오류가 나서 앱이 죽는다거나 하는 경우는 없을거예요.
      뭔가 잘못되었기 때문에 오류가 나는 것 같은데, 어떤 오류가 어디서 나는지 파악해 보셔야 할 것 같습니다.

  19. 조언이필요한자 2014.02.05 10:06  댓글주소  수정/삭제  댓글쓰기

    안녕하세요

    야곰님 글 너무 잘보고 있습니다

    질문이 있습니다.

    야곰님이 말씀하신대로 웹뷰를 잘 띄웠는데요

    url주소가 한글이 들어가 있으면 불러오지가 않습니다

    한글이 깨진건 아니구요 로그에는 주소가 정확히찍힙니다.

    혹시 조언좀 구할수 있을까요??ㅠㅠ

    • Favicon of https://blog.yagom.net BlogIcon yagom 2014.02.05 10:11 신고  댓글주소  수정/삭제

      안녕하세요 :)
      URL 인코딩이 필요한 것 같습니다.
      http://theeye.pe.kr/archives/853
      이 주소 또는 구글에 iOS URL encoding 이라고 검색해 보셔요 ㅎ

  20. 조언이필요한자 2014.02.05 10:26  댓글주소  수정/삭제  댓글쓰기

    아 너무 감사합니다

    가르켜주신 url 타고 가서 보고 바로 적용 해서 해결했습니다.

    정말감사합니다. 좋은하루되세요~

  21. 조언이필요한자 2014.02.06 14:03  댓글주소  수정/삭제  댓글쓰기

    안녕하세요

    질문이있어서 그러는데요

    공지사항 을 만들려고 합니다.
    그런데 공지사항 목록을 그렸습니다
    그리고 그 목록중 하나를 클릭하면
    DrawDetail(nIndex); nIndex를 인자로받아
    함수를 호출 하여 그 공지사항에 대한 정보를 그렸습니다

    여기서 문제는 공지사항 상세 에서 다음과 이전 버튼을 만들어서
    다음버튼을 누르면 클릭한 목록 다음것을 그리고 이전버튼을 누르면 클릭한 목록 이전것을 그리고 싶습니다.

    그래서 DrawDetail(nIndex); 함수로 값을 그릴때 nIndexnext = nIndex +1; 을 해줘서 다음버튼 클릭시
    DrawDetail(nIndexnext); 로 다음 공지사항 상세를 바로그리려 하는데 그 목록에 대한 정보를 가져오지 못합니다.
    인자 값은 제대로 증가 한것을 확인했습니다만....

    제말을 이해하셨을지 모르겠습니다. 읽어주셔서 감사합니다. 조언가능하시면 조언해주시면 감사하겠습니다.ㅠㅠ

    • Favicon of https://blog.yagom.net BlogIcon yagom 2014.02.07 09:14 신고  댓글주소  수정/삭제

      안녕하세요, 또 뵙습니다 :)

      여러가지 경우의 수가 존재하기 때문에 딱 뭐라고 말씀드리기가 어렵군요.
      일단 목록(배열)의 인자들이 이미 메모리에서 해제되었을 수도 있고
      DrawDetail 함수가 어디에 구현되어 있는지에 따라서도 다를 것 같구요... 또 어떤식으로 그리고 계신지도 제가 잘 몰라서요 ^^;

      상세 화면으로 넘어갔다면 상세화면 전의 컨트롤러에서 공지사항 정보들을 상세화면쪽으로 넘겨줘야 하는데, 어떤 방식으로 어떻게 넘겨주시는지도 제가 잘 모르구요..^^;

      델리게이트와 프로토콜의 개념에 대해 조금 더 알아보시거나, 싱글턴 기법에 대해서도 알아보시면 좋을 것 같아요.