Tab Group
Container อีกประเภทหนึ่งที่ถูกใช้่ค่อนข้างบ่อยใน Applicatoin หลาย ๆ ตัว น้่นก็คือ Tab Group นั่นเองครับ โดยที่ TabGroup ในบทความนี้จะทำให้ทุกท่านได้รู้จักกับ Tab Group มากยิ่งขึ้น เรามาเริ่มกันเลยนะครับ
วิธีการสร้าง Tab Group นั่น มีหลายวิธีครับ เราจะมาเริ่มด้วย การสร้าง Tab ขึ้นมาด้วยคำสั่งนี้ครับ
var tabGroup = Titanium.UI.createTabGroup();
เมื่อเราได้ Tab Group มาแล้ว เนื่องจากมันเป็น Group ครับเราเลยต้องเอา Tab ย่อย ๆ ใส่ไปให้กับ Tab Group นี้ครับ โดยเราจะสร้าง Tab เข้าไปสัก 3 Tab นะครับ โดยที่แต่ละ Tab นั้น จะมี window อยู่ภายใน Tab ครับ ดังนี้ครับ
var win1 = Titanium.UI.createWindow({
title : 'Window 1' ,
backgroundColor : '#fff'
});
var win2 = Titanium.UI.createWindow({
title : 'Window 2' ,
backgroundColor : '#f00'
});
var win3 = Titanium.UI.createWindow({
title : 'Window 3' ,
backgroundColor : '#00f'
});
จากนั้นก็ต้องทำการสร้าง Tab โดยระบุ Window ให้กับแต่ละ Tab โดยใช้คำสั่ง แบบนี้ครับvar tab1 = Titanium.UI.createTab({
title : ' Tab 1 ',
window : win1
});
var tab2 = Titanium.UI.createTab({
title : ' Tab 2 ',
window : win2
});
var tab3 = Titanium.UI.createTab({
title : ' Tab 3',
window : win3
});
จากนั้นก็ทำการ add tab ย่อย ๆ ลงใน TabGroup ครับ โดยใช้คำสั่งtabGroup.addTab(tab1);
tabGroup.addTab(tab2);
tabGroup.addTab(tab3);
จากนั้นก็สั่งให้เปิด ซึ่งคำส่ังนั้นจะเหมือนกับ window เลยครับ
tabGroup.open();
เราก็จะได้ หน้าจอโปรแกรมแบบ TabGroup มา โดยที่ ตัว Window ที่อยู่ใน แต่ละ Tab นั้นก็สามารถที่จะ วาง Object อื่น ๆ ลงไปบน window ได้เหมือน window ทั่วไป ครับ
 |
| iPhone |
 |
| Android |
ในกรณีที่ท่านอยากให้ Application สวยงามมากขึ้นก็สามารถ Set รูปให้แต่ละ Tab ได้โดยเพิ่ม Property icon ลงไปใน Tab ย่อย ๆ โดยสามารถเพิ่มได้ แบบนี้ครับ
var tab1 = Titanium.UI.createTab({
title : ' Tab 1 ',
window : win1,
icon : 'KS_nav_ui.png'
});
ก็จะได้ Tab แบบมี icon มาประดับ สวย ๆ ครับ
เป็นอย่างไรกันบ้างครับ สำหรับเรื่องของ TabGroup นั้น วันนี้ก็ ขอจบ แค่ตรงนี้ก่อน ยังไง ก็ติดตามกันต่อไปได้นะครับ แล้วก็สามารถติชม ได้นะครับ ผิดพลาดยังไง ก็ขออภัยมา ณ ที่นี้ด้วยนะครับ
0 ความคิดเห็น:
แสดงความคิดเห็น