கோட்லினில் டிப் கால்குலேட்டரை உருவாக்குதல்: இது எப்படி வேலை செய்கிறது?

கோட்லினில் உதவிக்குறிப்புகளைக் கணக்கிடுவதற்கான எளிய பயன்பாட்டை எவ்வாறு உருவாக்குவது என்பதை நாங்கள் உங்களுக்குச் சொல்கிறோம். இன்னும் துல்லியமாக, கோட்லின் 1.3.21, ஆண்ட்ராய்டு 4, ஆண்ட்ராய்டு ஸ்டுடியோ 3. கட்டுரை ஆண்ட்ராய்டு பயன்பாட்டு மேம்பாட்டில் தங்கள் பயணத்தைத் தொடங்குபவர்களுக்கு முதலில் சுவாரஸ்யமாக இருக்கும். பயன்பாட்டிற்குள் என்ன, எப்படி வேலை செய்கிறது என்பதைப் புரிந்துகொள்ள இது உங்களை அனுமதிக்கிறது.

ஒரு உணவகம் அல்லது ஓட்டலில் நேரத்தை செலவிட முடிவு செய்யும் நிறுவனத்தின் உதவிக்குறிப்புகளின் அளவை நீங்கள் கணக்கிட வேண்டியிருக்கும் போது இந்த கால்குலேட்டர் கைக்கு வரும். நிச்சயமாக, எல்லோரும் எப்போதும் பணியாளர்களுக்கு ஒரு உதவிக்குறிப்பை விட்டுவிடுவதில்லை; இது ஒரு மேற்கத்திய பாரம்பரியம், ஆனால் அத்தகைய பயன்பாட்டை உருவாக்கும் செயல்முறை எந்தவொரு சந்தர்ப்பத்திலும் சுவாரஸ்யமானது.

நாங்கள் நினைவூட்டுகிறோம்: "Habr" இன் அனைத்து வாசகர்களுக்கும் - "Habr" விளம்பரக் குறியீட்டைப் பயன்படுத்தி எந்த Skillbox படிப்பிலும் சேரும்போது 10 ரூபிள் தள்ளுபடி.

Skillbox பரிந்துரைக்கிறது: நடைமுறை படிப்பு "மொபைல் டெவலப்பர் பி.ஆர்.ஓ.

பயன்பாட்டில் செயல்பாட்டில் இது போல் தெரிகிறது:

மொத்தத் தொகையின் விரும்பிய சதவீதத்தை, கூட்டத்தில் பங்கேற்பாளர்களின் எண்ணிக்கையை உள்ளிட்டு, முடிவைப் பெறுங்கள் - நீங்கள் விட்டுச் செல்ல வேண்டிய உதவிக்குறிப்பின் அளவு.

தொடங்குதல்

முழுமையான பயன்பாட்டு இடைமுகம் இதுபோல் தெரிகிறது:




முதல் செயல் - திட்டத்தின் தளத்தைப் பதிவிறக்குகிறது. Android Studio 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 உள்ளீட்டை ஒரு வரியாகக் கட்டுப்படுத்துகிறது, இந்த அளவுருவை எண் டெசிமல் உள்ளீட்டு வகைக்கு அமைக்க வேண்டும்.

சோதனைக்கான திட்டத்தை நாங்கள் தொடங்குகிறோம் மற்றும் பொதுவான சேதத்திற்கான அளவுருக்களை உள்ளிடுகிறோம் (உடைந்த கோப்பைகள், தட்டுகள் போன்றவை)

"மக்கள் மற்றும் குறிப்புகள்" பிரிவின் வளர்ச்சி

டிப் வால்யூம் தேர்வைச் சேர்க்க, கீழே உள்ள குறியீட்டை புதிய லீனியர் லேஅவுட் பிரிவில் (#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):

• ImageButton ஐடிகள் (PeopleButton, addPeopleButton ஆகியவற்றைக் கழிக்கவும்)
• TextView ஐடிகள்(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 ஐச் செயல்படுத்துகிறோம்:

வகுப்பு முதன்மை செயல்பாடு: 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 {

பின்னர் நாம் 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) {}

சரி, இப்போது எல்லாம் வேலை செய்கிறது! வாழ்த்துகள், நீங்கள் உங்கள் சொந்த "டிப் கால்குலேட்டரை" கோட்லினில் எழுதியுள்ளீர்கள்.

Skillbox பரிந்துரைக்கிறது:

• இரண்டு வருட நடைமுறை படிப்பு "நான் ஒரு வலை டெவலப்பர் புரோ".
• ஆன்லைன் படிப்பு "சி # டெவலப்பர்".
• நடைமுறை ஆண்டு படிப்பு "0 முதல் PRO வரையிலான PHP டெவலப்பர்".

ஆதாரம்: www.habr.com