🥇 إنشاء حاسبة إكرامية في Kotlin: كيف تعمل؟

نوضح لك كيفية إنشاء تطبيق بسيط لحساب الإكرامية في Kotlin. لنكون أكثر دقة ، Kotlin 1.3.21 ، Android 4 ، Android Studio 3. ستكون المقالة مثيرة للاهتمام ، أولاً وقبل كل شيء ، لأولئك الذين بدأوا رحلتهم في تطوير تطبيقات Android. يسمح لك بفهم ماذا وكيف يعمل داخل التطبيق.

هذه الآلة الحاسبة مفيدة عندما تحتاج إلى حساب مقدار النصائح من شركة تقرر قضاء بعض الوقت في مطعم أو مقهى. بالطبع ، ليس الجميع ولا يتركون الشاي دائمًا للنادل ، فهذا يعد تقليدًا غربيًا ، لكن عملية تطوير مثل هذا التطبيق مثيرة للاهتمام على أي حال.

نذكر: لجميع قراء "Habr" - خصم 10 روبل عند التسجيل في أي دورة Skillbox باستخدام رمز "Habr" الترويجي.

يوصي Skillbox بما يلي: دورة عملية "Mobile Developer PRO.

إليك ما يبدو عليه التطبيق عند تشغيله:

يمكنك إدخال النسبة المئوية المرغوبة من المبلغ الإجمالي ، وعدد المشاركين في الاجتماع والحصول على النتيجة - مقدار النصائح التي تستحق المغادرة.

الشروع في العمل

تبدو الواجهة الكاملة للتطبيق كما يلي:

أول عمل - تحميل قاعدة المشروع. افتحه في Android Studio 3.0 أو أحدث. نقوم ببناء المشروع وتشغيله ونرى شاشة بيضاء. كل شيء على ما يرام ، كما ينبغي أن يكون.

تتم كتابة إجراءات المستخدم في المشروع بترتيب زمني ، بحيث يكون كل شيء واضحًا. لعرضه ، افتح عرض -> أداة Windows -> TODO.

ندرس المشروع ونفتح color.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>

أغلق LinearLayout بعد قائمة TODOs ، ثم أضف الكود الجديد ، وضعه داخل 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 (طرح الزر "أشخاص" و "زر إضافة أشخاص")
معرفات TextView (numberOfPeopleStaticText ، numberOfPeopleTextView)
DefaultText لـ numberOfPeopleTextView (يجب أن يكون 4).

الآن ، عند بدء التطبيق ، من الممكن إضافة مبلغ الفاتورة ، تعمل الأزرار Add / Subtract أيضًا ، ولكن لم يحدث شيء حتى الآن.

إضافة طرق عرض

افتح 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()
        }
    }

فيما يتعلق بالأزرار والمفاتيح ، فإن 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() {
 
…
 
}

نطلق التطبيق. يبدو ويعمل بشكل ممتاز. ولكن يمكن أن يكون أفضل.

إذا حاولت إزالة مبلغ الفاتورة ثم زيادة عدد التلميحات أو الأصدقاء ، فسوف يتعطل التطبيق لأنه لا يوجد فحص للتكاليف الصفرية حتى الآن. علاوة على ذلك ، إذا حاولت تغيير مبلغ الفاتورة ، فلن يتم تحديث الرسوم.

الخطوات النهائية

أضف TextWatcher (# 16):

فئة MainActivity: 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 بما يلي:

دورة عملية لمدة عامين "أنا مطور ويب PRO".

دورة على شبكة الإنترنت "C # Developer".

دورة سنة عملية "مطور PHP من 0 إلى PRO".

المصدر: www.habr.com

بناء آلة حاسبة للإكرامية في Kotlin: كيف تعمل؟