แก้ปัญหาภาพพื้นหลังบิดเบี้ยวได้ง่ายๆด้วย FrameLayout และ ImageView

เป็นเรื่องปกติสำหรับอุปกรณ์แอนดรอยด์ที่จะมีขนาดหน้าจอแตกต่างกันมากมาย จึงทำให้แอปที่มีการกำหนดภาพพื้นหลังเจอปัญหาว่าสัดส่วนเพี้ยนไปจากที่ควรจะเป็น

จากภาพตัวอย่างข้างบนจะเห็นว่าภาพพื้นหลังที่นำมาใช้ เวลาแสดงบนอุปกรณ์แอนดรอยด์จริงๆมีสัดส่วนไม่ถูกต้อง (ดูจากรูปวงกลมตรงกลางหน้าจอ)

ทั้งนี้ก็เพราะว่านักพัฒนาจะไม่สามารถรู้ได้เลยว่าผู้ใช้กำลังเปิดแอปอยู่บนหน้าจอขนาดเท่าไร ดังนั้นจึงนิยมใช้สีพื้นหลังที่เรียบๆ ลดการใช้รูปโดยไม่จำเป็น เพื่อลดปัญหาที่เกิดขึ้นกับขนาดหน้าจอที่หลากหลาย

แต่ถ้าจำเป็นต้องใส่ภาพจริงๆ และไม่อยากให้สัดส่วนของภาพนั้นเพี้ยน ก็สามารถใช้ FrameLayout คู่กับ ImageView เพื่อแก้ปัญหานี้ได้

ด้วยความสามารถของ ImageView ที่นักพัฒนากำหนดได้ว่าจะให้สัดส่วนของภาพที่แสดงบน ImageView นั้นเป็นแบบไหน จึงนำมาประยุกต์ใช้ในกรณีนี้ได้เช่นกัน

โดยกำหนดให้ ViewGroup ชั้นนอกสุดเป็น FrameLayout แล้วกำหนดให้ ImageView ซ้อนอยู่ใต้ ViewGroup ใดๆก็ได้อีกทีหนึ่ง จากนั้นก็กำหนดภาพพื้นหลังไว้ที่ ImageView แทน

<!-- activity_main.xml -->
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/background_image"
        android:scaleType="centerCrop" />

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    </androidx.constraintlayout.widget.ConstraintLayout>
</FrameLayout>

ในการกำหนดภาพบน ImageView จะต้องใช้ android:src แทน เพื่อใช้ร่วมกับ android:scaleType เพื่อกำหนดให้ภาพที่แสดงบน ImageView เป็นแบบ Center Crop

สำหรับ Center Crop จะเป็นการขยายภาพให้เต็มพื้นที่ ส่วนไหนของภาพที่เกินจากขอบเขตก็จะตัดทิ้งออกไป ซึ่งทำให้ภาพมีสัดส่วนเท่าเดิม

ดังนั้นเจ้าของบล็อกจึงใช้ ImageView มาเป็นตัวหลักในการแสดงภาพพื้นหลังนั่นเอง

เพียงเท่านี้ก็จะได้ภาพพื้นหลังสวยๆ โดยไม่ต้องห่วงว่าสัดส่วนของภาพจะเพี้ยนแล้ว

การนำภาพมาใช้เป็นพื้นหลังควรระวังภาพที่มีขนาดใหญ่เกินขนาดหน้าจอ เพราะอาจจะทำให้เกิด Out of Memory ได้ และควรแยกขนาดภาพตาม DPI ของหน้าจอด้วย