کوٹلن میں ٹپ کیلکولیٹر بنانا: یہ کیسے کام کرتا ہے؟

ہم آپ کو دکھاتے ہیں کہ کوٹلن میں ایک سادہ ٹپ کیلکولیشن ایپلی کیشن کیسے بنایا جائے۔ مزید واضح طور پر، کوٹلن 1.3.21، اینڈرائیڈ 4، اینڈرائیڈ اسٹوڈیو 3۔ مضمون سب سے پہلے ان لوگوں کے لیے دلچسپ ہوگا جو اینڈرائیڈ ایپلی کیشنز تیار کرنے میں اپنا سفر شروع کرتے ہیں۔ یہ آپ کو یہ سمجھنے کی اجازت دیتا ہے کہ ایپلی کیشن کے اندر کیا اور کیسے کام کرتا ہے۔

ایسا کیلکولیٹر اس وقت مفید ہوتا ہے جب آپ کو کسی ایسی کمپنی سے ٹپس کی مقدار کا حساب لگانا ہو جو ریستوران یا کیفے میں وقت گزارنے کا فیصلہ کرتی ہے۔ بے شک، ہر کوئی نہیں اور ہمیشہ ویٹروں کے لیے چائے نہیں چھوڑتا، یہ ایک مغربی روایت سے زیادہ ہے، لیکن اس طرح کی ایپلی کیشن تیار کرنے کا عمل کسی بھی صورت میں دلچسپ ہے۔

ہم آپ کو یاد دلاتے ہیں: "Habr" کے تمام قارئین کے لیے - "Habr" پروموشنل کوڈ کا استعمال کرتے ہوئے کسی بھی Skillbox کورس میں داخلہ لینے پر 10 rubles کی رعایت۔

Skillbox تجویز کرتا ہے: پریکٹیکل کورس "موبائل ڈویلپر پی آر او.

یہاں یہ ہے کہ جب یہ ایپ چل رہی ہو تو کیسی دکھتی ہے:

آپ کل رقم کا مطلوبہ فیصد، میٹنگ میں شرکاء کی تعداد درج کرتے ہیں اور نتیجہ حاصل کرتے ہیں - تجاویز کی مقدار جو باقی رہنی چاہیے۔

شروع ہوا چاہتا ہے

ایپ کا مکمل انٹرفیس اس طرح لگتا ہے:




پہلا عمل - پروجیکٹ بیس ڈاؤن لوڈ. اسے اینڈروئیڈ اسٹوڈیو 3.0 یا بعد میں کھولیں۔ ہم پروجیکٹ بناتے اور چلاتے ہیں اور ایک سفید اسکرین دیکھتے ہیں۔ سب کچھ ٹھیک ہے، جیسا کہ ہونا چاہیے۔

صارف کے اعمال کو پراجیکٹ میں تاریخی ترتیب میں لکھا جاتا ہے، تاکہ سب کچھ واضح ہو۔ اسے دیکھنے کے لیے ویو -> ٹول ونڈوز -> ٹوڈو کھولیں۔

ہم پروجیکٹ کا مطالعہ کرتے ہیں اور رنگ پیلیٹ کا اندازہ کرنے کے لیے 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):

• امیج بٹن آئی ڈیز (پیوپل بٹن کو گھٹائیں، پیپل بٹن شامل کریں)
• 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() {
 
…
 
}

ہم ایپلیکیشن لانچ کرتے ہیں۔ یہ بہت اچھا لگتا ہے اور کام کرتا ہے۔ لیکن یہ بہتر ہوسکتا ہے۔

اگر آپ بل کی رقم کو ہٹانے کی کوشش کرتے ہیں اور پھر اشارے یا دوستوں کی تعداد میں اضافہ کرتے ہیں تو ایپ کریش ہو جائے گی کیونکہ ابھی تک صفر لاگت کا کوئی چیک نہیں ہے۔ مزید یہ کہ، اگر آپ انوائس کی رقم کو تبدیل کرنے کی کوشش کرتے ہیں، تو چارجز اپ ڈیٹ نہیں کیے جائیں گے۔

آخری مراحل

ٹیکسٹ واچر شامل کریں (#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) {}

ٹھیک ہے، اب سب کچھ کام کرتا ہے! مبارک ہو، آپ نے کوٹلن میں اپنا "ٹپنگ کیلکولیٹر" لکھا ہے۔

Skillbox تجویز کرتا ہے:

• دو سالہ پریکٹیکل کورس "میں ایک PRO ویب ڈویلپر ہوں".
• آن لائن کورس۔ "C# ڈویلپر".
• عملی سال کا کورس "0 سے پی آر او تک پی ایچ پی ڈویلپر".

ماخذ: www.habr.com