Tạo tệp bitmap có thể thay đổi kích thước (tệp 9-Patch)

Công cụ Draw 9-patch là trình chỉnh sửa WYSIWYG có sẵn trong Android Studio, cho phép tạo hình ảnh bitmap có khả năng tự thay đổi kích thước cho phù hợp với nội dung trong khung nhìn và kích thước màn hình. Các phần đã chọn của hình ảnh được điều chỉnh theo tỷ lệ theo chiều ngang hoặc chiều dọc dựa trên các chỉ báo vẽ trong hình ảnh.

Để tìm hiểu cách tạo đồ hoạ NinePatch, hãy đọc nội dung về thành phần vẽ được NinePatch trong tài liệu về Canvas và Drawable.

Hình 1. Một hình ảnh NinePatch trong công cụ Draw 9-patch của Android Studio.

Sau đây là hướng dẫn nhanh về cách tạo đồ hoạ NinePatch bằng công cụ Draw 9-patch trong Android Studio. Bạn sẽ cần một ảnh PNG mà bạn muốn dùng để tạo ảnh NinePatch.

  1. Trong Android Studio, hãy nhấp chuột phải vào hình ảnh PNG mà bạn muốn dùng để tạo hình ảnh NinePatch, sau đó nhấp vào Create 9-patch file (Tạo tệp 9-patch).
  2. Nhập tên tệp cho hình ảnh NinePatch rồi nhấp OK. Tệp hình ảnh tạo ra sẽ có đuôi .9.png.
  3. Nhấp đúp vào tệp NinePatch mới để mở bằng Android Studio. Không gian làm việc của bạn sẽ mở ra.

    Ngăn bên trái là khu vực vẽ, trong đó bạn có thể chỉnh sửa các đường kẻ cho các mảng co giãn được và vùng nội dung. Ngăn bên phải là khu vực xem trước. Tại đây, bạn có thể xem trước thành phần đồ hoạ khi co giãn.

  4. Nhấp vào bên trong phạm vi 1 pixel để vẽ các đường xác định mảng co giãn và vùng nội dung (không bắt buộc). Nhấp chuột phải (hoặc giữ Shift và nhấp trên máy Mac) để xoá các dòng đã vẽ.
  5. Khi hoàn tất, hãy nhấp vào File (Tệp) > Save (Lưu) để lưu thay đổi.

Bạn có thể mở một tệp NinePatch hiện có trong Android Studio bằng cách nhấp đúp vào tệp đó.

Để đảm bảo thành phần đồ hoạ NinePatch của bạn giảm kích thước đúng cách, hãy xác minh để chắc chắn rằng mọi vùng có thể co giãn đều có kích thước ít nhất là 2x2 pixel. Nếu không, các tệp đó có thể biến mất khi thu nhỏ. Ngoài ra, hãy cung cấp một pixel dưới dạng khoảng không an toàn để dự phòng trong thành phần đồ hoạ trước và sau khi co giãn, nhằm tránh hiện tượng nội suy trong quá trình điều chỉnh theo tỷ lệ và có thể khiến màu ở ranh giới thay đổi.

Lưu ý: Tệp PNG thông thường (*.png) sẽ được tải kèm với một đường viền 1 pixel trống xung quanh hình ảnh, nơi bạn có thể vẽ các mảng co giãn và vùng nội dung. Một tệp NinePatch (*.9.png) từng lưu trước đó sẽ được tải nguyên trạng, trong đó không có khu vực vẽ nào được thêm vào vì đã có sẵn.

Hình 2. Một ảnh NinePatch cho thấy nội dung, các mảng hợp lệ lẫn các mảng không hợp lệ.

Có một số chế độ điều khiển tuỳ chọn như sau:

  • Zoom (Thu phóng): Điều chỉnh mức thu phóng của thành phần đồ hoạ trong khu vực vẽ.
  • Patch scale (Điều chỉnh kích thước mảng theo tỷ lệ): Điều chỉnh tỷ lệ của hình ảnh trong khu vực xem trước.
  • Show lock (Hiện khoá): Trình bày trực quan khu vực đồ hoạ không vẽ được khi di chuột qua.
  • Show patches (Hiện mảng): Xem trước các mảng co giãn trong khu vực vẽ như hình 2 ở trên (màu hồng là một mảng co giãn).
  • Show content (Hiện nội dung): Đánh dấu vùng nội dung trong ảnh xem trước, ví dụ như trong hình 2 (màu tím là vùng cho phép chèn nội dung).
  • Show bad patches (Hiện mảng không hợp lệ): Thêm đường viền màu đỏ xung quanh các khu vực mảng có thể làm ảnh bị vỡ khi co giãn, ví dụ như trong hình 2. Nếu bạn loại bỏ tất cả mảng không hợp lệ, ảnh vừa được co giãn sẽ trông vừa mắt.