วันนี้จะมาดูรูปแบบของ scaleType ใน ImageView ครับ โดย attribute อันนี้ทำให้เราสามารถกำหนดการรูปแบบการ scale รูปภาพได้ครับ ทำไมต้อง scale ? คงจะมีสักครั้งที่เรามีพื้นที่จำกัด แต่รูปภาพที่จะแสดงนั้นมีหลากหลายขนาดซึ่งบางทีเราอาจจะอยากให้แสดงรูปในอัตราส่วนปกติมากกว่าที่จะบีบรูปลงมา หรือ อาจจะต้องการกำหนดการ scale แบบอื่น
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:background="#0000FF" > <ImageView android:id="@+id/frog" android:layout_width="250dp" android:layout_height="250dp" android:src="@drawable/ic_frog" android:background="#ffffff" android:contentDescription="Two frog" /> </LinearLayout>โค้ดที่ใช้ในคราวนี้ก็จะเปลี่ยนแค่ใน layout เท่านั้น สามารถลองทำตามได้โดยสร้างโปรเจ็คใหม่ใน eclipse แล้วแก้ไขไฟล์ layout ตามนี้ก็สามารถ run ได้เลยครับ ใน layout นี้ผมกำหนด background ของ linearLayout เป็นสีน้ำเงิน และ background ของ imageView เป็นสีขาวเพื่อจะได้เห็นพื้นที่ได้ชัีดเจนครับ ลองไปดูแต่ละแบบกันเลยครับ
ไม่กำหนด scaleType และใช้ wrap_content
กำหนด width, height แต่ไม่ใส่ scaleType
ภาพต่อมาเป็นการกำหนด width, height เป็น 250dp โดยส่วนที่เหลือของพื้นที่ ImageView จะููถูกใส่ด้วยสีขาว สำหรับอันนี้น่าจะเป็นการ scale โดยยึดด้านที่ยาวกว่า ซึ่งในตัวอย่างนี้ด้าน width ของภาพจะยาวกว่าด้าน height ภาพจึงถูก scale โดยยึดด้าน width เป็นหลัก
matrix
ต่อมานะครับเป็นการกำหนด scaleType เป็น matrix จะเห็นว่าภาพแสดงตามสัดส่วนจริงจึงแสดงผลออกมาเต็มพื้นที่ที่กำหนด โดยส่วนที่เหลือจะไม่ถูกแสดง
fitXY
ต่อมากำหนด scaleType เป็น fitXY โดยภาพของเราจะถูกขยายให้ทั้งด้านกว้างและด้านยาวให้เท่ากับพื้นที่ที่กำหนด
fitStart
กำหนด scaleType เป็น fitStart สังเกตว่าภาพจะถูก scale ให้พอดีกับ width และเหลือพื้นที่ด้านล่างไว้
fitCenter
กำหนด scaleType เป็น fitCenter จะคล้ายกับ fitStart แต่รูปจะถูกทำให้อยู่กึ่งกลางของพื้นที่โดยเหลือพื้นที่ด้านล่างกับด้านบนไว้
fitEnd
อันนี้จะคล้ายกับ fitStart , fitCenter เลยแต่เป็นจากด้านบนและตรงกลางมาด้านล่างแทน
center
scalType เป็น center จะทำการแสดงส่วนกลางของรูปในพื้นที่ที่กำหนด โดยไม่แสดงส่วนที่เหลือ(กรณีที่ภาพใหญ่กว่าพื้นที่)
centerCrop
กำหนด scaleType เป็น centerCrop จะเป็นการขยายภาพให้เต็มขอบภาพทั้งหมดครับ ถ้ามีด้านใดเกินขอบก็จะตัดออกโดยภาพจะอยู่ตรงกลาง
centerInside
อันนี้ตามภาพครับไม่ค่อยแน่ใจจะอธิบายยังไงดี ลองไปใช้กันดูครับ
ก็แค่นี้แหละครับกับการกำหนด scaleType ของ imageView ลองเอาไปใช้กันดูครับ