Android Studio 연습용 어플 구현1 (사용자 입력)

안녕하세요, 오늘도 새로운 예제를 가지고 공부를 하는 시간을 가져보도록 하겠습니다. 이전 시간에는 다수의 Activity를 사용해 앱을 만들어 봤는데요, 이번에는 하나의 Activity만 사용하게 됩니다. 물론 어떻게 앱을 구현하느냐에 따라 달라질 수 있는 부분이지만 일단 저는 하나만 사용해서 제작해 보았습니다. 그럼 우선  앱에 관한 설명을 해보겠습니다.

 

사진1

처음 실행했을 때의 화면입니다. 텍스트, 버튼 등 간단한 뷰 몇 가지를 볼 수 있습니다.

 

사진2

+ 버튼을 클릭함에 따라 가운데 수량이 늘어나고, 오른쪽에 가격이 늘어나는 것을 확인할 수 있습니다. 또한, 아래에 있는 TOTAL PRICE도 함께 늘어나는 것이 보이네요. 

 

사진3

아주 예상하기 쉽게, - 버튼을 누르면 수량이 적어지며 가격도 함께 떨어지게 됩니다.

 

사진4

수량이 0인 상태에서 한번 더 클릭을 하면, 더 이상 떨어지지 않고 사진의 메시지와 같은 토스트 팝업창을 띄워줍니다.

 

우선은 현재 구현한 기능은 이 정도이며 메뉴 이름을 First menu라 지은 이유는 후에 메뉴의 수를 늘려서 좀 더 확장된 기능의 앱을 구현해 보기 위함입니다. ORDER버튼 또한 클릭해도 아무런 반응을 하지 않는 장식용 뷰입니다. 요정도 기능을 하는 앱을 저는 어떻게 구현을 하였는지 간단히 설명해 보겠습니다.

 

<?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"
    tools:context=".MainActivity"
    android:orientation="vertical">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="MENU"
        android:textSize="25dp"
        android:layout_marginVertical="10dp"
        android:layout_gravity="center"/>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_marginVertical="10dp"
        android:layout_gravity="center">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="First menu ($5)"
            android:textSize="20dp"
            android:layout_marginHorizontal="20dp"/>

        <Button
            android:layout_width="40dp"
            android:layout_height="wrap_content"
            android:text="-"
            android:textSize="15dp"
            android:layout_marginLeft="20dp"
            android:onClick="reduceOrder"/>

        <TextView
            android:id="@+id/quantity_view1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="0"
            android:textSize="20dp"
            android:layout_marginLeft="20dp"/>

        <Button
            android:layout_width="40dp"
            android:layout_height="wrap_content"
            android:layout_marginLeft="20dp"
            android:text="+"
            android:textSize="15dp"
            android:onClick="plusOrder"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="$"
            android:textSize="20dp"
            android:layout_marginLeft="20dp"/>

        <TextView
            android:id="@+id/price_view1"
            android:layout_width="wrap_content"
            android:layout_height="25dp"
            android:text="0"
            android:textSize="20dp" />

    </LinearLayout>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TOTAL PRICE ($)"
        android:textSize="25dp"
        android:layout_gravity="center"
        android:layout_marginVertical="10dp"/>

    <TextView
        android:id="@+id/total_price_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="0"
        android:textSize="20dp"
        android:layout_gravity="center"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:background="#FFFFFF"
        android:text="ORDER"
        android:textSize="20dp"
        android:layout_marginVertical="10dp"/>

</LinearLayout>

 

위와 같이 LinearLayout을 사용하여 화면을 구성해 주었습니다. orientation 값으로 vertiacal을 가지는 LinearLayout안에 horizontal 값을 가지는 또 다른 LinearLayout을 확인할 수 있는데요, 이러한 Layout을 'Nested Layout'이라 부른다고 합니다. 화면에서 뷰들이 세로로 정렬되어 있는데, First menu가 있는 부분은 가로로 정렬이 되어 있는 것 또한 볼 수 있습니다. 저 부분이 바로 orientation 값을 horizontal로 설정해 준 LinearLayout이 존재하는 곳입니다.

+ 버튼과 - 버튼이 있는 곳에는 android:onClick 속성 값이 지정되어 있는데, 예시와 같이 android:onClcik="plusOrder" 이런 식으로 되어있으면 해당 버튼을 클릭 시, 설정해 둔 메서드를 call 한다는 의미입니다. 한마디로 MainActivity안의 plusOrder 메서드를 실행한다는 뜻이죠. 

그 외에도 layout을 구성하는 여러 가지 속성들을 볼 수 있습니다. 다음은 MainActivity 클래스를 살펴보도록 하겠습니다.

 

package com.example.ordermenu;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.TextView;
import android.widget.Toast;

import org.w3c.dom.Text;

public class MainActivity extends AppCompatActivity {

    private int menu1Num = 0;
    private int price = 0;
    private int priceNum;

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

    public void plusOrder(View view) {
        menu1Num++;
        displayMenu1Num(menu1Num);
    }

    public void reduceOrder(View view) {
        if (menu1Num <= 0) {
            menu1Num = 0;
            Toast.makeText(this.getApplicationContext(), "이미 가장 낮은 수량입니다.", 
            Toast.LENGTH_SHORT).show();
            return;
        }
        menu1Num--;
        displayMenu1Num(menu1Num);
    }

    public void displayMenu1Num(int num) {
        TextView quantityView = findViewById(R.id.quantity_view1);
        quantityView.setText(String.valueOf(num));
        displayPrice1(num);
    }

    public void displayPrice1(int num) {
        int price1 = 5;
        int menu1Price = num*price1;
        TextView quantityView = findViewById(R.id.price_view1);
        quantityView.setText(String.valueOf(menu1Price));
        displayTotalPrice(menu1Price);
    }

    public void displayTotalPrice(int totalPrice) {
        TextView quantityView = findViewById(R.id.total_price_view);
        quantityView.setText(String.valueOf(totalPrice));
    }
}

위에서 설명드린 대로 + 버튼을 누를 경우, plusOrder 메서드가 불려져 실행되는데요, 초기에는 0의 값을 가지는 menu1Num의 값을 1 올려주고 그 값을 인자로 전달하며 displayMenu1Num 메서드를 부르고 있습니다.

- 버튼의 경우에도 마찬가지인데, 조금 다른 부분은 조건문 if를 추가해 menu1Num 값이 0 아래로 떨어지는 경우 토스트 팝업을 띄어주며 값을 0으로 고정시키게 됩니다. 그리고 return; 을 실행하게 됩니다. return은 현재 메서드를 호출했던 메서드로 돌아간다는 의미를 가지고 있는데, 예시와 같은 식으로 현재 메서드를 즉시 종료시키고 싶을 때 또한 사용할 수 있습니다. 그 외의 경우에는 +와 비슷하게 숫자를 1 다운시키고 displayMenu1Num 메서드를 부르고 있습니다.

 

자신을 호출한 메서드로부터 menu1Num값을 전달받은 displayMenu1Num 메서드는 num 변수에 그 값을 저장하며, xml 파일에서 수량을 나타내는 TextView id를 찾아 연결하여 (TextView quantityView = findViewById(R.id.quantity_view1); 부분) 해당 뷰에 현재 자신이 가지고 있는 num값을 뿌려주게 됩니다. (quantituView.setText(String.valueOf(num)); 부분) 그렇게 되면 First menu 줄에 있는 수량이 표시가 되는 것이죠. 다음으로 displayPrice1을 호출하면서 자신의 num값을 넘겨주게 됩니다. displayPrice1 메서드 또한 메뉴의 수량을 받아 First menu의 가격인 5와 곱해 나온 답을 가격을 나타내는 뷰에 뿌려줍니다. 바로 이전에 실행했던 메서드와 같은 레퍼토리라고 할 수 있습니다.

 

마지막으로 할 일을 마친 메서드는 displayTotalPrice 메서드를 부르게 되는데 이 부분은 이전 메서드로부터 가격을 받아와 그대로 똑같이 TOTAL PRICE를 나타내는 뷰에 뿌려줍니다. 현재는 별 기능을 하지 않지만 추후에 메뉴가 많아짐에 따라 좀 더 제기능을 발휘하도록 코딩이 될 예정입니다. 그럼 오늘의 간단했던 어플 제작은 이만 마치도록 하겠습니다~

 

해당 포스팅은 Udacity 홈페이지 (www.udacity.com) 내의 Android Basics: User Input 강의를 참고하여 제작하였습니다.