Hướng dẫn tạo ảnh nine patch (*.9.png)

1. Ảnh 9 patch là gì?

Ảnh "9 patch" là ảnh mà có một số vùng được định nghĩa (defined) để có thể kéo căng ra (stretchable) mà không bị vỡ hạt.

Vùng định nghĩa có thể kéo căng là một đường bao màu đen có độ dày 1 px, nằm ở viền ngoài cùng của ảnh. Lề bên phải và đáy gọi là Fill Area, có thể hiểu điều này như là bạn có 1 sợi dây chun, bạn cố định một đầu và kéo dãn đầu còn lại. Lề bên trên và bên trái tùy thuộc vào bạn chấm vẽ điểm đen như thế nào mà vùng ảnh đó sẽ được kéo dãn. Cụ thể sự khác nhau khi chấm vẽ điểm đen xin hãy xem hình ovan bên dưới.

Hình ovan này được định nghĩa sẽ kéo căng phần giữa.

Nếu bạn đặt lệch dường màu đen định nghĩa lên cao như trên thì khi kéo căng sẽ có một hình ovan ...méo

Android có một lớp đồ họa tên là NinePatch có nhiệm vụ xử lý những ảnh 9 patch này, chi tiết có thể tìm hiểu thêm trên trang developer.google.com. 

2. Tại sao lại cần sử dụng?

Bạn có một ảnh hình chữ nhật bo góc như này:

Hãy xem sự khác nhau khi setBackground cho một layout:

• Khi không sử dụng ảnh 9 patch

Ảnh sẽ bị vỡ hạt trông rất xấu

• Khi sử dụng ảnh 9 patch:

Ảnh sẽ được kéo căng đều, góc bo không bị vỡ

3. Công cụ tạo ảnh 9 patch

Để tạo ảnh 9 patch tôi sẽ giới thiệu với các bạn 2 công cụ:

• Sử dụng công cụ draw9patch: nằm trong thư mục tools của bộ sdk Android (<ổ đĩa>/sdk/tools). Bạn click đúp vào file draw9patch.bat

<ổ đĩa>/sdk/tools

Giao diện của công cụ

Bạn chỉ việc kéo thả ảnh cần định nghĩa thành ảnh 9 patch vào trong giao diện của ứng dụng là có thể làm việc. Click chuột ở đường viền của ảnh để chấm điểm đen, nếu nhấp giữ chuột trái + kéo thì có thể vẽ thành đường thẳng, muốn xóa điểm vẽ sai thì nhấp giữ chuột phải và di chuột qua điểm đen. 

Nếu nhấp chọn vào checkbox "Show patches" thì bạn có thể thấy vùng nào trên ảnh sẽ được kéo căng. Kéo thanh trượt ở "Patch scale" để xem kết quả khi kéo dọc, kéo ngang, kéo căng trông như thế nào.

• Sử dụng công cụ Android Asset Studio (online): bằng cách truy cập địa chỉ Simple Nine-patch Generator.

Sử dụng công cụ này cũng khá đơn giản.

Sau khi xong bạn nhấp vào nút Download để tải file ảnh về, điểm hay của công cụ này là nó sinh luôn cho bạn các kích thước ảnh phù hợp như hdpi, mdpi....

Xem video hướng dẫn