การออกแบบ User Interface (UI) โดย วิธี Global Resource คือ อะไร ?

คือ การออกแบบ User Interface (UI) โดยการ ที่ไฟร์ main.xml ที่อยู่ใน โฟวเดอร์ layout จะทำการดึงค่า element ต่างๆ จากไฟร์ภายนอก เช่น ไฟร์ strings.xml ที่เก็บ Content ของ TextView , label ของ Button หรือ ไฟร์ dimens.xml ที่เก็บขนาด ของ ตัวอักษร ต่างๆ , ขนาดของปู่มต่างๆ เป็นต้นครับ

ทำอย่างไรให้ไฟล์ main.xml ใช้ element ที่อยู่ในไฟล์ strings.xml , dimens.xml และ colors.xml ที่เราทำเมื่อครับที่แล้วได้ (ใครยังไม่ได้ทำ ไปดู ที่นี่ ครับ)

กลับมาที่ไฟล์ main.xml

คลิกที่ tab main.xml แบบนี้

Text

จะเห็น Error ต่างๆมากมายแบบนี้ เพราะ Text Properties ชี้ตำแหน่งผิด ให้เราเข้าไปแก้ Text Properties แบบนี้ Text Property คือที่ที่เราจะประกาศข้อความ ที่เราต้องการให้ปรากฎ ที่ Widget TextView

แล้ว Error จะหายไป ถ้าไม่หายให้คลิก Save นะครับ ต่อมาผมจะปรับขนาดของ ตัวอักษร ให้กำหนดค่าของ Text size ไปที่ @dimen/Head

เห็นไหมครับว่า Text size จะไปนำค่า element จาก element ที่มีชื่อ Head ที่อยู่ในไฟล์ dimens.xml

เห็นไหมครับ ตัว Widget ที่เป็น TextView นะกำหนดค่า Textsize ของตนเองไปเป็น 25dp จากการกำหนดค่าจาก element ที่ชื่อว่า Head ในไฟล์ dimens.xml ครับ

Layout Margin Left

เป็นการกำหนดให้ Widget TextView อยู่ห่างจากตัว object ที่อยู่ทางด้านซ้าย จากตัวอย่าง ผมกำหนดให้ TextView ไปดึงค่า Layout Margin Left จาก dimens.xml ที่ element ที่มีชื่อว่า Head (25dp) ครับ

การเพิ่ม Wiget EditText

ไปที่ Text Fields ที่อยู่ทางด้านซ้าย แล้ว ลากแล้วปล่อยแบบนี้

เมื่อปล่อยจะได้อย่างนี้

ใช้ Layout margin left ทำการขยับห่างด้านซ้าย 25dp

และใช้ Layout margin right

การใช้ Layout margin top

การเปลี่ยนสี โดยใช้ Text color

ต่อไปเป็นตัวอย่างการเปลี่ยนสี ของตัวอักษรโดยใช้ Text color ผมจะใช้ Properties นี้ไปรับค่า element จากไฟล์ colors.xml ที่มี name เป็น yellow ครับ

Text style

Properties นี้มีไว้สำหรับ ควบคุม Style ของตัวอักษรว่า ต้องการ bold หนา หรือ italic ตัวเอียงเป็นต้น

การเพิ่ม RadioButton Widget

ตัว RadioButton Widget จะเป็น Widget ที่ใช้ในการให้ User ทำการเลือก ส่วนใหญ่จะใช้ในการ ติ้กเลือก การสร้างก็แค่ ลาก RadioButton จาก Form Widget แล้วไปปล่อยใน layout เราเท่านั้นครับ

เดี๋ยวเราต้องทำการโค้ดดิ้ง ฉนั้น เราต้องกำหนด id ให้กับ Widget ซะก่อน

การเปลี่ยน labal ให้ RadioButton

ง่ายมากเพียงไปที่ Text แล้วกำหนดให้ไปรับค่า จาก strings.xml ที่มี name ของ element เป็น RadioButtonUSD ครับ

เปลี่ยนสีโดยกำหนดให้ไปรับค่า element ที่ชื่อว่า red ที่ไฟล์ colors.xml ครับ

ปรับ layout margin ต่างๆจบได้ แบบนี้

การสร้าง ปุ่ม Button Widget

การสร้างก็เหมือนกับที่ เราสร้าง RadioButton ครับคือไปที่ Form Widget แล้วลากแล้วปล่อย

ปล่อยแล้วจะได้แบบนี้

กำหนด id ให้กับ widget Button

เปลี่ยน labal ด้วย Text Property

ปรับตำแหน่ง center ด้วย Layout grtvity

Width and Height

เป็น Properties สำหรับ การกำหนดขนาดของกรอบ Widget

เสร็จละ Activity แรก โอ้ยเหนื่อย

เดี๋ยวพรุ่งนี้เรามาทำ Activity ที่สองกันนะครับ