Android

ScaleType của ImageView trong Android

Giới thiệu

Hầu hết tất cả các ứng dụng, web, game trên desktop, web, moblie đều sử dụng hình ảnh. Và trong Android để hiển thị hình ảnh chúng ta sử dụng view được xây dựng sẵn trong Android SDK có tên là ImageView. ImageView là một view có chức năng loading, và hiển thị hình ảnh, hoặc bất cứ drawable. ImageView handle cho chúng ta tất cả các công việc để hiển thị hình ảnh.

ScaleType của ImageView có ý nghĩa như thế nào

ScaleType là thuộc tính xác định các thức mà hình ảnh sẽ được scale như thế nào để phù hợp với view của chúng ta. ImageView có thể hiển thị image theo nhiều cách khác nhau phụ thuộc vào các giá trị của thuộc tính scaleType

Giả sử chúng ta có một ImageView có kích thước là width = 100px, height = 100px, và hình ảnh có kích thước là 400*500

Khi set scaleType=fitXY thì có nghĩa hình ảnh đó sẽ được scale về kích thước đúng bằng với kích thước của view là 100*100, và kết quả là hình ảnh sẽ được fit đúng với view nhưng hình ảnh không còn giử được ratio của nó nữa.

ImageView có các scaleType mà chúng ta sẽ tìm hiểu dưới đây như sau:

  • center
  • centerInside
  • centerCrop
  • fitcenter
  • fitStart
  • fitEnd
  • fitXY
  • matrix

Giá trị mặc định ScaleType của ImageView

Khi chúng ta khởi tạo ImageView bằng XML hay bằng Java code và không set giá trị scaleType thì lúc đó giá trị mặc định của ScaleType sẽ là FIT_CENTER.

Các giá trị ScaleType và ý nghĩa của chúng

Ý nghĩa các giá trị ScaleType của ImageView được mô tả chi tiết ở bảng dưới đây:

ScaleType Mô tả
fitXY Scale hai chiều x, y của hình ảnh bằng đúng kích thước của View mà không quan tâm tới ratio của hình ảnh
fitCenter Scale  hình ảnh sao cho fit hình ảnh trong view và giữ nguyên ratio của hình ảnh. Có ít nhất một chiều (x hoặc y) sẽ bằng đúng kích thước (width, height) của View và hiển thị hình ảnh ở giữa (center).

Ví dụ như hình ảnh lanscape (hình ảnh ngang) thì chiều rộng hình ảnh sẽ được scale cho cho bằng với chiều rộng của View.

fitStart Giống với fitCenter nhưng hình ảnh sẽ hiển thi ở phía top, left của View.
fitEnd Giống với filCenter nhưng hình ảnh sẽ được hiển thị ở phía bottom, right của View
matrix Scale hình ảnh dựa vào matrix. Matrix được apply sử dụng phương thức setImageMatrix.
center Scale Hiển thị hình ảnh ở chính giữa View
centerCrop  Scales the image such that both the x and y dimensions are greater than or equal to the view, while maintaining the image aspect ratio; centers the image in the view.

Scale hình ảnh cả hai chiều x và y lớn hơn hoặc bằng kích thước của view trong khi vẫn giữ ratio của hình ảnh và hiển thị hình ảnh ở chính giữa view.

centerInside  Scale hình ảnh cả hai chiều x và y nhỏ hơn hoặc bằng kích thước của view trong khi vẫn giữ ratio của hình ảnh và hiển thị hình ảnh ở chính giữa view.

Và dưới đây là hình ảnh được hiển thị với ImageView sử dụng các ScaleType khác nhau

scale_imageview_feature\

Và dưới đây là đoạn mã nguồn xử lý scaleType của ImageView

Scale Bitmap

Dưới đây mình sẽ hướng dẫn các bạn các để scale một hình ảnh trong Android như sau

Phương thức createScaledBitmap sử dụng để scale Bitmap với các đối số truyền vào là width, height và filter.

Nếu bạn muốn scale hình ảnh mà vẫn giữ ratio thì sử dụng class sau:

Tham khảo: https://guides.codepath.com/android/Working-with-the-ImageView#scale-types

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.