წვერი კალკულატორის შექმნა კოტლინში: როგორ მუშაობს?

ჩვენ გეტყვით, თუ როგორ უნდა შექმნათ მარტივი აპლიკაცია კოტლინში რჩევების გამოსათვლელად. უფრო ზუსტად, 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 ინსტრუმენტი.

ახლა პროექტი ასე გამოიყურება:

როგორც ხედავთ, ხარჯები გამოითვლება მომხმარებლის მიერ შეყვანილი მონაცემების საფუძველზე.

ანგარიშების განყოფილების შემუშავება

დაამატეთ ქვემოთ მოცემული კოდი 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-ს 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 (გამოკლებაPeopleButton, addPeopleButton)
• TextView ID (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):

კლასი 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) {}

კარგად, ახლა აბსოლუტურად ყველაფერი მუშაობს! გილოცავთ, თქვენ დაწერეთ თქვენი საკუთარი "რჩევის კალკულატორი" კოტლინში.

Skillbox გირჩევთ:

• ორწლიანი პრაქტიკული კურსი "მე ვარ ვებ დეველოპერი PRO".
• ონლაინ კურსი "C# დეველოპერი".
• პრაქტიკული წლის კურსი "PHP დეველოპერი 0-დან PRO-მდე".

წყარო: www.habr.com