🥇การสร้างเครื่องคำนวณทิปใน Kotlin: มันทำงานอย่างไร?

เราจะแสดงวิธีสร้างแอปพลิเคชันการคำนวณทิปอย่างง่ายใน Kotlin เพื่อให้แม่นยำยิ่งขึ้น Kotlin 1.3.21, Android 4, Android Studio 3 ก่อนอื่นบทความนี้จะน่าสนใจสำหรับผู้ที่เริ่มต้นเส้นทางในการพัฒนาแอปพลิเคชัน Android ช่วยให้คุณเข้าใจว่าอะไรและทำงานอย่างไรภายในแอปพลิเคชัน

เครื่องคิดเลขดังกล่าวมีประโยชน์เมื่อคุณต้องการคำนวณจำนวนทิปจากบริษัทที่ตัดสินใจใช้เวลาในร้านอาหารหรือร้านกาแฟ แน่นอนว่าไม่ใช่ทุกคนและไม่ได้ทิ้งชาไว้ให้บริกรเสมอไป นี่เป็นประเพณีของชาวตะวันตกมากกว่า แต่กระบวนการพัฒนาแอปพลิเคชันดังกล่าวก็น่าสนใจไม่ว่าในกรณีใด

เราเตือนคุณ: สำหรับผู้อ่าน "Habr" ทุกคน - ส่วนลด 10 rubles เมื่อลงทะเบียนในหลักสูตร Skillbox ใด ๆ โดยใช้รหัสส่งเสริมการขาย "Habr"

Skillbox แนะนำ: หลักสูตรภาคปฏิบัติ "นักพัฒนามือถือ PRO.

นี่คือลักษณะของแอพเมื่อมันทำงาน:

คุณป้อนเปอร์เซ็นต์ที่ต้องการของจำนวนเงินทั้งหมด จำนวนผู้เข้าร่วมการประชุม และรับผลลัพธ์ - จำนวนเคล็ดลับที่ควรค่าแก่การออกไป

เริ่มต้นใช้งาน

อินเทอร์เฟซแบบเต็มของแอปมีลักษณะดังนี้:

การกระทำครั้งแรก - ดาวน์โหลดฐานโครงการ. เปิดใน Android Studio 3.0 หรือใหม่กว่า เราสร้างและดำเนินโครงการและเห็นหน้าจอสีขาว ทุกอย่างเรียบร้อยดีอย่างที่ควรจะเป็น

การกระทำของผู้ใช้เขียนในโครงการตามลำดับเวลาเพื่อให้ทุกอย่างชัดเจน หากต้องการดู ให้เปิด View -> Tool Windows -> TODO

เราศึกษาโครงการและเปิด colors.xml เพื่อประเมินจานสี strings.xml มีข้อมูลข้อความ (คำอธิบายภาพ) และ style.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.

ตอนนี้โครงการมีลักษณะดังนี้:

อย่างที่คุณเห็น การคำนวณต้นทุนจะขึ้นอยู่กับข้อมูลที่ผู้ใช้ป้อน

การพัฒนาส่วนบัญชี

เพิ่มรหัสด้านล่างใน LinearLayout หลังส่วนค่าใช้จ่าย (#2):

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

ปิด 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 ImageButtons มาพร้อมกับไอคอนในโฟลเดอร์ที่มีสิทธิ์ในการเขียน

คัดลอกทั้งส่วนและเพิ่มต่อไปนี้ (#5):

รหัส ImageButton (ลบ PeopleButton, addPeopleButton)
รหัส TextView (numberOfPeopleStaticText, numberOfPeopleTextView)
ข้อความเริ่มต้นสำหรับ numberOfPeopleTextView (ควรเป็น 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
 
}

เสร็จสิ้นปุ่ม

หากต้องการเพิ่มการรองรับการคลิกปุ่ม ให้ใช้งาน View.OnClickListener ที่ระดับชั้นเรียน (#7):

คลาส 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) {}

ตอนนี้ทุกอย่างใช้งานได้แล้ว! ขอแสดงความยินดี คุณได้เขียน "Tipping Calculator" ของคุณเองใน Kotlin

Skillbox แนะนำ:

หลักสูตรภาคปฏิบัติสองปี "ฉันเป็นนักพัฒนาเว็บ PRO".

คอร์สออนไลน์ "นักพัฒนา C#".

หลักสูตรปีปฏิบัติ "นักพัฒนา PHP จาก 0 ถึง PRO".

ที่มา: will.com

สร้างเครื่องคิดเลขทิปใน Kotlin: มันทำงานอย่างไร?