안드로이드 스튜디오-그리드 레이아웃으로 간이 계산기 만들기

오늘은 그리드 레이아웃으로 간이 계산기를 만들어 보겠습니다!

 

 

 

 

애플리케이션 계획하기

 

 

제가 간단하게 만든 화면 디자인과 알고리즘의 방향입니다!

이런 식으로 정말 간단한 계산기를 한번 만들어 보겠습니다.

 

먼저 화면 디자인부터 해보겠습니다!

 

 

정말 간단하게만 해보았습니다.

이번 계산기 만들기에서 배울 것은 그리드 레이아웃을 사용하는 게 중점입니다.

코드 부분을 보여드리겠습니다.

<?xml version="1.0" encoding="utf-8"?>
<GridLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:columnCount="5"
    android:rowCount="9"
    tools:context=".MainActivity">


    <EditText
        android:layout_column="0"
        android:layout_row="0"
        android:id="@+id/Edit1"
        android:layout_columnSpan="5"
        android:layout_gravity="fill_horizontal"
        android:layout_span="4"
        android:hint="숫자1 입력" />


    <EditText
        android:id="@+id/Edit2"
        android:layout_row="1"
        android:layout_column="0"
        android:layout_columnSpan="5"
        android:layout_gravity="fill_horizontal"
        android:layout_span="5"
        android:hint="숫자2입력"
        />
    <Button
        android:id="@+id/btnNum0"
        android:layout_column="0"
        android:layout_row="3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="0" />


    <Button
        android:id="@+id/btnNum1"
        android:layout_column="1"
        android:layout_row="3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="1" />


    <Button
        android:id="@+id/btnNum2"
        android:layout_column="2"
        android:layout_row="3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="2" />


    <Button
        android:id="@+id/btnNum3"
        android:layout_column="3"
        android:layout_row="3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="3" />


    <Button
        android:id="@+id/btnNum4"
        android:layout_column="4"
        android:layout_row="3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="4" />


    <Button
        android:id="@+id/btnNum5"
        android:layout_column="0"
        android:layout_row="4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="5" />


    <Button
        android:id="@+id/btnNum6"
        android:layout_column="1"
        android:layout_row="4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="6" />


    <Button
        android:id="@+id/btnNum7"
        android:layout_column="2"
        android:layout_row="4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="7" />


    <Button
        android:id="@+id/btnNum8"
        android:layout_column="3"
        android:layout_row="4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="8" />


    <Button
        android:id="@+id/btnNum9"
        android:layout_column="4"
        android:layout_row="4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="9" />


    <Button

        android:id="@+id/btnAdd"
        android:layout_columnSpan="5"
        android:layout_gravity="fill_horizontal"
        android:layout_row="5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        android:text="더하기" />





    <Button
        android:id="@+id/btnSub"
        android:layout_columnSpan="5"
        android:layout_gravity="fill_horizontal"
        android:layout_row="6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        android:text="빼기" />





    <Button
        android:id="@+id/btnMul"
        android:layout_columnSpan="5"
        android:layout_gravity="fill_horizontal"
        android:layout_row="7"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        android:text="곱하기" />





    <Button
        android:id="@+id/btnDiv"
        android:layout_columnSpan="5"
        android:layout_gravity="fill_horizontal"
        android:layout_row="8"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="나누기" />





    <TextView
        android:id="@+id/textResult"
        android:layout_columnSpan="5"
        android:layout_gravity="fill_horizontal"
        android:layout_row="5"
        android:layout_margin="5dp"
        android:textColor="#FF0000"
        android:textSize="20dp"
        android:text="계산결과 :" />


</GridLayout>

 

이제 디자인된 계산기에 기능을 넣어야겠죠?

 

기능적인 부분은 코드를 보여주면서 설명드리겠습니다.

 

코드 부분

package org.techtown.tistory_layout;

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;

import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {
    EditText edit1,edit2;
    Button btnAdd,btnSub,btnMul,btnDiv;
    TextView textResult;
    String num1,num2;
    Integer result;
    Button[] numButtons=new Button[10];
    Integer[] numbtnIds = {R.id.btnNum0,R.id.btnNum1,R.id.btnNum2,R.id.btnNum3,R.id.btnNum4,R.id.btnNum5,R.id.btnNum6,
            R.id.btnNum7,R.id.btnNum8,R.id.btnNum9};
    int i;

    @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);
        btnMul = findViewById(R.id.btnMul);
        btnDiv = findViewById(R.id.btnDiv);

        textResult = findViewById(R.id.textResult);

        btnAdd.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                num1 = edit1.getText().toString();
                num2 = edit2.getText().toString();
                result = Integer.parseInt(num1)
                        + Integer.parseInt(num2);
                textResult.setText("계산결과 : " + result.toString());
            }
        });
       btnSub.setOnClickListener(new View.OnClickListener() {
           @Override
           public void onClick(View view) {
               num1 = edit1.getText().toString();
               num2 = edit2.getText().toString();
               result = Integer.parseInt(num1)
                       - Integer.parseInt(num2);
               textResult.setText("계산결과 : " + result.toString());
           }
       });
       btnDiv.setOnClickListener(new View.OnClickListener() {
           @Override
           public void onClick(View view) {
               num1 = edit1.getText().toString();
               num2 = edit2.getText().toString();
               result = Integer.parseInt(num1)
                       * Integer.parseInt(num2);
               textResult.setText("계산결과 : " + result.toString());
           }
       });
       btnMul.setOnClickListener(new View.OnClickListener() {
           @Override
           public void onClick(View view) {
               num1 = edit1.getText().toString();
               num2 = edit2.getText().toString();
               result = Integer.parseInt(num1)
                       / Integer.parseInt(num2);
               textResult.setText("계산결과 : " + result.toString());
           }
       });



        for (i = 0; i < numbtnIds.length; i++) {
            numButtons[i] = findViewById(numbtnIds[i]);

        }
        for (i = 0; i < numbtnIds.length; i++) {
            final int index;
            index = i;

            numButtons[index].setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    if (edit1.isFocused() == true) {
                        num1 = edit1.getText().toString()
                                + numButtons[index].getText().toString();
                        edit1.setText(num1);


                    } else if (edit2.isFocused() == true) {
                        num2 = edit2.getText().toString()
                                + numButtons[index].getText().toString();
                        edit2.setText(num2);
                    } else {
                        Toast.makeText(getApplicationContext(), "먼저 에디트텍스트를 선택하세요.", Toast.LENGTH_SHORT).show();
                    }
                }
            });
        }
    }
}

전체 코드 부분입니다.

 

이제 부분적으로 설명을 드리겠습니다.

변수 선언 부분입니다.

눈에 띄는 것은 nubtnIds 부분입니다.

이는 숫자패드 버튼을 배열로 선언하여 묶어준 부분입니다

위젯과 연결해주는 부분입니다.

변수를 만들었으면 어플의 위젯과 연결해야 기능을 넣을 수 있습니다.

 

더하기 버튼의 기능 부분입니다.

만약 버튼을 클릭하면(setOnclickListener) num1(숫자 1)과 num2(숫자 2)의 값을 가져옵니다.

그리고result(계산 결과 변수)에 num1과 num2 더한 값을 넣고, 

textresult(계산 결과 텍스트 상자)에 해당 결과를 삽입합니다.

빼기, 곱하기, 나누기 부분은 위와 동일합니다.

 

숫자 버튼의 기능 부분입니다.

만약 버튼이 클릭되면edit1(숫자 1 텍스트 박스)에 있는 값과(이는 사용자가 직전에 숫자 버튼을 눌러 출력한 값)

현재 숫자버튼을 누른 값을 이어서 num1에 넣는 과정입니다.

여기서 중요한 점은 숫자 1 텍스트 박스와 숫자 2 텍스트 박스의 포커스 유무에 있습니다.

포커스가 됨으로써 현재 포커스가 된 텍스트 박스에 값을 넣을 수 있고, 

그에 따른 어떠한 텍스트 박스도 포커스 되지 않았을 때의 상황도 예외처리를 할 수 있습니다.

 

 

 

 

 

실행결과

어플이 구동된 모습입니다!