บทที่ 4 - เรียนรู้เกี่ยวกับ User Interface

นี่เป็นบทเรียนสำคัญอีกบทหนึ่ง เพราะคุณจะได้เรียนรู้การใช้งาน User Interface แบบต่างๆ ซึ่ง User Interface นั้น ถือเป็นคอมโพเนนต์พื้นฐานที่ทุกแอพพลิเคชั่นต้องมี เพื่อให้ผู้ใช้งานแอพ สามารถสั่งงานแอพ และแสดงผลให้ผู้ใช้ดูได้

เนื่องจากเนื้อหาของบทที่ 4 ค่อนข้างยาว จึงได้ตัดแบ่งออกเป็น 5 ตอนด้วยกัน

ตอนที่ 1

ในตอนนี้ คุณจะได้เห็นตัวอย่างของแอพสำหรับป้อนข้อมูลบุคคล ซึ่งมีการใช้ User Interface แบบต่างๆ เพื่อให้คุณสามารถเลือกใช้ User Interface ได้เหมาะสม
คอมโพเนนต์ที่กล่าวถึง
User Interface ที่กล่าวถึงในบทนี้ ได้แก่

• Spinner เป็นปุ่มที่เมื่อคลิ้กแล้วจะมีรายการตัวเลือกต่างๆ ให้ผู้ใช้เลือก
• Textbox เป็นช่องสำหรับใส่ข้อความ ซึ่งสามารถกำหนดลักษณะพิเศษได้ เช่น
• ใส่ได้เฉพาะตัวเลข
• ใส่ข้อความได้หลายบรรทัด โดยกด Enter เพื่อขึ้นบรรทัดใหม่ได้
• DatePicker สำหรับใช้กำหนดวัน เดือน ปี คศ.
• Checkbox เป็นช่องสำหรับทำเครื่องหมายถูก
• ListPicker เป็นปุ่มที่เมื่อคลิ้กแล้ว ก็จะมีรายการตัวเลือกต่างๆ ให้ผู้ใช้เลือก ซึ่งในบทนี้ จะอธิบายข้อแตกต่างระหว่าง Spinner และ ListPicker ด้วย
• Button คือปุ่มทั่วไป
• Label เป็นข้อความที่มีไว้แสดงผลอย่างเดียว

ตอนที่ 2

เราจะมาเริ่มสร้างแอพตามตัวอย่าง โดยสร้างเป็น project ใหม่ แต่ในตอนที่ 2 นี้ จะเน้นอธิบายเกี่ยวกับ screen1 และ properties ต่างๆ ก่อน อันได้แก่

• AlignHorizontal สำหรับจัดเรียงคอมโพเนนต์บนหน้าจอตามแนวนอน ให้อยู่ชิดซ้าย ชิดขวา หรือกึ่งกลาง
• AlignVertical สำหรับจัดเรียงคอมโพเนนต์บนหน้าจอตามแนวตั้ง ให้อยู่ชิดด้านบน ด้านล่าง หรือกึ่งกลาง
• AppName ชื่อของแอพพลิเคชั่น
• BackgroundColor สีพื้นหลังของหน้าจอ
• BackgroundImage ระบุภาพที่จะใช้เป็นภาพพื้นหลังของหน้าจอนี้
• ScreenOrientation กำหนดการจัดวางหน้าจอแอพตามแนวตั้ง แนวนอน หรือเปลี่ยนตามผู้ใช้ ว่าถืออุปกรณ์แอนดรอยด์อย่างไร
• Scrollable เป็นการกำหนดว่าจะให้ผู้ใช้เลื่อนหน้าจอขึ้นลง (scroll) ได้หรือไม่
• ShowStatusBar เป็นการกำหนดว่าจะแสดงแถบสถานะหรือไม่
• Title ข้อความที่แสดงบนแถบ Title
• TitleVisible เป็นการกำหนดว่าจะแสดงแถบ Title หรือไม่
• Sizing สำหรับการแสดงผลบนอุปกรณ์ที่มีขนาดต่างกัน เช่น สมาร์ตโฟน และแท็บเล็ต โดยสามารถเลือกกำหนดได้ 2 แบบ คือ
• Fixed
• Responsive
• VersionCode เลขเวอร์ชั่นของแอพ
• VersionName เลขเวอร์ชั่นที่ผู้ใช้กำหนดได้เอง

ตอนที่ 3

คอมโพเนนต์ที่กล่าวถึง

ในตอนนี้ ก็จะเริ่มนำ User Interface ต่างๆ มาวางบนหน้าจอ ซึ่งใน VDO จะแสดงให้เห็นว่า การวางคอมโพเนนต์ต่างๆ จะเรียงลงมาตามแนวตั้ง ไม่สามารถวางตามแนวนอนได้
ดังนั้น จึงมีการสอนให้ใช้คอมโพเนนต์ในกลุ่ม Layout อันได้แก่

• HorizontalArrangement สำหรับการจัดวางตามแนวนอน
• TableArrangement สำหรับการจัดวางเป็นตาราง
• VerticalArrangement สำหรับการจัดวางตามแนวตั้ง

เพื่อให้สามารถจัดวางคอมโพเนนต์ ตามแบบเลย์เอาต์ที่ต้องการได้ รวมทั้งยังแนะนำเทคนิคในการผสมผสานเลย์เอาต์ทั้ง 3 แบบเข้าด้วยกัน
และในตอนท้าย ก็ยังได้แนะนำคอมโพเนนต์ Sharing (ซึ่งอยู่ในกลุ่ม Social) สำหรับใช้ในการแชร์ข้อมูลด้วย

ตอนที่ 4

หลังจากที่นำคอมโพเนนต์ต่างๆ มาวางในหน้าจอแอพแล้ว ในตอนนี้ ก็จะมากำหนด properties ของแต่ละคอมโพเนนต์ รวมถึงการเปลี่ยนชื่อคอมโพเนนต์ให้สื่อความหมาย เพื่อเวลาเขียน code จะทำได้ง่ายขึ้น
สุดท้ายลองใช้แอพ MIT AI2 Companion (หรือ Thunkable) เพื่อตรวจดูว่า การจัดวางคอมโพเนนต์ต่างๆ เป็นไปตามต้องการ รวมทั้งทดสอบการใช้ User Interface

ตอนที่ 5

สำหรับขั้นตอนสุดท้าย คือ การเขียน code เพื่อควบคุมการทำงานของแอพ ซึ่ง code ที่ต้องเขียนมีเพียง 3 ส่วนคือ

• ส่วนของ DatePicker เพื่อให้แสดงวันที่บน label หลังจากที่ผู้ใช้เลือกวันเกิดแล้ว
• ส่วนของ ListPicker เพื่อให้แสดงชื่อจังหวัดบน label หลังจากที่ผู้ใช้เลือกแล้ว
• ส่วนของปุ่มส่งข้อมูล เพื่อให้แอพนำข้อมูลทั้งหมดมาต่อกัน แล้วส่งออกไปด้วยการแชร์

บล็อกที่สำคัญ

• join สำหรับใช้ในการนำข้อมูลต่างๆ มาต่อกันเป็นข้อความเดียว
• if then else จะให้ค่าได้ 2 ค่า ขึ้นกับเงื่อนไขที่ทดสอบว่าเป็นจริงหรือเท็จ
• SetDateToDisplay ใช้กำหนด วัน เดือน ปี คศ. ที่จะแสดงเมื่อคลิ้กปุ่ม DatePicker
• Day, Month, Year เป็นค่าวันที่ เดือน ปี คศ. จาก DatePicker
• Checked สถานะของ checkbox ว่ามีเครื่องหมายถูกหรือไม่
• ShareMessage บล็อกสำหรับแชร์ข้อความ

ความรู้อื่นๆ

แนะนำให้รู้จักกับสัญลักษณ์ \n ซึ่งเป็นเครื่องหมายขึ้นบรรทัดใหม่