Σας δείχνουμε πώς να δημιουργήσετε μια απλή εφαρμογή υπολογισμού συμβουλών στο Kotlin. Για την ακρίβεια, Kotlin 1.3.21, Android 4, Android Studio 3. Το άρθρο θα είναι ενδιαφέρον, πρώτα απ' όλα, για όσους ξεκινήσουν το ταξίδι τους στην ανάπτυξη εφαρμογών Android. Σας επιτρέπει να κατανοήσετε τι και πώς λειτουργεί μέσα στην εφαρμογή.
Μια τέτοια αριθμομηχανή είναι χρήσιμη όταν πρέπει να υπολογίσετε τον αριθμό των συμβουλών από μια εταιρεία που αποφασίζει να περάσει χρόνο σε ένα εστιατόριο ή καφέ. Φυσικά, όχι όλοι και δεν αφήνουν πάντα τσάι για τους σερβιτόρους, αυτό είναι περισσότερο μια δυτική παράδοση, αλλά η διαδικασία ανάπτυξης μιας τέτοιας εφαρμογής είναι ενδιαφέρουσα σε κάθε περίπτωση.
Υπενθύμιση: για όλους τους αναγνώστες του "Habr" - έκπτωση 10 ρούβλια κατά την εγγραφή σε οποιοδήποτε μάθημα Skillbox χρησιμοποιώντας τον κωδικό προσφοράς "Habr".
Το Skillbox προτείνει: Πρακτικό μάθημα .
Δείτε πώς φαίνεται η εφαρμογή όταν εκτελείται:
Εισαγάγετε το επιθυμητό ποσοστό του συνολικού ποσού, τον αριθμό των συμμετεχόντων στη σύσκεψη και λαμβάνετε το αποτέλεσμα - τον αριθμό των συμβουλών που πρέπει να μείνουν.
Ξεκινώντας
Η πλήρης διεπαφή της εφαρμογής μοιάζει με αυτό:
Πρώτη δράση - . Ανοίξτε το στο Android Studio 3.0 ή νεότερη έκδοση. Κατασκευάζουμε και τρέχουμε το έργο και βλέπουμε μια λευκή οθόνη. Όλα είναι καλά, όπως θα έπρεπε.
Οι ενέργειες χρήστη είναι γραμμένες στο έργο με χρονολογική σειρά, έτσι ώστε όλα να είναι ξεκάθαρα. Για να το δείτε, ανοίξτε Προβολή -> Εργαλείο Windows -> TODO.
Μελετάμε το έργο και ανοίγουμε τα χρώματα.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"/>Τώρα μπορείτε να διαμορφώσετε τον κατάλογο τιμών ή να παίξετε με τα χρώματα χρησιμοποιώντας .
Τώρα το έργο μοιάζει με αυτό:
Όπως μπορείτε να δείτε, ο υπολογισμός του κόστους βασίζεται στα δεδομένα που εισάγει ο χρήστης.
Ανάπτυξη της ενότητας λογαριασμού
Προσθέστε τον παρακάτω κώδικα στο 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 προτείνει:
- Πρακτικό μάθημα δύο ετών .
- Διαδικτυακό μάθημα .
- Πρακτικό μάθημα έτους .
Πηγή: www.habr.com