[Android Dev] :: ImageView [Photos on your Apps]
ผมขอเรียกมันว่ากรอบรูปแล้วกันครับ...
โค้ดในส่วนของ Interface ก็ประมาณนี้
ผลลัพธ์ที่ได้... อ่านจาก Property นะครับ
เราก็จะได้พื้นเป็น Ralative Layout ซึ่งมีกรอบรูป (ImageView) ขนาดเท่ารูปของเรา (wrap_content)
วางอยู่ตรงกลาง Relative Layout ของเรา....
ซึ่งในที่นี้ เราไม่สามารถที่จะใส่รูปเข้าไปได้เลย (หรืออาจจะได้ แต่ผมยังไม่รู้วิธี)
ตัวบาสเอง ใส่วิธีใส่จาก Resource ใน Java ที่จะกล่าวต่อไปนะครับ...
Photos
มาว่ากันเรื่องของรูปกันก่อนดีกว่า...
- รูปที่ใช้ "ควรจะ" มีนามสกุลไฟล์คือ .jpg , .png
- ชื่อของไฟล์ภาพที่ใช้ต้องเป็นตัวอักษร "ตัวเล็ก" ทั้งหมด
- ควรจะเตรียมรูปขนาดพอดีกับงานที่ต้องใช้
**ImageView สามารถที่จะ resize รูปให้เราได้ก็จริง ถ้าเรากำหนด
layout_height และ layout_width ในรูปของ yypx แต่แน่นอน ถ้าเราเปลี่ยนขนาดจอล่ะ ?? งานเข้า
Import Your Photos to App's Storage
ใน Project ของคุณนะครับ ในที่นี้ของบาสคือ ImageViewTest
- คลิกขวาที่ Folder --> res
- เลือก New --> Folder
- จะเจอหน้าต่างสร้าง Folder ก็ตั้งชื่อ drawable
จากนั้นให้คุณลากภาพที่จะใช้เข้าไปที่ folder --> drawable นะครับ...
จะขึ้นหน้าต่าง File Operation แบบนี้
ให้เลือก Copy Files (น่าจะเป็น Default นะครับ)
แล้วคลิกที่ OK ครับ ... ภาพเราก็จะมาอยู่ใน drawable เรียบร้อยแล้ว
Java Coding
ขั้นตอนแรกก็เหมือนเดิมครับ import สิ่งที่ต้องใช้มาให้ครบ
ในที่นี้ก็จะมี content.res.Resources ที่ไว้จัดการไฟล์ข้อมูลนะครับ ^^
นัดเดียวเลยนะครับ ฮ่าฮ่า
- บรรทัดที่ 11,12 ก็เป็นการประกาศตัวแปร ImageView และ Resources (ตัวแปรไฟล์รูปภาพ)
- บรรทัดที่ 19 ก็จองพื้นที่หน่วยความจำให้กับไฟล์รูปภาพของเรา...
- บรรทัดที่ 21 ก็ link Object ของ ImageView ในส่วน Coding กับ Interface (ควรจะคุ้นเคยได้แล้ว)
- บรรทัดที่ 22 ก็เป็นการ set รูปภาพให้กับกรอบรูปของเรา โดยเรียกใช้
method setImageDrawable(drawable) <-- รับ arg เป็นไฟล์จาก folder --> drawable
ในส่วนของ drawable เราก็ต้องเรียกไฟล์รูปภาพขึ้นมาโดยใช้
method getDrawable(id) <-- id ก็คือ ไฟล์รูปภาพของเราในที่นี้คือ R.drawable.androidlogo3d
**ในส่วนนี้ไม่ต้องใส่นามสกุลภาพนะครับ
Result
ผลลัพธ์จะเห็นต่อเมื่อเรา Run โปรแกรมเท่านั้น...
ลำบากตรงนี้แหละ เวลาเราจะจัดตำแหน่งของรูป... เราต้อง Run เพื่อทดสอบตำแหน่งทุกครั้ง ^^
ดึกแล้ว ขอจบ Blog เพียงเท่านี้นะครับ..
Thank You for Reading.
โค้ดในส่วนของ Interface ก็ประมาณนี้
ผลลัพธ์ที่ได้... อ่านจาก Property นะครับ
เราก็จะได้พื้นเป็น Ralative Layout ซึ่งมีกรอบรูป (ImageView) ขนาดเท่ารูปของเรา (wrap_content)
วางอยู่ตรงกลาง Relative Layout ของเรา....
ซึ่งในที่นี้ เราไม่สามารถที่จะใส่รูปเข้าไปได้เลย (หรืออาจจะได้ แต่ผมยังไม่รู้วิธี)
ตัวบาสเอง ใส่วิธีใส่จาก Resource ใน Java ที่จะกล่าวต่อไปนะครับ...
Photos
มาว่ากันเรื่องของรูปกันก่อนดีกว่า...
- รูปที่ใช้ "ควรจะ" มีนามสกุลไฟล์คือ .jpg , .png
- ชื่อของไฟล์ภาพที่ใช้ต้องเป็นตัวอักษร "ตัวเล็ก" ทั้งหมด
- ควรจะเตรียมรูปขนาดพอดีกับงานที่ต้องใช้
**ImageView สามารถที่จะ resize รูปให้เราได้ก็จริง ถ้าเรากำหนด
layout_height และ layout_width ในรูปของ yypx แต่แน่นอน ถ้าเราเปลี่ยนขนาดจอล่ะ ?? งานเข้า
Import Your Photos to App's Storage
ใน Project ของคุณนะครับ ในที่นี้ของบาสคือ ImageViewTest
- คลิกขวาที่ Folder --> res
- เลือก New --> Folder
- จะเจอหน้าต่างสร้าง Folder ก็ตั้งชื่อ drawable
จากนั้นให้คุณลากภาพที่จะใช้เข้าไปที่ folder --> drawable นะครับ...
จะขึ้นหน้าต่าง File Operation แบบนี้
ให้เลือก Copy Files (น่าจะเป็น Default นะครับ)
แล้วคลิกที่ OK ครับ ... ภาพเราก็จะมาอยู่ใน drawable เรียบร้อยแล้ว
Java Coding
ขั้นตอนแรกก็เหมือนเดิมครับ import สิ่งที่ต้องใช้มาให้ครบ
ในที่นี้ก็จะมี content.res.Resources ที่ไว้จัดการไฟล์ข้อมูลนะครับ ^^
นัดเดียวเลยนะครับ ฮ่าฮ่า
- บรรทัดที่ 11,12 ก็เป็นการประกาศตัวแปร ImageView และ Resources (ตัวแปรไฟล์รูปภาพ)
- บรรทัดที่ 19 ก็จองพื้นที่หน่วยความจำให้กับไฟล์รูปภาพของเรา...
- บรรทัดที่ 21 ก็ link Object ของ ImageView ในส่วน Coding กับ Interface (ควรจะคุ้นเคยได้แล้ว)
- บรรทัดที่ 22 ก็เป็นการ set รูปภาพให้กับกรอบรูปของเรา โดยเรียกใช้
method setImageDrawable(drawable) <-- รับ arg เป็นไฟล์จาก folder --> drawable
ในส่วนของ drawable เราก็ต้องเรียกไฟล์รูปภาพขึ้นมาโดยใช้
method getDrawable(id) <-- id ก็คือ ไฟล์รูปภาพของเราในที่นี้คือ R.drawable.androidlogo3d
**ในส่วนนี้ไม่ต้องใส่นามสกุลภาพนะครับ
Result
ผลลัพธ์จะเห็นต่อเมื่อเรา Run โปรแกรมเท่านั้น...
ลำบากตรงนี้แหละ เวลาเราจะจัดตำแหน่งของรูป... เราต้อง Run เพื่อทดสอบตำแหน่งทุกครั้ง ^^
![]() |
บาสแอบเพิ่ม TextView เข้าไปเองนะ... อะฮิๆ |
Thank You for Reading.
แจ่มเลยนะ ขอบคุณมาก
ReplyDelete