Kotlin으로 팁 계산기 빌드: 어떻게 작동하나요?

Kotlin에서 간단한 팁 계산 애플리케이션을 만드는 방법을 보여줍니다. 더 정확히 말하면 Kotlin 1.3.21, Android 4, Android Studio 3입니다. 이 기사는 우선 Android 애플리케이션 개발 여정을 시작하는 사람들에게 흥미로울 것입니다. 응용 프로그램 내에서 무엇이 어떻게 작동하는지 이해할 수 있습니다.

이러한 계산기는 식당이나 카페에서 시간을 보내기로 결정한 회사의 팁 금액을 계산해야 할 때 유용합니다. 물론 모든 사람이 아니고 항상 웨이터를 위해 차를 남기는 것은 아닙니다. 이것은 서양 전통에 가깝지만 그러한 응용 프로그램을 개발하는 과정은 어쨌든 흥미 롭습니다.

알림: "Habr"의 모든 독자를 위한 - "Habr" 프로모션 코드를 사용하여 Skillbox 과정에 등록할 때 10 루블 할인.

Skillbox는 다음을 권장합니다. 실기 코스 "모바일 개발자 PRO.

앱이 실행 중일 때의 모습은 다음과 같습니다.

총액의 원하는 비율, 회의 참가자 수를 입력하고 결과를 얻습니다-남아야 할 팁의 양.

Начинаем

앱의 전체 인터페이스는 다음과 같습니다.




첫 번째 조치 - 프로젝트 베이스 다운로드. Android Studio 3.0 이상에서 엽니다. 프로젝트를 빌드하고 실행하면 흰색 화면이 표시됩니다. 모든 것이 정상입니다.

사용자 작업은 시간순으로 프로젝트에 작성되므로 모든 것이 명확합니다. 이를 보려면 보기 -> 도구 창 -> TODO를 엽니다.

프로젝트를 연구하고 colors.xml을 열어 색상 팔레트를 평가합니다. strings.xml에는 텍스트 데이터(캡션)가 포함되어 있고 styles.xml에는 여러 글꼴 템플릿이 포함되어 있습니다.

비용 섹션 개발

activity_main.xml을 열고 LinearLayout(#1)에 아래 코드를 추가합니다.

<TextView
    android_id="@+id/expensePerPersonTextView"
    android_layout_width="match_parent"
    android_layout_height="wrap_content"
    android_paddingTop="30dp"
    style="@style/h1Bold"
    android_textColor="@color/colorAccent"
    android_text="0"/>
 
<TextView
    android_layout_width="match_parent"
    android_layout_height="wrap_content"
    android_paddingBottom="25dp"
    style="@style/h2"
    android_textColor="@color/colorAccent"
    android_text="@string/perPersonStaticText"/>

이제 값 디렉토리의 스타일을 지정하거나 다음을 사용하여 색상을 가지고 놀 수 있습니다. material.io 도구.

이제 프로젝트는 다음과 같습니다.

보시다시피 비용 계산은 사용자가 입력한 데이터를 기반으로 합니다.

계정 섹션 개발

비용 섹션(#2) 다음에 LinearLayout에 아래 코드를 추가합니다.

<LinearLayout
    android_layout_width="match_parent"
    android_layout_height="match_parent"
    android_orientation="vertical"
    android_background="@color/colorAccent">
 
<! — TODO #3: Build Bill Section →
 
… 
</LinearLayout>

TODO 목록 다음에 LinearLayout을 닫은 다음 새 코드를 추가하여 LinearLayout 안에 배치합니다(#3).

<TextView
      android_layout_margin="15dp"
      android_layout_width="match_parent"
      android_layout_height="wrap_content"
      android_textColor="@color/colorWhite"
      style="@style/h4"
      android_text="@string/billStaticText"/>
 
<EditText
      android_id="@+id/billEditText"
      android_layout_width="match_parent"
      android_layout_height="wrap_content"
      android_textColor="@color/colorWhite"
      android_inputType="numberDecimal"
      android_maxLines="1"
      style="@style/h2Bold"
      android_text="0"/>

응용 프로그램의 주요 작업은 식당 모임 참가자 각각의 개별 비용을 계산하는 것이므로 costPerPersonTextView가 주요 역할을 합니다.

EditText는 입력을 한 줄로 제한합니다. 이 매개변수는 NumberDecimal inputType으로 설정해야 합니다.

테스트를 위한 프로젝트를 시작하고 전체 손상 매개변수(깨진 컵, 접시 등)를 입력합니다.

"사람과 팁" 섹션 개발

팁 금액 선택기를 추가하려면 아래 코드를 새 LinearLayout 섹션(#4)에 붙여넣으세요.

<TextView
      android_layout_margin="15dp"
      android_layout_width="match_parent"
      android_layout_height="wrap_content"
      android_textColor="@color/colorWhite"
      style="@style/h4"
      android_text="@string/tipStaticText"/>
 
<LinearLayout
      android_layout_width="match_parent"
      android_layout_height="wrap_content"
      android_orientation="horizontal">
 
<ImageButton
        android_id="@+id/subtractTipButton"
        style="@style/operationButton"
        android_layout_marginLeft="20dp"
        android_layout_marginStart="20dp"
        android_src="@drawable/subtract"/>
 
<TextView
        android_id="@+id/tipTextView"
        android_layout_margin="15dp"
        android_layout_width="0dp"
        android_layout_height="wrap_content"
        android_textColor="@color/colorWhite"
        android_layout_weight="1"
        style="@style/h2Bold"
        android_text="20%"/>
 
<ImageButton
        android_id="@+id/addTipButton"
        style="@style/operationButton"
        android_layout_marginEnd="20dp"
        android_layout_marginRight="20dp"
        android_src="@drawable/add"/>
 
</LinearLayout>

이 코드는 팁 금액을 정확하게 계산하는 데 필요합니다. 기본 텍스트 값은 20입니다. ImageButton에는 쓰기 권한이 있는 폴더의 아이콘이 제공됩니다.

전체 섹션을 복사하고 다음을 추가합니다(#5).

• ImageButton ID(subtractPeopleButton, addPeopleButton)
• TextView ID(numberOfPeopleStaticText, numberOfPeopleTextView)
• numberOfPeopleTextView의 DefaultText(4여야 함).

이제 응용 프로그램을 시작할 때 인보이스 금액을 추가할 수 있고 추가/빼기 버튼도 작동하지만 지금까지는 아무 일도 일어나지 않습니다.

보기 추가

MainActivity.kt를 열고 initViews 함수(#6)에 다음을 추가합니다.

private fun initViews() {
        expensePerPersonTextView = findViewById(R.id.expensePerPersonTextView)
        billEditText = findViewById(R.id.billEditText)
 
addTipButton = findViewById(R.id.addTipButton)
        tipTextView = findViewById(R.id.tipTextView)
        subtractTipButton = findViewById(R.id.subtractTipButton)
 
addPeopleButton = findViewById(R.id.addPeopleButton)
        numberOfPeopleTextView = findViewById(R.id.numberOfPeopleTextView)
        subtractPeopleButton = findViewById(R.id.subtractPeopleButton)
 
//TODO #8: Bind Buttons to Listener
 
//TODO #16: Bind EditText to TextWatcher
 
}

버튼 마무리

버튼 클릭에 대한 지원을 추가하려면 클래스 수준(#7)에서 View.OnClickListener를 구현합니다.

클래스 MainActivity: AppCompatActivity(), View.OnClickListener {

지금 바로 프로젝트를 컴파일하는 것은 작동하지 않습니다. 몇 가지 단계를 더 수행해야 합니다(# 8).

override fun onClick(v: View?) {
        when (v?.id) {
            R.id.addTipButton -> incrementTip()
            R.id.subtractTipButton -> decrementTip()
            R.id.addPeopleButton -> incrementPeople()
            R.id.subtractPeopleButton -> decrementPeople()
        }
    }

버튼과 스위치 측면에서 Kotlin은 모든 것을 매우 멋지게 정리했습니다! 모든 증가 및 감소 함수에 아래 코드를 추가하십시오.
(#9 –#12):

private fun incrementTip() {
        if (tipPercent != MAX_TIP) {
            tipPercent += TIP_INCREMENT_PERCENT
            tipTextView.text = String.format("%d%%", tipPercent)
        }
    }
 
private fun decrementTip() {
        if (tipPercent != MIN_TIP) {
            tipPercent -= TIP_INCREMENT_PERCENT
            tipTextView.text = String.format("%d%%", tipPercent)
        }
    }
 
private fun incrementPeople() {
        if (numberOfPeople != MAX_PEOPLE) {
            numberOfPeople += PEOPLE_INCREMENT_VALUE
            numberOfPeopleTextView.text = numberOfPeople.toString()
        }
    }
 
private fun decrementPeople() {
        if (numberOfPeople != MIN_PEOPLE) {
            numberOfPeople -= PEOPLE_INCREMENT_VALUE
            numberOfPeopleTextView.text = numberOfPeople.toString()
        }
    }

여기서 코드는 최대값(MAX_TIP & MAX_PEOPLE)으로 증분 함수를 보호합니다. 또한 코드는 최소값(MIN_TIP & MIN_PEOPLE)으로 감소 함수를 보호합니다.

이제 initViews 함수(#13)에서 버튼을 리스너에 바인딩합니다.

private fun initViews() {
 
...
 
addTipButton.setOnClickListener(this)
        subtractTipButton.setOnClickListener(this)
 
addPeopleButton.setOnClickListener(this)
        subtractPeopleButton.setOnClickListener(this)
 
//TODO #15: Bind EditText to TextWatcher
}

이제 총 피해, 팁 및 회의 참가자 수를 추가할 수 있습니다. 자, 이제 가장 중요한 것은...

비용 섹션

이 코드는 비용을 계산합니다(#14).

private fun calculateExpense() {
 
val totalBill = billEditText.text.toString().toDouble()
 
val totalExpense = ((HUNDRED_PERCENT + tipPercent) / HUNDRED_PERCENT) * totalBill
        val individualExpense = totalExpense / numberOfPeople
 
expensePerPersonTextView.text = String.format("$%.2f", individualExpense)
 
}

음, 여기 회사의 인원수를 고려하여 팁을 계산할 수 있는 함수가 호출됩니다(#15).

private fun incrementTip() {
 
…
 
}
 
private fun decrementTip() {
 
…
 
}
 
private fun incrementPeople() {
 
…
 
}
 
private fun decrementPeople() {
 
…
 
}

응용 프로그램을 시작합니다. 잘 보이고 잘 작동합니다. 그러나 더 나을 수 있습니다.

청구 금액을 삭제한 후 힌트나 친구 수를 늘리려고 하면 아직 비용 제로에 대한 확인이 없기 때문에 앱이 충돌합니다. 또한 인보이스 금액을 변경하려고 하면 요금이 업데이트되지 않습니다.

최종 단계

TextWatcher 추가(#16):

클래스 MainActivity: AppCompatActivity(), View.OnClickListener, TextWatcher {

그런 다음 billEditText 리스너(#17)를 포함합니다.

billEditText.addTextChangedListener(이)

또한 TextWatcher를 실행하는 코드를 추가합니다(#18).

override fun onTextChanged(s: CharSequence?, start: Int, before: Int, count: Int) {
        if (!billEditText.text.isEmpty()) {
            calculateExpense()
        }
    }
override fun afterTextChanged(s: Editable?) {}

    override fun beforeTextChanged(s: CharSequence?, start: Int, count: Int, after: Int) {}

이제 모든 것이 작동합니다! 축하합니다. Kotlin으로 자신만의 "팁 계산기"를 작성했습니다.

Skillbox는 다음을 권장합니다.

• XNUMX년 실습 코스 "저는 PRO 웹 개발자입니다".
• 온라인 코스 "C# 개발자".
• 실기 코스 "0에서 PRO로의 PHP 개발자".

출처 : habr.com