วิธีสร้างแอพ Android เครื่องคิดเลขอย่างง่ายโดยใช้ Android Studio

เผยแพร่แล้ว: 2017-07-06

ในบทความก่อนหน้าของฉัน ฉันเขียนขั้นตอนโดยละเอียดเกี่ยวกับวิธีสร้างแอปพลิเคชัน Android อย่างง่าย ในแอพนั้น ๆ ฉันยังอธิบายแนวคิดของปุ่ม Android และแนวคิดพื้นฐานของ Android

คุณสามารถค้นหาบทความอื่นๆ ทั้งหมดของฉันได้ในส่วน Android

ในบทความนี้เราจะสร้างแอพ calculator android app นี่คือเครื่องคิดเลขธรรมดาที่มีฟังก์ชันจำกัด

ก่อนที่เราจะดำเนินการต่อ จะเป็นการดีที่จะอ่านบทช่วยสอน HelloWorld ให้เสร็จสิ้น นี่คือลิงค์อีกครั้ง: HelloWorld Android App แรกของฉัน

  • วิธีสร้างแอพเครื่องคิดเลขอย่างง่าย – บทช่วยสอนแบบเต็ม
  • สร้างเครื่องคิดเลขอย่างง่ายโดยใช้ Android Studio
  • การพัฒนา Android: การสร้างเครื่องคิดเลขพื้นฐาน
  • สร้างแอพ Android เครื่องคิดเลขอย่างง่าย
  • วิธีสร้างแอพเครื่องคิดเลขสำหรับ Android

เริ่มต้นด้วยแอพ android เครื่องคิดเลขของเรา:

ขั้นตอนที่ 1

  • เปิด Android Studio . ของคุณ
  • คลิกที่เริ่มโครงการ Android Studio ใหม่
  • ระบุชื่อแอปพลิเคชัน CrunchifyCalculator และปล่อยช่องอื่นๆ ว่างไว้ตามเดิม จากนั้นคลิก NEXT

ขั้นตอนที่ 2

  • เลือกขั้นต่ำ SDK API 15: Android 4.0.3(IceCreamSandwich) ฉันเลือก API 15 (IceCreamSandwich) เพราะครอบคลุมอุปกรณ์เกือบ 94% และมีคุณสมบัติเกือบทั้งหมด หากคุณต้องการครอบคลุมอุปกรณ์ 100% คุณสามารถเลือก API 8: Android 2.2 (Froyo)

ขั้นตอนที่ 3

  • เลือก Empty Activity และคลิกถัดไป
  • ปล่อยชื่อกิจกรรม MainActivity ไว้ตามเดิม และปล่อยให้ทุกอย่างเป็นเหมือนเดิม คลิกเสร็จสิ้น

ขั้นตอนที่ 4

  • หลังจากคลิก เสร็จสิ้น จะใช้เวลาประมาณ 2 นาทีในการสร้างกิจกรรมและไฟล์
  • นี่คือโครงสร้างโครงการขั้นสุดท้ายสำหรับการสมัครของคุณ

ขั้นตอนที่ -5

  • ตอนนี้เราต้องเพิ่มโค้ด Java ของเราในไฟล์ MainActivity.java
  • ดังนั้นให้เปิดไฟล์ MainActivity.java จากด้านซ้ายของ IDE (แอพ -> java -> com.crunchify.tutorials.crunchifycalculator -> MainActivity.java)

คุณสามารถดูคำอธิบายของบรรทัดที่ไฮไลต์ได้ด้านล่างโค้ด

MainActivity.java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
package com . crunchify . tutorials . crunchifycalculator ;
 
import android . os . Bundle ;
import android . support . v7 . app . AppCompatActivity ;
import android . view . View ;
import android . widget . Button ;
import android . widget . EditText ;
 
public class MainActivity extends AppCompatActivity {
 
     Button button0 , button1 , button2 , button3 , button4 , button5 , button6 ,
             button7 , button8 , button9 , buttonAdd , buttonSub , buttonDivision ,
             buttonMul , button10 , buttonC , buttonEqual ;
     EditText crunchifyEditText ;
 
     float mValueOne , mValueTwo ;
 
     boolean crunchifyAddition , mSubtract , crunchifyMultiplication , crunchifyDivision ;
 
     @ Override
     protected void onCreate ( Bundle savedInstanceState ) {
         super . onCreate ( savedInstanceState ) ;
         setContentView ( R . layout . activity_main ) ;
 
         button0 = ( Button ) findViewById ( R . id . button0 ) ;
         button1 = ( Button ) findViewById ( R . id . button1 ) ;
         button2 = ( Button ) findViewById ( R . id . button2 ) ;
         button3 = ( Button ) findViewById ( R . id . button3 ) ;
         button4 = ( Button ) findViewById ( R . id . button4 ) ;
         button5 = ( Button ) findViewById ( R . id . button5 ) ;
         button6 = ( Button ) findViewById ( R . id . button6 ) ;
         button7 = ( Button ) findViewById ( R . id . button7 ) ;
         button8 = ( Button ) findViewById ( R . id . button8 ) ;
         button9 = ( Button ) findViewById ( R . id . button9 ) ;
         button10 = ( Button ) findViewById ( R . id . button10 ) ;
         buttonAdd = ( Button ) findViewById ( R . id . buttonadd ) ;
         buttonSub = ( Button ) findViewById ( R . id . buttonsub ) ;
         buttonMul = ( Button ) findViewById ( R . id . buttonmul ) ;
         buttonDivision = ( Button ) findViewById ( R . id . buttondiv ) ;
         buttonC = ( Button ) findViewById ( R . id . buttonC ) ;
         buttonEqual = ( Button ) findViewById ( R . id . buttoneql ) ;
         crunchifyEditText = ( EditText ) findViewById ( R . id . edt1 ) ;
 
 
         button1 . setOnClickListener ( new View . OnClickListener ( ) {
             @ Override
             public void onClick ( View v ) {
                 crunchifyEditText . setText ( crunchifyEditText . getText ( ) + "1" ) ;
             }
         } ) ;
 
         button2 . setOnClickListener ( new View . OnClickListener ( ) {
             @ Override
             public void onClick ( View v ) {
                 crunchifyEditText . setText ( crunchifyEditText . getText ( ) + "2" ) ;
             }
         } ) ;
 
         button3 . setOnClickListener ( new View . OnClickListener ( ) {
             @ Override
             public void onClick ( View v ) {
                 crunchifyEditText . setText ( crunchifyEditText . getText ( ) + "3" ) ;
             }
         } ) ;
 
         button4 . setOnClickListener ( new View . OnClickListener ( ) {
             @ Override
             public void onClick ( View v ) {
                 crunchifyEditText . setText ( crunchifyEditText . getText ( ) + "4" ) ;
             }
         } ) ;
 
         button5 . setOnClickListener ( new View . OnClickListener ( ) {
             @ Override
             public void onClick ( View v ) {
                 crunchifyEditText . setText ( crunchifyEditText . getText ( ) + "5" ) ;
             }
         } ) ;
 
         button6 . setOnClickListener ( new View . OnClickListener ( ) {
             @ Override
             public void onClick ( View v ) {
                 crunchifyEditText . setText ( crunchifyEditText . getText ( ) + "6" ) ;
             }
         } ) ;
 
         button7 . setOnClickListener ( new View . OnClickListener ( ) {
             @ Override
             public void onClick ( View v ) {
                 crunchifyEditText . setText ( crunchifyEditText . getText ( ) + "7" ) ;
             }
         } ) ;
 
         button8 . setOnClickListener ( new View . OnClickListener ( ) {
             @ Override
             public void onClick ( View v ) {
                 crunchifyEditText . setText ( crunchifyEditText . getText ( ) + "8" ) ;
             }
         } ) ;
 
         button9 . setOnClickListener ( new View . OnClickListener ( ) {
             @ Override
             public void onClick ( View v ) {
                 crunchifyEditText . setText ( crunchifyEditText . getText ( ) + "9" ) ;
             }
         } ) ;
 
         button0 . setOnClickListener ( new View . OnClickListener ( ) {
             @ Override
             public void onClick ( View v ) {
                 crunchifyEditText . setText ( crunchifyEditText . getText ( ) + "0" ) ;
             }
         } ) ;
 
         buttonAdd . setOnClickListener ( new View . OnClickListener ( ) {
             @ Override
             public void onClick ( View v ) {
 
                 if ( crunchifyEditText == null ) {
                     crunchifyEditText . setText ( "" ) ;
                 } else {
                     mValueOne = Float . parseFloat ( crunchifyEditText . getText ( ) + "" ) ;
                     crunchifyAddition = true ;
                     crunchifyEditText . setText ( null ) ;
                 }
             }
         } ) ;
 
         buttonSub . setOnClickListener ( new View . OnClickListener ( ) {
             @ Override
             public void onClick ( View v ) {
                 mValueOne = Float . parseFloat ( crunchifyEditText . getText ( ) + "" ) ;
                 mSubtract = true ;
                 crunchifyEditText . setText ( null ) ;
             }
         } ) ;
 
         buttonMul . setOnClickListener ( new View . OnClickListener ( ) {
             @ Override
             public void onClick ( View v ) {
                 mValueOne = Float . parseFloat ( crunchifyEditText . getText ( ) + "" ) ;
                 crunchifyMultiplication = true ;
                 crunchifyEditText . setText ( null ) ;
             }
         } ) ;
 
         buttonDivision . setOnClickListener ( new View . OnClickListener ( ) {
             @ Override
             public void onClick ( View v ) {
                 mValueOne = Float . parseFloat ( crunchifyEditText . getText ( ) + "" ) ;
                 crunchifyDivision = true ;
                 crunchifyEditText . setText ( null ) ;
             }
         } ) ;
 
         buttonEqual . setOnClickListener ( new View . OnClickListener ( ) {
             @ Override
             public void onClick ( View v ) {
                 mValueTwo = Float . parseFloat ( crunchifyEditText . getText ( ) + "" ) ;
 
                 if ( crunchifyAddition == true ) {
                     crunchifyEditText . setText ( mValueOne + mValueTwo + "" ) ;
                     crunchifyAddition = false ;
                 }
 
                 if ( mSubtract == true ) {
                     crunchifyEditText . setText ( mValueOne - mValueTwo + "" ) ;
                     mSubtract = false ;
                 }
 
                 if ( crunchifyMultiplication == true ) {
                     crunchifyEditText . setText ( mValueOne * mValueTwo + "" ) ;
                     crunchifyMultiplication = false ;
                 }
 
                 if ( crunchifyDivision == true ) {
                     crunchifyEditText . setText ( mValueOne / mValueTwo + "" ) ;
                     crunchifyDivision = false ;
                 }
             }
         } ) ;
 
         buttonC . setOnClickListener ( new View . OnClickListener ( ) {
             @ Override
             public void onClick ( View v ) {
                 crunchifyEditText . setText ( "" ) ;
             }
         } ) ;
 
         button10 . setOnClickListener ( new View . OnClickListener ( ) {
             @ Override
             public void onClick ( View v ) {
                 crunchifyEditText . setText ( crunchifyEditText . getText ( ) + "." ) ;
             }
         } ) ;
     }
}

ที่นี่เรามี 1 EditText กำหนดประเภทของเนื้อหา

มาทำความเข้าใจโค้ดกันอีกนิด

  • บรรทัดที่ 11 – 14: ที่นี่เราสร้างการอ้างอิงของปุ่มและข้อความแก้ไข
  • บรรทัดที่ 16: ที่นี่เราสร้างตัวแปร float สองตัวสำหรับเป็นค่า 1 และค่า 2
  • บรรทัดที่ 21: เราแทนที่เมธอด onCreate() ซึ่งเป็นเมธอดของคลาสกิจกรรม
  • บรรทัดที่ 45 – 50: เราตั้งค่า onClickListener บน Button1 ถ้าเราคลิกที่ปุ่ม 1 แก้ไขข้อความจะปรากฏขึ้น
  • เราได้ใช้ตรรกะเดียวกันกับทุกปุ่ม
  • บรรทัดที่ 115 – 127: เราได้ตั้งค่า click listener บนปุ่ม Add
  • ที่นี่เราใส่เงื่อนไขว่า หากเรา EditText เป็น Null เราจะตั้งค่า EditText เป็นค่าว่าง มิฉะนั้นเราจะเพิ่มค่าสองค่าที่คลิกก่อนคลิกปุ่มเพิ่มและหลังจากคลิกปุ่มเพิ่ม
  • เรายังตั้งค่าบูลีน crunchifyAddition เป็น True นี้เป็นตัวแทนของการคลิกปุ่มเพิ่มจริงและสิ่งนี้จะถูกใช้เมื่อผู้ใช้คลิกปุ่ม “=”
  • เราใช้ตรรกะเดียวกันกับปุ่มอื่นๆ เช่น buttonSub, ButtonMul, buttonDivision
  • บรรทัดที่ 156 – 183: ที่นี่เราตั้งค่า clickListener บนปุ่ม “=” ที่นี่เราใส่เงื่อนไขเช่นถ้าผู้ใช้คลิกปุ่มเพิ่มค่า crunchifyAddition ถูกตั้งค่าเป็น True บนตัวฟังการคลิกของปุ่มเพิ่ม
  • ตามนั้น การดำเนินการที่เกี่ยวข้องจะดำเนินการตามลำดับการคลิกปุ่ม
1
2
3
4
if ( crunchifyAddition == true ) {
       crunchifyEditText . setText ( mValueOne + mValueTwo + "" ) ;
       crunchifyAddition = false ;
}

หากคลิกปุ่มเพิ่มก่อนปุ่ม “=” การดำเนินการเพิ่มจะดำเนินการตามที่คุณเห็นด้านบน

  • หลังจากดำเนินการแล้ว เราตั้งค่า crunchifyAddition เป็นเท็จ เพื่อให้เราสามารถดำเนินการเพิ่มได้อีกครั้ง

ด้านล่างนี้คือไฟล์เลย์เอาต์ พร้อมความช่วยเหลือในการออกแบบส่วนหน้าสำหรับเครื่องคิดเลข:

Activity_Main.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
<? xml version = "1.0" encoding = "utf-8" ?>
< RelativeLayout xmlns : android = "http://schemas.android.com/apk/res/android"
     xmlns : tools = "http://schemas.android.com/tools"
     android : id = "@+id/relative1"
     android : layout_width = "match_parent"
     android : layout_height = "match_parent"
     tools : context = ".MainActivity" >
 
     < EditText
         android : id = "@+id/edt1"
         android : layout_width = "match_parent"
         android : layout_height = "wrap_content" / >
 
 
     < Button
         android : id = "@+id/button1"
         style = "?android:attr/buttonStyleSmall"
         android : layout_width = "wrap_content"
         android : layout_height = "wrap_content"
         android : layout_alignEnd = "@+id/button4"
         android : layout_alignRight = "@+id/button4"
         android : layout_below = "@+id/edt1"
         android : layout_marginTop = "94dp"
         android : text = "1" / >
 
     < Button
         android : id = "@+id/button2"
         style = "?android:attr/buttonStyleSmall"
         android : layout_width = "wrap_content"
         android : layout_height = "wrap_content"
         android : layout_alignTop = "@+id/button1"
         android : layout_toLeftOf = "@+id/button3"
         android : layout_toStartOf = "@+id/button3"
         android : text = "2" / >
 
     < Button
         android : id = "@+id/button3"
         style = "?android:attr/buttonStyleSmall"
         android : layout_width = "wrap_content"
         android : layout_height = "wrap_content"
         android : layout_alignTop = "@+id/button2"
         android : layout_centerHorizontal = "true"
         android : text = "3" / >
 
     < Button
         android : id = "@+id/button4"
         style = "?android:attr/buttonStyleSmall"
         android : layout_width = "wrap_content"
         android : layout_height = "wrap_content"
         android : layout_below = "@+id/button1"
         android : layout_toLeftOf = "@+id/button2"
         android : text = "4" / >
 
     < Button
         android : id = "@+id/button5"
         style = "?android:attr/buttonStyleSmall"
         android : layout_width = "wrap_content"
         android : layout_height = "wrap_content"
         android : layout_alignBottom = "@+id/button4"
         android : layout_alignLeft = "@+id/button2"
         android : layout_alignStart = "@+id/button2"
         android : text = "5" / >
 
     < Button
         android : id = "@+id/button6"
         style = "?android:attr/buttonStyleSmall"
         android : layout_width = "wrap_content"
         android : layout_height = "wrap_content"
         android : layout_alignLeft = "@+id/button3"
         android : layout_alignStart = "@+id/button3"
         android : layout_below = "@+id/button3"
         android : text = "6" / >
 
     < Button
         android : id = "@+id/button7"
         style = "?android:attr/buttonStyleSmall"
         android : layout_width = "wrap_content"
         android : layout_height = "wrap_content"
         android : layout_below = "@+id/button4"
         android : layout_toLeftOf = "@+id/button2"
         android : text = "7" / >
 
     < Button
         android : id = "@+id/button8"
         style = "?android:attr/buttonStyleSmall"
         android : layout_width = "wrap_content"
         android : layout_height = "wrap_content"
         android : layout_alignLeft = "@+id/button5"
         android : layout_alignStart = "@+id/button5"
         android : layout_below = "@+id/button5"
         android : text = "8" / >
 
     < Button
         android : id = "@+id/button9"
         style = "?android:attr/buttonStyleSmall"
         android : layout_width = "wrap_content"
         android : layout_height = "wrap_content"
         android : layout_alignLeft = "@+id/button6"
         android : layout_alignStart = "@+id/button6"
         android : layout_below = "@+id/button6"
         android : text = "9" / >
 
     < Button
         android : id = "@+id/buttonadd"
         style = "?android:attr/buttonStyleSmall"
         android : layout_width = "wrap_content"
         android : layout_height = "wrap_content"
         android : layout_alignEnd = "@+id/edt1"
         android : layout_alignRight = "@+id/edt1"
         android : layout_alignTop = "@+id/button3"
         android : layout_marginLeft = "46dp"
         android : layout_marginStart = "46dp"
         android : layout_toRightOf = "@+id/button3"
         android : text = "+" / >
 
     < Button
         android : id = "@+id/buttonsub"
         style = "?android:attr/buttonStyleSmall"
         android : layout_width = "wrap_content"
         android : layout_height = "wrap_content"
         android : layout_alignEnd = "@+id/buttonadd"
         android : layout_alignLeft = "@+id/buttonadd"
         android : layout_alignRight = "@+id/buttonadd"
         android : layout_alignStart = "@+id/buttonadd"
         android : layout_below = "@+id/buttonadd"
         android : text = "-" / >
 
     < Button
         android : id = "@+id/buttonmul"
         style = "?android:attr/buttonStyleSmall"
         android : layout_width = "wrap_content"
         android : layout_height = "wrap_content"
         android : layout_alignLeft = "@+id/buttonsub"
         android : layout_alignParentEnd = "true"
         android : layout_alignParentRight = "true"
         android : layout_alignStart = "@+id/buttonsub"
         android : layout_below = "@+id/buttonsub"
         android : text = "*" / >
 
     < Button
         android : id = "@+id/button10"
         style = "?android:attr/buttonStyleSmall"
         android : layout_width = "wrap_content"
         android : layout_height = "wrap_content"
         android : layout_below = "@+id/button7"
         android : layout_toLeftOf = "@+id/button2"
         android : text = "." / >
 
     < Button
         android : id = "@+id/button0"
         style = "?android:attr/buttonStyleSmall"
         android : layout_width = "wrap_content"
         android : layout_height = "wrap_content"
         android : layout_alignLeft = "@+id/button8"
         android : layout_alignStart = "@+id/button8"
         android : layout_below = "@+id/button8"
         android : text = "0" / >
 
     < Button
         android : id = "@+id/buttonC"
         style = "?android:attr/buttonStyleSmall"
         android : layout_width = "wrap_content"
         android : layout_height = "wrap_content"
         android : layout_alignLeft = "@+id/button9"
         android : layout_alignStart = "@+id/button9"
         android : layout_below = "@+id/button9"
         android : text = "C" / >
 
     < Button
         android : id = "@+id/buttondiv"
         style = "?android:attr/buttonStyleSmall"
         android : layout_width = "wrap_content"
         android : layout_height = "wrap_content"
         android : layout_alignEnd = "@+id/buttonmul"
         android : layout_alignLeft = "@+id/buttonmul"
         android : layout_alignRight = "@+id/buttonmul"
         android : layout_alignStart = "@+id/buttonmul"
         android : layout_below = "@+id/buttonmul"
         android : text = "/" / >
 
     < Button
         android : id = "@+id/buttoneql"
         android : layout_width = "wrap_content"
         android : layout_height = "wrap_content"
         android : layout_alignEnd = "@+id/buttondiv"
         android : layout_alignLeft = "@+id/button10"
         android : layout_alignRight = "@+id/buttondiv"
         android : layout_alignStart = "@+id/button10"
         android : layout_below = "@+id/button0"
         android : layout_marginTop = "37dp"
         android : text = "=" / >
 
< / RelativeLayout >

ตอนนี้ ทุกอย่างควรจะทำงานได้ดี และเราพร้อมที่จะเรียกใช้แอพเครื่องคิดเลขสำหรับ Android ของเราแล้ว ในการเรียกใช้แอพของเรา ฉันใช้มือถือของฉัน คุณสามารถใช้โปรแกรมจำลองหรืออุปกรณ์ของคุณ

เรียกใช้แอพ Android เครื่องคิดเลขของเรา

  • คลิกที่ตัวจัดการอุปกรณ์ Android หลังจากเลือกอุปกรณ์ที่กำหนดเองของคุณในหน้าต่าง Android device manager ให้คลิก START
  • คลิกที่ปุ่มเรียกใช้
  • เลือกอุปกรณ์หรืออีมูเลเตอร์ของคุณแล้วคลิกตกลง
  • ตอนนี้คุณสามารถเห็นแอพ android เครื่องคิดเลขที่ทำงานเป็นภาพหน้าจอนี้

ยินดีด้วย!! หากคุณทำตามขั้นตอนทั้งหมดและถึงจุดนี้ แสดงว่าคุณได้ทำตามขั้นตอนทั้งหมดอย่างถูกต้อง และแอพเครื่องคิดเลขสำหรับ Android ของคุณใช้งานได้ดี