कोटलिनमा टिप क्यालकुलेटर सिर्जना गर्दै: यसले कसरी काम गर्छ?

हामी तपाईंलाई Kotlin मा सुझावहरू गणना गर्न सरल अनुप्रयोग कसरी सिर्जना गर्ने बताउँछौं। थप स्पष्ट रूपमा, कोटलिन 1.3.21, एन्ड्रोइड 4, एन्ड्रोइड स्टुडियो 3। लेख रोचक हुनेछ, सबै भन्दा पहिले, एन्ड्रोइड अनुप्रयोग विकासमा आफ्नो यात्रा सुरु गर्नेहरूका लागि। यसले तपाईंलाई अनुप्रयोग भित्र के र कसरी काम गर्छ भनेर बुझ्न अनुमति दिन्छ।

रेस्टुरेन्ट वा क्याफेमा समय बिताउने निर्णय गर्ने कम्पनीबाट सुझावहरूको मात्रा गणना गर्न आवश्यक हुँदा यो क्यालकुलेटर काममा आउनेछ। निस्सन्देह, सबैले सधैं वेटरहरूलाई टिप छोड्दैनन्; यो एक पश्चिमी परम्परा हो, तर यस्तो अनुप्रयोग विकास गर्ने प्रक्रिया कुनै पनि अवस्थामा रोचक छ।

हामी सम्झाउँछौं: सबै Habr पाठकहरूका लागि - Habr प्रोमो कोड प्रयोग गरी कुनै पनि Skillbox पाठ्यक्रममा भर्ना गर्दा १०,००० रूबल छुट।

Skillbox सिफारिस गर्दछ: व्यावहारिक पाठ्यक्रम "मोबाइल विकासकर्ता प्रो.

यो अनुप्रयोग सञ्चालनमा जस्तो देखिन्छ:

तपाईंले कुल रकमको इच्छित प्रतिशत, बैठक सहभागीहरूको संख्या प्रविष्ट गर्नुहोस्, र परिणाम प्राप्त गर्नुहोस् - तपाईंले छोड्नुपर्ने टिपको मात्रा।

सुरु गर्दै

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




पहिलो कार्य - परियोजना आधार डाउनलोड गर्दै। यसलाई एन्ड्रोइड स्टुडियो 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 मा थप्नुहोस्:

<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 मा सेट हुनुपर्छ।

हामी परीक्षणको लागि परियोजना सुरु गर्छौं र सामान्य क्षतिको लागि प्यारामिटरहरू प्रविष्ट गर्छौं (टुटेको कप, प्लेटहरू, आदि)।

"व्यक्ति र सुझाव" खण्ड को विकास

टिप भोल्युम चयन थप्नको लागि, तलको कोडलाई नयाँ 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):

• ImageButton ids (subtractPeopleButton, AddPeopleButton)
• 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
 
}

बटनहरू समाप्त गर्दै

बटन क्लिकहरूको लागि समर्थन थप्न, हामी कक्षा स्तर (#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() {
 
…
 
}

अनुप्रयोग सुरु गरौं। यो राम्रो देखिन्छ र काम गर्दछ। तर यो राम्रो हुन सक्छ।

यदि तपाईंले बिल रकम हटाउन प्रयास गर्नुभयो र त्यसपछि सुझाव वा साथीहरूको संख्या बढाउनुभयो भने, अनुप्रयोग क्र्यास हुनेछ किनभने शून्य लागत मूल्यको लागि अझै कुनै जाँच छैन। यसबाहेक, यदि तपाईंले बिल रकम परिवर्तन गर्ने प्रयास गर्नुभयो भने, शुल्कहरू अद्यावधिक हुनेछैनन्।

अन्तिम चरणहरू

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) {}

खैर, अब बिल्कुल सबै काम गर्दछ! बधाई छ, तपाईंले Kotlin मा आफ्नो "टिप क्याल्कुलेटर" लेख्नुभएको छ।

Skillbox सिफारिस गर्दछ:

• दुई वर्षे व्यावहारिक पाठ्यक्रम "म एक वेब विकासकर्ता प्रो हुँ".
• अनलाइन कोर्स "C# विकासकर्ता".
• एक वर्षको व्यावहारिक पाठ्यक्रम "0 देखि PRO मा PHP विकासकर्ता".

स्रोत: www.habr.com