कोटलिन में एक टिप कैलकुलेटर बनाना: यह कैसे काम करता है?

हम आपको दिखाते हैं कि कोटलिन में एक सरल टिप गणना एप्लिकेशन कैसे बनाया जाए। अधिक सटीक होने के लिए, कोटलिन 1.3.21, एंड्रॉइड 4, एंड्रॉइड स्टूडियो 3। लेख दिलचस्प होगा, सबसे पहले, उन लोगों के लिए जो एंड्रॉइड एप्लिकेशन विकसित करने में अपनी यात्रा शुरू करते हैं। यह आपको यह समझने की अनुमति देता है कि एप्लिकेशन के अंदर क्या और कैसे काम करता है।

ऐसा कैलकुलेटर तब उपयोगी होता है जब आपको किसी कंपनी से युक्तियों की मात्रा की गणना करने की आवश्यकता होती है जो किसी रेस्तरां या कैफे में समय बिताने का निर्णय लेती है। बेशक, हर कोई और हमेशा वेटरों के लिए चाय नहीं छोड़ता, यह एक पश्चिमी परंपरा है, लेकिन इस तरह के एप्लिकेशन को विकसित करने की प्रक्रिया किसी भी मामले में दिलचस्प है।

अनुस्मारक: "हैबर" के सभी पाठकों के लिए - "हैबर" प्रचार कोड का उपयोग करके किसी भी स्किलबॉक्स पाठ्यक्रम में नामांकन करते समय 10 रूबल की छूट।

स्किलबॉक्स अनुशंसा करता है: व्यावहारिक पाठ्यक्रम "मोबाइल डेवलपर प्रो.

जब यह ऐप चल रहा हो तो यह कैसा दिखता है:

आप कुल राशि का वांछित प्रतिशत, बैठक में भाग लेने वालों की संख्या दर्ज करते हैं और परिणाम प्राप्त करते हैं - युक्तियों की मात्रा जो छोड़ी जानी चाहिए।

शुरू

ऐप का पूरा इंटरफ़ेस इस तरह दिखता है:




प्रथम क्रिया - प्रोजेक्ट आधार डाउनलोड. इसे एंड्रॉइड स्टूडियो 3.0 या उसके बाद के संस्करण में खोलें। हम प्रोजेक्ट बनाते हैं और चलाते हैं और एक सफेद स्क्रीन देखते हैं। सब कुछ ठीक है, जैसा होना चाहिए।

प्रोजेक्ट में उपयोगकर्ता क्रियाएँ कालानुक्रमिक क्रम में लिखी जाती हैं, ताकि सब कुछ स्पष्ट हो। इसे देखने के लिए, View -> Tool Windows -> TODO खोलें।

हम प्रोजेक्ट का अध्ययन करते हैं और रंग पैलेट का मूल्यांकन करने के लिए color.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"/>

अब आप मान निर्देशिका को स्टाइल कर सकते हैं या रंगों के साथ खेल सकते हैं सामग्री.आईओ उपकरण.

अब प्रोजेक्ट इस तरह दिखता है:

जैसा कि आप देख सकते हैं, लागत की गणना उपयोगकर्ता द्वारा दर्ज किए गए डेटा पर आधारित है।

खाता अनुभाग का विकास

व्यय अनुभाग (#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"/>

चूंकि एप्लिकेशन का मुख्य कार्य रेस्तरां में सभाओं में भाग लेने वाले प्रत्येक प्रतिभागी के लिए व्यक्तिगत लागत की गणना करना है, इसलिए कॉस्टपरपर्सनटेक्स्टव्यू मुख्य भूमिका निभाता है।

EditText इनपुट को एक पंक्ति तक सीमित करता है, इस पैरामीटर को NumberDecimal इनपुट प्रकार पर सेट किया जाना चाहिए।

हम परीक्षण के लिए प्रोजेक्ट शुरू करते हैं और कुल क्षति (टूटे हुए कप, प्लेट आदि) के पैरामीटर दर्ज करते हैं।

"लोग और युक्तियाँ" अनुभाग का विकास

टिप राशि चयनकर्ता जोड़ने के लिए, नीचे दिए गए कोड को एक नए 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):

• इमेजबटन आईडी (पीपलबटन घटाएं, पीपुलबटन जोड़ें)
• टेक्स्टव्यू आईडी (नंबरऑफपीपलस्टैटिकटेक्स्ट, नंबरऑफपीपलटेक्स्टव्यू)
• 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() {
 
…
 
}

हम एप्लिकेशन लॉन्च करते हैं। यह बहुत अच्छा दिखता है और काम भी करता है। लेकिन यह बेहतर हो सकता है.

यदि आप बिल राशि निकालने का प्रयास करते हैं और फिर संकेत या मित्रों की संख्या बढ़ाते हैं, तो ऐप क्रैश हो जाएगा क्योंकि शून्य लागत के लिए अभी तक कोई चेक नहीं है। इसके अलावा, यदि आप चालान राशि बदलने का प्रयास करते हैं, तो शुल्क अपडेट नहीं किए जाएंगे।

अंतिम चरण

टेक्स्टवॉचर जोड़ें (#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 वेब डेवलपर हूं".
• ऑनलाइन पाठ्यक्रम "सी# डेवलपर".
• व्यावहारिक वर्ष पाठ्यक्रम "PHP डेवलपर 0 से PRO तक".

स्रोत: www.habr.com