안드로이드 스튜디오 계산기 기초 (EditText, Toast)

안드로이드 스튜디오의 아주 기초적인 내용을 다뤄보며 레이아웃에 어떻게 위젯을 배치하는지 배치한 레이아웃을 소스코드에서 어떻게 제어하는지 알아보고 더하기 뺄셈이 가능한 계산기를 만들어 보겠습니다. 계산기계의 Hello World 쯤으로 생각하면 될 것 같습니다.


EditText와 Toast가 어떤건지 감이 안잡힌다고요? 먼저 아래에 완성된 어플리케이션의 동작화면을 보도록 하겠습니다. 너무 별거 없어 보인다고요? 시간이 지나면서 점점 발달하는 계산기를 마주할 수 있게 됩니다!






먼저 안드로이드 스튜디오에서 빈 프로젝트를 생성해 보시면 위와같은 디렉터리 구조를 볼 수 있습니다. Java 폴더의 소스코드에서는 어플리케이션의 동작을 만들고 리소스레이아웃에 있는 XML 파일에서는 사용자에 눈에 보이는 레이아웃을 만들 수 있습니다.


Layout


XML 파일의 하단에는 Design 탭과 Text 탭이 존재합니다. 우리는 기초적인 계산기를 만들 뿐이지만 오로지 Text 탭에서만 작성할 것입니다.



Text 탭으로 이동하였다면 위와같은 화면을 볼 수 있습니다. 배치된 TextView를 지우고 레이아웃을 삽입하도록 하겠습니다. 여기서 레이아웃은 화면이 어떻게 배치될지 설정하는 폼입니다. 바둑판으로 배치할 것인지 한 줄로 나열할 것인지 결정할 수 있죠. 지금은 LinearLayout을 이용하여 한 줄로 나열할 것입니다.

1
2
3
4
5
6
<LinearLayout
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center">
</LinearLayout>


어? 이거 CSS랑 비슷한데요?


조금 다르지만 그렇습니다. CSS를 공부한 적이 있다면 공부해본 속성을 입력해 보세요. 자동완성이 제공되기 때문에 원하는 레이아웃을 만드는데 무리가 없을 것입니다.

  • orientation : 리니어 레이아웃은 1열로 배치됩니다. 세로로 배치할지 가로로 배치할지 결정할 수 있습니다.
  • layout_width : 레이아웃의 너비를 결정합니다. match_parent는 부모의 크기에 맞춥니다. 즉 여기선 화면의 너비에 맞춘다는 의미입니다.
  • gravity : 말 그대로 중력을 의미합니다. center로 지정했으므로 가운데로 배치됩니다.



위 레이아웃을 한번 직접 만들어 보세요. 그리고 하단의 소스코드를 확인해 보세요.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<LinearLayout
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center">
    <EditText
        android:id="@+id/Edit1"
        android:layout_marginHorizontal="100dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
    <EditText
        android:id="@+id/Edit2"
        android:layout_marginHorizontal="100dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
    <Button
        android:id="@+id/BtnAdd"
        android:layout_marginTop="50px"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="더하기"/>
    <Button
        android:id="@+id/BtnSub"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="빼기"/>
</LinearLayout>


JAVA

이제 소스코드에서 생성한 레이아웃을 불러와 기능을 삽입하도록 하겠습니다. 레이아웃을 생성할때 우리는 각각의 id를 생성해 주었습니다. 소스코드에서 이 id를 읽어오기 위해선 findViewById(R.id.ID)를 사용하여 객체에 삽입하면 됩니다.


먼저 메인 액티비티안에 레이아웃에서 구성한 id를 삽입할 객체를 생성하도록 하겠습니다.

1
2
3
4
EditText Edit1, Edit2;
Button BtnAdd, BtnSub;
String str1, str2;
Integer result;

str1, str2에는 EditText에서 불러온 문자열을 넣을 것이고 result에는 정수로 변환된 str이 합쳐진 값을 삽입할 공간입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
public class MainActivity extends AppCompatActivity {

    EditText Edit1, Edit2;
    Button BtnAdd, BtnSub;
    String str1, str2;
    Integer result;

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

        Edit1 = findViewById(R.id.Edit1);
        Edit2 = findViewById(R.id.Edit2);
        BtnAdd = findViewById(R.id.BtnAdd);
        BtnSub = findViewById(R.id.BtnSub);
    }
}

현재까지 작성된 소스코드를 살펴보면 위와 같습니다. 참고로 처음 Button을 불러오는 경우 해당 패키지가 import되지 않은 상태라 빨간줄로 표시될 수 있습니다. Alt + Enter를 눌러서 자동으로 import 할 수 있습니다.


이제 읽어온 버튼에 클릭 리스너를 달아, 터치 했을 경우 덧셈이 된 결과가 Toast로 출력되는 기능을 만들어 보도록 하겠습니다. 해당 소스코드는 onCreate에 삽입합니다.

1
2
3
4
5
6
7
8
9
BtnAdd.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        str1 = Edit1.getText().toString();
        str2 = Edit2.getText().toString();
        result = Integer.parseInt(str1) + Integer.parseInt(str2);
        Toast.makeText(MainActivity.this, "더한 값은 " + result + "입니다.", Toast.LENGTH_SHORT).show();
    }
});

이제 어플리케이션을 실행해 보세요. 정상적으로 덧셈된 결과가 Toast로 출력되는 것을 확인할 수 있습니다.



뺄셈은 어떻게 구현할 수 있을까요? 직접 만들어 보세요!

WRITTEN BY

배진오

웹 개발자 지망생
im@baejino.com

comments powered by Disqus