Κατασκευάζοντας μια αριθμομηχανή συμβουλών στο Kotlin: πώς λειτουργεί;

Θα σας δείξουμε πώς να δημιουργήσετε μια απλή εφαρμογή αριθμομηχανής φιλοδωρημάτων στο Kotlin. Συγκεκριμένα, στο Kotlin 1.3.21. Android 4, Android Στούντιο 3. Αυτό το άρθρο θα ενδιαφέρει, πρώτα απ 'όλα, όσους μόλις ξεκινούν το ταξίδι τους στην ανάπτυξη. Android-εφαρμογές. Σας επιτρέπει να κατανοήσετε τι και πώς λειτουργεί μέσα στην εφαρμογή.

Μια τέτοια αριθμομηχανή είναι χρήσιμη όταν πρέπει να υπολογίσετε τον αριθμό των συμβουλών από μια εταιρεία που αποφασίζει να περάσει χρόνο σε ένα εστιατόριο ή καφέ. Φυσικά, όχι όλοι και δεν αφήνουν πάντα τσάι για τους σερβιτόρους, αυτό είναι περισσότερο μια δυτική παράδοση, αλλά η διαδικασία ανάπτυξης μιας τέτοιας εφαρμογής είναι ενδιαφέρουσα σε κάθε περίπτωση.

Υπενθύμιση: για όλους τους αναγνώστες του "Habr" - έκπτωση 10 ρούβλια κατά την εγγραφή σε οποιοδήποτε μάθημα Skillbox χρησιμοποιώντας τον κωδικό προσφοράς "Habr".

Το Skillbox προτείνει: Πρακτικό μάθημα "Προγραμματιστής για κινητά.

Δείτε πώς φαίνεται η εφαρμογή όταν εκτελείται:

Εισαγάγετε το επιθυμητό ποσοστό του συνολικού ποσού, τον αριθμό των συμμετεχόντων στη σύσκεψη και λαμβάνετε το αποτέλεσμα - τον αριθμό των συμβουλών που πρέπει να μείνουν.

Ξεκινώντας

Η πλήρης διεπαφή της εφαρμογής μοιάζει με αυτό:




Πρώτη δράση - Λήψη βάσης έργουΤο ανοίγουμε σε Android Studio 3.0 ή νεότερη έκδοση. Δημιουργούμε και εκτελούμε το έργο και βλέπουμε μια λευκή οθόνη. Όλα είναι καλά, έτσι θα έπρεπε να είναι.

Οι ενέργειες των χρηστών παρατίθενται στο έργο με χρονολογική σειρά για να είναι όλα σαφή. Για να το δείτε, ανοίξτε την Προβολή -> Εργαλείο Windows -> ΝΑ ΚΑΝΩ.

Μελετάμε το έργο και ανοίγουμε τα χρώματα.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. Τα ImageButtons παρέχονται με εικονίδια σε ένα φάκελο με δικαιώματα εγγραφής.

Αντιγράψτε ολόκληρη την ενότητα και προσθέστε τα ακόλουθα (#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()
        }
    }

Όσον αφορά τα κουμπιά και τους διακόπτες, η 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):

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

Λοιπόν, τώρα όλα λειτουργούν! Συγχαρητήρια, έχετε γράψει τον δικό σας "Υπολογιστή φιλοδωρήματος" στο Kotlin.

Το Skillbox προτείνει:

• Πρακτικό μάθημα δύο ετών "Είμαι PRO Web Developer".
• Διαδικτυακό μάθημα "Προγραμματιστής C#".
• Πρακτικό μάθημα έτους "Προγραμματιστής PHP από 0 έως PRO".

Πηγή: www.habr.com