Tạo tệp bitmap có thể thay đổi kích thước (tệp 9-patch)
Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang
Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.
Công cụ Draw 9-patch là trình chỉnh sửa WYSIWYG có sẵn trong Android Studio. Công cụ này 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 hiển thị và kích thước màn hình. Bạn có thể điều chỉnh tỷ lệ cho các phần đã chọn của hình ảnh theo chiều ngang hoặc chiều dọc dựa trên các chỉ báo được vẽ trong hình ảnh.
Để tìm hiểu cách tạo đồ hoạ NinePatch, hãy đọc phần Đối tượng có thể vẽ NinePatch.
Hình 1. Công cụ Draw 9-patch của Android Studio hiển thị hình ảnh NinePatch.
Hãy làm theo các bước sau đây để tạo một hình ảnh đồ hoạ NinePatch bằng công cụ Draw 9-patch trong Android Studio. Bạn sẽ cần có một ảnh PNG để tạo ảnh NinePatch.
- 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).
- Nhập tên tệp cho hình ảnh NinePatch rồi nhấp vào OK. Tệp hình ảnh tạo ra sẽ có đuôi là
.9.png.
- Nhấp đúp vào tệp NinePatch mới để mở bằng Android Studio.
Trong không gian làm việc mở ra, ngăn bên trái là khu vực vẽ, nơi bạn có thể chỉnh sửa các đường kẻ của vùng nội dung và bản vá kéo giãn được. 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 kéo giãn.
- Nhấp vào bên trong phạm vi 1 pixel để vẽ các đường kẻ 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 để xoá các đường kẻ đã vẽ trước đó (trên máy Mac, giữ phím Shift và nhấp).
- Khi hoàn tất, hãy nhấp vào File > Save (Tệp > Lưu) để lưu các thay đổi.
Để mở một tệp NinePatch hiện có trong Android Studio, hãy 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 vùng đó có thể biến mất khi thu nhỏ. Để tránh loại nội suy trong khi chuyển tỷ lệ (có thể khiến màu sắc ở ranh giới thay đổi), hãy cung cấp thêm 1 pixel không gian an toàn trong đồ hoạ trước và sau vùng co giãn.
Lưu ý: Tệp PNG thông thường (*.png) được tải với đường viền trống 1 pixel được thêm xung quanh hình ảnh. Bạn có thể vẽ các mảng co giãn được và vùng nội dung trong đường viền.
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ó vùng vẽ nào được thêm vì đã có sẵn.
Hình 2. Hình ảnh NinePatch trong Android Studio hiển thị nội dung, mảng và mảng không hợp lệ.
Các chế độ điều khiển không bắt buộc 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 màu hồng trong khu vực vẽ. Màu hồng cho biết đây là mảng có thể co giãn, như trong hình 2.
- Show content (Hiển thị nội dung): Đánh dấu khu vực nội dung trong hình ảnh xem trước. Màu tím cho biết khu vực được phép hiển thị nội dung, như minh hoạ trong hình 2.
- 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 loại bỏ tất cả mảng không hợp lệ, bạn sẽ duy trì được độ đồng nhất của hình ảnh khi co giãn.
Nội dung và mã mẫu trên trang này phải tuân thủ các giấy phép như mô tả trong phần Giấy phép nội dung. Java và OpenJDK là nhãn hiệu hoặc nhãn hiệu đã đăng ký của Oracle và/hoặc đơn vị liên kết của Oracle.
Cập nhật lần gần đây nhất: 2025-07-27 UTC.
[[["Dễ hiểu","easyToUnderstand","thumb-up"],["Giúp tôi giải quyết được vấn đề","solvedMyProblem","thumb-up"],["Khác","otherUp","thumb-up"]],[["Thiếu thông tin tôi cần","missingTheInformationINeed","thumb-down"],["Quá phức tạp/quá nhiều bước","tooComplicatedTooManySteps","thumb-down"],["Đã lỗi thời","outOfDate","thumb-down"],["Vấn đề về bản dịch","translationIssue","thumb-down"],["Vấn đề về mẫu/mã","samplesCodeIssue","thumb-down"],["Khác","otherDown","thumb-down"]],["Cập nhật lần gần đây nhất: 2025-07-27 UTC."],[],[],null,["# Create resizable bitmaps (9-patch files)\n\nThe Draw 9-patch tool is a WYSIWYG editor included in Android Studio. The tool lets you create\nbitmap images that automatically resize to accommodate the contents of the view and the size of\nthe screen. You can scale selected parts of the image horizontally or vertically based on indicators\ndrawn within the image.\n\nFor an introduction to NinePatch graphics and how they work, read\n[NinePatch drawables](/guide/topics/graphics/2d-graphics#nine-patch).\n\n**Figure 1.** Android Studio's\nDraw 9-patch tool displaying a NinePatch image.\n\nFollow these steps to create a NinePatch graphic using the Draw 9-patch tool in Android\nStudio. You'll need the PNG image that you'd like to create a NinePatch image from.\n\n1. In Android Studio, right-click the PNG image you'd like to create a NinePatch image from, then click **Create 9-patch file**.\n2. Enter a filename for your NinePatch image and click **OK** . Your image will be created with the `.9.png` file extension.\n3. Double-click your new NinePatch file to open it in Android Studio. \n\n In the workspace that opens, the left pane is your drawing area, where you can edit\n the lines for the stretchable patches and content area. The right\n pane is the preview area, where you can preview your graphic when stretched.\n4. Click within the 1-pixel perimeter to draw the lines that define the stretchable patches and (optional) the content area. \n\n Right-click to erase\n previously drawn lines (on Mac, hold Shift and click).\n5. When done, click **File** \\\u003e **Save** to save your changes.\n\nTo open an existing NinePatch file in Android\nStudio, double-click the file.\n\nTo make sure that your NinePatch graphics scale down properly, verify that any\nstretchable regions are at least 2x2 pixels in size.\nOtherwise, those regions may disappear when scaled down. To avoid interpolation during scaling\nthat may cause the color at the boundaries to change, provide 1 pixel of extra safe\nspace in the graphics before and after stretchable regions.\n\n**Note:** A normal PNG file (`*.png`) is\nloaded with an empty 1-pixel border added around the image. You can draw\nthe stretchable patches and content area within the border.\nA previously saved NinePatch file (`*.9.png`) is loaded as-is,\nwith no drawing area added because it already exists.\n\n**Figure 2.** A NinePatch image in Android Studio\nshowing content, patches, and bad patches.\n\nOptional controls include:\n\n- **Zoom**: Adjust the zoom level of the graphic in the drawing area.\n- **Patch scale**: Adjust the scale of the images in the preview area.\n- **Show lock**: Visualize the non-drawable area of the graphic on mouse-over.\n- **Show patches**: Preview the pink stretchable patches in the drawing area. Pink indicates a stretchable patch, as shown in figure 2.\n- **Show content**: Highlight the content area in the preview images. Purple indicates the area where content is allowed, as shown in figure 2.\n- **Show bad patches**: Adds a red border around patch areas that may produce artifacts in the graphic when stretched, as shown in figure 2. If you eliminate all bad patches, you will maintain the visual coherence of your stretched image."]]
