การใช้งาน ImageView

บทความนี้เราจะมาทำความรู้จักกับ Image View กันนะครับ จากชื่อก็บอกอยู่แล้วครับว่ามันคือ View ที่เอาไว้แสดง รูปภาพ นั่นเองครับ

วิธีการสร้างก็ไม่ยากครับ หากต้องการแสดงรูปจาก URL ก็สามารถระบุได้ดังนี้
var imageView = Titanium.UI.createImageView({ image : 'http://www.nationalgeographic.com/adventure/images/0611/adventure-travel/thailand.jpg' });
แล้วก็นำไปใส่ Window แล้วก็เปิด Window ก็เป็นอันเรียบร้อยครับ
ส่วนในกรณีที่ต้องการแสดงภาพของเองโดยการอ้างอิง Path ของรูปก็สามารถทำได้โดยการที่เราต้องมีรูปอยู่ใน Project ก่อน ในที่นี้ผมสร้าง Folder Images ขึ้นมาแล้วนำภาพ image.jpg ใส่ลงไปในนั้น
var imageView = Titanium.UI.createImageView({ image : 'images/image.jpg' });
แล้วก็นำไปใส่ Window แล้วก็เปิด Window ก็จะได้ดังภาพ


หากต้องการให้สามารถ  Zoom ได้ กรณีของ Android นั้น ง่ายมากครับ ให้เพิ่ม canScale:true ลงไปใน property ของ imageview แบบนี้ครับ
var imageView = Titanium.UI.createImageView({ image : 'images/image.jpg', canScale:true });
ก็จะ สามารถ Zoom ได้แล้วครับ


ส่วน iOS หากต้องการ Zoom ก็ต้องปรับเปลี่ยนอะไรนิด ๆ หน่อย ๆ ครับ เริ่มจาก เพิ่ม ScrollView เข้าไปก่อนครับ
var scView = Titanium.UI.createScrollView({ width:Titanium.Platform.displayCaps.platformWidth, height:Titanium.Platform.displayCaps.platformHeight, contentWidth:'auto', contentHeight : 'auto', minZoomScale:1, maxZoomScale: 3, zoomScale:1 });
จากนั้นก็นำเอา imageview ใส่ลงใน scrollview แล้วก็ นำ scrollview ไปใส่ ใน window แล้วจึงทำการเปิด window ครับ ก็จะสามารถ Zoom ได้แล้วครับ (บน Simulator นั้นสามารถเข้า Pitch Zoom ได้โดยการกดที่ปุ่ม Option นะครับ)


เป็นยังงัยบ้างครับ สำหรับ ImageView จะเห็นได้ว่า การเขียนโปรแกรมให้กับ Android และ iOS นั้นอาจจะมีความแตกต่างกันบ้างแต่ก็ ไม่ได้ยากเกินไปในการแก้ไขเพื่อให้สามารถรันได้ทั้ง 2 Platform นะครับ บทความนี้ก็ขอจบลงตรงนี้ก่อน นะครับ ติชมได้ตลอดนะครับ แล้วก็​อย่าลืมกด Like Fanpage เพื่อติดตามข่าวสารของ mobidevthai และ มา join กันใน group Titanium Mobile Thailand ด้วยนะครับ จะได้แลกเปลี่ยนความเห็นซึ่งกันและกันครับ

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

  1. ผมทำแล้วทำไมเปิดที่มือถือรูปภาพมันไม่แสดงครับ แต่ลองรันบน browser รูปภาพมันก็ยังแสดงนะ งง

    ตอบกลับลบ