[B4A] การสร้างหน้าจอบนมือถือได้มากกว่า 1 หน้าจอ โดยสามารถส่งค่าบางอย่างไปได้

thongkorn

แอดมินขออธิบายให้เข้าใจง่ายๆสำหรับ Activity ที่อยู่บน B4A หรือ Basic for Android เปรียบได้เหมือนกับเป็นฟอร์ม 1 ฟอร์ม โดยสามารถวาง Control ต่างๆ ได้ 2 แบบ คือการใช้ Designer และการสร้างแบบ Run Time หรือการเขียนด้วยโค้ดเพื่อสร้าง Control ขึ้นมา โดยฟอร์มหลักเราจะเรียกชื่อว่า Main ส่วนฟอร์มอื่นๆก็จะเป็น Activity ซึ่งก็ขึ้นอยู่กับที่เราจะตั้งชื่อเอาเอง ก็เหมือนๆกับฟอร์มใน Visual Basic นั่นเอง ... สำหรับบทความชุดนี้แอดมินจะใช้ Designer เพื่อให้ทุกๆท่านๆได้เข้าใจไม่ยากล่ะกัน ...

เริ่มต้นในการสร้าง Designer ... จาก IDE ให้เลือก Designer


การบันทึก Designer ...  


การ AddView โดยเลือก ListView ให้ขึ้นมาแสดงผลใน Designer ในแบบเต็มหน้าจอ มีลูกศรซ้ายขวา บนล่าง เหมือนกับ Anchor เพื่อขยายระยะไปตามความกว้าง ยาวของจอมือถือ ...


การประกาศตัวแปร Control โดยที่จากส่วนของการเขียนโค้ด หรือ IDE เราจะต้องเลือก Activity ที่ต้องการเอาไว้ก่อน แล้วคลิ๊กเมาส์ขวาตัว Control ทำการ Generate ตัวแปรขึ้นมาตามภาพ ชื่อตัวแปรก็จะไปปรากฏยัง Activity ตามที่เรากำหนด ...
กรณีที่ Control แบบคงที่ ไม่มีการเปลี่ยนแปลงค่าใดๆ หรือไม่จำเป็นต้องเรียกใช้งาน เช่น ป้ายบอก หรือ Label ก็ไม่ต้องทำการประกาศตัวแปรก็ได้ ...


ส่วนที่ต้องทำการเรียกใช้งาน Designer ...

1. Sub Activity_Create(FirstTime As Boolean)
   
2.         'Do not forget to load the layout file created with the visual designer. For example:
   
3.         Activity.LoadLayout("main")
   
4.         Activity.Title="Main Layout"
   
5. End Sub

คัดลอกไปที่คลิปบอร์ด

Designer ในส่วนของอีก Activity ... (layout1)


Layout1 จะเป็นการกำหนดไฟล์รูปภาพไปยัง ImageView เพื่อจะทำเป็นปุ่มให้ถอยหลังกลับไป Main Activity ...


โดยจะใช้โค้ดใน Activity1 ดังนี้ ... กลับไปยัง Activity Main และจบการทำงานของตัวมันเอง

1. Sub ImageView1_Click
   
2.         StartActivity(Main)
   
3.         Activity.Finish
   
4. End Sub

คัดลอกไปที่คลิปบอร์ด

การสร้าง Activity ขึ้นมาใหม่ ...


กลับมาที่ Activity หลัก ก็คือ Main ...


เมื่อสร้างรายการข้อมูลตัวอย่างให้กับ ListView1 (Main) ...

1. Sub Activity_Create(FirstTime As Boolean)
   
2.         For i = 1 To 100
   
3.                 ListView1.AddSingleLine("Item #" & i)
   
4.         Next
   
5. End Sub

คัดลอกไปที่คลิปบอร์ด

เหตุการณ์ในการคลิ๊กแต่ละแถวรายการใน ListView1 (Main) ... ก็จะเรียกไปยัง CallSubDelay2("ชื่อ Activity", "โปรแกรมย่อยในการรับค่า", "ค่าที่ส่งไป") ...

1. Sub ListView1_ItemClick (Position As Int, Value As Object)
   
2.         '// This call will bring Main to front and call GetResult.
   
3.         CallSubDelayed2(Activity1, "GetResult", Value)
   
4. End Sub

คัดลอกไปที่คลิปบอร์ด

โปรแกรมย่อยในการรับค่าใน Activity ...

1. Sub GetResult(Result As String)
   
2.         Label1.Text = "You choose: " & Result
   
3. End Sub

คัดลอกไปที่คลิปบอร์ด

ทำการรันโปรแกรม ...
ก่อนจะทำการสั่งรันโปรแกรม ต้องทำการ Restart ADB Server เพื่อทำการติดต่อกับ Emulator ... ในที่นี้แอดมินใช้ BlueStacks ...


ทดสอบการ Connect กับ Emulator ...


หากเรามีการเปลี่ยนแปลงแก้ไขโค้ด ก่อนที่จะทำการรันโปรแกรม ต้อง Clean Project ก่อน เพื่อทำการ Compile ใหม่อีกครั้ง ...


การสั่ง Run ใน Debug Mode ...


เมื่อ Main Activity ทำงาน ...


เมื่อลองทดสอบคลิ๊กแถวรายการที่ 6 มันก็จะเข้าไปทำงานยัง Activity1 ...


มาดูโค้ดในส่วนของ Main ...

1. #Region  Project Attributes
   
2.         #ApplicationLabel: Two Activities
   
3.         #VersionCode: 1
   
4.         #VersionName:
   
5.         'SupportedOrientations possible values: unspecified, landscape or portrait.
   
6.         #SupportedOrientations: unspecified
   
7.         #CanInstallToExternalStorage: False
   
8. #End Region
   
9. 
   
10. #Region  Activity Attributes
    
11.         #FullScreen: False
    
12.         #IncludeTitle: True
    
13. #End Region
    
14. 
    
15. Sub Process_Globals
    
16.         'These global variables will be declared once when the application starts.
    
17.         'These variables can be accessed from all modules.
    
18. 
    
19. End Sub
    
20. 
    
21. Sub Globals
    
22.         'These global variables will be redeclared each time the activity is created.
    
23.         'These variables can only be accessed from this module.
    
24.         Private Kanit As CustomFonts
    
25.         Private ListView1 As ListView
    
26. End Sub
    
27. 
    
28. '// https://www.b4x.com/android/help/views.html
    
29. Sub Activity_Create(FirstTime As Boolean)
    
30.         'Do not forget to load the layout file created with the visual designer. For example:
    
31.         Activity.LoadLayout("main")
    
32.         Activity.Title="Main Layout"
    
33.         '// Set Own Font.
    
34.         Kanit.Initialize("Kanit-Regular.ttf")
    
35.         Kanit.SetCustomFontsToAllViews(Activity)
    
36.         For i = 1 To 100
    
37.                 ListView1.AddSingleLine("Item #" & i)
    
38.         Next
    
39. End Sub
    
40. 
    
41. Sub ListView1_ItemClick (Position As Int, Value As Object)
    
42.         '// This call will bring Main to front and call GetResult.
    
43.         CallSubDelayed2(Activity1, "GetResult", Value)
    
44. End Sub
    
45. 
    
46. Sub Activity_Resume
    
47. 
    
48. End Sub
    
49. 
    
50. Sub Activity_Pause (UserClosed As Boolean)
    
51. 
    
52. End Sub

คัดลอกไปที่คลิปบอร์ด

มาดูโค้ดในส่วนของ Activity1 ...

1. #Region  Activity Attributes
   
2.         #FullScreen: False
   
3.         #IncludeTitle: True
   
4. #End Region
   
5. 
   
6. Sub Process_Globals
   
7.         'These global variables will be declared once when the application starts.
   
8.         'These variables can be accessed from all modules.
   
9. 
   
10. End Sub
    
11. 
    
12. Sub Globals
    
13.         'These global variables will be redeclared each time the activity is created.
    
14.         'These variables can only be accessed from this module.
    
15.         Private Panel1 As Panel
    
16.         Private Label1 As Label
    
17.         Private Label2 As Label
    
18.         Private ImageView1 As ImageView
    
19. End Sub
    
20. 
    
21. Sub Activity_Create(FirstTime As Boolean)
    
22.         'Do not forget to load the layout file created with the visual designer. For example:
    
23.         Activity.LoadLayout("layout1")
    
24.         Dim MyFont As Typeface
    
25.         MyFont = Typeface.LoadFromAssets("Kanit-Regular.ttf")
    
26.         Label1.Typeface=MyFont
    
27.         Label2.Typeface=MyFont
    
28.         Label1.Text="You Choose : " & GetResult("")
    
29.         
    
30. End Sub
    
31. 
    
32. Sub GetResult(Result As String)
    
33.         Label1.Text = "You choose: " & Result
    
34. End Sub
    
35. 
    
36. Sub ImageView1_Click
    
37.         StartActivity(Main)
    
38.         Activity.Finish
    
39. End Sub
    
40. 
    
41. Sub Activity_Resume
    
42. 
    
43. End Sub
    
44. 
    
45. Sub Activity_Pause (UserClosed As Boolean)
    
46. 
    
47. End Sub

คัดลอกไปที่คลิปบอร์ด

ดาวน์โหลดโค้ดต้นฉบับ B4A ได้จากที่นี่ ....