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

บทนี้มีความยาวพอสมควร ผมจึงตัดแบ่งออกเป็น 5 คลิป
ท่านสามารถชมวิดีโอบทนี้ได้ที่

หลังจากที่เราได้เรียนรู้กระบวนการในการสร้างแอพ จากบทที่ 3 แล้ว ในบทนี้ เราจะมาเรียนรู้กันต่อ เกี่ยวกับ component ที่เรียกว่า User Interface ซึ่งถือเป็นส่วนประกอบพื้นฐานของแอพ

โดยในคลิปที่ 1 จะสาธิตการทำงานแอพตัวอย่าง เพื่อให้คุณได้เรียนรู้ลักษณะของ UI พื้นฐาน ได้แก่
- Button
- Textbox
- Checkbox
- Spinner
- ListPicker
- DatePicker
- Label
รวมทั้ง Component "Sharing" ด้วย

หลังจากที่เราได้เรียนรู้กระบวนการในการสร้างแอพ จากบทที่ 3 แล้ว ในบทนี้ เราจะมาเรียนรู้กันต่อ เกี่ยวกับ component ที่เรียกว่า User Interface ซึ่งถือเป็นส่วนประกอบพื้นฐานของแอพ

ในคลิปที่ 2 นี้ เราจะได้เรียนรู้เกี่ยวกับ การกำหนด Properties ของ Screen1 เช่น
- AlignHorizontal
- AlignVertical
- BackgroundColor
- BackgroundImage
- Icon
- ScreenOrientation แบบ Portrait
- Scrollable
- StatusBar, Title Bar
- Sizing แบบ Fixed
- VersionCode, VersionName

หลังจากที่เรากำหนด Properties ของ Screen1 ตามในคลิปที่ 2 แล้ว ในคลิปที่ 3 นี้ เราก็จะมาเรียนรู้วิธีการจัดวาง User Interface ตามลักษณะเลย์เอาต์ที่ต้องการ ซึ่งจะใช้ Component ในกลุ่ม Layout มาช่วย โดยในคลิปนี้ จะใช้ Table Arrangement มาจัดเลย์เอาต์ให้เป็นแถวเป็นแนวตามลักษณะของตาราง และยังสาธิต เทคนิค การใช้ เลย์เอาต์ซ้อนเลย์เอาต์ เพื่อการจัดวางแบบซับซ้อน

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

ดาวน์โหลดไฟล์รายชื่อจังหวัด ได้จากที่นี่
https://drive.google.com/file/d/0Bw5JUzNFbdiqbmtMY...

คลิปนี้เป็นตอนสุดท้ายของบทที่ 4 คือ การเขียนโค้ด เพื่อควบคุมการทำงานของโปรแกรม ซึ่งประกอบด้วย 3 ส่วนหลักๆ คือ

- ส่วนที่ทำหน้าที่แสดงวันที่ หลังจากที่เราใช้ DatePicker เพื่อเลือกวันที่แล้ว
- ส่วนที่ทำหน้าที่แสดงชื่อจังหวัด หลังจากที่เราใช้ ListPicker เพื่อเลือกจังหวัดแล้ว
- สุดท้าย คือ คำสั่งสำหรับปุ่ม Send ในการนำข้อมูลทั้งหมดมาต่อกัน แล้วส่งออกด้วยแอพ ด้วย Sharing Component

คุณสามารถรับชม VDO อื่นๆ ในคอร์สนี้ได้ที่
https://www.youtube.com/playlist?list=PLi8U-R74CWSVbdWO1iX3jjTUexEx06RBF
"LIKE, SHARE, SUBSCRIBE เพื่อแบ่งปันความรู้สู่วงกว้าง"