ความจริง ได้เห็นเรื่องนี้ ในบทความต่าง ของผม หลายบทความ ยังไม่มีบทความไหน ที่กล่าวถึง การออกแบบ User Interface (UI) android เอาแบบละเอียดๆ สังที่ พอดีเมื่อว่านผู้มาอบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง สนใจเรื่องนี้มาก แนะนำให้ทำ บทความ การออกแบบ User Interface (UI) android เอาแบบละเอียดๆ เลยไม่ต้องข้าม ฉะนั้น ผมจะเอาโจทย์ ที่ให้ผู้อบรมแอนดรอยด์ สำหรับผู้เริ่มต้น กับ มาสเตอร์ อึ่ง เมื่อวานมาทำกัน

ขั้นตอนการออกแบบ User Interface (UI) android

1. ออกแบบ แนวคิด Conceptual Design บนกระดาษ , กระดาน White Board ก่อน เราสามารถ ประชุมกับทีม หรือ กับลูกค้าว่าต้องการอะไร Activity แรกต้องการอะไร ? Activity ต่อๆมา ต้องการอะไร ? ทำขั้นตอนนี้ให้เสร็จก่อน

2. เริ่มเปลี่ยนสิ่งที่เราคิด ไปเป็นโค้ด หรือ ที่เรามักจะเรียกว่า การโค้ดดิ้ง นั้นเอง มาดูตัวอย่างโจทย์ เราผมต้องการ โปรแกรมแปลงค่าเงิน จากเงินบาท ไปเป็น USD เงินดอลล่า อเมกัน , GBP เงินปอลด์ อังกฤษ และ EUR คือ เงิน ตระกูลยูโร ครับ

โดยความต้องการ Activity แรก User ต้องป้อน ค่าเงินบาท ไปที่ Input THB และติ๊กเลือก ตระกูลค่าเงินที่ต้องการจะแปลง เสร็จแล้ว คลิก ปุ่ม Convert ตัวแอพพลิเดชั่นจะ ย้ายไปที่ Activity ที่สอง และ แสดงผลที่ คำนวนได้ พร้อมปุ่ม ที่จะกลับไปทำงาน ที่ Activity แรกอีก

สร้างโปรเจ็กต์แอนดรอยด์

ไปที่ New > Project Android

และตั้งชื่อ Project name เป็น ConvertMoney แบบนี้

ที่ Build Target มาเลือกให้ แอพพลิเคชั่น ของเราทำงานบน Android 2.3.3 ครับ

ในส่วนของ Properties ผมกำหนดค่า ให้ Application name เป็นชื่อเดียวกับ Project Name มี Package name เป็น com.androidthai.ConvertMoney และ ให้สร้าง Activty โดยให้ชื่อว่า MainActivity.java อุปกรณที่จะนำไปใช้ ต้องมี SDK Version ไม่ต่ำกว่า 10 ครับ

ตัวโปรแกรม eclipse จะ gen ค่า ไฟร์ และ โฟวเดอร์ต่างๆให้แบบนี้

ในการ Design User Interface (UI) การโค้ดดิ้ง ในส่วนของ layout ก่อนเริ่มที่

main.xml

main.xml จะอยู่ที่ res > layout > main.xml ครับ ดับเปิ่ลคลิกออกมาเลยครับ

จะได้ไฟร์หน้าว่างๆ แบบนี้

การออกแบบ User Interface ที่ถูกต้อง

จะต้องแยกค่าของ

• string (ค่าของข้อความ ตัวหนังสือต่างๆ)
• dimen (ขนาดของ ตัวหนังสือต่างๆ , ปุ่มคลิกต่างๆ , รูปภาพต่างๆ)
• color (โค้ดสีต่างๆ ที่จะนำมาใช้กับ ตัวหนังสือ , ปุ่มคลิกต่างๆ )

โดยไฟร์พวกนี้จะถูกเก็บไว้ในโฟวเดอร์ res > values

เปิดไฟร์ strings.xml

ไฟร์ strings.xml จะทำหน้าที่ เก็บค่าต่างของ ข้อความ , ป้ายปุ่มคลิกต่างๆ ครับ

ค่าที่ eclipse gen ให้

ผมลองเปลี่ยนค่า Name จาก hello ไปเป็น HeadMain และ Value จาก Hello Workd, MainActivity ไปเป็น Input THB แบบนี้

การเพิ่มค่า element ใน strings.xml

ไฟร์ strings.xml จะเป็นที่รวมเก็บ ข้อความ , ป้าย ต่างๆ ในที่นี้จะเรียกสิ่งเหล่านี้ว่า element การเพิ่มก็แค่คลิก Add และเลือกชนิดของ element ที่เราต้องการในที่นี้ เป็น string

ใส่ชื่อ string และ ค่า value ลงไปครับ

เพิ่ม และ กำหนดค่า element ต่างๆ จนครบ

บางท่านถนัดการ key code แบบนี้ก็ได้นะครับ

code strings.xml

การสร้างไฟร์ xml เพิ่ม

ในการควบคุม ขนาดของตัวอักษร , ขนาดของปุ่ม ค่าพวกนี้จะเก็บไว้ในไฟร์ dimens.xml ที่เก็บไว้ใน res > values ครับ แต่เราต้องสร้างก่อน

สร้าง dimens.xml

ไปที่ New > Android XML File แบบนี้

ชื่อไฟร์ dimens.xml ชนิดของไฟร์ xml จะเป็น Values ครับ

ต่ำแหน่งที่เก็บ dimens.xml ที่ res / values ครับ

จะได้ไฟร์ dimens.xml ไว้สำหรับเก็บค่าขนาดของ view ต่างๆละ

การเพิ่มค่า element ต่างๆ ในไฟร์ dimens.xml

ก็ทำเหมือนๆ ที่เราเคยทำใน strings.xml คือการคลิก Add แต่ ต้องเลือกชนิดไฟร์เป็น Dimension ครับ

ลองกำหนดขนาด ที่ชื่อว่า Head มีค่า 25dp

และค่าต่างๆดังนี้

ไฟร์ควบคุมสี colors.xml

ไฟร์ colors.xml เป็นไฟร์ประเถท xml ที่ใช้ในการควบคุมด้านการจัดการสี เราจะใส่โค้ดสีต่างๆ ที่ไฟร์นี้

สร้างไฟร์ colors.xml

ต้องสร้างไฟร์ colors.xml โดยการไปที่ New > Androids.xml และกำหนดชื่อไฟร์เป็น colors.xml ชนิดเป็น Values เก็บไว้ที่เดียวกับ strings.xml , dimens.xml ครับ

จะได้มาละ ไฟร์ xml ต่างๆที่ต้องมี ถ้าจะเป็น มืออาชีพ ในการพัฒนาแอนดรอยด์

ที่ colors.xml

ไฟร์ colors.xml จะเป็นที่เก็บค่าโค้ดของสีต่างๆ ที่จะมาใช้ใน User Interface ของเรา

การเพิ่มค่า element ก็ทำเหมือนกับ ไฟร์ strings.xml และ dimens.xml ครับ แตกต่างตรง ชนิดของ element เลือก color ครับ

ลองเพิ่มค่า element อันนี้เป็นสีแดง

อันนี้สีเหลือง

ตอนนี้เราก็ได้ไฟร์

• strings.xml
• dimens.xml
• colors.xml

ไว้สำหรับการจัดการค่าต่างๆ ไว้ครั้งหน้าเรามดูว่า เราจะให้ main.xml ใช้ค่าต่างๆ ในไฟร์ xml ที่เราสร้างขึ้นอย่างไร