如何在 iOS 和 macOS 中使用 NinePatch 圖片

2025年1月9日

NinePatch 圖片是特殊的 PNG 圖片,允許您拉伸中心部分,但保持邊緣不變,很像圖片本身。它們非常適合可縮放的按鈕、背景和其他 UI 元素。本文將討論如何使用 NinePatchKit 函式庫在 iOS 和 macOS 應用程式中實作 NinePatch 圖片。

在 iOS 和 macOS 中使用 NinePatch 圖片

1. 建立 NinePatch 圖片

現在,您必須建立一個 NinePatch 圖片。我建議使用 9 Patch Editor 工具來產生您的圖片。流程如下:

  1. 前往 9 Patch Editor 的網站。
  2. 上傳您要轉換為 NinePatch 的 PNG 圖片。
  3. 定義邊界(您可以拖曳邊緣來做到),並預覽結果。
  4. 下載產生的 NinePatch 圖片。在下載選項中,請務必勾選「儲存為已編譯的圖片」選項,因為這將確保您的圖片包含所有需要的元數據,以便 NinePatchKit 可以正確解析它。

2. 將 NinePatch 圖片納入專案中

您可以將 NinePatch 圖片納入您的 bundleData Set 或您希望的任何地方,但切勿將它們添加到 Image Set 中。在建置期間,Image Set 中所有的 png 都將透過嵌入 CgBI 區塊進行優化,且不帶額外的區塊,因此,嵌入 Image Set 中的 NinePatch 圖片,由於它們經歷的修改,將不再在解析格式中正常運作。

3. 導入 NinePatchKit

接下來,您將需要使用 NinePatchKit 函式庫來建立和渲染 NinePatch 圖片。這個開放原始碼函式庫為 NinePatch 圖片提供了非常簡單的 API,簡化了它們在 iOS 和 macOS 應用程式中的使用。您可以透過 CocoaPods 將其連結到您的專案中,或者手動將程式碼加入到您的專案中。

  • 使用 CocoaPods: 將此行加入您的 Podfile

    pod 'NinePatchKit'
    

    然後執行 pod install

  • 手動整合: 下載 NinePatchKit 函式庫,並將 NinePatchUtils 資料夾加入您的專案中。

4. 在程式碼中使用 NinePatch 圖片

現在,您可以使用 NinePatchKit 來載入和渲染您的 NinePatch 圖片。這是一個簡單的範例,示範如何在 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]; // 將子視圖新增到 contentView

"YourNinePatchImageName" 替換為您的 NinePatch 圖片的名稱(不帶副檔名)。此程式碼片段建立一個 NinePatchImageView,並使用 NinePatchUtils 載入您的 NinePatch 圖片。NinePatchImageView 類似於 UITableViewCell,它們可以在其 contentView 上新增其他子視圖,以實現更複雜的佈局。

5. 總結

現在,您將能夠使用 NinePatch 圖形輕鬆地在 iOS 和 macOS 應用程式中使用它。透過使用 NinePatchKit 函式庫,您可以輕鬆地渲染高品質的可延展圖片,以改善您介面的體驗。

注意

  • 圖片格式: 確保您的圖片是正確的 PNG 格式,並包含所有必要的 NinePatch 元數據。
  • 圖片位置: 將 NinePatch 包含在您專案的資源包中,並使用正確的路徑載入它。不要將 NinePatch 放置在 Image Set 中,因為它可能會損壞圖片格式。