การใช้ Picasso แสดง ImageView ในรูปทรงต่างๆ

Picasso คือ Library ที่ใช้ในการแสดงรูปภาพกับ ImageView รายละเอียดเพิ่มเติ่ม
ตัว Picasso จะมี option ชื่อว่า Transform สำหรับให้เรา Custom รูปแบบของภาพได้เอง

ตัวอย่างเช่นต้องการทำให้รูปแบบของภาพต้นฉบับที่เป็นสี่เหลี่ยมแสดงเป็น สี่เหลี่ยมขอบโค้ง มีเส้นขอบแบบนี้
01

ไปดูตัวอย่างกันเลย

อันดับแรกให้นำ Picasso เข้ามาในโปรเจคของเราซะก่อนผ่าน Remote Dependencies ดังนี้

 

เมื่อ Picasso พร้อมใช้งานแล้ว
ให้สร้าง Class ที่ implements Transformation
ภายในคลาสจะมี Override Method ที่ชื่อ Bitmap transform() ตรงนี้แหละที่จะใช้ Canvas วาด Bitmap ให้เป็นแบบที่เราต้องการ
เพื่อให้การให้กำหนดค่าเช่น radius, margin, stroke ทำได้ตอนเรียกใช้ก็เพิ่ม constructor รับค่าพวกนี่เข้าไปด้วย

RoundedRectTransformation.java

activity_main.xml

Main_Activity.java

*หากใช้ Picasso ดึงรูปจากเน็ตก็อย่าลืม permission INTERNET ด้วยหล่ะ

แล้วก็จะได้ ImageView ที่แสดงภาพหน้าตาแบบนี้
02

มาดูอีกตัวอย่างบ้าง ทีนี้ถ้าต้องการทำเป็นรูปวงกลม

สร้าง Transform สำหรับวงกลมขึ้นมา  คราวนี้เป็นวงกลม ไม่จำเป็นต้องมีการกำหนดค่า ก็ไม่ต้องสร้าง constructor

CircleTransform.java

activity_main.xml

Main_Activity.java

ก็จะได้วงกลมออกมาแบบนี้

03
ตัวอย่าง code โหลดที่นี่

จะเห็นได้ว่า เราสามารถ Custom ภาพที่ Picasso จะนำไปแสดงใน ImageView ได้ หากท่าน Canvas เป็นอยู่แล้วก็สบายมากเลย จะทำลายน้ำแปะลงไปแทน หรืออื่นๆก็สามารถใช้ Transformation มาช่วยได้ครับ

Comments

comments

Leave a Comment

Your email address will not be published. Required fields are marked *