കോട്ലിനിൽ ഒരു ടിപ്പ് കാൽക്കുലേറ്റർ സൃഷ്ടിക്കുന്നു: ഇത് എങ്ങനെ പ്രവർത്തിക്കും?

കോട്ലിനിലെ നുറുങ്ങുകൾ കണക്കുകൂട്ടുന്നതിനുള്ള ഒരു ലളിതമായ ആപ്ലിക്കേഷൻ എങ്ങനെ സൃഷ്ടിക്കാമെന്ന് ഞങ്ങൾ നിങ്ങളോട് പറയുന്നു. കൂടുതൽ കൃത്യമായി പറഞ്ഞാൽ, കോട്‌ലിൻ 1.3.21, ആൻഡ്രോയിഡ് 4, ആൻഡ്രോയിഡ് സ്റ്റുഡിയോ 3. ആൻഡ്രോയിഡ് ആപ്ലിക്കേഷൻ ഡെവലപ്‌മെന്റിൽ യാത്ര ആരംഭിക്കുന്നവർക്ക് ലേഖനം രസകരമായിരിക്കും. ആപ്ലിക്കേഷനിൽ എന്താണ്, എങ്ങനെ പ്രവർത്തിക്കുന്നുവെന്ന് മനസിലാക്കാൻ ഇത് നിങ്ങളെ അനുവദിക്കുന്നു.

ഒരു റെസ്റ്റോറന്റിലോ കഫേയിലോ സമയം ചെലവഴിക്കാൻ തീരുമാനിക്കുന്ന ഒരു കമ്പനിയിൽ നിന്നുള്ള നുറുങ്ങുകളുടെ അളവ് നിങ്ങൾ കണക്കാക്കേണ്ടിവരുമ്പോൾ ഈ കാൽക്കുലേറ്റർ ഉപയോഗപ്രദമാകും. തീർച്ചയായും, എല്ലാവരും എപ്പോഴും വെയിറ്റർമാർക്ക് ഒരു നുറുങ്ങ് നൽകില്ല; ഇത് ഒരു പാശ്ചാത്യ പാരമ്പര്യമാണ്, എന്നാൽ അത്തരമൊരു ആപ്ലിക്കേഷൻ വികസിപ്പിക്കുന്ന പ്രക്രിയ ഏത് സാഹചര്യത്തിലും രസകരമാണ്.

ഞങ്ങൾ ഓർമ്മിപ്പിക്കുന്നു: "Habr"-ന്റെ എല്ലാ വായനക്കാർക്കും - "Habr" പ്രൊമോഷണൽ കോഡ് ഉപയോഗിച്ച് ഏതെങ്കിലും സ്കിൽബോക്സ് കോഴ്സിൽ ചേരുമ്പോൾ 10 റൂബിൾസ് കിഴിവ്.

സ്കിൽബോക്സ് ശുപാർശ ചെയ്യുന്നു: പ്രായോഗിക കോഴ്സ് "മൊബൈൽ ഡെവലപ്പർ പി.ആർ.ഒ.

പ്രവർത്തനത്തിൽ ആപ്ലിക്കേഷൻ ഇതുപോലെ കാണപ്പെടുന്നു:

നിങ്ങൾ ആകെ തുകയുടെ ആവശ്യമുള്ള ശതമാനം, മീറ്റിംഗിൽ പങ്കെടുക്കുന്നവരുടെ എണ്ണം എന്നിവ നൽകുക, ഫലം നേടുക - നിങ്ങൾ ഉപേക്ഷിക്കേണ്ട ടിപ്പിന്റെ തുക.

ആരംഭിക്കുന്നു

പൂർണ്ണമായ ആപ്ലിക്കേഷൻ ഇന്റർഫേസ് ഇതുപോലെ കാണപ്പെടുന്നു:




ആദ്യ പ്രവർത്തനം - പ്രോജക്റ്റ് ബേസ് ഡൗൺലോഡ് ചെയ്യുന്നു. ആൻഡ്രോയിഡ് സ്റ്റുഡിയോ 3.0-ലോ അതിനുശേഷമുള്ള പതിപ്പിലോ ഇത് തുറക്കുക. ഞങ്ങൾ പ്രോജക്റ്റ് നിർമ്മിക്കുകയും സമാരംഭിക്കുകയും ഒരു വൈറ്റ് സ്ക്രീൻ കാണുകയും ചെയ്യുന്നു. എല്ലാം ശരിയാണ്, അങ്ങനെയായിരിക്കണം.

എല്ലാം വ്യക്തമാക്കുന്നതിന് കാലക്രമത്തിൽ ഉപയോക്തൃ പ്രവർത്തനങ്ങൾ പ്രോജക്റ്റിൽ എഴുതിയിരിക്കുന്നു. ഇത് കാണുന്നതിന്, View -> Tool Windows -> TODO തുറക്കുക.

ഞങ്ങൾ പ്രോജക്റ്റ് പഠിക്കുകയും വർണ്ണ പാലറ്റ് വിലയിരുത്തുന്നതിന് color.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
    android_layout_width="match_parent"
    android_layout_height="match_parent"
    android_orientation="vertical"
    android_background="@color/colorAccent">
 
<! — TODO #3: Build Bill Section →
 
… 
</LinearLayout>

TODO-കളുടെ ലിസ്റ്റിന് ശേഷം ഞങ്ങൾ ലീനിയർ ലേഔട്ട് ക്ലോസ് ചെയ്യുക, തുടർന്ന് പുതിയ കോഡ് ചേർക്കുക, അത് ലീനിയർ ലേഔട്ടിനുള്ളിൽ (#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 ആയി സജ്ജീകരിക്കണം.

ഞങ്ങൾ ടെസ്റ്റിനായി പ്രോജക്റ്റ് സമാരംഭിക്കുകയും പൊതുവായ കേടുപാടുകൾക്കുള്ള പാരാമീറ്ററുകൾ നൽകുകയും ചെയ്യുന്നു (തകർന്ന കപ്പുകൾ, പ്ലേറ്റുകൾ മുതലായവ)

"ആളുകളും നുറുങ്ങുകളും" വിഭാഗത്തിന്റെ വികസനം

ഒരു ടിപ്പ് വോളിയം തിരഞ്ഞെടുക്കൽ ചേർക്കുന്നതിന്, പുതിയ ലീനിയർ ലേഔട്ട് വിഭാഗത്തിലേക്ക് (#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):

• ഇമേജ് ബട്ടൺ ഐഡികൾ (പീപ്പിൾബട്ടൺ കുറയ്ക്കുക, ആഡ് പീപ്പിൾബട്ടൺ)
• ടെക്സ്റ്റ് വ്യൂ ഐഡികൾ (നമ്പർഓഫ് പീപ്പിൾസ്റ്റാറ്റിക് ടെക്സ്റ്റ്, നമ്പർഓഫ് പീപ്പിൾടെക്സ്റ്റ് വ്യൂ)
• 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()
        }
    }

ബട്ടണുകളുടെയും സ്വിച്ചുകളുടെയും കാര്യത്തിൽ, കോട്ലിൻ എല്ലാം വളരെ രസകരമാണ്! എല്ലാ ഇൻക്രിമെന്റ്, ഡിക്രിമെന്റ് ഫംഗ്‌ഷനുകളിലേക്കും ചുവടെയുള്ള കോഡ് ചേർക്കുക
(#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() {
 
…
 
}

നമുക്ക് ആപ്ലിക്കേഷൻ സമാരംഭിക്കാം. ഇത് മികച്ചതായി കാണുകയും പ്രവർത്തിക്കുകയും ചെയ്യുന്നു. എന്നാൽ ഇത് മികച്ചതാകാം.

നിങ്ങൾ ബിൽ തുക നീക്കം ചെയ്‌ത് നുറുങ്ങുകളുടെയോ സുഹൃത്തുക്കളുടെയോ എണ്ണം വർദ്ധിപ്പിക്കാൻ ശ്രമിക്കുകയാണെങ്കിൽ, പൂജ്യം വിലയ്‌ക്ക് ഇതുവരെ ഒരു പരിശോധനയും ഇല്ലാത്തതിനാൽ ആപ്ലിക്കേഷൻ തകരാറിലാകും. മാത്രമല്ല, നിങ്ങൾ ബിൽ തുക മാറ്റാൻ ശ്രമിച്ചാൽ, ചാർജുകൾ അപ്ഡേറ്റ് ചെയ്യപ്പെടില്ല.

അവസാന ഘട്ടങ്ങൾ

ടെക്സ്റ്റ് വാച്ചർ ചേർക്കുക (#16):

ക്ലാസ് പ്രധാന പ്രവർത്തനം: AppCompatActivity(), View.OnClickListener, TextWatcher {

തുടർന്ന് ഞങ്ങൾ ബിൽഎഡിറ്റ് ടെക്സ്റ്റ് ലിസണർ (#17) ഉൾപ്പെടുത്തി:

billEditText.addTextChangedListener(ഇത്)

കൂടാതെ ടെക്സ്റ്റ് വാച്ചർ (#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) {}

ശരി, ഇപ്പോൾ എല്ലാം പ്രവർത്തിക്കുന്നു! അഭിനന്ദനങ്ങൾ, നിങ്ങൾ കോട്ലിനിൽ നിങ്ങളുടെ സ്വന്തം "ടിപ്പ് കാൽക്കുലേറ്റർ" എഴുതിയിട്ടുണ്ട്.

സ്കിൽബോക്സ് ശുപാർശ ചെയ്യുന്നു:

• രണ്ടുവർഷത്തെ പ്രാക്ടിക്കൽ കോഴ്സ് "ഞാൻ ഒരു വെബ് ഡെവലപ്പർ PRO ആണ്".
• ഓൺലൈൻ കോഴ്സ് "C# ഡെവലപ്പർ".
• പ്രായോഗിക വർഷ കോഴ്സ് "0 മുതൽ PRO വരെയുള്ള PHP ഡവലപ്പർ".

അവലംബം: www.habr.com