[개인 프로젝트] 설빙 레시피 앱 #1

요약

1. MainActivity에서 로고 및 설빙, 디저트, 음료, 사용기한표 버튼 구현

2. SulbingActivity에서 모든 빙수 레시피를 볼 수 있는 버튼 구현

3. SulbingrecipeActivity에서 해당 빙수를 제조하는 데 필요한 재료와 레시피 구현

본문

1. MainActivity 작업

친구가 갈색 계통으로 하면 좋겠다고 생각하여, 갈색 계통으로 로고와 버튼을 칠하였다.

그리고 배경은 친구가 실제 일하는 매장을 사진으로 찍은 것이다.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/sulbingbackground"
    android:orientation="vertical"
    tools:context=".MainActivity">


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:orientation="vertical"></LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:orientation="horizontal">

            <LinearLayout
                android:layout_width="150dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:orientation="vertical"></LinearLayout>

            <ImageView
                android:id="@+id/mainlogo"
                android:layout_width="300dp"
                android:layout_height="150dp"
                android:layout_gravity="center|center_vertical"
                android:layout_weight="1"
                android:background="#61210B"
                app:srcCompat="@drawable/newsulbinglogo" />

            <LinearLayout
                android:layout_width="150dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:orientation="vertical"></LinearLayout>

        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:orientation="vertical"></LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:orientation="horizontal">

            <LinearLayout
                android:layout_width="70dp"
                android:layout_height="match_parent"
                android:orientation="horizontal"></LinearLayout>

            <ImageButton
                android:id="@+id/icewaterbutton"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_gravity="center_vertical"
                android:layout_weight="1"
                android:adjustViewBounds="true"
                android:backgroundTint="@android:color/transparent"
                android:contentDescription="Go to Sulbing"
                android:padding="0dp"
                android:scaleType="fitCenter"
                android:src="@drawable/icewaterbutton" />

            <ImageButton
                android:id="@+id/dessertbutton"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:layout_weight="1"
                android:adjustViewBounds="true"
                android:backgroundTint="@android:color/transparent"
                android:contentDescription="Go to Dessert"
                android:padding="0dp"
                android:scaleType="fitCenter"
                android:src="@drawable/dessertbutton" />

            <LinearLayout
                android:layout_width="70dp"
                android:layout_height="match_parent"
                android:orientation="horizontal"></LinearLayout>
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:orientation="horizontal">
            <LinearLayout
                android:layout_width="70dp"
                android:layout_height="match_parent"
                android:orientation="horizontal"></LinearLayout>

            <ImageButton
                android:id="@+id/beveragebutton"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_gravity="center_vertical"
                android:layout_weight="1"
                android:adjustViewBounds="true"
                android:backgroundTint="@android:color/transparent"
                android:contentDescription="Go to Sulbing"
                android:padding="0dp"
                android:scaleType="fitCenter"
                android:src="@drawable/beveragebutton" />

            <ImageButton
                android:id="@+id/usedatebutton"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:layout_weight="1"
                android:adjustViewBounds="true"
                android:backgroundTint="@android:color/transparent"
                android:contentDescription="Go to Dessert"
                android:padding="0dp"
                android:scaleType="fitCenter"
                android:src="@drawable/usedatebutton" />

            <LinearLayout
                android:layout_width="70dp"
                android:layout_height="match_parent"
                android:orientation="horizontal"></LinearLayout>

        </LinearLayout>

    </LinearLayout>

</LinearLayout>

MainActivity.kt

package com.bodan.sulbingrecipe

import androidx.appcompat.app.AppCompatActivity
import android.content.Intent
import android.os.Bundle
import android.widget.Toast
import com.bodan.sulbingrecipe.databinding.ActivityMainBinding

class MainActivity : AppCompatActivity() {
    // 뷰 바인딩
    private var mBinding : ActivityMainBinding? = null
    private val binding get() = mBinding!!

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        // 뷰 바인딩
        mBinding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        // 빙수 레시피 액티비티로 이동
        binding.icewaterbutton.setOnClickListener {
            var intent = Intent(this@MainActivity, SulbingActivity::class.java)
            startActivity(intent)
        }
        // 디저트 레시피 액티비티로 이동
        binding.dessertbutton.setOnClickListener {
            var intent = Intent(this@MainActivity, DessertActivity::class.java)
            startActivity(intent)
        }
        // 음료 레시피 액티비티로 이동
        binding.beveragebutton.setOnClickListener {
            var intent = Intent(this@MainActivity, BeverageActivity::class.java)
            startActivity(intent)
        }
        // 사용기한표 액티비티로 이동
        binding.usedatebutton.setOnClickListener {
            var intent = Intent(this@MainActivity, UsedateActivity::class.java)
            startActivity(intent)
        }
    }
}

실행 화면

MainActivity

 

2. SulbingActivity 작업

DB를 다룰 줄 몰라서.. 일일히 구현하였다.

다 만들고 나서 DB를 다루는 법을 좀 학습해야 할 것 같다.

빙수 종류가 생각보다 많았다.

activity_sulbing.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".SulbingActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:background="@drawable/menubar"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="72dp"
            android:layout_height="wrap_content"
            android:src="@drawable/sulbingtitle" />
    </LinearLayout>

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:contentDescription="Sulbing Menu"
        android:background="@drawable/backgroundcolor1">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical" >

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="10dp"
                android:orientation="vertical"></LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:orientation="horizontal">

                <ImageButton
                    android:id="@+id/injeolmi"
                    android:layout_width="380dp"
                    android:layout_height="175dp"
                    android:layout_gravity="center_vertical"
                    android:layout_weight="1"
                    android:adjustViewBounds="true"
                    android:backgroundTint="@android:color/transparent"
                    android:contentDescription="Injeolmi Sulbing"
                    android:padding="0dp"
                    android:scaleType="fitCenter"
                    android:src="@drawable/injeolmisulbing" />

                <ImageButton
                    android:id="@+id/patinjeolmi"
                    android:layout_width="380dp"
                    android:layout_height="175dp"
                    android:layout_gravity="center_vertical"
                    android:layout_weight="1"
                    android:adjustViewBounds="true"
                    android:backgroundTint="@android:color/transparent"
                    android:contentDescription="Patinjeolmi Sulbing"
                    android:padding="0dp"
                    android:scaleType="fitCenter"
                    android:src="@drawable/patinjeolmisulbing" />
            </LinearLayout>

			// 이 뒤로 많은 빙수 버튼이 존재함.

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:orientation="horizontal">

                <ImageButton
                    android:id="@+id/warrplainstrawberry"
                    android:layout_width="380dp"
                    android:layout_height="175dp"
                    android:layout_gravity="center_vertical"
                    android:layout_weight="1"
                    android:adjustViewBounds="true"
                    android:backgroundTint="@android:color/transparent"
                    android:contentDescription="Warr Plain Strawberry Sulbing"
                    android:padding="0dp"
                    android:scaleType="fitCenter"
                    android:src="@drawable/warrplainstrawberry" />

                <ImageButton
                    android:id="@+id/chekschocostrawberry"
                    android:layout_width="380dp"
                    android:layout_height="175dp"
                    android:layout_gravity="center_vertical"
                    android:layout_weight="1"
                    android:adjustViewBounds="true"
                    android:backgroundTint="@android:color/transparent"
                    android:contentDescription="Chekschoco Strawberry Sulbing"
                    android:padding="0dp"
                    android:scaleType="fitCenter"
                    android:src="@drawable/chekschocostrawberry" />
            </LinearLayout>

        </LinearLayout>
    </ScrollView>

</LinearLayout>

SulbingActivity.kt

package com.bodan.sulbingrecipe

import androidx.appcompat.app.AppCompatActivity
import android.content.Intent
import android.os.Bundle
import android.widget.Toast
import com.bodan.sulbingrecipe.databinding.ActivitySulbingBinding

class SulbingActivity : AppCompatActivity() {
    // 뷰 바인딩
    private var mBinding : ActivitySulbingBinding? = null
    private val binding get() = mBinding!!

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        // 뷰 바인딩
        mBinding = ActivitySulbingBinding.inflate(layoutInflater)
        setContentView(binding.root)

        // 인절미설빙 레시피
        binding.injeolmi.setOnClickListener {
            var idText = "injeolmi"
            var intent = Intent(this@SulbingActivity, SulbingrecipeActivity::class.java)
            intent.putExtra("idText", idText)
            startActivity(intent)
        }

        // 팥인절미설빙 레시피
        binding.patinjeolmi.setOnClickListener {
            var idText = "patinjeolmi"
            var intent = Intent(this@SulbingActivity, SulbingrecipeActivity::class.java)
            intent.putExtra("idText", idText)
            startActivity(intent)
        }
        
        // 미완성
    }
}

실행 화면

추가예정

3. SulbingrecipeActivity 작업

intent.hasExtra()를 통하여 무슨 버튼을 눌러서 이 액티비티로 왔는지 확인하고,

setImageResource를 통하여 그 버튼에 따라 다른 빙수의 이미지와 재료, 레시피를 출력하도록 하였다.

activity_sulbingrecipe.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".SulbingrecipeActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:background="@drawable/menubar"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="72dp"
            android:layout_height="wrap_content"
            android:src="@drawable/sulbingtitle" />
    </LinearLayout>

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:contentDescription="Sulbing Menu Recipe">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical" >

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="25dp"
                android:orientation="vertical"></LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="300dp"
                android:orientation="vertical">

                <ImageView
                    android:id="@+id/sulbingimage"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    app:srcCompat="@drawable/injeolmisulbing" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="30dp"
                android:orientation="horizontal"></LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:orientation="horizontal">

                <LinearLayout
                    android:layout_width="10dp"
                    android:layout_height="match_parent"
                    android:orientation="horizontal"></LinearLayout>

                <ImageView
                    android:id="@+id/recipetable"
                    android:layout_width="390dp"
                    android:layout_height="match_parent"
                    android:layout_gravity="center_vertical"
                    app:srcCompat="@drawable/injeolmirecipe" />

                <LinearLayout
                    android:layout_width="10dp"
                    android:layout_height="match_parent"
                    android:orientation="horizontal"></LinearLayout>

            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="400dp"
                android:orientation="vertical">

                <ImageView
                    android:id="@+id/recipedetail"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    app:srcCompat="@drawable/injeolmirecipedetail" />
            </LinearLayout>
        </LinearLayout>
    </ScrollView>


</LinearLayout>

SulbingrecipeActivity.kt

package com.bodan.sulbingrecipe

import androidx.appcompat.app.AppCompatActivity
import android.content.Intent
import android.os.Bundle
import android.widget.Toast
import com.bodan.sulbingrecipe.databinding.ActivitySulbingrecipeBinding

class SulbingrecipeActivity : AppCompatActivity() {
    // 뷰 바인딩
    private var mBinding : ActivitySulbingrecipeBinding? = null
    private val binding get() = mBinding!!
    private var whatsulbing : String? = ""

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        // 뷰 바인딩
        mBinding = ActivitySulbingrecipeBinding.inflate(layoutInflater)
        setContentView(binding.root)
        // 버튼을 눌러서 가져온 값
        if (intent.hasExtra("idText")) {
            whatsulbing = intent.getStringExtra("idText")
        }

        // 팥인절미설빙
        if (whatsulbing == "patinjeolmi") {
            binding.sulbingimage.setImageResource(R.drawable.patinjeolmisulbing)
            binding.recipetable.setImageResource(R.drawable.patinjeolmirecipe)
            binding.recipedetail.setImageResource(R.drawable.patinjeolmirecipedetail)
        }
    }
}

실행 화면

추가예정

 

다음 할 일

디자인을 좀 생각해 보아야 할 듯..

 

GitHub

https://github.com/littlesam95/Sulbingrecipe

GitHub - littlesam95/Sulbingrecipe: Sulbing Recipe