🥇ایجاد یک ماشین حساب نکته در کاتلین: چگونه کار می کند؟

ما به شما نشان می دهیم که چگونه یک برنامه محاسبه نوک ساده در Kotlin ایجاد کنید. به طور دقیق تر، Kotlin 1.3.21، Android 4، Android Studio 3. مقاله قبل از هر چیز برای کسانی که سفر خود را در توسعه برنامه های اندروید شروع می کنند جالب خواهد بود. این به شما امکان می دهد بفهمید که چه چیزی و چگونه در داخل برنامه کار می کند.

چنین ماشین حسابی زمانی مفید است که شما نیاز به محاسبه مقدار انعام از شرکتی دارید که تصمیم به صرف وقت در یک رستوران یا کافه دارد. البته، نه همه و نه همیشه چای را برای پیشخدمت ها می گذارند، این بیشتر یک سنت غربی است، اما روند توسعه چنین برنامه ای در هر صورت جالب است.

یادآوری می کنیم: برای همه خوانندگان "Habr" - تخفیف 10 روبل هنگام ثبت نام در هر دوره Skillbox با استفاده از کد تبلیغاتی "Habr".

Skillbox توصیه می کند: دوره عملی "توسعه دهنده موبایل PRO.

در اینجا برنامه زمانی که در حال اجرا است به نظر می رسد:

شما درصد مورد نظر از مبلغ کل، تعداد شرکت کنندگان در جلسه را وارد می کنید و نتیجه را دریافت می کنید - مقدار نکاتی که باید باقی بماند.

شروع کار

رابط کاربری کامل برنامه به شکل زیر است:

اولین اقدام - دانلود پایه پروژه. آن را در Android Studio 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>

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 است. ImageButtonها با نمادهایی در پوشه‌ای با مجوزهای نوشتن ارائه می‌شوند.

کل بخش را کپی کنید و موارد زیر را اضافه کنید (#5):

شناسه های ImageButton (SubtractPeopleButton، addPeopleButton)
شناسه TextView (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) پیاده سازی کنید:

class 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):

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

خوب، حالا همه چیز کار می کند! تبریک می گویم، شما «ماشین حساب انعام» خود را در کاتلین نوشته اید.

Skillbox توصیه می کند:

دوره عملی دو ساله "من یک توسعه دهنده وب PRO هستم".

دوره آنلاین "توسعه دهنده سی شارپ".

دوره عملی سال "توسعه دهنده PHP از 0 تا PRO".

منبع: www.habr.com

ساختن یک ماشین حساب نوک در کاتلین: چگونه کار می کند؟