ការបង្កើតម៉ាស៊ីនគិតលេខនៅ 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។

យើងសិក្សាគម្រោង និងបើក colours.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.

ឥឡូវនេះគម្រោងមើលទៅដូចនេះ៖

ដូចដែលអ្នកអាចឃើញការគណនាថ្លៃដើមគឺផ្អែកលើទិន្នន័យដែលបានបញ្ចូលដោយអ្នកប្រើប្រាស់។

ការអភិវឌ្ឍន៍ផ្នែកគណនី

បន្ថែមកូដខាងក្រោមទៅ 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 បន្ទាប់ពីបញ្ជី TODOs ហើយបន្ទាប់មកបន្ថែមកូដថ្មី ដោយដាក់វានៅខាងក្នុង 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។ ប៊ូតុងរូបភាពត្រូវបានផ្តល់ជាមួយរូបតំណាងនៅក្នុងថតដែលមានសិទ្ធិសរសេរ។

ចម្លងផ្នែកទាំងមូល ហើយបន្ថែមខាងក្រោម (#5)៖

• លេខសម្គាល់ប៊ូតុងរូបភាព (ដកប៊ូតុងមនុស្ស ប៊ូតុងបន្ថែមមនុស្ស)
• លេខសម្គាល់ 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)៖

class 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)៖

ថ្នាក់មេសកម្មភាព៖ 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".

ប្រភព: www.habr.com