본문 바로가기
앱 비지니스/안드로이드 스튜디오

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

by 3C Retsam 2021. 2. 8.

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

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

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

 

1. 기획

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

 

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

앱(어플)의 기획 및 기획서 작성 방법 1. 앱(어플)의 기획단계 앱을 만들려고 한다면 어떤것을 먼저 생각해야 할까요? 1-1. 어떤 앱인가? 요즘은 누구나 소형화된 컴퓨터인 스마트폰을 가지고 있고

codenet.tistory.com

 

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>

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

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

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

댓글