ขั้นตอนการสร้างแอพการสร้างแอพวาดรูป
ขั้นตอนที่
1
สร้าง New Project ชื่อ Mobile10_17
ขั้นตอนที่ 2
ให้ดาวน์โหลดไอคอนต่างๆ จากลิงค์ในรูปด้านล่างนี้แล้วอัพโหลดรูปภาพนี้เข้าโปรเจคได้เลย
ขั้นตอนที่ 3
กำหนด Properties
ตรง
AlignHorizontal ให้เป็น Center เปลี่ยนสีของ
BackgroundColor ให้เป็นสี Orange ตรง ScreenOrientation ให้เป็น Portrait ลบเครื่องหมายถูกหน้า ShowstatusBar และ TitleVisible ออก
ขั้นตอนที่ 4 ลาก HorizontalArrangement มาวาง 4 อัน
ขั้นตอนที่ 5
-
ลาก ListPicker มาวางใน HorizontalArrangement1
-
ลาก Label มาวาง 2 อันต่อจาก HorizontalArrangement1
-
ลาก Button มาวาง 2 อันในช่อง HorizontalArrangement4
-
ลาก Label มาวางต่อ
HorizontalArrangement2
และ HorizontalArrangement3
-
ลาก Label
มาวางในช่อง HorizontalArrangement2
-
ลาก VerticalArrangement
มาวางใน HorizontalArrangement2
-
ลาก Label
และ Button
มาวางใน VerticalArrangement
-
ลาก Image มาวางใน HorizontalArrangement2
สองอัน และลาก Label มาวางด้านขวา
2 อัน และนำ Label มาวางแทรกImage 3 อัน
-
ไปที่ Sensors ลาก Pedometer และ Clock มาวาง
ขั้นตอนที่ 6
จากนั้นให้เรามาเปลี่ยน Components โดยเริ่มจาก HorizontalArrangement1
-
เปลี่ยน AlignHorizontal ให้เป็น Right
-
เปลี่ยน AlignVertical ให้เป็น Center
-
กำหนด Height ให้เป็น 48 pixels
-
กำหนด Width ให้เป็น 90 percent
ขั้นตอนที่ 7 จากนั้นให้เรามาเปลี่ยน Components ของ ListPicker
-
ElementsFromString ให้ใส่ 0.3,0.4,0.5,0.6,0.7,0.8,0.9,1.0
-
กำหนด Height ให้เป็น 24 pixels
-
กำหนด Width ให้เป็น 24 pixels
-
กำหนดรูปภาพใน
Image
รูป settings
-
กำหนด Selection ให้เป็น
0.7
-
ลบข้อความหน้าปุ่มในช่อง Text ออก
-
ในช่อง Title ให้ใส่ข้อความ
Stride
Length (m)
-
สุดท้ายให้เปลี่ยนชื่อปุ่มให้เป็น B_Settings
ขั้นตอนที่ 8 จากนั้นให้เรามาเปลี่ยน Components ของ Label1
-
กำหนด Hight ให้เป็น Fill parent
-
ลบข้อความในช่อง Text ออก
ขั้นตอนที่ 9 จากนั้นให้เรามาเปลี่ยน Components ของ Label2
-
ปรับขนาดของ
FontSize ให้เท่ากับ
20
-
ลบข้อความในช่อง Text ออก
-
เปลี่ยน
TextColor ให้เป็นสี
White
-
แก้ชื่อ Components ให้เป็น Date
ขั้นตอนที่ 10
จากนั้นให้เรามาเปลี่ยน Components ของ HorizontalArrangement2
-
เปลียน AlignVertical ให้เป็น
Center
-
กำหนด Width ให้เป็น 80 percent
ขั้นตอนที่ 11
จากนั้นให้เรามาเปลี่ยน Components ของ VerticalArrangement1
-
กำหนด AlignHorizontal ให้เป็น Center
ขั้นตอนที่ 12
จากนั้นให้เรามาเปลี่ยน Components ของ Label6
-
ใส่ข้อความ
reset
ลงในช่อง Text
-
และกำหนดสีข้อความเป็นสีขาว
ขั้นตอนที่ 13
จากนั้นให้เรามาเปลี่ยน Components ของ Button3
-
กำหนด Height ให้เป็น
48 pixel
-
กำหนด Width ให้เป็น
48 pixel
-
เลือกภาพ
footsteps
-
ลบข้อความ Text บนหน้าปุ่มออก
-
เปลี่ยนชื่อปุ่มให้เป็น B_Reset
ขั้นตอนที่ 14
จากนั้นให้เรามาเปลี่ยน Components ของ Label5
-
ปรับ Fontsize ให้เป็น
60
-
ปรับ Width ให้เป็น Fill parent
-
ใส่ข้อความเริ่มต้นในช่อง Text ให้เป็น 0
-
ปรับ TextAlignment ให้เป็น right
-
กำหนดสีข้อความให้เป็นสีขาว
-
และเปลี่ยนชื่อเป็น Steps
ขั้นตอนที่ 15
Label3
ใช้เป็นช่องว่าง กำหนด Height ให้ท่ากับ 10
ลบข้อความหน้าช่อง Text
ขั้นตอนที่ 16
จากนั้นให้เรามาเปลี่ยน Components ของ HorizontalArrangement3
-
กำหนด AlignHorizontal ให้เป็น Center
-
กำหนด AlignVertical ให้เป็น Center
-
กำหนด Width ให้เป็น
80 percent
ขั้นตอนที่ 17
จากนั้นให้เรามาเปลี่ยน Components ของ Image1
-
กำหนด Height ให้เป็น
16 pixels
-
กำหนด Width ให้เป็น
16 pixels
-
ในช่อง Picture ให้เพิ่มรูปภาพ
Stopclock
ขั้นตอนที่ 18
จากนั้นให้เรามาเปลี่ยน Components ของ Label9
-
กำหนด FontTypeface ให้เป็น
20
-
กำหนด Width ให้เป็น Fill parent
-
กำหนด Text ให้เป็น
0
-
กำหนด TextAlignment ให้เป็น right
-
กำหนดสีให้เป็นสีขาว
-
เปลี่ยนชื่อ Components ให้เป็น Time
ขั้นตอนที่ 19
จากนั้นให้เรามาเปลี่ยน Components ของ Label10
-
กำหนดข้อความบนช่อง Text ให้เป็น hh:mm
-
กำหนดให้เป็นสีขาว
ขั้นตอนที่ 20
จากนั้นให้เรามาเปลี่ยน Components ของ Label11
-
กำหนด Width ให้เท่ากับ
10
-
ลบข้อความในช่อง
Text
ออก
ขั้นตอนที่ 21
จากนั้นให้เรามาเปลี่ยน Components ของ Image1
-
กำหนด Height ให้เท่ากับ 16 pixels
-
กำหนด Width ให้เท่ากับ
16
pixels
-
กำหนดช่อง
image
ให้ใส่ ไฟล์ man-walking
ขั้นตอนที่ 22
จากนั้นให้เรามาเปลี่ยน Components ของ Label7
-
กำหนด FontSize ให้เท่ากับ
20
-
กำหนด Width ให้เท่ากับ
Fill
parent
-
ใส่เลข 0 ลงในช่อง Text
-
เลือกจัดตัวเลขให้ชิดขวา
-
กำหนดสีข้องความเป็นสีขาว
-
เปลี่ยนชื่อ Labal นี้ให้เป็น Distance
ขั้นตอนที่ 23
จากนั้นให้เรามาเปลี่ยน Components ของ Label8
-
กำหนดข้อความในช่อง Text ให้เป็น m
-
กำหนดสีข้อความให้เป็นสีขาว
ขั้นตอนที่ 24
จากนั้นให้เรามาเปลี่ยน Components ของ Label11 ให้เปลี่ยน width ให้เท่ากับ 10 pixels และลบข้อความในช่อง Text ออก
ขั้นตอนที่ 25
จากนั้นให้เรามาเปลี่ยน Components ของ Label4
-
กำหนดให้
Height
ให้เป็น Fill parent
-
ลบข้อความในช่อง
Text
ออก
ขั้นตอนที่ 26 จากนั้นให้เรามาเปลี่ยน Components ของ HorizontalArrangement4
-
ให้กำหนดความกว้างเป็น Fill parent
ขั้นตอนที่ 27 จากนั้นให้เรามาเปลี่ยน Components ของ Button1
-
กำหนด BackgroundColor ให้เป็นสีขาว
-
เช็คถูกที่หน้า
FontBlod
-
กำหนด FontSize ให้เท่ากับ
20
-
กำหนด Width ให้เป็น Fill
parent
-
ใส่ข้อความหน้าปุ่มให้เป็น START
-
เปลี่ยนสีข้อความเป็นสีเทา
-
เปลี่ยนชื่อปุ่มให้เป็น B_Start
ขั้นตอนที่ 28 จากนั้นให้เรามาเปลี่ยน Components ของ Button2
-
เปลี่ยนสีปุ่มเป็นสีเทา
-
เช็คถูกที่หน้า
FontBlod
-
กำหนด FontSize ให้เท่ากับ
20
-
กำหนด Width ให้เป็น Fill
parent
-
ใส่ข้อความหน้าปุ่มให้เป็น PAUSE
-
เปลี่ยนสีข้อความเป็นสีขาว
-
เอาเช็คถูกหน้า
Visible
ออก
-
เปลี่ยนชื่อปุ่มให้เป็น B_Pause
ขั้นตอนที่ 29 จากนั้นให้เรามาเปลี่ยน Components ของ Pedometer1
-
กำหนด StopDetectionTimeout ให้เป็น
10000
-
กำหนด StrideLength ให้เป็น
0.7
ขั้นตอนที่ 30 จากนั้นให้เรามาเปลี่ยน Components ของ Clock1
-
กำหนด TimerInterval ให้เป็น
15000
ขั้นตอนที่ 31 ให้เราใส่บล็อกตามรูปด้านล่างเลย
หน้าตาของแอพที่สมบูรณ์
