1. Giới thiệu

Background là một phần không thể thiếu trong phát triển 1 ứng dụng android. Khi làm việc với nó chắc chắn chúng ta sẽ có một số vấn đề liên quan đến việc co giãn hình ảnh làm background. Ví dụ:

– Chúng ta có 1 ảnh background làm màn hình nền nhưng ảnh bị vỡ khi mở ứng dụng trên máy có độ phân giải cao.

– Chúng ta có 1 ảnh background làm nền cho các Button, TextView, Spinner, … nhưng ảnh cũng bị vỡ khi nội dung nhiều. Cụ thể như ảnh minh họa

Button thứ nhất chúng ta thấy bình thường, khi nội dung nhiều hơn chúng ta mong muốn kết quả giống như button thứ 3. Nhưng không, khi chạy ứng dụng chúng ta thấy kết quả lại giống button thứ 2. Ảnh background đã bị vỡ hình.

Và còn một vài vấn đề khác. Chúng ta phải khắc phục nó như thế nào?

Chúng ta có thể sử dụng ảnh lớn hơn để thay thế, nhưng ảnh lớn hơn lại phát sinh vấn đề làm tăng dụng lượng ảnh và dung lượng ứng dụng cũng tăng theo. Thật may mắn Android SDK có một công cụ hữu ích trong việc giải quyết vấn đề này. Đó là Draw9Patch.

Bài viết này là một bài hướng dẫn cơ bản cách sử dụng công cụ này.

2. Sử dụng cơ bản

Giả sử chúng ta có 1 hình làm hình nền cho button.

Mở công cụng “draw9patch” trong thư mục <AndroidSDK>/tools/

Từ công cụ này mở file background lên hoặc kéo thả vào công cụ.

Vẽ những pixel ở các viền trên ảnh mà chúng ta muốn ảnh được co giãn khi phóng to thu nhỏ mà không làm vỡ ảnh ở những chi tiết khác.

Sau khi vẽ xong chúng ta lưu ảnh lại, công cụ sẽ tự động lưu dưới định dạng <ten_anh>.9.png

Và bây giờ chỉ việc sử dụng ảnh này làm background.

Mô tả hoạt động của ảnh 9-patch:

Giả sử chúng ta có ảnh 9-patch như sau:

Những điểm màu đen phía trên và phía bên trái sẽ là những điểm co giản của ảnh khi nội dung vượt quá kích thước của ảnh.

Những điểm màu đen phía dưới và bên phải sẽ xác định vị trí nội dung sẽ được hiển thị trên background.

Minh họa cho sự co giãn, ảnh sẽ co giãn như sau:

Minh họa cho việc hiển thị nội dung:

3. Một số tùy chọn trong công cụ

• Zoom: Zoom vùng ảnh bạn đang chỉnh sửa vẽ 9.patch.
• Patch scale: scale vùng ảnh để xem kết quả pre-view của ảnh sau khi chấm 9.patch.
• Show lock: lock vùng ảnh đang chỉnh sửa khi move chuột qua vùng ảnh.
• Show patches: Hiển thị vùng ảnh stretchable.
• Show content: Highlight vùng ảnh hiển thị  kết quả (purple is the area in which content is allowed).
• Show bad patches: Hiển thị vùng ảnh được chọn để scale.

Trên đây là một số hướng dẫn cơ bản khi sử dụng công cụ Draw9Patch trong Android.

Chúc các bạn làm việc hiệu quả và đừng quên “Like” bài viết nhé.

Trân trọng cảm ơn!