안드로이드 스튜디오 독학하기 7일째

안녕하세요?

이번 포스팅에서는 [하루만에 배우는 안드로이드 앱 만들기]에서 웹뷰라고 해서 인터넷을 보여주는 앱을 만드는 과정을 실습해 보려고 합니다.

우선 새로운 프로젝트(project)만들기를 시도, 프로젝트의 이름은 Sample5-4라고 지정하고 새로운 프로젝트를 만들러 갑니다. 첫 단계는 우선 package explorer윈도우에서 언제나와 같이 res폴더 안에 있는 layout폴더 안에 있는 main_activity.xml에서 Design탭을 엽니다.

첫 단계는 원래 있던 [Hello World!]라는 문구를 삭제하고 webview라는 컴포넌트를 드래그해서 화면에 끌어오는 단계입니다. 웹뷰(WebView)자체는 좌편에 있는 팔레트(palette)라는 윈도우 안에서 아래로 내려서 찾아야 합니다. 웹뷰 컴포넌트를 찾았으면, 드래그 앤 드롭으로 사이즈를 조절할 수 있는데, 저는 우선 화면 전체를 웹뷰로 덮도록 사이즈를 최대한으로 키웠습니다.

그리고 잊지 말아야 하는 것이 웹뷰 컴포넌트는 처음 생성하면, Property란에 ID 항목에 아무것도 없는데 여기다가 web1이라고 아이디를 직접 지정해야 합니다.

우선 위 스크린샷에서 표시된 부분에 WebView web; 이라는 문구를 입력합니다. 일단은 제 이해는 여기가 전역 변수라고 해서 전체적으로 다 사용이 되는 변수를 선언하는 부분으로 생각이 됩니다. 그 증거로 계속 코딩을 하다 보면, 여기서 입력한 web이라는 단어가 앞으로 나올 web이라는 단어와 같이 묶인다고 해야 할까요? 같이 하이라이트가 되는 것을 볼 수 있었습니다.

그리고 이어서 setContenView(R.layout.activity_main); 이라는 코드 아래에 다음과 같이 코딩을 시작합니다.

web = (WebView)this.findViewById(R.id.web1);

web.setWebViewClient(new WebViewClient());

web.loadUrl("http://m.daum.net");

여기서 한가지 주의할 점이 있습니다. 바로 코딩을 추가할 때 setContentView(R.layout.activity_main); 보다 더 앞으로 나간 줄에서 코딩했더니, 제 경우에는 에러가 생겼습니다. 이게 어째서 인지는 저로서는 잘 모르겠지만, 아무쪼록 주의해 주셨으면 합니다.

그 다음에는 이 상태로는 인터넷에 접속을 할 수 없으므로, 앱에 인터넷 사용권한을 부여해 주어야만 합니다. 그렇게 하기 위해서는 package explorer윈도우에서 manifests 폴더 아래에 있는 AndroidManifest.xml 파일을 열어서 수정에 들어가야 합니다.

여기 표시가 된 코드에서 <application 이라는 글자 바로 위에다가 다음과 같은 코드를 입력합니다.

<uses-permission android:name="android.permission.INTERNET"/> 

이 코드를 입력하면 안드로이드 폰에서 인터넷을 여는 것을 허용한다는 것을 의미하며, 이를 바탕으로 해서 웹뷰에서 인터넷 홈페이지를 열 수 있는 것입니다.

마지막에 있는 /은 입력하지 않아도 안드로이드 스튜디오에서 자동으로 </use-permission>이라는 문구가 자동으로 추가되는 것도 확인을 했습니다. 이것으로 보아서 이 부분은 사용자가 허락한다 라는 부분을 끝이라고 표시하는 기능을 하는 듯 합니다.

다음으로 main_activity.xml로 돌아와서 Design탭을 엽니다. 그 다음에는 웹뷰의 상단을 살짝 끌어내리고, 버튼 3개가 들어갈 만한 공감을 만들어 줘서 추가합니다.

버튼의 텍스트에는 각각 [뒤로], [새로고침], [앞으로]라고 property 윈도우의 텍스트 항목에서 일일히 타이핑해서 집어 넣었으며, 가로로 나란히 배열하였습니다.

각각 버튼의 ID를 확인한 이후에는 MainActivity.java에다가 다음과 같이 코딩을 시작합니다. 앞서 해 두었던 web.loadUrl("http://m.daum.net"); 란 줄 아래에다가 다음과 같이 코드를 추가합니다.

Button btn1 = (Button)findViewById(R.id.button1);

Button btn2 = (Button)findViewById(R.id.button2);

Button btn3 = (Button)findViewById(R.id.button3);

btn1.setOnClickListener(new View.OnClickListener(){

 public void onClick(View v){ 

        web.goBack();}

 }):

btn2.setOnClickListener(new View.OnClickListener(){

  public void onClick(View v){

        web.reload();}

});

btn3.setOnClickListener(new View.OnClickListener(){

  public void onClick(View v){

        web.goForward();

});

여기서 저는 안드로이드 스튜디오의 편리한 기능을 이제서야 알았습니다. 우선 코딩을 할때 저 위의 내용을 다 입력할 필요가 없이 OnClickListener()를 입력한다고 하면, 그냥 On만 타이핑 합니다.

그럼 여기서 위 스크린샷에 보이는 것과 같이 목록이 뜨는데, 키보드의 방향키만 가지고서 아래위로 움직이면서 원하는 문구를 선택하면 나머지는 자동으로 완성이 되어 줍니다. 실제로 제 경우에는 public void onClick(View v)까지 자동으로 알아서 완성시켜 주는  것을 확인할 수 있었습니다.

코딩이 완료되면 USB케이블을 연결해서 갤럭시 S2에서 실제로 앱이 작동되는지를 알아보았고, 그 결과가 옆의 스크린샷입니다.

미약하게나마 그럭저럭 작동을 하는 웹뷰를 만드는 데 성공하였습니다. 일단 책에서는 View.OnClickListener부분을 그냥 OnClickListener만 입력하고서 그대로 넘어간 듯 합니다만, 아마 이렇게만 입력하고 나서 Alt + Enter키를 누르면 자동으로 수정되는 기능을 알려주려 했는 것이 아닌가 하는 생각이 듭니다.

실제로 제 경우에는 그냥 On만 입력해서 자동완성 기능을 사용하니, View. 라는 부분이 알아서 완성이 되는 것을 볼 수 있었습니다.

이번에는 큰 어려움이 없이 그런대로 무난하게 실습이 완료가 된 것 같습니다. 하지만 앞으로의 실습에는 무엇이 있을 지 모르지만, 그래도 가끔이나마 독학으로 공부하는데 잘 넘어가 주는 부분이 있다는 것이 얼마나 좋은지 모르겠습니다.

이걸로 이번 포스팅을 마치도록 하겠습니다.