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

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

Author : Jino Bae / Send Mail

안드로이드 스튜디오의 아주 기초적인 내용을 다뤄보며 레이아웃에 어떻게 위젯을 배치하는지 배치한 레이아웃을 소스코드에서 어떻게 제어하는지 알아보고 더하기 뺄셈이 가능한 계산기를 만들어 보겠습니다. 계산기계의 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로 출력되는 것을 확인할 수 있습니다.



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


Jino Bae
WRITTEN BY

Jino Bae

Digital is a purely man-made playground. That's why I like.
im@baejino.com


comments powered by Disqus