Կոտլինում թեյավճարի հաշվիչի ստեղծում. ինչպե՞ս է այն աշխատում:

Մենք ձեզ ասում ենք, թե ինչպես ստեղծել պարզ հավելված Կոտլինում խորհուրդների հաշվարկման համար: Ավելի ճիշտ՝ Kotlin 1.3.21, Android 4, Android Studio 3։ Հոդվածը հետաքրքիր կլինի առաջին հերթին նրանց համար, ովքեր սկսում են իրենց ճանապարհը Android հավելվածների մշակման մեջ։ Այն թույլ է տալիս հասկանալ, թե ինչ և ինչպես է այն աշխատում հավելվածի ներսում։

Այս հաշվիչը օգտակար կլինի, երբ դուք պետք է հաշվարկեք թեյավճարների քանակը մի ընկերության կողմից, որը որոշել է ժամանակ անցկացնել ռեստորանում կամ սրճարանում: Իհարկե, ոչ բոլորն են միշտ թեյավճար թողնում մատուցողներին, սա ավելի շատ արևմտյան ավանդույթ է, բայց նման հավելվածի մշակման գործընթացը ամեն դեպքում հետաքրքիր է։

Հիշեցում. «Habr»-ի բոլոր ընթերցողների համար՝ 10 ռուբլի զեղչ «Habr» գովազդային կոդով Skillbox-ի ցանկացած դասընթացին գրանցվելիս:

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-ը TODO-ների ցանկից հետո, այնուհետև ավելացնում ենք նոր կոդ՝ տեղադրելով այն 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 է: ImageButtons-ին տրամադրվում են պատկերակներ գրելու թույլտվություններ ունեցող թղթապանակում:

Ամբողջությամբ պատճենեք բաժինը և ավելացրեք հետևյալը (#5).

• ImageButton ID-ներ (subtractPeopleButton, addPeopleButton)
• TextView ID-ներ (numberOfPeopleStaticText, numberOfPeopleTextView)
• DefaultText 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 {

Այնուհետև մենք տեղադրեցինք 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) {}

Դե, հիմա բացարձակապես ամեն ինչ աշխատում է: Շնորհավորում ենք, դուք գրել եք ձեր սեփական «Tip Calculator»-ը Կոտլինում:

Skillbox-ը խորհուրդ է տալիս.

• Երկու տարվա գործնական դասընթաց «Ես վեբ ծրագրավորող PRO եմ».
• Առցանց դասընթաց «C# մշակող».
• Գործնական տարվա դասընթաց «PHP ծրագրավորող 0-ից մինչև PRO».

Source: www.habr.com