จัดวาง object ใน window หรือ view ให้ดูดีด้วย layout

ใน  Window และ View ทั้งหลายนั้น มี Property อยู่หนึ่งอย่างที่ทำให้เราสามารถเลือกวาง Object ต่าง ๆ ได้อย่างเป็นระบียบเรียบร้อย​ซึ่ง Property นั้นก็คือ layout นั่นเองครับ

โดยค่าที่เราสามารถจะใช้ได้ใน Property นี้นั้นจะมีแค่ Vertical และ Horizontal เท่านั้นโดยเราสามารถกำหนดให้กับโปรแกรมเราได้ดังนี้
var win = Ti.UI.createWindow({ backgroundColor : '#fff', navBarHidden:true, layout : 'vertical' });
เมื่อเราทำการกำหนดค่าให้กับ Window หรือ View แล้วเราก็สามารถนำเอา Object ต่าง ๆ มาใส่ได้อย่างอิสระ ยกตัวอย่างเช่น ต้องการให้ Lable อยู่ด้านบน แล้วให้ปุ่ม อยู่ด้านล่างของ Label อีกทีก็สามารถสร้างได้ดังนี้ครับ
var aLabel = Ti.UI.createLabel({ text : 'Label', width : Titanium.Platform.displayCaps.platformWidth, backgroundColor : '#f00', top : 50 }); win.add(aLabel); var button = Ti.UI.createButton({ title : 'Button', width : Titanium.Platform.displayCaps.platformWidth, top : 10 }); win.add(button); ก็จะไดตามภาพ

จากตัวอย่าง Code จะเห็นได้ว่า button นั้นจะอยู่ใต้ label โดยห่างจาก  label เป็นขนาด 10px เนื่องจาก เมื่อเราทำการกำหนด Layout ให้เป็น vertical แล้วการ นำเอา object ต่าง ๆ ใส่ลงใน Container นั้นจะมีผลต่อการแสดงดังนี้ เมื่อเราจะทำการ ใส่่ object ใด ๆ ควรคำนึงถึงลำดับการใส่ลงใน Container ด้วยครับ

ในส่วนของ Layout แบบ horizontal นั้น การแสดงผลจะแสดงจากซ้ายไปขวา ซึ่งวิธีการก็จะเหมือนกับ vertical โดยจะต้องเปลี่ยนจาก top เป็น left แทนครับ

0 ความคิดเห็น:

แสดงความคิดเห็น