Cách sử dụng ảnh NinePatch trong iOS và macOS

Ảnh NinePatch là ảnh PNG đặc biệt cho phép bạn kéo giãn phần trung tâm nhưng vẫn giữ nguyên các cạnh, giống như chính hình ảnh đó. Chúng rất phù hợp cho các nút, hình nền có thể mở rộng và các thành phần giao diện người dùng khác. Bài viết này sẽ nói về cách sử dụng thư viện NinePatchKit để triển khai ảnh NinePatch trong các ứng dụng iOS và macOS.

Sử dụng ảnh NinePatch trong iOS và macOS

1. Tạo ảnh NinePatch

Bây giờ, bạn phải tạo một ảnh NinePatch. Tôi khuyên bạn nên sử dụng công cụ 9 Patch Editor để tạo ảnh của mình. Quy trình như sau:

Truy cập trang web của 9 Patch Editor.
Tải lên ảnh PNG mà bạn muốn chuyển đổi thành NinePatch.
Xác định ranh giới (bạn có thể thực hiện việc này bằng cách kéo các cạnh) và xem trước kết quả.
Tải xuống ảnh NinePatch kết quả. Trong các tùy chọn tải xuống, hãy đảm bảo bạn chọn tùy chọn "Lưu dưới dạng ảnh đã biên dịch" vì điều này sẽ đảm bảo ảnh của bạn chứa tất cả các siêu dữ liệu cần thiết để NinePatchKit có thể phân tích cú pháp chính xác.

2. Thêm ảnh NinePatch vào Dự án

Bạn có thể tích hợp ảnh NinePatch vào bundle, Data Set hoặc bất kỳ đâu bạn muốn nhưng đừng bao giờ thêm chúng vào Image Set. Trong quá trình xây dựng, tất cả các tệp png được lưu trữ trong Image Set sẽ được tối ưu hóa thông qua việc nhúng khối CgBI và không có các khối bổ sung, do đó, các ảnh NinePatch được lưu giữ trong Image Set sẽ không còn hoạt động chính xác trong việc phân tích cú pháp định dạng do các sửa đổi mà chúng trải qua.

3. Nhập NinePatchKit

Tiếp theo, bạn sẽ cần sử dụng thư viện NinePatchKit để tạo và hiển thị ảnh NinePatch. Thư viện mã nguồn mở này cung cấp API rất đơn giản cho ảnh NinePatch, đơn giản hóa việc sử dụng chúng bên trong các ứng dụng trên iOS và macOS. Bạn có thể liên kết nó vào dự án của mình thông qua CocoaPods hoặc thêm mã theo cách thủ công vào dự án của bạn.

Sử dụng CocoaPods: Thêm dòng này vào Podfile của bạn:
```
pod 'NinePatchKit'
```
Sau đó chạy pod install.
Tích hợp thủ công: Tải xuống thư viện NinePatchKit và thêm thư mục NinePatchUtils vào dự án của bạn.

4. Sử dụng ảnh NinePatch trong Code

Bây giờ, bạn có thể sử dụng NinePatchKit để tải và hiển thị ảnh NinePatch của mình. Đây là một ví dụ đơn giản để hiển thị cách bạn có thể sử dụng chúng trong NinePatchImageView:

#import <NinePatchKit/NinePatchKit.h>
...
NSString * path = [[NSBundle mainBundle] pathForResource:@"YourNinePatchImageName" ofType:@"png"];
NinePatchImageView * imageView = [[NinePatchImageView alloc] init];
imageView.showImage = [NinePatchUtils imageWithContentsOfFile:path];

[imageView.contentView addSubview:CustomView]; // thêm subview vào contentView

Thay thế "YourNinePatchImageName" bằng tên của ảnh NinePatch của bạn (không có phần mở rộng). Đoạn mã này tạo NinePatchImageView và sử dụng NinePatchUtils, nó sẽ tải ảnh NinePatch của bạn. NinePatchImageView tương tự như UITableViewCell- chúng có thể có các subview bổ sung được thêm vào contentView của chúng để có bố cục phức tạp hơn.

5. Tóm tắt

Vậy là bây giờ bạn sẽ có thể dễ dàng sử dụng nó với các ứng dụng iOS và macOS bằng đồ họa NinePatch. Bằng cách sử dụng thư viện NinePatchKit, bạn có thể dễ dàng hiển thị hình ảnh có thể kéo giãn chất lượng cao để cải thiện trải nghiệm giao diện của mình.

Lưu ý

Định dạng ảnh: Đảm bảo rằng ảnh của bạn ở đúng định dạng PNG và bao gồm tất cả các siêu dữ liệu NinePatch cần thiết.
Vị trí ảnh: Bao gồm NinePatch trong gói tài nguyên của dự án và tải nó bằng đường dẫn chính xác. Không đặt NinePatch vào Image Set vì nó có thể làm hỏng định dạng hình ảnh.