কোটলিনে একটি টিপ ক্যালকুলেটর তৈরি করা: এটি কীভাবে কাজ করে?

আমরা আপনাকে বলি কিভাবে কোটলিনে টিপস গণনার জন্য একটি সহজ অ্যাপ্লিকেশন তৈরি করতে হয়। আরও স্পষ্ট করে বললে, কোটলিন 1.3.21, অ্যান্ড্রয়েড 4, অ্যান্ড্রয়েড স্টুডিও 3। নিবন্ধটি আকর্ষণীয় হবে, প্রথমত, যারা অ্যান্ড্রয়েড অ্যাপ্লিকেশন বিকাশে তাদের যাত্রা শুরু করছেন তাদের জন্য। এটি আপনাকে অ্যাপ্লিকেশনটির ভিতরে কী এবং কীভাবে কাজ করে তা বুঝতে দেয়।

রেস্তোরাঁ বা ক্যাফেতে সময় কাটানোর সিদ্ধান্ত নেয় এমন একটি কোম্পানির কাছ থেকে টিপসের পরিমাণ গণনা করার প্রয়োজন হলে এই ক্যালকুলেটরটি কাজে আসবে। অবশ্যই, সবাই সবসময় ওয়েটারদের কাছে একটি টিপ দেয় না; এটি একটি পশ্চিমা ঐতিহ্য, তবে এই জাতীয় অ্যাপ্লিকেশন বিকাশের প্রক্রিয়া যে কোনও ক্ষেত্রেই আকর্ষণীয়।

আমরা মনে করিয়ে দিচ্ছি: "Habr"-এর সকল পাঠকদের জন্য - "Habr" প্রচারমূলক কোড ব্যবহার করে যেকোনো Skillbox কোর্সে নথিভুক্ত করার সময় 10 রুবেল ছাড়।

Skillbox সুপারিশ করে: ব্যবহারিক কোর্স "মোবাইল ডেভেলপার PRO.

এই অ্যাপ্লিকেশন অপারেশন মত দেখায় কি:

আপনি মোট পরিমাণের পছন্দসই শতাংশ, মিটিং অংশগ্রহণকারীদের সংখ্যা লিখুন এবং ফলাফল পান - আপনার যে পরিমাণ টিপ ছেড়ে দেওয়া উচিত।

শুরু করা

সম্পূর্ণ অ্যাপ্লিকেশন ইন্টারফেস এই মত দেখায়:




প্রথম কর্ম- প্রকল্পের ভিত্তি ডাউনলোড করা হচ্ছে. এটি অ্যান্ড্রয়েড স্টুডিও 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>

আমরা TODO-র তালিকার পরে 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()
        }
    }

বোতাম এবং সুইচ পরিপ্রেক্ষিতে, Kotlin সবকিছু খুব সুন্দর সংগঠিত! সমস্ত বৃদ্ধি এবং হ্রাস ফাংশন নীচের কোড যোগ করুন
(#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(এটি)

এছাড়াও আমরা 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) {}

ওয়েল, এখন একেবারে সবকিছু কাজ করে! অভিনন্দন, আপনি কোটলিনে আপনার নিজের "টিপ ক্যালকুলেটর" লিখেছেন৷

Skillbox সুপারিশ করে:

• দুই বছরের ব্যবহারিক কোর্স "আমি একজন প্রো ওয়েব ডেভেলপার".
• অনলাইন কোর্স "সি# ডেভেলপার".
• ব্যবহারিক বছরের কোর্স "0 থেকে PRO পর্যন্ত পিএইচপি বিকাশকারী".

উত্স: www.habr.com