การใช้งาน ScaleType ใน ImageView

วันนี้จะมาดูรูปแบบของ 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



ในอันแรกนี้จะเป็นกาำรกำหนด with, height เป็น wrap_content ไม่กำหนด scaleType นะครับ(แต่ความรู้สึกผมรู้สึกเหมือน android มัน scale ภาำพให้พอดีกับหน้าจอโดยอัตโนมัติเลย เพราะภาพที่ผมนำมาใช้มีขนาดค่อนข้างใหญ่)

กำหนด 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 ลองเอาไปใช้กันดูครับ