[날지 무한코딩] 안드로이드 스튜디오 계산기 만들기 #1

오늘은 계산기 어플리케이션을 만들어 보도록 하겠습니다. 

계산기는 어떠한 컴퓨터 언어를 사용하든 초반 예제로 대부분 사용을 하는듯 합니다.

여타 언어들로 계산기를 구성하는 것은 한가지의 언어로만 작성하기 때문에 쉽게 느껴지지만 안드로이드는 상황이 조금 다릅니다. 우선 UI를 구성하고 UI와 관련된 여러 위젯들의 기능을 다시 java로 구성을 해야되기 때문에 두번 일을 하는듯한 느낌이며, 제 경험상 초반에 개념을 잘 못 잡으면 결국 애플리케이션이 산으로 가고 마는게 안드로이드 개발인것 같습니다.

각설하고!, 프로젝트를 새로 생성하고 화면구성부터 시작해야겠죠? 

저는 이렇게 화면을 구성했습니다. 아래에 xml코드가 있긴 하지만 보기전에 혼자 해보는게 더 중요합니다!

코딩에 있어서 답은 하나가 아니기 때문에 코드를 보기전에 직접 한번 짜보시는걸 권장합니다!

힌트 키워드를 드리자면, LinearLayout, EditText, TableLayout입니다.

그럼 이제 Layout을 클릭하고 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"
    android:orientation="vertical"
    tools:context="com.tistory.redmuffler.blog_calculater.MainActivity">
 
    <EditText
        android:layout_width="match_parent"
        android:layout_height="50dp"
          android:id="@+id/edit" />
 
    <TableLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:stretchColumns="0,1,2,3">
 
        <TableRow android:layout_weight="1">
 
            <Button
                android:id="@+id/b_num7"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:onClick="num"
                android:text="7" />
 
            <Button
                android:id="@+id/b_num8"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:onClick="num"
                android:text="8" />
 
            <Button
                android:id="@+id/b_num9"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:onClick="num"
                android:text="9" />
 
            <Button
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="/" />
        </TableRow>
 
        <TableRow android:layout_weight="1">
 
            <Button
                android:id="@+id/b_num4"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:onClick="num"
                android:text="4" />
 
            <Button
                android:id="@+id/b_num5"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:onClick="num"
                android:text="5" />
 
            <Button
                android:id="@+id/b_num6"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:onClick="num"
                android:text="6" />
 
            <Button
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="*" />
        </TableRow>
 
        <TableRow android:layout_weight="1">
 
            <Button
                android:id="@+id/b_num1"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:onClick="num"
                android:text="1" />
 
            <Button
                android:id="@+id/b_num2"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:onClick="num"
                android:text="2" />
 
            <Button
                android:id="@+id/b_num3"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:onClick="num"
                android:text="3" />
 
            <Button
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="-" />
        </TableRow>
 
        <TableRow android:layout_weight="1">
 
            <Button
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="del" />
 
            <Button
                android:id="@+id/b_num0"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:onClick="num"
                android:text="0" />
 
            <Button
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="=" />
 
            <Button
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="+" />
        </TableRow>
 
    </TableLayout>
 
</LinearLayout>
 

저는 이렇게 xml코드를 구성했습니다. 오늘은 EditText에 숫자가 출력되게 하는것이 목표기 때문에 기타연산자에는 특별히 id값을 주지 않았습니다. 그리고 num이라는 onClick값으로 숫자를 다 묶어서 하나의 메소드안에서 button 이벤트를 처리할 계획입니다.

특별한 위젯의 속성을 말씀드리자면, 

android:orientation="vertical"    LinearLayout을 사용할때 반듯이 필요한 속성값입니다. LinearLayout은 쉽게 말해서 위젯을 가로 또는 세로로 정렬하는 레이아웃입니다. 때문에 속성값또한 vertical, horizontal 두개뿐입니다.

android:layout_weight="1"   이 기능은 소속된 layout의 비율을 조정해주는 기능입니다. 같은 위치(예를 들면 a, b 둘 다 하나의 LinearLaout에 속하는 경우)에 있고, 이 기능을 부과하는 위젯들끼리 비율을 조정해줍니다.

 

android:stretchColumns="0,1,2,3"  이 기능은 밑에 TableLayout의 칼럼의 간격을 조정하는 기능입니다. 좌측에서부터 0부터 시작을 합니다. 

설명을 적어도 쉽게 설명을 못해드리는점 양해바랍니다ㅠ 작성자가 도대체 뭔소리를 하는지 모르겠다 싶으시면 안드로이드 디벨로퍼 에 접속하셔서 각 위젯들과 속성값을 보실 수 있습니다!!

이제 그럼 java 소스를 보도록 합시다.

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.EditText;
 
public class MainActivity extends AppCompatActivity {
 
    EditText editText;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        editText  = (EditText)findViewById(R.id.edit);
    }
 
    public void num(View v){
        switch (v.getId()){
            case R.id.b_num0:
                editText.append("0");
                break;
            case R.id.b_num1:
                editText.append("1");
                break;
            case R.id.b_num2:
                editText.append("2");
                break;
            case R.id.b_num3:
                editText.append("3");
                break;
            case R.id.b_num4:
                editText.append("4");
                break;
            case R.id.b_num5:
                editText.append("5");
                break;
            case R.id.b_num6:
                editText.append("6");
                break;
            case R.id.b_num7:
                editText.append("7");
                break;
            case R.id.b_num8:
                editText.append("8");
                break;
            case R.id.b_num9:
                editText.append("9");
                break;
        }
    }
}
 

우선 EditText를 editText로 선언해주고 editText가 어떤 id를 갖는 친구인지 findViewById를 사용해서 선언을 해줍니다. - 9번줄, 16번줄

9번줄에 선언을 하는 이유는 다른 메소드도 editText를 사용할 수 있도록 하기 위해서겠죠!

그리고 저번에 배운 onClick을 사용해서 버튼을 누르면 숫자가 출력되도록 하겠습니다. (onClick 사용법 : http://redmuffler.tistory.com/427)

19번줄. View를 쓰면 아마 빨간색으로 글자가 표시되고 줄이 그어질겁니다. 이 문제는 View를 Import하지 않아서 생기는 현상입니다. Alt+Enter를 누르면 되지만 처음엔 모든것이 낯설기 때문에 밑에서 설명을 해드리겠습니다. (필자가 이 문제를 처음 접할 때 3시간 헤맨건 비밀) 

그리고 switch 문을 사용해서 case 조건에는 각 버튼의 id 값을 입력합니다. 저는 append를 이용해서 editText에 문자를 추가하는 방법으로 구현을 했습니다. 

실행화면입니다. 참 쉽죠잉~~~

내일은 연산자버튼에 기능을 추가해서 계산이 가능한 계산기를 만들어 보도록 하겠습니다. 수고하셨습니다!!

---

--View가 빨간색으로 표시되어 있을때--

요렇게 뜰겁니다. 바로 Alt + Enter를 누르면 import가 되지만 타이밍을 놓칠수도 있습니다.

그러면 그냥 View로 커서를 이동시키고 Alt + Enter를 누릅니다. 그럼 위 사진처럼 창이 뜰건데 저기서 import class를 누르면 됩니다!

상단에 보시면 import android.view.View가 추가된것을 확인 할 수 있습니다!

추가적으로 말씀을 드리자면 java 소스에서 문자가 회색으로 변하는건 해당 변수 또는 메소드를 사용하지 않았다고 표시해주는것이고 빨간색으로 표시되면 어딘가 문제가 있다고 표시하는겁니다. 빨간색이 무서운 겁니다 여러분..ㅠㅠ