በኮትሊን ውስጥ የቲፕ ማስያ መፍጠር: እንዴት ነው የሚሰራው?

በ Kotlin ውስጥ ጠቃሚ ምክሮችን ለማስላት ቀላል መተግበሪያን እንዴት መፍጠር እንደሚችሉ እንነግርዎታለን። ይበልጥ በትክክል, Kotlin 1.3.21, Android 4, Android Studio 3. ጽሁፉ አስደሳች ይሆናል, በመጀመሪያ, በአንድሮይድ መተግበሪያ ልማት ውስጥ ጉዟቸውን ለሚጀምሩ. በመተግበሪያው ውስጥ ምን እና እንዴት እንደሚሰራ እንዲረዱ ያስችልዎታል.

በአንድ ሬስቶራንት ወይም ካፌ ውስጥ ጊዜ ለማሳለፍ ከወሰነ ኩባንያ የተገኘውን ጠቃሚ ምክሮች መጠን ማስላት ሲያስፈልግ ይህ ካልኩሌተር ጠቃሚ ይሆናል። በእርግጥ ሁሉም ሰው ሁል ጊዜ ጠቃሚ ምክሮችን ለተጠባባቂዎች አይተዉም ፣ ይህ የበለጠ የምዕራባውያን ባህል ነው ፣ ግን እንዲህ ዓይነቱን መተግበሪያ የማዘጋጀት ሂደት በማንኛውም ሁኔታ አስደሳች ነው።

እኛ እናስታውስዎታለን- ለሁሉም የ "ሀብር" አንባቢዎች - የ "Habr" የማስተዋወቂያ ኮድን በመጠቀም በማንኛውም የ Skillbox ኮርስ ውስጥ ሲመዘገቡ የ 10 ሩብልስ ቅናሽ.

Skillbox ይመክራል፡ ተግባራዊ ኮርስ "የሞባይል ገንቢ PRO.

አፕሊኬሽኑ በሚሰራበት ጊዜ ይህን ይመስላል።

የሚፈለገውን የጠቅላላ መጠን መቶኛ, የስብሰባ ተሳታፊዎችን ቁጥር ያስገባሉ, እና ውጤቱን - መተው ያለብዎትን የጫፍ መጠን.

በመጀመር ላይ

የመተግበሪያው ሙሉ በይነገጽ ይህንን ይመስላል።




የመጀመሪያ እርምጃ- የፕሮጀክቱን መሠረት በማውረድ ላይ. በአንድሮይድ ስቱዲዮ 3.0 ወይም ከዚያ በኋላ ይክፈቱት። ፕሮጀክቱን እንገነባለን እና እንጀምራለን እና ነጭ ስክሪን እናያለን. ሁሉም ነገር ደህና ነው, እንደዚያ መሆን አለበት.

ሁሉንም ነገር ግልጽ ለማድረግ የተጠቃሚ እርምጃዎች በጊዜ ቅደም ተከተል በፕሮጀክቱ ውስጥ ተጽፈዋል. እሱን ለማየት View -> Tool Windows -> TODOን ይክፈቱ።

ፕሮጀክቱን እናጠናለን እና ቀለሞችን ይክፈቱ.xml የቀለም ቤተ-ስዕልን ለመገምገም. strings.xml የጽሑፍ ውሂብ (ፊርማዎች) ይዟል፣ እና styles.xml በርካታ የቅርጸ-ቁምፊ አብነቶችን ይዟል።

የወጪ ክፍል ልማት

Activity_main.xml ይክፈቱ እና ከዚህ በታች ያለውን ኮድ ወደ መስመራዊ አቀማመጥ (#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
    android_layout_width="match_parent"
    android_layout_height="match_parent"
    android_orientation="vertical"
    android_background="@color/colorAccent">
 
<! — TODO #3: Build Bill Section →
 
… 
</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"/>

የመተግበሪያው ዋና ተግባር በሬስቶራንት ስብስብ ውስጥ ለእያንዳንዱ ተሳታፊ የግለሰብ ወጪዎችን ማስላት ስለሆነ፣ costPersonTextView ዋናውን ሚና ይጫወታል።

EditText ግቤቱን ወደ አንድ መስመር ይገድባል፣ ይህ ግቤት ወደ ቁጥርDecimal ግቤት አይነት መዋቀር አለበት።

ለሙከራው ፕሮጄክቱን እንጀምራለን እና ለአጠቃላይ ጉዳቶች መለኪያዎችን (የተሰበሩ ኩባያዎች ፣ ሳህኖች ፣ ወዘተ) እናስገባለን።

የ "ሰዎች እና ምክሮች" ክፍል እድገት

የጫፍ ድምጽ ምርጫን ለመጨመር ከታች ያለውን ኮድ ወደ አዲሱ የመስመር አቀማመጥ ክፍል (#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 መታወቂያዎች (የሰዎች አዝራር፣ addPeopleButton)
• የTextView መታወቂያዎች(የሕዝብ ስታቲክ ጽሑፍ ቁጥር፣የሕዝብ የጽሑፍ እይታ)
• ነባሪ ጽሑፍ ለቁጥር የሰዎች ጽሑፍ እይታ (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) እንተገብራለን።

ክፍል ዋና ተግባር፡ 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)

ክፍል ዋና ተግባር፡ AppCompatActivity()፣ View.OnClickListener፣ TextWatcher {

ከዚያም የቢልEditText አድማጭን (#17) አስገብተናል።

billEditText.addTextየተለወጠ አድማጭ(ይህ)

በተጨማሪም 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".

ምንጭ: hab.com