कोटलिनमध्ये टिप कॅल्क्युलेटर तयार करणे: ते कसे कार्य करते?

कोटलिनमधील टिपांची गणना करण्यासाठी एक साधा अनुप्रयोग कसा तयार करायचा ते आम्ही तुम्हाला सांगतो. अधिक तंतोतंत, Kotlin 1.3.21, Android 4, Android स्टुडिओ 3. लेख मनोरंजक असेल, सर्व प्रथम, जे Android अनुप्रयोग विकासात त्यांचा प्रवास सुरू करत आहेत त्यांच्यासाठी. हे आपल्याला अनुप्रयोगामध्ये काय आणि कसे कार्य करते हे समजून घेण्यास अनुमती देते.

जेव्हा तुम्हाला एखाद्या रेस्टॉरंट किंवा कॅफेमध्ये वेळ घालवण्याचा निर्णय घेणाऱ्या कंपनीकडून टिप्सची रक्कम मोजायची असेल तेव्हा हे कॅल्क्युलेटर उपयोगी पडेल. अर्थात, प्रत्येकजण नेहमी वेटर्सना टिप देत नाही; ही एक पाश्चात्य परंपरा आहे, परंतु अशा अनुप्रयोग विकसित करण्याची प्रक्रिया कोणत्याही परिस्थितीत मनोरंजक आहे.

आम्ही आठवण करून देतो: सर्व Habr वाचकांसाठी - Habr प्रोमो कोड वापरून कोणत्याही स्किलबॉक्स कोर्समध्ये नावनोंदणी करताना 10 रूबल सवलत.

स्किलबॉक्स शिफारस करतो: प्रॅक्टिकल कोर्स "मोबाइल डेव्हलपर PRO.

हे ऍप्लिकेशन ऑपरेशनमध्ये असे दिसते:

आपण एकूण रकमेची इच्छित टक्केवारी, मीटिंगमधील सहभागींची संख्या प्रविष्ट करा आणि परिणाम मिळवा - आपण सोडलेल्या टीपची रक्कम.

प्रारंभ करणे

संपूर्ण अनुप्रयोग इंटरफेस असे दिसते:




पहिली कृती - प्रोजेक्ट बेस डाउनलोड करत आहे. ते Android Studio 3.0 किंवा नंतरच्या आवृत्तीमध्ये उघडा. आम्ही प्रकल्प तयार करतो आणि लॉन्च करतो आणि एक पांढरा स्क्रीन पाहतो. सर्व काही ठीक आहे, ते कसे असावे.

सर्व काही स्पष्ट करण्यासाठी वापरकर्त्याच्या कृती प्रकल्पामध्ये कालक्रमानुसार लिहिलेल्या आहेत. ते पाहण्यासाठी, View -> Tool Windows -> 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
    android_layout_width="match_parent"
    android_layout_height="match_parent"
    android_orientation="vertical"
    android_background="@color/colorAccent">
 
<! — TODO #3: Build Bill Section →
 
… 
</LinearLayout>

आम्ही TODOs च्या सूचीनंतर 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 वर सेट केले जाणे आवश्यक आहे.

आम्ही चाचणीसाठी प्रकल्प लाँच करतो आणि सामान्य नुकसान (तुटलेले कप, प्लेट्स इ.) साठी पॅरामीटर्स प्रविष्ट करतो.

"लोक आणि टिपा" विभागाचा विकास

टिप व्हॉल्यूम निवड जोडण्यासाठी, खालील कोड नवीन लिनियरलेआउट विभागात पेस्ट करा (#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 ids(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):

वर्ग मुख्य क्रियाकलाप: 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() {
 
…
 
}

चला अनुप्रयोग लाँच करूया. ते छान दिसते आणि कार्य करते. पण ते अधिक चांगले असू शकते.

जर तुम्ही बिलाची रक्कम काढून टाकण्याचा प्रयत्न केला आणि नंतर टिप्स किंवा मित्रांची संख्या वाढवली, तर अॅप्लिकेशन क्रॅश होईल कारण शून्य किंमत मूल्यासाठी अद्याप कोणतेही चेक नाही. शिवाय, तुम्ही बिलाची रक्कम बदलण्याचा प्रयत्न केल्यास, शुल्क अपडेट केले जाणार नाही.

अंतिम टप्पे

TextWatcher जोडा (#16):

वर्ग मुख्य क्रियाकलाप: AppCompatActivity(), View.OnClickListener, TextWatcher {

मग आम्ही billEditText श्रोता (#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) {}

बरं, आता पूर्णपणे सर्वकाही कार्य करते! अभिनंदन, तुम्ही कोटलिनमध्ये तुमचे स्वतःचे “टिप कॅल्क्युलेटर” लिहिले आहे.

स्किलबॉक्स शिफारस करतो:

• दोन वर्षांचा प्रॅक्टिकल कोर्स "मी वेब डेव्हलपर प्रो आहे".
• ऑनलाईन कोर्स "C# विकसक".
• एक वर्षाचा प्रॅक्टिकल कोर्स "PHP विकसक 0 ते PRO".

स्त्रोत: www.habr.com