יצירת מחשבון טיפים בקוטלין: איך זה עובד?

אנו מספרים לכם כיצד ליצור אפליקציה פשוטה לחישוב טיפים בקוטלין. ליתר דיוק, קוטלין 1.3.21, אנדרואיד 4, אנדרואיד סטודיו 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 לאחר רשימת ה-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. לחצני Image מסופקים עם סמלים בתיקייה עם הרשאות כתיבה.

העתק את הקטע לחלוטין והוסף את הדברים הבאים (#5):

• מזהי ImageButton (הפחתתPeopleButton, addPeopleButton)
• TextView ids(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):

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".
• קורס מקוון "מפתח C#".
• קורס מעשי בן שנה "מפתח PHP מ-0 ל-PRO".

מקור: www.habr.com