[안드로이드 앱 만들기 레이아웃 예제] 3. 계산기 만들기

안드로이드 스튜디오 앱 만들기 계산기 레이아웃 예제

Layout을 활용하여 만든 간단한 레이아웃 UI입니다. 구현하려는 앱에 참고해보시기 바랍니다.
레이아웃을 사용 할 줄 안다면 누구나 쉽게 구현 할 수 있습니다.

TableLayout이 계산기 만들 때 자주 쓰인다고 했었는데요, 이번엔 테이블 레이아웃으로 계산기화면을 만들어 보겠습니다. (테이블 레이아웃 뿐 아니라 다른 레이아웃으로도 구현 가능합니다.)

 

1. 기획

테이블 레이아웃으로 일반적인 계산기를 만들어 볼 겁니다.
제대로 된 기획을 배우고 싶으시다면 이 글을 참고하시기 바랍니다.
[앱 비지니스] 기획의 개요 및 기획서 작성 방법

[앱 비지니스] 기획의 개요 및 기획서 작성 방법

 

2. 구조 분석

테이블레이아웃으로 만들것이기 때문에 뷰와 행을 설정해 줍니다. 계산기 자체가 복잡한 레이아웃이 아니기 때문에 간단하게 구현 가능합니다.

3. 프로그래밍

결과값을 보여 줄 창에는 TextView를 사용하고 버튼을 나열 할 행은 TableRow로 만들어 줍니다.

<?xml version="1.0" encoding="utf-8"?>
<TableLayout 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"
    tools:context=".MainActivity"
    >
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="4"
        android:text="0" />
    <TableRow
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">
        <Button
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="7" />
        <Button
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="8" />
        <Button
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="9" />
        <Button
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="2"
            android:text="AC" />
    </TableRow>
    <TableRow
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">
        <Button
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="4" />
        <Button
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="5" />
        <Button
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="6" />
        <Button
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="+" />
        <Button
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="x" />
    </TableRow>
    <TableRow
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

        <Button
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="1" />
        <Button
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="2" />
        <Button
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="3" />
        <Button
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="-" />
        <Button
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="÷"/>
    </TableRow>
    <TableRow
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

        <Button
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="0" />
        <Button
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="00" />
        <Button
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="." />
        <Button
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="2"
            android:text="=" />
    </TableRow>
</TableLayout>

 

4. 디자인

뷰의 속성에 margin과 gravity를 넣어주고 TextSize를 주어 깔끔하게 디자인을 마무리 해줍니다.

<?xml version="1.0" encoding="utf-8"?>
<TableLayout 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:layout_margin="10dp"
    tools:context=".MainActivity"
    >
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="4"
        android:textSize="80sp"
        android:background="#999999"
        android:gravity="bottom|right"
        android:text="0" />
    <TableRow
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">
        <Button
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:textSize="40sp"
            android:layout_weight="1"
            android:text="7" />
        <Button
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:textSize="40sp"
            android:layout_weight="1"
            android:text="8" />
        <Button
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:textSize="40sp"
            android:layout_weight="1"
            android:text="9" />
        <Button
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="2"
            android:textSize="40sp"
            android:text="AC" />
    </TableRow>
    <TableRow
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">
        <Button
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:textSize="40sp"
            android:layout_weight="1"
            android:text="4" />
        <Button
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:textSize="40sp"
            android:layout_weight="1"
            android:text="5" />
        <Button
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:textSize="40sp"
            android:layout_weight="1"
            android:text="6" />
        <Button
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:textSize="40sp"
            android:layout_weight="1"
            android:text="+" />
        <Button
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:textSize="30sp"
            android:layout_weight="1"
            android:text="x" />
    </TableRow>
    <TableRow
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

        <Button
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:textSize="40sp"
            android:layout_weight="1"
            android:text="1" />
        <Button
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:textSize="40sp"
            android:layout_weight="1"
            android:text="2" />
        <Button
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:textSize="40sp"
            android:layout_weight="1"
            android:text="3" />
        <Button
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:textSize="40sp"
            android:layout_weight="1"
            android:text="-" />
        <Button
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:textSize="40sp"
            android:layout_weight="1"
            android:text="÷"/>
    </TableRow>
    <TableRow
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

        <Button
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:textSize="40sp"
            android:layout_weight="1"
            android:text="0" />
        <Button
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:textSize="40sp"
            android:layout_weight="1"
            android:text="00" />
        <Button
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:textSize="40sp"
            android:layout_weight="1"
            android:text="." />
        <Button
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:textSize="40sp"
            android:layout_weight="2"
            android:text="=" />
    </TableRow>
</TableLayout>

이렇게 간단하게 일반적인 계산기 레이아웃이 완성 되었습니다. 계산기의 기능은 액티비티에서 프로그래밍하여 만들어 주면 됩니다.

꼭 순서대로 구현하지 않더라도 자신에게 맞는 방식으로 구현 해보시기 바랍니다.

테이블레이아웃으로 계산기 뿐만아니라 표 형식의 어떠한 레이아웃이라도 구현 가능합니다.