2015년 11월 23일 월요일

[안드로이드 스튜디오] 3.이것저것 바꿔보기

목차

0.서론


이번에는 새 프로젝트를 생성하여, 이것저것 바꿔보며 각 항목들의 역할을 조금이나마 알아볼 것입니다.


1.프로젝트 생성하기



기본설정으로 놓고 설정을 하지만, 프로젝트 종류를 Empty Activity로 합니다.

//사진0
프로젝트가 생성되면 이런 형태일 것입니다,.

이 중 좌측 화면( 없다면 좌측의 Project를 누르거나 Alt + 1로 Project 화면을 엽니다.)을 볼 것입니다.


트리 형식으로 구성되어 있으며, 우리가 이용할 부분은 Java 내부의 MainActivity.java와 res안쪽의 layout또는 values정도가 될 것입니다.
minimap에는 안드로이드 사진이 들어 있습니다. 앱 아이콘 모양이 됩니다.

2.버튼 만들기


몇가지를 변경하기 위해서는 일단 레이아웃을 변경해야 하므로 layout내부의 activity_main.xml파일을 보겠습니다.
(혹시 글로 보인다면 아래쪽의 Text와 Design탭 중 Design을 눌러 변경하세요.)
안드로이드 스튜디오에서는 xml파일을 이용하여 레이아웃을 나타냅니다.


화면의 우측 하단에 보면 Properties 즉 속성 화면이 있습니다.
화면의 Hello World라는 글을 클릭한 후 Properties에서 스크롤하여 
text라는 속성을 보면, Hello World또는 @string/hello_world라고 되어 있을 것입니다.
@string/hello_world는 string파일에 있는 hello_world라는 변수의 값을 사용하는 것이고, 바로 글자가 있다면 그냥 그 글을 바로 사용하는 것입니다.
이 값을 수정하면 화면의 글이 변경됩니다.




이번엔 text로 되어있는 화면을 살펴보겠습니다.
xml 화면중의 TextView부분이 아까의 글상자부분을 나타냅니다.


<TextView android:text="Hello World!" android:layout_width="wrap_content"    android:layout_height="wrap_content" />

속성이 나타나 있는데, text 는 아까 봤던대로 Hello World가 쓰여 있고(변경했다면 변경한대로),
width와 height는 wrap_content로 안에 있는 글의 양에 따라 크기가 딱 맞게 조절됩니다.


글상자를 버튼으로 바꾸어 보겠습니다.
위의 사진과 같이 TextView를 Button으로 변경시킨 후 오른쪽 Preview를 보면
글상자가 버튼으로 변경됩니다. (Preview가 없다면 오른쪽 탭을 눌러보세요)
그럼 다시 Design탭으로 돌아갑니다.


조금 간단한, 안드로이드 스튜디오에서 제공하는 방법으로 버튼을 생성해 보겠습니다.
좌측 Palette의 Widgets 항목 아래에 있는 Button을 끌어다가 화면에 놓습니다.

P.S. 화면에 나타나는 초록색 화살표는 현재 레이아웃 방식인 Relative Layout에서의 배치 방식으로, 다른 항목과의 상대적인 위치로 항목의 위치를 나타내는 것입니다. 나중에 Layout을 하면서 다시 다루겠습니다.


다시 오른쪽 Properties를 보고, text에서 New Button을 "확인"으로 변경해봅시다.
화면에 확인으로 바뀐 것을 보고 다음 단계로 넘어갑니다.

3.onButtonClick 함수 생성

버튼이라면, 버튼의 역할을 수행하여야겠죠
버튼을 눌렀을때 효과가 나타나도록 해 봅시다.



확인이 적힌 버튼을 누르고, Properties에서 onClick을 찾아서 onButtonClicked라는 값을 넣습니다.



자바 코드에 가서 onButtonClicked라는 함수를 추가합니다.

protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
}


아래에

public void onButtonClicked(View v) 를 추가합니다


onButtonClicked함수를 추가하면 View위에 alt+enter를 누르라는 알림이 뜰것입니다.
여기서 alt + enter 를 누르면 위의 import에 자동으로 View가 추가되게 됩니다.



그림에서 상단에 import android.view.View;  추가되어있는 것을 볼 수 있습니다.


버튼을 눌렸을때의 효과를 주기 위해 Toast메시지를 이용할 것입니다.
Toast메시지는 화면 하단에 생성되어 잠깐 있다가 사라지는 메시지입니다.

중괄호를 이용하여 아래와 같이 입력합니다.
public void onButtonClicked(View v){
    Toast.makeText(getApplicationContext(),"button is clicked", Toast.LENGTH_LONG).show();
}


어떻게 되는지 알기 위해서 에뮬레이터를 이용해서 확인 해 보겠습니다.
그림의 빨간색으로 표시해 놓은 run 또는 shift + F10을 이용하여 실행합니다.

실행하기 전 저번에 만든 에뮬레이터가 실행되고 있거나 휴대폰이 usb디버깅을 이용한 연결이 되어있어야 합니다.


잠시 기다리면 이런 화면이 뜹니다.
사용할 기기를 선택하고 OK버튼을 누릅니다.


화면이 전환되면서 이런 화면이 뜨게 됩니다.
"확인" 버튼을 누르면


아까 프로그래밍 했던 대로 하단에 Toast가 뜨게 됩니다.

버튼을 생성하고, Toast메시지를 띄웠습니다.
다음 내용은 다음 게시글에서 다루겠습니다. 감사합니다.

Next : [안드로이드 스튜디오] 4.뷰 - 위젯과 레이아웃

댓글 1개:

  1. 혹시 하는데 design 탭이 없어진경우 어떻게 해야하나요?? Design text 둘중하나골라야하는데 그냥 소스파일만 보이네요

    답글삭제