[안드로이드 코틀린] 8. 실전프로젝트(1) - 비만도계산기

실전 프로젝트

실습 - 비만도 계산기

주요구성

- 몸무게를 입력하는 화면과 비만도 결과를 보여주는 화면으로 구성되어 액티비티가 두 개 필요함

- 인텐트에 데이터를 담아서 다른 화면으로 전달함

- ConstraintLayout 기반

 

 

1. res > values > color.xml

- 액션바 색상 바꾸기 위해 컬러 코드 추가

- 16진수로

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="black">#FF000000</color>
    <color name="white">#FFFFFFFF</color>

    <!--컬러 추가-->
    <color name="teal_700">#FF018786</color>
    <color name="green_700">#00584A</color>
</resources>

 

2. res > values > themes > themes.xml

-  <style name="Base.Theme.BmiCalculator" parent="Theme.Material3.DayNight.noActionBar ">에서 .noActionBar 지우기 (앱 실행 시켰을 때 액션 바를 보여주기 위해서)

- 액션바 색상 바꾸기 코드 추가

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Base.Theme.BmiCalculator" parent="Theme.Material3.DayNight">
        <!-- Customize your light theme here. -->
        <!-- <item name="colorPrimary">@color/my_light_primary</item> -->

        <!--코드 추가-->
        <item name="colorPrimary">@color/teal_700</item>
        <item name="colorPrimaryVariant">@color/green_700</item>
    </style>

    <style name="Theme.BmiCalculator" parent="Base.Theme.BmiCalculator" />
</resources>

 

3. activity_main.xml design모드에서 위젯 추가

- EditText 2개, Button 1개

 

4. activity_result.xml design모드에서 위젯 추가

- File > New > Activity > Empty View Activity 들어가서 생성 (이름: ResultActivity(xml 자동 생성됨))

- TextView 1개

 

5. res 우클릭 New > Vector Asset

- Clip art에서 아이콘 선택 (🙂🙁😦 3가지 아이콘)

- 경로: res > drawble

 

6. activity_result.xml design모드에서 위젯 추가

- Image 1개

- 추가한 이미지 창 뜸

- 추가한 이미지 중 하나를 기본 이미지로 설정

- 이미지 아이콘 색 바꾸기: 우측 Attributes 창 > All Attributes > tint

 

7. 코틀린 코드 작성 - 인텐트로 화면 전환

1) MainActivity.kt 에서 버튼을 누르면 결과 화면으로 전환하는 코드 작성

- 첫 번째 화면의 버튼을 누르면 두 번째 화면이 출력 : 화면을 전환하려면 인텐트Intent를 사용

- 인텐트 : 다른 액티비티를 시작할 수 있고, 간단한 데이터를 담아서 보낼 수도 있음

package com.example.bmicalculator

import android.content.Intent
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button

class MainActivity : AppCompatActivity() {

    lateinit var resultButton: Button // 추후에 초기화 변수타입

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

        resultButton = findViewById<Button>(R.id.resultButton)

        resultButton.setOnClickListener {
            var intent = Intent(this, ResultActivity::class.java)
            startActivity(intent)
        }
    }
}

 

2) 이전화면으로 돌아가는 업 네비게이션

- app > manifests > AndroidManifest.xml

- 18번째 줄 android:parentActivityName=".MainActivity" 추가

① 프로젝트 창에서 AndroidManifest.xml 파일을 더블클릭하여 열기

② 에디터 창에 xml 코드가 표시되는데 두 번째 액티비티에parentActivityName 속성 추가

③ 두 번째 화면의 툴바에 뒤로 가기 아이콘이 표시

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">

    <application
        android:allowBackup="true"
        android:dataExtractionRules="@xml/data_extraction_rules"
        android:fullBackupContent="@xml/backup_rules"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.BmiCalculator"
        tools:targetApi="31">
        <activity
            android:name=".ResultActivity"
            android:exported="false" 
            android:parentActivityName=".MainActivity" />
        <activity
            android:name=".MainActivity"
            android:exported="true">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

 

 

3) 인텐트에 데이터 담기

① 선언한 두개(키, 몸무게 입력 칸)의 EditText 정의하고

② 레이아웃에 정의된 위젯 연결

③ ResultActivity로 보낼 데이터 추출하여 intent 객체에 저장

- putExtra ( ) - key와 값value의 쌍으로 데이터 저장

package com.example.bmicalculator

import android.content.Intent
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button
import android.widget.EditText

class MainActivity : AppCompatActivity() {

    lateinit var resultButton: Button // 추후에 초기화 변수타입
    lateinit var heightEditText: EditText
    lateinit var weightEditText: EditText

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

        resultButton = findViewById<Button>(R.id.resultButton)
        heightEditText = findViewById<EditText>(R.id.heightEditText)
        weightEditText = findViewById<EditText>(R.id.weightEditText)

        resultButton.setOnClickListener {
            var intent = Intent(this, ResultActivity::class.java)
            intent.putExtra("height", heightEditText.text.toString())
            intent.putExtra("weight", weightEditText.text.toString())
            startActivity(intent)
        }
    }
}

 

4) 비만도를 계산하여 분기 처리 (ResultActivity.kt)

① Intent로 부터 height와 weight를 받음

② 키를 100으로 나눈 제곱을 몸무게에서 나누면 BMI값 출력

③ 출력을 위해 textView 선언 후 연결

④ when을 사용하여 BMI값이 특정 구간에 있으면 해당하는 메시지를 표시

⑤ 이미지 변경을 위해 imageView 선언 후 연결

⑥BMI값에 따라서 다른 이미지가 나오도록 when을 사용하여 구간마다 이미지를 교체

package com.example.bmicalculator

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.ImageView
import android.widget.TextView

class ResultActivity : AppCompatActivity() {

    lateinit var resultTextView: TextView
    lateinit var imageView: ImageView

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

        resultTextView = findViewById<TextView>(R.id.textView)
        imageView = findViewById<ImageView>(R.id.imageView)

        var height = intent.getStringExtra("height")!!.toInt()
        var weight = intent.getStringExtra("weight")!!.toInt()

        // BMI 계산
        var bmi = weight / Math.pow(height/100.0, 2.0)

        // 글자로 출력
        when {
            bmi >= 35 -> resultTextView.text = "고도 비만"
            bmi >= 30 -> resultTextView.text = "2단계 비만"
            bmi >= 25 -> resultTextView.text = "1단계 비만"
            bmi >= 23 -> resultTextView.text = "과체중"
            bmi >= 18.5 -> resultTextView.text = "정상"
            else -> resultTextView.text = "저체중"
        }

        // 이미지로 출력
        when {
            bmi >= 23 -> imageView.setImageResource(R.drawable.baseline_sentiment_very_dissatisfied_24)
            bmi > 18.5 -> imageView.setImageResource(R.drawable.baseline_sentiment_satisfied_alt_24)
            else -> imageView.setImageResource(R.drawable.baseline_mood_bad_24)
        }
    }
}

 

5) Toast 사용하여 간단한 메시지 표시

- 토스트 : 안드로이드 기기를 사용시 하단에 잠깐 보였다 사라지는 메시지

// 위 코드 생략
import android.widget.Toast

class ResultActivity : AppCompatActivity() {
        // ResultActivity.kr 이미지 출력 코드 아래에 작성 (위 생략)
        Toast.makeText(this, "$bmi", Toast.LENGTH_SHORT).show()
    }
}

 

8. 코틀린 코드 작성 - SharedPreference로 데이터 저장

1) 데이터 저장

- MainActivity.kt에 키와 몸무게를 저장하는 함수 작성 : onCreate함수 아래 선언

- https://developer.android.com/training/data-storage/shared-preferences?hl=ko

① getPreferences() 메소드는 공유환경설정(SharedPreferences) 파일 제공 공유환경설정파일에 쓰려면 edit() 메소드 호출하여 SharedPreferences.Editor 생성

② editor에 키, 몸무게 칸에 입력된 값을 apply() 메소드로 저장 함

③ [결과]버튼을 누르는 시점에 saveData()를 호출(키, 몸무게를 파라메터로 전송)

class MainActivity : AppCompatActivity() {

   // 코드 생략

        resultButton.setOnClickListener {

            saveData(heightEditText.text.toString().toInt(), weightEditText.text.toString().toInt())
            var intent = Intent(this, ResultActivity::class.java)
            intent.putExtra("height", heightEditText.text.toString())
            intent.putExtra("weight", weightEditText.text.toString())
            startActivity(intent)
        }
    }

    private fun saveData(height:Int, weight:Int) {
        var pref = this.getPreferences(0)
        var editor = pref.edit()

        editor.putInt("KEY_HEIGHT", heightEditText.text.toString().toInt()).apply()
        editor.putInt("KEY_WEIGHT", weightEditText.text.toString().toInt()).apply()
    }
}

 

2) 데이터 불러 오기

- MainActivity.kt에 키와 몸무게를 가져오는 함수 작성 : onCreate함수 아래 선언

① getPreferences() 메소드는 공유환경설정(SharedPreferences) 파일 제공 height, weight 두개의 변수에 공유환경변수에 저장된 값을 getInt() 메소드로 가져옴

② 공유환경변수에 키와 몸무게 값이 0이 아닌 값으로 저장되어 있으면 입력 칸에 저장된 값을 표시함 

③ 앱 실행하자마자 loadData() 함수를 호출하여 이전 값을 설정함

class MainActivity : AppCompatActivity() {

    lateinit var resultButton: Button // 추후에 초기화 변수타입
    lateinit var heightEditText: EditText
    lateinit var weightEditText: EditText

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

        resultButton = findViewById<Button>(R.id.resultButton)
        heightEditText = findViewById<EditText>(R.id.heightEditText)
        weightEditText = findViewById<EditText>(R.id.weightEditText)

        loadData()

		// resultButton.setOnClickListener 생략

    }

    // saveData() 생략

    private fun loadData() {
        var pref = this.getPreferences(0)
        var height = pref.getInt("KEY_HEIGHT", 0)
        var weight = pref.getInt("KEY_WEIGHT", 0)

        if(height != 0 && weight != 0) {
            heightEditText.setText(height.toString())
            weightEditText.setText(weight.toString())
        }
    }
}

 

결과

 

정리

- 이미지 뷰에 표시할 아이콘은 에셋 스튜디오에서 생성할 수 있음

- 액티비티 간 화면 전환 및 데이터 전달을 하는 데 인텐트를 사용

- 간단한 데이터를 저장 및 복원할 때는 SharedPreference를 사용

 

 

 

---

응용 - 이름 추가

 

 

package com.example.bmicalculator

import android.content.Intent
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button
import android.widget.EditText

class MainActivity : AppCompatActivity() {

    lateinit var resultButton: Button // 추후에 초기화 변수타입
    lateinit var heightEditText: EditText
    lateinit var weightEditText: EditText
    lateinit var nameEditText: EditText

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

        resultButton = findViewById<Button>(R.id.resultButton)
        heightEditText = findViewById<EditText>(R.id.heightEditText)
        weightEditText = findViewById<EditText>(R.id.weightEditText)
        nameEditText = findViewById<EditText>(R.id.nameEditText)

        loadData()

        resultButton.setOnClickListener {

            saveData(heightEditText.text.toString().toInt(), weightEditText.text.toString().toInt())
            var intent = Intent(this, ResultActivity::class.java)
            intent.putExtra("name", nameEditText.text.toString())
            intent.putExtra("height", heightEditText.text.toString())
            intent.putExtra("weight", weightEditText.text.toString())
            startActivity(intent)
        }
    }

    private fun saveData(height:Int, weight:Int) {
        var pref = this.getPreferences(0)
        var editor = pref.edit()

        editor.putString("KEY_NAME", nameEditText.text.toString()).apply()
        editor.putInt("KEY_HEIGHT", heightEditText.text.toString().toInt()).apply()
        editor.putInt("KEY_WEIGHT", weightEditText.text.toString().toInt()).apply()
    }

    private fun loadData() {
        var pref = this.getPreferences(0)
        var name = pref.getString("KEY_NAME", "")
        var height = pref.getInt("KEY_HEIGHT", 0)
        var weight = pref.getInt("KEY_WEIGHT", 0)

        if(name != "" && height != 0 && weight != 0) {
            nameEditText.setText(name.toString())
            heightEditText.setText(height.toString())
            weightEditText.setText(weight.toString())
        }
    }
}

 

package com.example.bmicalculator

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.ImageView
import android.widget.TextView
import android.widget.Toast

class ResultActivity : AppCompatActivity() {

    lateinit var resultTextView: TextView
    lateinit var imageView: ImageView

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

        resultTextView = findViewById<TextView>(R.id.textView)
        imageView = findViewById<ImageView>(R.id.imageView)

        var name = intent.getStringExtra("name")
        var height = intent.getStringExtra("height")!!.toInt()
        var weight = intent.getStringExtra("weight")!!.toInt()

        // BMI 계산
        var bmi = weight / Math.pow(height/100.0, 2.0)

        // 글자로 출력
        when {
            bmi >= 35 -> resultTextView.text = "고도 비만"
            bmi >= 30 -> resultTextView.text = "2단계 비만"
            bmi >= 25 -> resultTextView.text = "1단계 비만"
            bmi >= 23 -> resultTextView.text = "과체중"
            bmi >= 18.5 -> resultTextView.text = "정상"
            else -> resultTextView.text = "저체중"
        }

        // 이미지로 출력
        when {
            bmi >= 23 -> imageView.setImageResource(R.drawable.baseline_sentiment_very_dissatisfied_24)
            bmi > 18.5 -> imageView.setImageResource(R.drawable.baseline_sentiment_satisfied_alt_24)
            else -> imageView.setImageResource(R.drawable.baseline_mood_bad_24)
        }

        Toast.makeText(this, "$name" + " : " + "$bmi", Toast.LENGTH_SHORT).show()
    }
}