🥇 Kotlin ۾ ٽپ ڳڻپيوڪر ٺاهڻ: اهو ڪيئن ڪم ڪندو آهي؟

اسان توهان کي ٻڌايان ٿو ته ڪوٽلن ۾ ٽوڪن جي حساب سان هڪ سادي ايپليڪيشن ڪيئن ٺاهي. وڌيڪ واضح طور تي، Kotlin 1.3.21، Android 4، Android اسٽوڊيو 3. مضمون دلچسپ ٿيندو، سڀ کان پهريان، انهن لاء جيڪي Android ايپليڪيشن ڊولپمينٽ ۾ پنهنجو سفر شروع ڪري رهيا آهن. اهو توهان کي سمجهڻ جي اجازت ڏئي ٿو ته ڇا ۽ ڪيئن اهو ڪم ڪري ٿو ايپليڪيشن اندر.

هي ڳڻپيوڪر ڪم ۾ اچي ويندو جڏهن توهان کي ڪنهن ڪمپني جي تجويزن جي مقدار کي ڳڻڻ جي ضرورت آهي جيڪا ڪنهن ريسٽورنٽ يا ڪيفي ۾ وقت گذارڻ جو فيصلو ڪري ٿي. يقينن، هرڪو هميشه ويٽرن کي هڪ ٽپ نه ڇڏيندو آهي؛ اهو هڪ مغربي روايت آهي، پر اهڙي ايپليڪيشن کي ترقي ڪرڻ جو عمل ڪنهن به صورت ۾ دلچسپ آهي.

اسان توهان کي ياد ڏياريون ٿا: "Habr" جي سڀني پڙهندڙن لاءِ - 10 روبل جي رعايت جڏهن "Habr" پروموشنل ڪوڊ استعمال ڪندي ڪنهن به اسڪل باڪس ڪورس ۾ داخلا.

Skillbox سفارش ڪري ٿو: عملي ڪورس "موبائل ڊولپر پرو.

هي اهو آهي جيڪو ايپليڪيشن عمل ۾ ڏسڻ جهڙو آهي:

توھان داخل ڪريو مجموعي رقم جو مطلوب سيڪڙو، گڏجاڻي ۾ شرڪت ڪندڙن جو تعداد، ۽ نتيجو حاصل ڪريو - ٽپ جي رقم توھان کي ڇڏڻ گھرجي.

شروع ڪريو

مڪمل ايپليڪيشن انٽرفيس هن طرح نظر اچي ٿو:

پهريون عمل - پروجيڪٽ جو بنياد ڊائون لوڊ ڪندي. ان کي کوليو Android اسٽوڊيو 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 اوزار.

هاڻي پروجيڪٽ هن طرح نظر اچي ٿو:

جئين توهان ڏسي سگهو ٿا، قيمتون حساب ڪيا ويا آهن صارف پاران داخل ڪيل ڊيٽا جي بنياد تي.

اڪائونٽس سيڪشن جي ترقي

هيٺ ڏنل ڪوڊ شامل ڪريو LinearLayout کان پوءِ خرچ سيڪشن (#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"/>

جيئن ته ايپليڪيشن جو بنيادي ڪم ريسٽورنٽ جي گڏجاڻي ۾ هر شرڪت لاءِ انفرادي خرچن جو حساب ڪرڻ آهي، قيمت PerPersonTextView اهم ڪردار ادا ڪري ٿو.

EditText ان پٽ کي ھڪڙي لڪير تائين محدود ڪري ٿو، ھي پيٽرولر نمبر ڊيسيمل ان پٽ ٽائپ تي مقرر ڪيو وڃي.

اسان ٽيسٽ لاءِ پروجيڪٽ شروع ڪريون ٿا ۽ عام نقصان لاءِ پيرا ميٽر داخل ڪريون ٿا (ٽٽل پيالو، پليٽون وغيره)

"ماڻهو ۽ تجويزون" سيڪشن جي ترقي

ٽِپ حجم جي چونڊ کي شامل ڪرڻ لاءِ، ھيٺ ڏنل ڪوڊ پيسٽ ڪريو نئين 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):

تصويري بٽڻ ids (ذاتي ڪريوPeopleButton، 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
 
}

بٽڻ کي ختم ڪرڻ

بٽڻ تي ڪلڪ ڪرڻ لاءِ سپورٽ شامل ڪرڻ لاءِ، اسان 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() {
 
…
 
}

اچو ته ايپليڪيشن لانچ ڪريون. اهو ڏسڻ ۾ اچي ٿو ۽ عظيم ڪم ڪري ٿو. پر اهو بهتر ٿي سگهي ٿو.

جيڪڏهن توهان بل جي رقم کي هٽائڻ جي ڪوشش ڪندا ۽ پوءِ ٽوڪن يا دوستن جو تعداد وڌايو، ايپليڪيشن خراب ٿي ويندي ڇو ته اڃا تائين صفر قيمت جي قيمت لاءِ ڪا به چيڪ ناهي. ان کان علاوه، جيڪڏهن توهان بل جي رقم کي تبديل ڪرڻ جي ڪوشش ڪندا، چارجز کي اپڊيٽ نه ڪيو ويندو.

آخري مرحلو

شامل ڪريو TextWatcher (#16):

ڪلاس MainActivity: 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) {}

چڱو، هاڻي بلڪل سڀ ڪم ڪري ٿو! مبارڪون هجن، توهان ڪوٽلن ۾ پنهنجو ”ٽپ ڪيلڪيوليٽر“ لکيو آهي.

Skillbox سفارش ڪري ٿو:

ٻن سالن جو عملي ڪورس "مان هڪ ويب ڊولپر پرو آهيان".

آن لائين ڪورس "سي # ڊولپر".

عملي سال ڪورس "PHP ڊولپر 0 کان PRO تائين".

جو ذريعو: www.habr.com

Kotlin ۾ هڪ ٽپ ڳڻپيندڙ ٺاهڻ: اهو ڪيئن ڪم ڪندو آهي؟