[안드로이드] 4. 두 번째 예제 - 버튼과 메시지

두 번째 예제 - 버튼과 메시지

---

버튼을 클릭하면 메시지를 출력하는 앱을 만들어 봅시다.

시작화면에는 버튼이 보입니다.

[그림] 시작화면

버튼을 클릭하면 "안녕하세요." 메시지가 화면에 나타납니다.

[그림] 버튼 클릭시 메시지 표시

1. 프로젝트 생성
안드로이드 스튜디오 메뉴 [File]=>[New Project]를 선택하세요.
Create new Project 창이 뜨면 Application Name을 결정합니다.
프로젝트 이름은 Ex_Button 으로 정할게요.

[그림] 프로젝트 이름 결정

 
Target Android Devices 창이 뜨면 자신에게 적합한 장치를 선택하세요.

[그림] 장치 선택

Add an activity to Mobile 창이 뜨면 Blank Activity를 선택하여 Next를 누르세요.

[그림] Activity 선택

Customize the Activity 창이 뜨면 Finish 버튼을 누릅니다.

[그림] 프로젝트 생성 완료

2. 화면 배치
프로젝트 트리에서 [res]=>[layout]=>[content_main.xml]을 선택하세요. 

[그림] content_main.xml 선택

content_main.xml 탭 페이지에서 Text를 선택하면 배치에 관한 xml 코드를 확인할 수 있습니다.
디폴트로 작성한 코드를 모두 삭제하고 다음처럼 입력하세요.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
   
    <Button
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:id="@+id/btn1"
        android:text="눌러봐" />
< /LinearLayout>
 
Design 탭을 통해 화면 배치 상태를 확인할 수 있습니다.

[그림] 화면 배치 확인

3. 소스 편집
프로젝트 트리에서 java 서브 항목에 MainActivity를 선택하세요.

[그림] 프로젝트 트리에서 MainActivity 선택

그리고 아래처럼 onCreate 메서드의 일부 구문을 제외한 나머지 부분을 제거합니다.
package kr.co.ehclub.exbutton;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}
 
화면 배치에서 사용한 Button 형식의 멤버 btn1을 선언하세요.
Button 부분에 커서를 위치한 후에 Alt + Enter를 누르면 자동 팝업 창이 뜹니다. 여기에서는 Import class를 선택하세요.

[그림] 자동 팝업 창에서 import class 선택

자동으로 import android.widget.Button; 코드를 추가하는 것을 볼 수 있습니다.
 
그리고 OnCreate 메서드에 버튼 개체를 설정하는 코드를 추가합니다.
화면 배치에서 사용한 것으로 설정할 때는 findViewById 메서드를 사용합니다.
btn1 = (Button)findViewById(R.id.btn1);
 
현재까지 작성한 코드 내용은 다음과 같습니다.
package kr.co.ehclub.exbutton;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {
    Button btn1;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        btn1 = (Button)findViewById(R.id.btn1);
    }

}
 
이제 btn1에 클릭했을 때 수행할 이벤트 메서드를 지정합시다.
onCreate 메서드에 btn1을 설정한 코드 뒤에 btn1.setOnCl 처럼 입력하면 아래처럼 팝업 메뉴가 뜨고 원하는 것을 선택하면 코드를 자동으로 완성합니다.

[그림] 자동 완성 기능 사용

 
그리고 메서드 입력 인자 부분에 new View.On처럼 입력하여 팝업 메뉴에서 원하는 것을 선택하여 자동 완성하세요.
현재까지의 코드는 다음과 같습니다.
package kr.co.ehclub.exbutton;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {
    Button btn1;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        btn1 = (Button)findViewById(R.id.btn1);

        btn1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

            }
        });
    }
}
 
마지막으로 메시지를 출력하는 코드를 다음처럼 입력하세요.
package kr.co.ehclub.exbutton;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {
    Button btn1;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        btn1 = (Button)findViewById(R.id.btn1);

        btn1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(getApplicationContext(),"안녕하세요.",Toast.LENGTH_SHORT).show();
            }
        });
    }
}
 
4. 코드 설명
package kr.co.ehclub.exbutton;
패키지 이름으로 자동으로 작성한 코드입니다.
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;
사용하는 형식 이름을 위해 사용하는 구문입니다. 사용하는 형식 이름에 빨간색이 보일 때 커서를 이동하여 Alt + Enter로 자동 완성합니다.
public class MainActivity extends AppCompatActivity {
화면을 표시하는 Main 클래스입니다.
    Button btn1;
멤버 변수입니다.
    @Override
기반 클래스에 정의한 메서드를 재정의할 때 사용하는 코드입니다.
    protected void onCreate(Bundle savedInstanceState) {
MainActivity를 생성할 때 수행하는 이벤트 핸들러입니다.
        super.onCreate(savedInstanceState);
기반 형식의 onCreate 메서드를 호출하는 구문입니다.
        setContentView(R.layout.activity_main);
MainActivity의 컨트롤 배치한 것을 화면에 표시합니다.
        btn1 = (Button)findViewById(R.id.btn1);
content_main.xml 에서 배치한 btn1 컨트롤을 멤버 btn1 변수에 설정하는 구문입니다.
        btn1.setOnClickListener(new View.OnClickListener() {
btn1을 클릭하였을 때 수행할 이벤트 핸들러를 설정하는 구문입니다.
            @Override
            public void onClick(View v) {
                Toast.makeText(getApplicationContext(),"안녕하세요.",Toast.LENGTH_SHORT).show();
실제 이벤트 핸들러에서 수행할 코드로 메시지를 출력하는 구문입니다.
            }
        });
    }
}

---

관련 게시글

[안드로이드] 1. 개발환경 - JDK 설치

[안드로이드] 2. 개발환경 - 안드로이드 Studio 설치

[안드로이드] 3. 첫 번째 앱 - Hello Android