컴퓨터공학/안드로이드(Android)

1. 버튼 생성, 새 페이지 추가, 웹뷰 띄우기

Jake217 2017. 6. 26. 01:12

안녕하세요, 자마린과 안드로이드 스튜디오를 비교하기 위해서
자마린에서 했던 똑같은 기능들을 Android Studio에서 해보려고 합니다.
저번과 같이 말씀 드렸지만, basic한 기능을 소개드리고 싶어서 포스팅 하게 됐습니다.
시작해볼까요?

우선, 시작하기에 앞서 Android Studio는 요기 아래 링크에서 설치 가능합니다.



버튼생성, 새 페이지 추가 그리고 웹뷰 띄우기를 해보겠습니다!
A->B->C 모두 이어지는 내용이니 잘 따라오시면 되겠습니다.
(옛날에 제가 만들어서 네이버 블로그에 올렸던 거 여기다 옮깁니다ㅎㅎ2017.06.26)


먼저 Android studio를 실행 시킨 뒤, 새 프로젝트를 생성해야 겠지요?
캡쳐본에는 프로젝트 이름이 My Application라고 default 값으로 되어 있을때 캡쳐했지만
저는 Test라는 이름으로 만들었습니다.


프로젝트 이름을 정하셨으면 템플릿을 정해주시면 되는데요.
저는 깔끔하게! Empty Activity로 설정하였습니다.


자, 이렇게 왼쪽 목록에 여러 파일들이 생성되었음을 확인 하실 수 있습니다.
첫번째 기능인 "버튼 생성"을 해야하니 빨간 네모로 쳐져있는 activity_main.xml로 가보겠습니다.


activity_main.xml을 누르셨는데 이 화면이 안뜨신다면
왼쪽 아래 빨간색으로 체크되어 있는 'Text'말고 옆에 'Design'을 누르시면 이 화면을 확인 하실 수 있습니다.
자 옆에 Palette에서 원하시는 항목을 Drag & Drop하시면 됩니다.

우리는 버튼생성이니 버튼을 원하는 위치에 끌어다가 놓습니다!
버튼 하나를 클릭하면 우측에 빨간 네모로 쳐져있는 Properties에서 버튼의 ID, 가로세로 길이, 색깔, 내용
등등 여러가지 세부사항을 지정하실 수 있습니다.

다 하신 뒤 'Text'탭 버튼 클릭!


그곳에 가보시면 <RelativeLayout ~~ xxx> </RelativeLayout>
이렇게 되어있는데 </RelativeLayout> 윗부분에
쓴적도 없는데 자동으로 이 코드들이 생성됨을 확인하실 수 있습니다.

<Button
    android:text="NEW PAGE"
    android:textColor="#ffffff"
    android:textSize="30sp"
    android:layout_marginTop="23dp"
    android:id="@+id/NewPage"
    android:layout_height="200dp"
    android:layout_width="match_parent"
    android:background="@android:color/holo_blue_light"
    android:layout_alignParentTop="true"
    android:layout_alignParentStart="true"
    android:onClick="onClick"/>

<Button
    android:text="GOOGLE.COM"
    android:textColor="#ffffff"
    android:textSize="30sp"
    android:layout_height="200dp"
    android:id="@+id/Google_Com"
    android:layout_width="match_parent"
    android:layout_marginTop="25dp"
    android:layout_below="@+id/NewPage"
    android:layout_alignParentStart="true"
    android:onClick="onClick2"/>
여러분이 우측에 Properties에서 세부사항을 지정하셨다면
그에 맞게 이런 코드들이 생성되었을 것입니다.

버튼 생성 참 쉽죠?


그치만 버튼만 있으면 뭐하겠습니까..기능이 있어야지!
이제 2번째 단계인 버튼을 눌러서 새로 추가한 페이지로 이동하는 법을 보겠습니다.
java폴더 밑에 첫번째 폴더에 우클릭하신후 New->Java Class를 클릭합니다.


새로운 페이지이므로 클래스 이름을 NewPage로 저는 지정하였습니다.

public class NewPage extends Activity {
    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.page1);

    }
}


새 페이지를 간단히 꾸며서 표시해놔야
버튼을 눌렀을 때, 내가 만든 페이지로 이동하는지 확인이 가능하겠지요?

이번엔 res->layout으로 이동하셔서 그곳에서 우클릭 후, Layout resource file을 클릭합니다.


저는 그냥 간단히 page1로 지정하였습니다.


Xamarin강의에서 했던 것처럼 여기도 똑같이 단순히 "Hi"라는 글자를 띄우겠습니다.
하시는 방법은 아까 버튼 생성했던 방법처럼
"Design"탭 누르셔서 TextView를 Drag&Drop하셔서 끌어 놓은 뒤
세부속성을 지정하시면 되겠습니다!


아까 만든 두 버튼 중 첫번째 버튼(NEW PAGE라고 쓰여진)을 눌렀을 때,
Hi라고 써있는(방금 만든) 페이지로 이동하기 위해서 연결을 해주어야 겠지요?

manifests->AndroidManifest.xml로 이동합니다.

그리고 빨간 네모로 쳐져있는 부분을 입력해서 activity를 추가해주시면 됩니다.!

<activity android:name=".NewPage"/>
 " 이 부분 안에는 .과 함께 클래스 이름을 넣어주시면 되겠습니다.
제 새 페이지의 클래스 이름은 NewPage여서 .NewPage가 들어가 있는겁니다


잘 따라오시고 있나요?
우선, activity_main.xml로 이동하시면 아까 만들었던 2개의 버튼들과 관련된 코드들이 있습니다.
거기서 NEW PAGE와 관련된 곳에가서
맨 밑에 한줄 추가합니다.
android:onClick="onClick"/>
저는 맨 마지막줄에 추가했기 때문에 />가 있는겁니다.
혹시 중간에 추가하시면 <Button 끝나는 부분에 />이걸로 제대로 닫히는지 확인하시기 바랍니다.


자 여기까지 하고 실행시켜 보면!
NEW PAGE라는 파란 버튼을 눌렀을 때, Hi라는 글자가 뜨는걸 보니
우리가 만든 페이지로 잘 이동하셨음을 확인 할 수 있습니다.



이제 두번째 버튼(GOOGLE.COM)을 눌렀을 때,
새로 만든 페이지로 이동한 뒤 웹뷰를 이용하여 구글을 띄워보겠습니다.

우선 제일 중요한 작업인! 인터넷을 사용하겠다는 걸 명시해줘야 합니다.
manifests->AndroidManifest.xml에서 사진과 같은 위치에 빨간 네모로 쳐져있는 코드를 입력하셔야 합니다.

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


아까 했던 방식처럼 java->첫번째폴더->우클릭->New->Class에서 새로운 클래스 생성하시고
(저는 WebViewPage라고 이름지었습니다.)

그 후에, res->layout->New->Layout resource file 들어가셔서 새로운 리소스파일을 만드시면 됩니다.
(저는 web_view.xml 이라고 이름지었습니다.)


web_view.xml로 들어오셔서 "Design"탭에 Palette가보시면
WebView라고 있습니다. Drag&Drop하셔서 폰 화면이 꽉 차도록 잡아주세요.
우측상단에 Properties에서 ID부여도 잊지 말아주세요.(제 것은 webView)


WebViewPage.java에서는 다음과 같은 코드를 쓰셔야 합니다.
설명은 사진에 나와있습니다.

public class WebViewPage extends Activity{
    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.web_view);

        String url = "http://google.com";
        WebView webView =(WebView) findViewById(R.id.webView);
        webView.setWebViewClient(new WebViewClient());

        WebSettings webSettings = webView.getSettings();
        webSettings.setJavaScriptEnabled(true);
 
        webView.loadUrl(url);
    }

}


이제 실행시켜 보면 GOOGLE.COM이라는 회색 버튼을 눌렀을 때,
웹뷰에 Google 사이트가 나오는 것을 확인하실 수 있습니다!

Xamarin과 똑같은 기능 구현하는걸 만들어보았는데 조금 다르죠?
제가 지금 공강시간에 급하게 쓰는거라 조금 두서가 없었을지도 모르겠습니다.
다음번에도 유익한 내용으로 찾아뵙겠습니다!