Mobidevthai

ในบทความนี้ผมจะกล่าวถึง View อีกชนิดหนึ่งที่ใช้ได้เฉพาะใน iOS เท่านั้น สามารถเพิ่ม ลบ หรือ เคลื่อนย้าย Icon ที่อยู่บน View ได้โดยเราเรียก View ประเภทนี้ว่า Dashboard View ครับ





เจ้า Dashboard View นี้หากนึกภาพไม่ออก ก็หน้า Home ของ iOS นั่นแหละครับ ที่เป็นรูปแบบของ Dashboard View นี้ เอาหล่ะครับเรามาเริ่มกันเลย ก่อนอื่นเลยเราต้องสร้าง ตัวแปรที่เป็น Array ขึ้นมาก่อนครับ เพื่อเก็บเอา Item ของเราเอาไว้
var dashboarditem = [];
จากนั้นก็ทำการสร้าง Item ขึ้นมาครับอันนี้ผมสร้าง 10 Item นะครับ แล้วนำทั้งหมดไปใส่ ใน Array ที่ได้สร้างเอาไว้ โดยคำสั่ง
for (var i=0; i < 10; i++) {
var dbItem = Ti.UI.createDashboardItem();
var container = Ti.UI.createView({
width: 106,
height:106
});

var image = Titanium.UI.createImageView({
image : 'KS_nav_ui.png',
top: 0
});

var label = Titanium.UI.createLabel({
text : 'item ' + i,
botton : 0
});

container.add(image);
container.add(label);

dbItem.add(container);
dashboarditem.push(dbItem);
};

การสร้าง Dashboard Item หากต้องการให้ทำการแสดง ข้อความด้วยจะต้องสร้าโดยการสร้าง View ขึ้นมาเพื่อรองรับ ทั้ง Icon และ Label ครับ เนื่องจาก API ของ Apple ไม่รองรับโดยตรงครับ จากนั้นก็ทำการสร้าง Dashboard View พร้อมทั้งนำ Array มาแสดงใน Item ด้วยคำสั่ง
var dashboard = Titanium.UI.createDashboardView({ data : dashboarditem });
เมื่อเราสร้างเสร็จแล้วก็ทดลองรันดูครับ (อย่าลืมเอา dashboard view ใส่  window นะครับ)


เพียงเท่านี้เราก็จะได้ Dashboard View มาใช้แล้วหล่ะครับ

กรณีหากต้องการให้มีการขยับของ Icon สามารถทำได้โดยทำการเพิ่ม Property ไปที่  Dashboard View แบบนี้ครับ
var dashboard = Ti.UI.createDashboardView({
data : dashboarditem,
editable : true,
wobble : true
});
โดย Property editable นั้นสำหรับเปิดให้สามารถทำการ edit ได้ ส่วน wobble นั้นเอาไว้สำหรับทำให้ icon ขยับไปมาเพื่อบอกว่าอยู่ใน Mode Edit ครับ ส่วนวิธีการ Edit ก็ แค่กด icon ค้างไว้ครับก็สามารถที่จะลบ หรือ ขยับ icon ไปมา ได้แล้วหล่ะครับ

เป็นอย่างไรกันบ้างครับกับ Dashboard View ไม่ยากเลยใช่มั้ยครับ ส่วนในบทความหน้านั้นจะเป็นเรื่องราวเกี่ยวกับอะไรนั้น ติดตามกันต่อในบทความหน้านะครับ