จัดวาง object ใน window หรือ view ให้ดูดีด้วย layout
ใน Window และ View ทั้งหลายนั้น มี Property อยู่หนึ่งอย่างที่ทำให้เราสามารถเลือกวาง Object ต่าง ๆ ได้อย่างเป็นระบียบเรียบร้อยซึ่ง Property นั้นก็คือ layout นั่นเองครับ
โดยค่าที่เราสามารถจะใช้ได้ใน Property นี้นั้นจะมีแค่ Vertical และ Horizontal เท่านั้นโดยเราสามารถกำหนดให้กับโปรแกรมเราได้ดังนี้
เมื่อเราทำการกำหนดค่าให้กับ Window หรือ View แล้วเราก็สามารถนำเอา Object ต่าง ๆ มาใส่ได้อย่างอิสระ ยกตัวอย่างเช่น ต้องการให้ Lable อยู่ด้านบน แล้วให้ปุ่ม อยู่ด้านล่างของ Label อีกทีก็สามารถสร้างได้ดังนี้ครับ
จากตัวอย่าง Code จะเห็นได้ว่า button นั้นจะอยู่ใต้ label โดยห่างจาก label เป็นขนาด 10px เนื่องจาก เมื่อเราทำการกำหนด Layout ให้เป็น vertical แล้วการ นำเอา object ต่าง ๆ ใส่ลงใน Container นั้นจะมีผลต่อการแสดงดังนี้ เมื่อเราจะทำการ ใส่่ object ใด ๆ ควรคำนึงถึงลำดับการใส่ลงใน Container ด้วยครับ
ในส่วนของ Layout แบบ horizontal นั้น การแสดงผลจะแสดงจากซ้ายไปขวา ซึ่งวิธีการก็จะเหมือนกับ vertical โดยจะต้องเปลี่ยนจาก top เป็น left แทนครับ
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 ความคิดเห็น:
แสดงความคิดเห็น