કોટલિનમાં ટીપ કેલ્ક્યુલેટર બનાવવું: તે કેવી રીતે કાર્ય કરે છે?

અમે તમને કહીએ છીએ કે કોટલિનમાં ટીપ્સની ગણતરી કરવા માટે એક સરળ એપ્લિકેશન કેવી રીતે બનાવવી. વધુ સ્પષ્ટ રીતે, કોટલિન 1.3.21, એન્ડ્રોઇડ 4, એન્ડ્રોઇડ સ્ટુડિયો 3. આ લેખ રસપ્રદ રહેશે, સૌ પ્રથમ, જેઓ એન્ડ્રોઇડ એપ્લિકેશન ડેવલપમેન્ટમાં તેમની મુસાફરી શરૂ કરી રહ્યા છે. તે તમને એપ્લિકેશનની અંદર શું અને કેવી રીતે કાર્ય કરે છે તે સમજવાની મંજૂરી આપે છે.

આ કેલ્ક્યુલેટર ત્યારે કામમાં આવશે જ્યારે તમારે રેસ્ટોરન્ટ અથવા કેફેમાં સમય વિતાવવાનું નક્કી કરતી કંપનીની ટીપ્સની રકમની ગણતરી કરવાની જરૂર હોય. અલબત્ત, દરેક જણ હંમેશા વેઇટર્સને ટીપ છોડતું નથી; આ એક પશ્ચિમી પરંપરા છે, પરંતુ આવી એપ્લિકેશન વિકસાવવાની પ્રક્રિયા કોઈપણ સંજોગોમાં રસપ્રદ છે.

અમે યાદ કરાવીએ છીએ: Habrના તમામ વાચકો માટે - Habr પ્રોમો કોડનો ઉપયોગ કરીને કોઈપણ સ્કિલબોક્સ કોર્સમાં નોંધણી કરતી વખતે 10 રૂબલ ડિસ્કાઉન્ટ.

સ્કિલબોક્સ ભલામણ કરે છે: પ્રેક્ટિકલ કોર્સ "મોબાઇલ ડેવલપર પ્રો.

ઓપરેશનમાં એપ્લિકેશન આના જેવી દેખાય છે:

તમે કુલ રકમની ઇચ્છિત ટકાવારી, મીટિંગમાં ભાગ લેનારાઓની સંખ્યા દાખલ કરો અને પરિણામ મેળવો - તમારે જે ટીપ છોડવી જોઈએ.

પ્રારંભ

સંપૂર્ણ એપ્લિકેશન ઇન્ટરફેસ આના જેવો દેખાય છે:




પ્રથમ ક્રિયા - પ્રોજેક્ટ આધાર ડાઉનલોડ કરી રહ્યા છીએ. તેને એન્ડ્રોઇડ સ્ટુડિયો 3.0 અથવા પછીના સંસ્કરણમાં ખોલો. અમે પ્રોજેક્ટ બનાવીએ છીએ અને લોન્ચ કરીએ છીએ અને સફેદ સ્ક્રીન જોઈએ છીએ. બધું સારું છે, એવું જ હોવું જોઈએ.

બધું સ્પષ્ટ કરવા માટે વપરાશકર્તાની ક્રિયાઓ કાલક્રમિક ક્રમમાં પ્રોજેક્ટમાં લખવામાં આવી છે. તેને જોવા માટે, View -> Tool Windows -> TODO ખોલો.

અમે પ્રોજેક્ટનો અભ્યાસ કરીએ છીએ અને કલર પેલેટનું મૂલ્યાંકન કરવા colors.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 ની સૂચિ પછી લીનિયરલેઆઉટ બંધ કરીએ છીએ, અને પછી તેને લીનિયરલેઆઉટ (#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"/>

એપ્લિકેશનનું મુખ્ય કાર્ય રેસ્ટોરન્ટના મેળાવડામાં દરેક સહભાગી માટે વ્યક્તિગત ખર્ચની ગણતરી કરવાનું હોવાથી, કિંમત પરપરસન ટેક્સ્ટ વ્યૂ મુખ્ય ભૂમિકા ભજવે છે.

EditText ઇનપુટને એક લીટી સુધી મર્યાદિત કરે છે, આ પરિમાણ NumberDecimal inputType પર સેટ હોવું આવશ્યક છે.

અમે પરીક્ષણ માટે પ્રોજેક્ટ શરૂ કરીએ છીએ અને સામાન્ય નુકસાન (તૂટેલા કપ, પ્લેટો, વગેરે) માટેના પરિમાણો દાખલ કરીએ છીએ.

"લોકો અને ટીપ્સ" વિભાગનો વિકાસ

ટિપ વોલ્યુમ પસંદગી ઉમેરવા માટે, નીચેના કોડને નવા લીનિયરલેઆઉટ વિભાગમાં પેસ્ટ કરો (#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 છે. ઇમેજ બટન્સ લખવાની પરવાનગી સાથે ફોલ્ડરમાં આઇકોન્સ સાથે પ્રદાન કરવામાં આવે છે.

વિભાગની સંપૂર્ણ નકલ કરો અને નીચેના ઉમેરો (#5):

• છબી બટન આઈડી (પીપલ્સ બટનને બાદ કરો, લોકો બટન ઉમેરો)
• TextView ids(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
 
}

બટનો સમાપ્ત

બટન ક્લિક માટે સમર્થન ઉમેરવા માટે, અમે વર્ગ સ્તર (#7) પર View.OnClickListener લાગુ કરીએ છીએ:

વર્ગ મુખ્ય પ્રવૃત્તિ: 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 {

પછી અમે બિલ એડિટ ટેક્સ્ટ લિસનર (#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) {}

સારું, હવે સંપૂર્ણપણે બધું કામ કરે છે! અભિનંદન, તમે કોટલિનમાં તમારું પોતાનું “ટિપ કેલ્ક્યુલેટર” લખ્યું છે.

સ્કિલબોક્સ ભલામણ કરે છે:

• બે વર્ષનો પ્રેક્ટિકલ કોર્સ "હું વેબ ડેવલપર પ્રો છું".
• ઓનલાઇન કોર્સ "C# વિકાસકર્તા".
• એક વર્ષનો પ્રેક્ટિકલ કોર્સ "0 થી PRO સુધી PHP વિકાસકર્તા".

સોર્સ: www.habr.com