안드로이드 스튜디오로 계산기 어플 만들기

안드로이드 스튜디오로 계산기 어플 만들기

본 게시물은 하단 링크의 안드로이드 스튜디오 강좌 2강을 따라한 내용입니다.

https://www.youtube.com/watch?v=dk_AyDJL61g&t=138s

안드로이드 스튜디오에서 새 프로젝트를 열어서 res > layout > activity_main.xml 파일을 열어줍니다.

기본으로 들어있는 Hello World 글자는 선택해서 지워줍니다. 그리고 먼저 Text > Plain Text를 마우스로 끌어서 다음과 같이 화면에 넣어줍니다.

이 Plain Text는 첫번째 숫자를 입력할 칸입니다. 두 번째 숫자를 입력할 칸 또한 아래에 하나 더 Plain Text를 이용해 만들어 줍니다. 그래서 총,  Plain Text 2개, Button 4개, TextView 1개를 마우스로 끌어서 만들어 주면 다음과 같습니다.

그리고 각 요소를 클릭해서 우측에서 내용을 변경해줍니다. Plain Text의 ID를 number1, hint는 첫번째 숫자, text는 빈칸으로 만들어줍니다.

Button의 ID 를 addButton으로 작성하고, text에는 더하기라고 작성해줍니다. 나머지 버튼도 다음과 같이 써줍니다.

ID:  addButton

text:  더하기

ID: subtractButton

text: 빼기

ID: multiplyButton

text: 곱하기

ID: divideButton

text: 나누기

TextView에는 ID를 result라고 적어주고, text는 지워줍니다. 그리고 textAppearance 옆에 App.Compat.Display1 을 선택해주면

글자가 커집니다.

각 버튼에서 할 작업을 이제 MainActivity 코드에서 함수로 구현해주면 됩니다.

먼저, import 부분을 작성합니다.

그리고 필요한 함수들 ex) addClick(View v) 등도 하단에 작성해줍니다.

전체 코드 내용은 다음과 같습니다.

package comby1994.httpsgithub.my_application_1;

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

public class MainActivity extends AppCompatActivity {

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

    public void addClick(View v){
        EditText number1 = (EditText) findViewById(R.id.number1);
        EditText number2 = (EditText) findViewById(R.id.number2);
        TextView result = (TextView) findViewById(R.id.result);
        int n1 = Integer.parseInt(number1.getText().toString());
        int n2 = Integer.parseInt(number2.getText().toString());
        result.setText(Integer.toString(n1 + n2));
    }

    public void subtractClick(View v){
        EditText number1 = (EditText) findViewById(R.id.number1);
        EditText number2 = (EditText) findViewById(R.id.number2);
        TextView result = (TextView) findViewById(R.id.result);
        int n1 = Integer.parseInt(number1.getText().toString());
        int n2 = Integer.parseInt(number2.getText().toString());
        result.setText(Integer.toString(n1 - n2));
    }

    public void multiplyClick(View v){
        EditText number1 = (EditText) findViewById(R.id.number1);
        EditText number2 = (EditText) findViewById(R.id.number2);
        TextView result = (TextView) findViewById(R.id.result);
        int n1 = Integer.parseInt(number1.getText().toString());
        int n2 = Integer.parseInt(number2.getText().toString());
        result.setText(Integer.toString(n1 * n2));
    }

    public void divideClick(View v){
        EditText number1 = (EditText) findViewById(R.id.number1);
        EditText number2 = (EditText) findViewById(R.id.number2);
        TextView result = (TextView) findViewById(R.id.result);
        int n1 = Integer.parseInt(number1.getText().toString());
        int n2 = Integer.parseInt(number2.getText().toString());
        result.setText(Integer.toString(n1 / n2));
    }
}

원래 어플의 레이아웃이 보인 곳에서 하단에 보이는 Text 탭이나 마우스 오른쪽 버튼을 화면에 누르고 Go to xml을 클릭하면 xml 편집 화면으로 넘어갈 수 있습니다.

xml에서 <Button>들마다 android:onClick="addClick" 이런 식으로 아까 만든 함수 이름을 작성해줍니다. 전체 xml 코드는 다음과 같습니다.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    tools:layout_editor_absoluteY="81dp">

    <EditText
        android:id="@+id/number1"
        android:layout_width="wrap_content"
        android:layout_height="58dp"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="46dp"
        android:layout_marginBottom="56dp"
        android:ems="10"
        android:hint="첫 번째 숫자"
        android:inputType="textPersonName"
        app:layout_constraintBottom_toBottomOf="@+id/number2"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <EditText
        android:id="@+id/number2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="114dp"
        android:ems="10"
        android:hint="두 번째 숫자"
        android:inputType="textPersonName"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="69dp"
        android:layout_marginLeft="69dp"
        android:layout_marginBottom="128dp"
        android:text="Name"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toEndOf="parent" />

    <Button
        android:id="@+id/addButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="15dp"
        android:layout_marginRight="15dp"
        android:onClick="addClick"
        android:text="더하기"
        app:layout_constraintBaseline_toBaselineOf="@+id/subtractButton"
        app:layout_constraintEnd_toStartOf="@+id/subtractButton" />

    <Button
        android:id="@+id/subtractButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="22dp"
        android:onClick="subtractClick"
        android:text="빼기"
        app:layout_constraintBottom_toTopOf="@+id/multiplyButton"
        app:layout_constraintStart_toStartOf="@+id/divideButton" />

    <Button
        android:id="@+id/multiplyButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="15dp"
        android:layout_marginRight="15dp"
        android:layout_marginBottom="39dp"
        android:onClick="multiplyClick"
        android:text="곱하기"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/divideButton" />

    <Button
        android:id="@+id/divideButton"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_marginTop="12dp"
        android:onClick="divideClick"
        android:text="나누기"
        app:layout_constraintBottom_toBottomOf="@+id/multiplyButton"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/subtractButton" />

    <TextView
        android:id="@+id/result"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="25dp"
        android:layout_marginLeft="25dp"
        android:layout_marginTop="50dp"
        android:textAppearance="@style/TextAppearance.AppCompat.Display1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/number2" />
</android.support.constraint.ConstraintLayout>

혹시 다음과 같은 에러메세지가 뜨고 컴파일이 되지 않는다면 (컴파일 되지 않는 가장 큰 원인은 오타이기 때문에 오타를 먼저 확인해야 합니다 ㅠㅠ!!) Missing Constraints in ConstrainLayout 위에 표시한 버튼 (Infer Constraints) 을 클릭합니다!

run을 돌려서 동작을 확인해봅니다!

끝!

오류 메세지 해결 방법

https://stackoverflow.com/questions/47778506/getting-error-missing-constraints-in-constraintlayout