Sử dụng Drawables trong android studio

1240

GIỚI THIỆU

Một drawable resource có thể vẽ được là một khái niệm chung cho một hình ảnh có thể được rút ra cho màn hình. Drawables được sử dụng để xác định shapes, colors, borders, gradients, , vv mà sau đó có thể được áp dụng cho các views bên trong Activity.

Một danh sách các dawable mặc định cho tất cả các phiên bản android. androiddrawables là một nơi chứa các tài liệu tham khảo tuyệt vời.

SỬ DỤNG

Drawables có thể được sử dụng trong các tình huống khác nhau như drawing shapes, setting state behaviors for buttons, creating stretchable button backgrounds and creating compound drawable layers.

Có ít nhất 17 loại drawables nhưng có năm loại quan trọng nhất :

  1. Shape Drawables – Định nghĩa một hình dạng với các đặc tính như stroke, fill, and padding
  2. StateList Drawables – Định nghĩa một danh sách các drawables
  3. LayerList Drawables – Định nghĩa một danh sách các drawables gom lại với nhau
  4. NinePatch Drawables – Một tập tin PNG v cho phép thay đổi kích thước thích hợp
  5. Vector Drawables – Defines complex XML-based vector images

Cùng tìm hiểu một số ví dụ về cách sử dụng:

Drawing Shapes

Shape Drawable là một file xml định  nghĩa các dạng hình học, bao gồm cả colors and gradients. Ví dụ, bạn có thể sử dụng shape drawable để thay đổi shape, border, and gradient của một Button hoặc Background.

Solid Color Shapes

Dưới đây là một ví dụ về cách vẽ một hình chữ nhật có viền làm tròn trong res/layout/drawable/ solid_color_shape.xml:

Ta sẽ được kết quả như sau:

drawable-android

Gradient Colored Shapes

Shapes cũng hỗ trợ gradients backgrounds đầy đủ các thuộc tính như startColor, centerColor, endColor, angle. Để tạo các gradients như radial, linear or sweep bằng cách sử dụng type property.

Dưới đây là một ví dụ về một hình gradient  đơn giản tại res / layout / drawable / gradient_shape.xml:

Dưới đây là kết quả:

Gradient Shape

StateListDrawable

Đọc qua tên thì chúng ta cũng hình dung ra rằng Drawable này dùng để mô tả những state (normal, focus, press, disable…) của view. Đúng vậy, drawable này dùng để vẽ những state trên. Và thường xuyên sử dụng cho button, và các item trên ListView hay RecyclerView.

Hình ảnh dưới đây mô tả những state của Button.

drawable-android-5

Để tạo StateListDrawable cũng hoàn toàn tương tự như ShapeDrawable. Tôi tiến hành tạo drawable trong thư mục drawable có tên là button_selector.xml với nội dung như sau:

Sử dụng drawable cho button

Các bạn hãy làm thử và xem kết quả.

Bây tôi muốn làm một button như dưới đây:

drawable_android-6

Tôi sẽ có các file như sau:

button_state_normal.xml định nghĩa trạng trái normal của button

button_state_pressed.xml định nghĩa trạng thái khi button được nhấn.

và file button_selector_save_change.xml định nghĩa selector của button gồm 2 state đó là normal và pressed.

Button sử dụng selector

Sau đó các bạn thử chạy và run chương trình xem kết quả có sự khác biệt gì không.

Ngoài hai state normal và pressed trong android còn có nhiều state khác nữa.

drawable-android-6

Đa số các view trong Android đều có thể những state này. StateListDrawale khá nhiều nên tôi chỉ giới thiệu từng này. Chi tiết hơn các bạn có thể tìm kiếm ở ĐÂY.

CustomDrawable

Trên trên tôi đã giới thiệu những Drawable được giới thiệu trong Android SDK. Tiếp theo mình sẽ tạo drawable cho riêng mình để giúp các bạn hiểu sâu hơn Drawable trong Android.

Tôi tạo class ArcDrawable kế thừa từ Drawable như sau:

Và sử dụng Drawable này như sau:

Kết quả ta thấy như sau:

drawable-android-9

Và dưới đây là hình ảnh của drawale đã sử dụng trong bài viết từ đầu tới cuối

drawable-android-10

Link Project DrawableDemo trên github.

Kết luận

Trên đây tôi đã giới thiệu cho các bạn về một kiến thức được sử dụng khá nhiều trong Android đó là drawable. Hy vọng với những kiến thức mà tôi truyền đạt trong bài viết này giúp bạn có thể thiết kế UI cho ứng dụng một các đẹp đẽ hơn. Và sâu hơn nữa có thể tạo ra những Drawable của chính bạn để có thể sử dụng. Nếu có bất kì thắc mắc bào vui lòng để lại bình luận ở phía dưới. Tôi sẽ sẵng sàng giải đáp thắc mắc của các bạn.

Bài viết được lấy nguồn từ:
https://guides.codepath.com
http://eitguide.com/