Kotlin 연습 점심 추천 어플 만들기 1단계 준비

코틀린을 공부하기 시작은 했는데 진도가 너무 안 나가는 도중에

한분이 아이디어를 주셔서 기~~~~본을 이용해서 만들어 볼까 합니다. 

(해당 분에게 허락을 받아 공개로 돌립니다.)

 

1 탄은 기본 메인 화면까지 만드는 걸 목표로 할께요.   

 

아이디어

- 직장인의 점심을 추천해주는 프로그램이 있으면 좋겠어요.

- 단 내가 어제 먹은 거는 추천 안했으면 좋겠어요.

 

제작 방식 

- 전체 점심 메뉴를 JSON 으로 제작 

- 전체 메뉴를 볼 수 있는 페이지와 사용자의 선택에 따라 랜덤 메뉴를 보여주는 페이지로 구성

- JSON을 만들때 각 메뉴에 한식/중식/일식/기타 & 밥류/면류/기타류 를 추가 

- 사용자가 일일이 메뉴를 입력 안하고 항목을 선택해서 메뉴를 추천 

 

일단 저는 아래 JSON 파일을 만들었습니다. 따라하실 분들은 다운로드 해주세요. 

LunchMenu.json

0.01MB

참고로 메뉴는 아래 사이트의 엑셀을 참고해 만들었습니다. 

https://ksmb.tistory.com/entry/%EC%A0%90%EC%8B%AC%EB%A9%94%EB%89%B4-%EC%9E%90%EB%8F%99%EA%B3%A0%EB%A5%B4%EA%B8%B0-%EC%97%91%EC%85%80-%EB%A9%94%EB%89%B4%EB%A6%AC%EC%8A%A4%ED%8A%B8-%EC%88%98%EC%A0%95%EB%B0%A9%EB%B2%95

점심메뉴 자동 고르기 엑셀과 메뉴 리스트 수정방법

 

자 그리고 저는 귀여운 걸 좋아해서 이미지 몇개를 미리 준비했습니다. 

여러분도 꾸미는 용으로 이미지 몇개 준비하시는 것도 재밌을것같아요. 

 

자 그럼 이번 포스트에서는 세가지만 먼저 해 봅시다. 

1. 앱 아이콘, 이름 변경 및 액션 바 삭제   

2. 메인화면에서 버튼 두 개에 각 각 다른 페이지 연결 

3. 메인화면에서 뒤로가기 누르면 "한번더 누르면 앱이 종료됩니다" 띄우기 

 

1. 앱 아이콘, 이름 변경 및 액션 바 삭제   

- 앱을 기본으로 실행하면 화면 상단에 두꺼운 바(액션바)가 자동으로 생기더라고요.

 

1-1 앱 아이콘 및 이름 변경 

- 앱 이름은 app>scr>main>res>values>strings.xml 에 "app_name"옆 글자를 바꿔주시면 되요!

<resources>
    <string name="app_name">점심메뉴찾기</string>
</resources>

- 앱 아이콘은 저는 버섯 모양 이미지를 미리 추가했어요.

- app>scr>main>AndroidManifest.xml 에서 android:icon 부분을 바꿔주시면 되요!

<application
    .
    android:icon="@drawable/app_icon"
    .
    >
    . 
</application>

 

1-2 액션 바 삭제 

- 이거는 app>scr>main>res>values>themes.xml 에서 <style> 내부에 아래 코드를 추가해주시면 되요!

<style name........>
    .
    .
    <item name="android:windowNoTitle">true</item>
    .
    .
</style>

 

2. 메인화면에서 버튼 두 개에 각 각 다른 페이지 연결 

- 저는 미리 빈 화면 두개를 만들어 놨습니다. 

- SelectActivity / TotalActivity 를 각 버튼에 연결해볼께요. 

 

2-1 메인화면에 버튼 추가 

- 일단 버튼이 있어야 작동을 시키던지 하겠죠?

- 아래 버튼들을 원하시는 곳에 연결해 주세요. 

<Button
    android:id="@+id/selectBtn"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:backgroundTint="#DC6089"
    android:text="메뉴 추천" />

<Button
    android:id="@+id/totalMenuBtn"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:backgroundTint="#46BD7B"
    android:text="전체 메뉴 보기" />

2-2 버튼 이벤트 연결하기

- 자바보다 간단합니다.(이것이 코틀린?)

- 자바랑 마찬가지로 Intent를 통해 각 화면으로 이동할 수 있습니다.

override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        //Recommend
        var recommendBtn = findViewById<Button>(R.id.selectBtn)
        recommendBtn.setOnClickListener {// 버튼이 눌리면 할일
            val nextIntent = Intent(this, SelectActivity::class.java)
            startActivity(nextIntent)
        }

        // Total
        var totalBtn = findViewById<Button>(R.id.totalMenuBtn)
        totalBtn.setOnClickListener {버튼이 눌리면 할일
            val nextIntent = Intent(this, TotalActivity::class.java)
            startActivity(nextIntent)
        }

    }

3. 메인화면에서 뒤로가기 누르면 "한번더 누르면 앱이 종료됩니다" 띄우기 

- 이거는 거의 모든 안드로이드 앱에서 자주 보이는 기능이죠?

- 만드는 법도 간단합니다. 

- 참고로 1000 = 1초라고 합니다. 

 var timeEndBack : Long = 0
.
.
.
override fun onBackPressed() {
//        super.onBackPressed()
        var totalView = findViewById<View>(R.id.mainLayout)
        if(System.currentTimeMillis() - timeEndBack > 3000){
            timeEndBack = System.currentTimeMillis()
            Snackbar.make(totalView,"뒤로가기 버튼을 한번 더 누르면 종료됩니다.",Snackbar.LENGTH_LONG).show()
            // 그 검정바 
        }else{
            finish()
        }
    }

 

이렇게 만들면 1단계 완성입니다!

 

2단계 에서는 본격적으로 Json 파일을 가져와서 보여주는 걸 해볼께요 (전체 메뉴보기)

 

여기까지가 1단계 입니다.

 

아래는 MainActivity 관련 전체 코드입니다. 참고하실분들은 참고해주세요. 

<?xml version="1.0" encoding="utf-8"?>

<androidx.constraintlayout.widget.ConstraintLayout 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:id="@+id/mainLayout"
    android:background="@color/mushroom_green">

    <LinearLayout
        android:id="@+id/linearLayout2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:orientation="vertical"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:context=".MainActivity">


        <ImageView
            android:layout_width="100dp"
            android:layout_height="100dp"
            app:srcCompat="@drawable/bibimbap" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="10dp"
            android:fontFamily="sans-serif-black"
            android:text="원하시는 메뉴를 선택해주세요."
            android:textAlignment="center"
            android:textColor="@color/black"
            android:textSize="20sp"
            android:textStyle="bold"
            tools:layout_editor_absoluteY="96dp" />

        <Button
            android:id="@+id/selectBtn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:backgroundTint="#DC6089"
            android:text="메뉴 추천" />

        <Button
            android:id="@+id/totalMenuBtn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:backgroundTint="#46BD7B"
            android:text="전체 메뉴 보기" />

    </LinearLayout>

    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginEnd="10dp"
        android:layout_marginBottom="10dp"
        android:text="Developed by Larooly"
        android:textAlignment="textEnd"
        android:textSize="10sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

    <ImageView
        android:id="@+id/imageView3"
        android:layout_width="100dp"
        android:layout_height="100dp"
        app:layout_constraintBottom_toTopOf="@+id/textView"
        app:layout_constraintStart_toStartOf="parent"
        app:srcCompat="@drawable/app_icon" />


</androidx.constraintlayout.widget.ConstraintLayout>

package com.example.forsukquiestion

import android.content.Intent
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.View
import android.widget.Button
import android.widget.Toast
import com.google.android.material.snackbar.Snackbar

class MainActivity : AppCompatActivity() {

    var timeEndBack : Long = 0
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        //Recommend
        var recommendBtn = findViewById<Button>(R.id.selectBtn)
        recommendBtn.setOnClickListener {
            val nextIntent = Intent(this, SelectActivity::class.java)
            startActivity(nextIntent)
        }

        // Total
        var totalBtn = findViewById<Button>(R.id.totalMenuBtn)
        totalBtn.setOnClickListener {
            val nextIntent = Intent(this, TotalActivity::class.java)
            startActivity(nextIntent)
        }

    }

    override fun onBackPressed() {
//        super.onBackPressed()
        var totalView = findViewById<View>(R.id.mainLayout)
        if(System.currentTimeMillis() - timeEndBack > 3000){
            timeEndBack = System.currentTimeMillis()
            Snackbar.make(totalView,"뒤로가기 버튼을 한번 더 누르면 종료됩니다.",Snackbar.LENGTH_LONG).show()
        }else{
            finish()
        }

    }

}

그럼 2단계 에서 만나요~