Hình ảnh NinePatch là gì

Hình ảnh NinePatch là một hình ảnh PNG đặc biệt cho phép hệ thống Android tự động thay đổi kích thước hình ảnh theo nội dung mà không bị méo hoặc kéo giãn. Điều này cho phép các nhà phát triển tạo ra các phần tử UI có khả năng mở rộng như nút, thanh tiến trình và hình nền, mà không cần nhiều bộ tài nguyên cho các kích thước màn hình khác nhau.

Tạo hình ảnh NinePatch

Draw 9-patch là một công cụ trong Android Studio để tạo và chỉnh sửa hình ảnh NinePatch. Nó cho phép các nhà phát triển trực quan vẽ các đường pixel đen dọc theo các đường viền và xem trước hình ảnh trông như thế nào ở các kích thước khác nhau. Có rất nhiều tài nguyên và ứng dụng trực tuyến có sẵn để tạo hình ảnh NinePatch ngoài các công cụ đi kèm với Android Studio, chẳng hạn như 9 Patch Editor.

Sử dụng hình ảnh NinePatch

Việc sử dụng hình ảnh NinePatch trong các ứng dụng Android rất đơn giản: bạn thêm chúng vào thư mục res/drawable của dự án và sau đó tham chiếu chúng bằng android:background trong tệp bố cục XML của bạn. Ví dụ:

<Button android:id="@+id/tiny"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerInParent="true"
        android:text="Tiny"
        android:textSize="8sp"
        android:background="@drawable/my_button_background"/>

<Button android:id="@+id/big"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerInParent="true"
        android:text="Biiiiiiig text!"
        android:textSize="30sp"
        android:background="@drawable/my_button_background"/>

Hãy cẩn thận, layout_width và layout_height phải là wrap_content để hiển thị các nút gọn gàng với văn bản.

Hình ảnh sau đây hiển thị hai nút được hiển thị thông qua XML và hình ảnh NinePatch. Như trong hình trên, hãy quan sát cách chiều rộng và chiều cao của các nút thay đổi theo văn bản, trong khi hình nền được kéo giãn để vừa với màn hình.

Các tình huống sử dụng NinePatch

1. Hình nền nút: Đây là trường hợp ứng dụng phổ biến nhất cho Drawables. Vì độ dài văn bản có thể khác nhau giữa các nút khác nhau, NinePatch đảm bảo rằng hình nền có thể được phủ hoàn toàn và không bị vượt ra ngoài ranh giới hoặc biến dạng với nút từ vị trí văn bản bên trong. Ví dụ: nếu chúng ta có hình nền nút góc tròn, chúng ta sẽ sử dụng NinePatch và bất kể độ dài của văn bản nút là bao nhiêu, các góc tròn sẽ vẫn không thay đổi.

2. Hình nền thanh tiến trình: Nó kéo giãn hình nền trên khoảng cách đơn vị cố định với thanh tiến trình, trong đó khoảng cách đơn vị khác nhau và thay đổi tùy theo tải từ hệ thống này sang hệ thống khác. NinePatch sẽ đảm bảo rằng kiểu dáng của hình nền sẽ không bị biến dạng khi kéo giãn.

3. Hình nền cho mục danh sách: Trong chế độ xem danh sách, hình nền của các mục danh sách này thực sự cần phải khác nhau tùy thuộc vào độ dài của nội dung được đưa vào chế độ xem. NinePatch đảm bảo rằng hình nền kéo giãn khá đẹp mà không bị biến dạng.

4. Hình nền khung hộp thoại: Trong những trường hợp như vậy, kích thước của Hộp thoại thay đổi theo nội dung. NinePatch đảm bảo rằng hình nền kéo giãn nhất quán với cùng một kiểu.

5. Dấu phân cách có thể mở rộng: Với NinePatch, người dùng có thể thiết kế dấu phân cách có thể kéo giãn theo chiều ngang hoặc chiều dọc, phù hợp với nhiều kích thước màn hình và khả năng thích ứng bố cục.

6. Hình nền hình dạng do người dùng xác định: NinePatch xây dựng nhiều hình nền hình dạng do người dùng xác định như các góc được làm tròn, đổ bóng, v.v. có các hiệu ứng đặc biệt khác nhau mà không có thay đổi nào đối với các hiệu ứng này khi kéo giãn.

Ưu điểm của NinePatch

• Khả năng mở rộng: Đây là ưu điểm lớn nhất của NinePatch. Tự động thay đổi kích thước dựa trên nội dung, do đó loại bỏ sự cần thiết phải duy trì nhiều bộ tài nguyên cho các kích thước màn hình và độ dài nội dung khác nhau.
• Tránh biến dạng: Việc kiểm soát tọa độ của khu vực có thể kéo giãn ngăn hình ảnh bị kéo giãn. Các thuộc tính của độ sắc nét và đẹp được bảo toàn trong hầu hết các trường hợp.
• Tăng hiệu quả: Ít tệp tài nguyên hơn và do đó tăng hiệu quả trong quá trình phát triển.
• Sắp xếp linh hoạt: Nó có thể dễ dàng tạo ra các hình dạng và kích thước khác nhau của các phần tử UI để phù hợp với các yêu cầu bố cục khác nhau.

Cách hoạt động của NinePatch

Dấu hiệu đặc trưng của hình ảnh NinePatch là một đường viền pixel hoàn toàn hẹp. Đường viền đó xác định khả năng mở rộng và khu vực nội dung của hình ảnh. Vẽ các đường pixel đen trên các cạnh cho biết phần nào cần kéo giãn ở ngoại vi, phần nào theo chiều dọc và phần nào theo chiều ngang.

Cụ thể, đường viền 1 pixel được chia thành bốn phần:

1. Đường viền bên trái (đường pixel đen dọc):

• Chức năng: Kiểm soát độ kéo giãn theo chiều dọc của hình ảnh. Đường pixel đen dọc ở đường viền bên trái xác định những khu vực nào của hình ảnh có thể được kéo giãn theo chiều dọc.

• Ví dụ:

  • Không có đường pixel đen: Chiều cao của hình ảnh được cố định; do đó, nó không có khả năng kéo giãn theo chiều dọc. Nếu nó đang cố gắng được đặt trong một vùng chứa cao hơn chính hình ảnh, nó sẽ vẫn như cũ và có thể có các vùng trống hoặc bị cắt.

  • Một đường pixel đen: Hình ảnh có thể được kéo giãn theo chiều dọc nhưng sau đó bị giới hạn ở các khu vực được chỉ định bởi các đường pixel đen. Ví dụ: nếu một đường pixel đen được đặt ở giữa đường viền bên trái, điều đó có nghĩa là nửa trên và nửa dưới sẽ không thay đổi, chỉ cho phép kéo giãn theo chiều dọc ở phần giữa.

  • Nhiều đường pixel đen: Nó có thể được xác định bằng một số vùng kéo giãn theo chiều dọc. Ví dụ: sẽ có hai đường pixel đen ở đường viền bên trái, chia hình ảnh thành ba phần tại các phần có thể kéo giãn ở giữa, với các phần trên và dưới không thay đổi.

2. Đường viền trên (các đường pixel đen ngang):

• Chức năng: Kiểm soát độ kéo giãn theo chiều ngang của hình ảnh. Một đường pixel đen ngang ở đường viền trên xác định các phần có thể kéo giãn của hình ảnh theo chiều ngang.

• Ví dụ:

  • Không có đường pixel đen: Chiều rộng hình ảnh được cố định và không kéo giãn theo chiều ngang. Tương tự như trường hợp không có đường pixel đen ở đường viền bên trái, hình ảnh sẽ vẫn giữ nguyên nhưng có thể có các vùng trống hoặc bị cắt.

  • Một đường pixel đen: Hình ảnh có thể kéo giãn theo chiều ngang nhưng sau đó, chỉ trong khu vực được chỉ định bởi đường pixel đen. Ví dụ: nếu đường pixel đen nằm ở giữa ranh giới trên, thì nửa bên trái của hình ảnh sẽ không thay đổi, cũng như nửa bên phải, chỉ cho phép một số kéo giãn ở giữa.

  • Nhiều đường pixel đen: Nó xác định các vùng có thể kéo giãn bên khác nhau. Giống như trường hợp của đường viền bên trái với nhiều đường pixel đen ngang, nó chia hình ảnh thành nhiều phần và bất kỳ phần nào được đánh dấu như vậy đều có thể kéo giãn theo chiều ngang.

3. Đường viền bên phải (Các đường pixel đen dọc):

• Chức năng: Xác định khoảng đệm bên phải của vùng nội dung. Các đường pixel đen dọc trên lề phải cho biết ranh giới bên phải của vùng nội dung hình ảnh. Trong quá trình kéo giãn, phía bên phải của vùng nội dung sẽ vẫn nằm trên ranh giới này.

• Ví dụ:

  • Không có đường pixel đen: Vùng nội dung mở rộng đến tận lề phải của hình ảnh, không uốn cong khi nội dung kéo giãn, khiến nội dung hình ảnh mở rộng ra cạnh phải.

  • Một đường pixel đen: Cạnh phải của vùng nội dung được xác định bởi vị trí của đường pixel đen. Khi kéo giãn, phía bên phải của vùng nội dung sẽ giữ nguyên vị trí tại đường pixel đen trong khi khoảng trống ở bên phải được kéo giãn.

4. Đường viền dưới (đường pixel đen ngang):

• Chức năng: Xác định lề dưới của khu vực mà nội dung bị giới hạn. Đường pixel đen ngang ở phía dưới xác định vị trí kết thúc của ranh giới dưới của vùng nội dung của hình ảnh. Phần dưới của vùng nội dung sẽ vẫn ở ranh giới đó khi được kéo giãn.

• Ví dụ:

  • Không có đường pixel đen: vùng nội dung mở rộng đến cạnh dưới của hình ảnh. Khi kéo giãn, toàn bộ nội dung hình ảnh kéo dài đến cạnh dưới.

  • Một đường pixel đen: ranh giới dưới của vùng nội dung bắt nguồn từ vị trí của đường pixel đen. Khi được kéo giãn, phần dưới của vùng nội dung sẽ vẫn ở mức của đường pixel đen và khoảng trắng bên dưới sẽ được kéo giãn.

Bằng cách sử dụng các đường pixel đen một cách khéo léo trên bốn đường viền này, lập trình viên có thể kiểm soát chính xác cách hình ảnh Nine Patch hiển thị ở các kích thước khác nhau, đồng thời đảm bảo rằng nó thực hiện điều đó mà không bị biến dạng hoặc mất vùng nội dung. Hãy nhớ rằng những đường pixel đó là ranh giới xác định của vùng có thể kéo giãn từ vùng nội dung, không phải là ranh giới thực tế của hình ảnh. Các phần không có đường pixel đen là các thành phần có kích thước cố định.

Lưu ý

• Hình ảnh NinePatch nên được lưu bằng tên tệp kết thúc bằng .9.png.
• Cần có kích thước tối thiểu 2x2 pixel trong vùng có thể kéo giãn để hình ảnh không bị biến mất khi thu phóng.
• Thêm khoảng trống an toàn ở các cạnh của vùng có thể kéo giãn có thể loại bỏ sự thay đổi màu sắc xảy ra khi thu phóng.
• Đảm bảo kiểm tra các vùng có thể kéo giãn và nội dung của hình ảnh một cách kỹ lưỡng để hình ảnh hiển thị chính xác ở các kích thước khác nhau.
• Không lạm dụng hình ảnh NinePatch, đặc biệt là trong các giao diện động hoặc những giao diện thay đổi thường xuyên, vì chúng làm giảm hiệu suất.

Tóm tắt

Hình ảnh NinePatch là công cụ mạnh mẽ nhất để tận dụng hiệu quả trong thiết kế UI và cải thiện trải nghiệm người dùng trong các ứng dụng Android. Tuy nhiên, điều này không có nghĩa là các nhà phát triển sẽ không phải cân bằng giữa các ưu điểm và hạn chế, vì việc lựa chọn loại hình ảnh phụ thuộc vào yêu cầu. Ví dụ: ngay cả khi Hình ảnh NinePatch là lựa chọn phù hợp cho hình nền có thể mở rộng hoặc các phần tử UI cần chấp nhận độ dài văn bản khác nhau, thì hình ảnh PNG thông thường cũng sẽ hoạt động tốt cho hình nền tĩnh — sự đơn giản của chúng là điểm mấu chốt. Khi sử dụng NinePatch, cần hết sức cẩn thận trong thiết kế và thử nghiệm để đảm bảo rằng nó hoạt động xuất sắc trên nhiều thiết bị và kích thước màn hình.