版本記錄

前言

SF Symbols 在 WWDC 2019 期間推出纱昧。自此Apple 為我們提供了免費 Symbols程奠，供我們在應(yīng)用中使用坝咐，而且使用它們非常簡單输玷。 不久前福也，WWDC 2020 又引入了 SF Symbols 2.0工育，這讓我們在 app 中使用精美的圖標(biāo)更加容易逃默。感興趣的可以看下面幾篇文章鹃愤。
1. SF Symbols詳細(xì)介紹（一） —— 簡介（一）

開始

首先看下主要內(nèi)容：

學(xué)習(xí)使用現(xiàn)有和自定義的SF符號來以引人入勝的方式顯示數(shù)據(jù)。內(nèi)容來自翻譯完域。

接著看下寫作環(huán)境：

Swift 5, iOS 14, Xcode 12

下面就是正文啦软吐。

在本教程中，您將學(xué)習(xí)有關(guān)SF Symbols的所有知識吟税，以及如何創(chuàng)建自己的自定義符號以幫助您的應(yīng)用脫穎而出凹耙！

SF Symbols是由Apple策劃的超過2,400個符號或圖標(biāo)的集合。它們旨在與Apple設(shè)備（稱為San Francisco）上的默認(rèn)系統(tǒng)字體配合使用肠仪。由于它們具有多種sizes and weights肖抱，它們提供了一種向項目添加圖標(biāo)的簡便方法。有許多現(xiàn)成的選項异旧，您很可能會找到適合您應(yīng)用風(fēng)格的完美選擇虐沥。而且，如果您找不到所需的東西，可以創(chuàng)建它欲险。

在這里镐依，您將向應(yīng)用程序中添加新的金光閃閃圖標(biāo)，以顯示London Underground線（通常稱為地鐵）的狀態(tài)天试。在此過程中槐壳，您將學(xué)習(xí)如何：

• 將SF Symbols集成到您的應(yīng)用程序中。
• 將不同的SF符號與不同的狀態(tài)相關(guān)聯(lián)喜每。
• 創(chuàng)建自己的自定義符號以在您的應(yīng)用中使用务唐。

首先在Xcode中打開入門項目。

該應(yīng)用程序顯示Tube線的當(dāng)前狀態(tài)带兜。您可以通過將SF符號與每個狀態(tài)相關(guān)聯(lián)并將其顯示在應(yīng)用中來添加到項目中枫笛。這樣，用戶可以一目了然地獲得所需的信息刚照。

構(gòu)建并運行該應(yīng)用程序刑巧。

哦！錯誤无畔！這是因為您需要設(shè)置應(yīng)用程序以獲取管線的數(shù)據(jù)啊楚。在逐步了解該應(yīng)用程序的工作原理之后，現(xiàn)在您將執(zhí)行此操作浑彰。

注意：如果您對了解應(yīng)用程序的內(nèi)部運作方式不感興趣恭理，則可以跳至Setting up TransportAPI。

1. Getting Acquainted with the App

打開AppMain.swift郭变。主視圖顯示一個名為TubeStatusView的視圖渤早，該視圖充當(dāng)應(yīng)用程序的根視圖湖雹。

接下來，打開TubeStatusView.swift。 TubeStatusView觀察到TubeStatusViewModel類型的模型對象稼锅。視圖的body顯示ZStack缀雳，該ZStack設(shè)置視圖的背景色贤斜，然后在頂部顯示Loadable懂酱。

可加載項根據(jù)加載狀態(tài)顯示不同的內(nèi)容：

• 等待數(shù)據(jù)時旋轉(zhuǎn)的活動指示器。
• 如果加載數(shù)據(jù)失敗茄猫，將發(fā)生錯誤狈蚤。
• 數(shù)據(jù)成功加載后，視圖構(gòu)建器的內(nèi)容划纽。

數(shù)據(jù)加載完成后脆侮，TubeStatusView將為每行顯示LineStatusRow。這些包含在ScrollView中勇劣。它還顯示Text靖避，顯示上次更新數(shù)據(jù)的時間潭枣。

請注意，視圖還如何包含onAppear（perform :)幻捏。當(dāng)視圖第一次出現(xiàn)在屏幕上時盆犁，它將調(diào)用視圖的loadData（）。此方法通過調(diào)用perform（action :)來要求模型執(zhí)行fetchCurrentStatus篡九。

打開LineStatusRow.swift并快速瀏覽一下谐岁。這是一個簡單的視圖，顯示特定管道線的狀態(tài)榛臼。您可以查看SwiftUI預(yù)覽以查看這些行的外觀伊佃。

2. Importing Models and Data

接下來，打開TubeStatusViewModel.swift沛善。該類的重要部分在Actions和Action Handlers下標(biāo)記航揉。

您已經(jīng)了解了TubeStatusView在屏幕上顯示時如何調(diào)用perform（action :)。通過將fetchCurrentStatus枚舉作為操作傳遞金刁，此方法將調(diào)用fetchCurrentStatus（）帅涂。

fetchCurrentStatus（）對符合TubeLinesStatusFetcher協(xié)議類型的實例變量調(diào)用fetchStatus（）。這可以處理從API獲取數(shù)據(jù)的操作胀葱。一旦獲取，tubeStatusState將被更新笙蒙。由于這是已發(fā)布的對象抵屿，SwiftUI會自動處理UI的更新。

3. Adding TransportAPI Functionality

在API組中打開TransportAPIService.swift捅位。 此類處理從fetchStatus（）中的網(wǎng)絡(luò)請求中獲取JSON數(shù)據(jù)轧葛，并將JSON解碼為AllLinesStatus結(jié)構(gòu)。

在該類中需要注意的重要部分是第82和83行上的appId和appKey艇搀。這些值是從應(yīng)用程序的Info.plist（特別是分別從TRANSPORT_API_SERVICE_APP_ID和TRANSPORT_API_SERVICE_APP_KEY中加載的尿扯。

打開Info.plist。 請注意焰雕，這些值并未設(shè)置為任何有效的ID衷笋，而是設(shè)置為$（TRANSPORT_API_SERVICE_APP_ID）和$（TRANSPORT_API_SERVICE_APP_KEY）。 $（...）語法稱為變量替換矩屁。 它告訴Xcode在構(gòu)建應(yīng)用程序時辟宗，用配置文件中的鍵值替換Info.plist中的值。 您稍后將進行設(shè)置吝秕。

通過單擊Project navigator中的TubeStatus項目泊脐，打開Project Info面板。 然后烁峭，在Project標(biāo)題下單擊TubeStatus容客。

Debug配置將加載Debug配置文件秕铛，該配置文件具有與Release相似的設(shè)置。

Setting up TransportAPI

該應(yīng)用程序使用免費的第三方API（稱為TransportAPI）來獲取有關(guān)各種Tube Line的最新信息缩挑。 在開始之前但两，您需要注冊并創(chuàng)建一個新應(yīng)用。

轉(zhuǎn)到the TransportAPI Developer Portal调煎，然后單擊標(biāo)題中的Sign up镜遣。

填寫表格，選中reCAPTCHA復(fù)選框士袄，然后單擊Sign up悲关。 確認(rèn)屏幕將要求您檢查您的電子郵件。

您會收到兩封電子郵件娄柳。 第一個包含有關(guān)如何激活帳戶的詳細(xì)信息寓辱。 第二個確認(rèn)您已經(jīng)成功創(chuàng)建了一個新的Application Key。

按照第一封電子郵件中的說明激活您的帳戶赤拒，然后在開發(fā)人員門戶Developer Portal中登錄到您的新帳戶秫筏。 登陸頁面顯示了剛剛創(chuàng)建的憑據(jù) —— App ID and App Key。 保持此標(biāo)簽為打開狀態(tài)挎挖，因為稍后將使用這些值这敬。

1. Connecting the API

現(xiàn)在，是時候?qū)?code>Transport API連接到您的應(yīng)用了蕉朵。

首先崔涂，打開Debug.xcconfig。 在這里始衅，您會找到帶有偽值的TRANSPORT_API_SERVICE_APP_ID和TRANSPORT_API_SERVICE_APP_KEY冷蚂。 將每個設(shè)置為Transport API開發(fā)人員門戶提供的值。

構(gòu)建并運行您的應(yīng)用程序 —— 最后汛闸！

注意：Xcode配置（.xcconfig）文件非常適合為您的應(yīng)用提供特定于構(gòu)建的配置蝙茶。例如，您可以在模擬器上運行時使用staging server URL 诸老，而在生產(chǎn)環(huán)境中可以使用其他URL隆夯。

但是，即使您使用.xcconfig别伏，也不應(yīng)將API密鑰存儲在這樣的應(yīng)用程序中吮廉。在生產(chǎn)應(yīng)用程序中，您應(yīng)該通過自己的服務(wù)器代理來自應(yīng)用程序的請求畸肆，并讓該服務(wù)器代表您向Transport API發(fā)出請求宦芦。您可以使用 AWS Lambda之類的服務(wù)輕松地做到這一點。

然后轴脐，如果您需要更改API密鑰调卑，或者如果Transport API引入了重大更改抡砂，則只需更新服務(wù)器，而不需要用戶下載應(yīng)用程序的新版本恬涧！

Understanding SF Symbols

現(xiàn)在基本應(yīng)用已啟動并運行注益，您將在本教程的其余部分中學(xué)習(xí)如何以SF Symbols的形式添加一些pizazz。

SF符號當(dāng)前提供三個版本：

• Version 1.1 is available on iOS/iPadOS/tvOS 13 and watchOS 6
• Version 2.0 is available on iOS/iPadOS/tvOS 14 and watchOS 7.0
• Version 2.1 is available on iOS/iPadOS/tvOS 14.2 and watchOS 7.2

macOS Big Sur也提供所有版本溯捆。

除了添加了將近900個符號外丑搔，SF Symbols的版本2還引入了160多種多色符號，局部變體以及對符號水平對齊方式的改進提揍。

注意：某些符號在版本之間已更改其名稱啤月。盡管SF Symbols支持舊名稱以實現(xiàn)向后兼容性，但您應(yīng)確保在應(yīng)用程序中使用的所有符號都可以在您打算支持的所有版本上使用劳跃。

Viewing Available Symbols

蘋果已經(jīng)為macOS發(fā)布了SF Symbols app for macOS谎仲，其中展示了所有可用的符號。 下載該應(yīng)用程序并打開它刨仑。

左側(cè)面板用作過濾器郑诺，可根據(jù)類別限制顯示哪些符號。

頂部窗格允許您執(zhí)行以下操作：

• 更改顯示符號的字體和粗細(xì)杉武。
• 在網(wǎng)格或列表之間切換布局辙诞。
• 切換多色預(yù)覽。
• 按名稱過濾符號轻抱。

單擊頂部欄上的i按鈕時飞涂，將打開一個右側(cè)窗格。 此窗格提供了所有選定符號的詳細(xì)視圖十拣，包括可用的平臺及其使用限制封拧。

最后志鹃，主窗格基于所選選項顯示所有相關(guān)符號夭问。

Using SF Symbols

終于該啟動您的應(yīng)用了。 在Xcode中曹铃，在LineData組中打開TFLLineStatus.swift缰趋。 該文件定義一個enum，其中包含API支持的所有行狀態(tài)值陕见。 有很多秘血！

在文件末尾的最后一個大括號之前，添加以下代碼：

// 1
func image() -> Image {
  switch self {
  default:
    // 2
    return Image(systemName: "exclamationmark.octagon")
  }
}

在此代碼中评甜，您：

• 1） 將新方法image（）添加到TFLLineStatus灰粮。
• 2） 在Image上使用新的init（systemName :)創(chuàng)建一個帶有exclamationmark.octagon SF Symbol的圖像。

在SF Symbols應(yīng)用程序中搜索exclamationmark.octagon忍坷。

接下來粘舟，在顯示行的狀態(tài)時將使用此圖像熔脂。 打開LineStatusRow.swift。

在VStack之前柑肴，將以下內(nèi)容作為HStack的第一個child添加到正文中：

// 1
status.image()
  // 2
  .font(.title)
  .padding(.trailing)
  .foregroundColor(lineColor.contrastingTextColor)

這里：

• 1） 調(diào)用您在TFLLineStatus上定義的status.image（）霞揉，以將狀態(tài)圖像插入HStack的前端。
• 2） 使用視圖修改器在圖像上設(shè)置字體樣式晰骑，填充和前景色屬性适秩。 設(shè)置前景色，使其與行的背景色形成鮮明對比硕舆。

注意如何在Image上調(diào)用font（_ :)秽荞。 由于SF Symbols設(shè)計為可與San Francisco字體系統(tǒng)一起使用，因此它們會根據(jù)您提供的字體自動選擇正確的變體岗宣。 整潔的蚂会！

構(gòu)建并運行該應(yīng)用程序。

Voilà耗式，您剛剛將第一個SF Symbol添加到了應(yīng)用中胁住。 恭喜你！

但是刊咳，對于每個狀態(tài)代碼使用相同的符號對用戶來說并不太有用彪见。 要解決此問題，請返回到TFLLineStatus.swift娱挨。 將以下內(nèi)容置于default之前的switch的body中：

case .closed:
  return Image(systemName: "exclamationmark.octagon")
case .suspended:
  return Image(systemName: "nosign")
case .severeDelays:
  return Image(systemName: "exclamationmark.arrow.circlepath")
case .reducedService:
  return Image(systemName: "tortoise")
case .busService:
  return Image(systemName: "bus")
case .minorDelays:
  return Image(systemName: "clock.arrow.circlepath")
case .goodService:
  return Image(systemName: "checkmark.square")
case .changeOfFrequency:
  return Image(systemName: "clock.arrow.2.circlepath")
case .notRunning:
  return Image(systemName: "exclamationmark.octagon")
case .issuesReported:
  return Image(systemName: "exclamationmark.circle")
case .noIssues:
  return Image(systemName: "checkmark.square")
case .plannedClosure:
  return Image(systemName: "hammer")
case .serviceClosed:
  return Image(systemName: "exclamationmark.octagon")
case .unknown:
  return Image(systemName: "questionmark.circle")

在此代碼中余指，您將挑選出幾種常見的狀態(tài)代碼，并為每個代碼提供自定義的SF符號跷坝。 未指定的任何代碼將繼續(xù)使用switch’s default case下的exclamationmark.octagon符號酵镜。

再次構(gòu)建并運行該應(yīng)用程序。 根據(jù)您運行應(yīng)用程序時Tube系統(tǒng)的狀態(tài)柴钻，您的體驗可能與下圖有所不同淮韭。 但希望您會看到許多類型的狀態(tài)顯示不同的圖像。

整潔贴届！希望您開始看到強大的SF符號靠粪！

Testing with Mock Data

在上一節(jié)中，您為不同的線路狀態(tài)選擇了不同的SF符號毫蚓。但是占键，由于您的應(yīng)用僅呈現(xiàn)行的當(dāng)前狀態(tài)，因此您尚未能夠看到它們的外觀≡耍現(xiàn)在畔乙，您將探索使用模擬數(shù)據(jù)來測試所有狀態(tài)。

1. Na?ve Mock Data Approaches

您可以等到現(xiàn)實中的每種狀態(tài)出現(xiàn)后翩概，再快速打開該應(yīng)用程序牲距。但是您可能等待了很長時間袖订。

另一個選擇是向LineStatusRow添加許多Swift UI預(yù)覽，并適當(dāng)?shù)卦O(shè)置屬性嗅虏÷骞茫可以，但是笨拙皮服。

每個預(yù)覽都會在手機屏幕背景上單獨顯示楞艾。交互性不可用，而且最糟糕的是龄广，由于LineStatusRow是純粹的演示視圖硫眯，因此您只需要檢查預(yù)覽中提供的值是否正確呈現(xiàn)即可。

另一種方法是使用unit tests and mock data择同。這是一個很好的方法两入，但是仍然缺少交互性元素。

2. Using Mock Data with Environment Variables

另一種可能更有用的方法是根據(jù)環(huán)境變量為您的應(yīng)用配置mock data敲才。這樣裹纳，您可以選擇使用所需的任何數(shù)據(jù)來構(gòu)建應(yīng)用程序，然后將其在模擬器或設(shè)備上進行播放紧武，就好像它是真實的一樣剃氧。

在Xcode中，選擇Product ? Scheme ? Edit Schemes…阻星，然后選擇Duplicate Scheme朋鞍。

將new scheme命名為Debug Data，然后單擊Close妥箕。 然后滥酥，選擇Product ? Schemes ? Manage Schemes…，選擇Debug Data scheme畦幢，然后選擇Edit…坎吻。

在左側(cè)菜單中選擇Run，然后選擇Arguments tab呛讲。 單擊Environment Variables下的+圖標(biāo)禾怠，然后創(chuàng)建一個名為USE_DEBUG_DATA的新環(huán)境變量返奉，其值為true贝搁。 單擊Close。

您的應(yīng)用程序現(xiàn)在具有兩個schemes芽偏，除了DebugData將您的新環(huán)境變量傳遞到構(gòu)建環(huán)境外雷逆，它們是相同的。

接下來污尉，打開DebugLineData.swift并在導(dǎo)入聲明之后立即添加以下代碼：

// 1
let bakerlooLineDebug = LineData(
  name: "BakerlooDebug", 
  color: Color(red: 137 / 255, green: 78 / 255, blue: 36 / 255))
let centralLineDebug = LineData(
  name: "CentralDebug", 
  color: Color(red: 220 / 255, green: 36 / 255, blue: 31 / 255))
let circleLineDebug = LineData(
  name: "CircleDebug", 
  color: Color(red: 255 / 255, green: 206 / 255, blue: 0 / 255))
let districtLineDebug = LineData(
  name: "DistrictDebug", 
  color: Color(red: 0 / 255, green: 114 / 255, blue: 41 / 255))
let hammersmithAndCityLineDebug = LineData(
  name: "Hammersmith & CityDebug",
  color: Color(red: 215 / 255, green: 153 / 255, blue: 175 / 255))
let jubileeLineDebug = LineData(
  name: "JubileeDebug", 
  color: Color(red: 106 / 255, green: 114 / 255, blue: 120 / 255))
let metropolitanLineDebug = LineData(
  name: "MetropolitanDebug", 
  color: Color(red: 117 / 255, green: 16 / 255, blue: 86 / 255))
let northernLineDebug = LineData(
  name: "NorthernDebug",
  color: Color(red: 0 / 255, green: 0 / 255, blue: 0 / 255))
let piccadillyLineDebug = LineData(
  name: "PiccadillyDebug",
  color: Color(red: 0 / 255, green: 25 / 255, blue: 168 / 255))
let victoriaLineDebug = LineData(
  name: "VictoriaDebug",
  color: Color(red: 0 / 255, green: 160 / 255, blue: 226 / 255))

然后膀哲，在底部的debugData常量聲明內(nèi)的lineStatus的方括號之間添加以下內(nèi)容：

// 2
LineStatus(line: bakerlooLine, status: .specialService),
LineStatus(line: centralLine, status: .closed),
LineStatus(line: circleLine, status: .suspended),
LineStatus(line: districtLine, status: .partSuspended),
LineStatus(line: hammersmithAndCityLine, status: .plannedClosure),
LineStatus(line: jubileeLine, status: .partClosure),
LineStatus(line: metropolitanLine, status: .severeDelays),
LineStatus(line: northernLine, status: .reducedService),
LineStatus(line: piccadillyLine, status: .busService),
LineStatus(line: victoriaLine, status: .minorDelays),
LineStatus(line: waterlooAndCityLine, status: .goodService),
LineStatus(line: dlr, status: .partClosed),
// 3
LineStatus(line: bakerlooLineDebug, status: .exitOnly),
LineStatus(line: centralLineDebug, status: .noStepFreeAccess),
LineStatus(line: circleLineDebug, status: .changeOfFrequency),
LineStatus(line: districtLineDebug, status: .diverted),
LineStatus(line: hammersmithAndCityLineDebug, status: .notRunning),
LineStatus(line: jubileeLineDebug, status: .issuesReported),
LineStatus(line: metropolitanLineDebug, status: .noIssues),
LineStatus(line: northernLineDebug, status: .information),
LineStatus(line: piccadillyLineDebug, status: .serviceClosed),
LineStatus(line: victoriaLineDebug, status: .unknown)

這段代碼：

• 1） 創(chuàng)建多條“假”管線往产。您的應(yīng)用程序有21個狀態(tài)代碼，但只有12行某宪。因此仿村，您另外創(chuàng)建了9行，以確保有足夠的行來顯示每個代碼兴喂。
• 2） 將LineStatus項目添加到DebugData的lineStatus蔼囊。第一組為每個“實際”管道添加了不同的狀態(tài)代碼。
• 3） 第二組將剩余的狀態(tài)代碼添加到您創(chuàng)建的假管線中衣迷。

3. Switching Between Mock Data and Actual Data

現(xiàn)在畏鼓，查看DebugDataService.swift。這里只有幾行代碼壶谒，但還有很多事情要做云矫！這是此文件中的代碼的作用：

• 1） 首先，文件導(dǎo)入Combine使其可以訪問Future類汗菜。
• 2） 接下來让禀，它將DebugDataService定義為符合TubeLinesStatusFetcher。
• 3） 然后陨界，它實現(xiàn)fetchStatus —— TubeLinesStatusFetcher唯一需要的方法堆缘。
• 4） 最后，它返回包裝在Future中的debugData普碎。該debugData是您在上一節(jié)中添加的數(shù)據(jù)吼肥。

要使用調(diào)試行狀態(tài)獲取程序，請創(chuàng)建一個名為TubeLinesStatusFetcherFactory.swift的Swift文件麻车，并添加以下代碼：

// 1
enum TubeLinesStatusFetcherFactory {
  // 2
  static func new() -> TubeLinesStatusFetcher {
    // 3
    #if DEBUG
    if ProcessInfo.processInfo.environment["USE_DEBUG_DATA"] == "true" {
      return DebugDataService()
    }
    #endif
    // 4
    return TransportAPIService()
  }
}

這是正在發(fā)生的事情：

• 1） 由于您只想在該實體上使用靜態(tài)方法缀皱，因此將其實現(xiàn)為無大小寫的枚舉(caseless enum)。 您可以在這里使用結(jié)構(gòu)體动猬，但是可以不必要地實例化結(jié)構(gòu)體啤斗，因此enum是一個更好的選擇。
• 2） 定義一個靜態(tài)方法new（）赁咙，該方法返回符合TubeLineStatusFetcher的對象钮莲。
• 3） 如果以調(diào)試模式運行并且USE_DEBUG_DATA設(shè)置為true，則返回以前創(chuàng)建的DebugDataService的實例彼水。
• 4） 否則崔拥，返回TransportAPIService的實例，該實例從Transport API獲取實際數(shù)據(jù)凤覆。

最后链瓦，打開AppMain.swift并找到以下行：

model: TubeStatusViewModel(tubeLinesStatusFetcher: TransportAPIService())

將其替換為以下內(nèi)容：

model: TubeStatusViewModel(
  tubeLinesStatusFetcher: TubeLinesStatusFetcherFactory.new())

在這里，您要添加另一層間接性，并使用TubeLinesStatusFetcherFactory決定為其提供的任何訪存器來初始化TubeStatusViewModel慈俯，而不是直接使用TransportAPIService渤刃。

4. Using the DebugData Scheme

現(xiàn)在，該測試一下了贴膘！ 確保選擇Debug Data scheme卖子。

現(xiàn)在，構(gòu)建并運行該應(yīng)用程序刑峡。

這是面向協(xié)議的編程 protocol-oriented programming和依賴項注入的強大功能和靈活性的一個很好的例子揪胃。

通過將數(shù)據(jù)獲取服務(wù)作為依賴項傳遞到TubeStatusViewModel中，可以很輕松地用另一種實現(xiàn)替換如何獲取數(shù)據(jù)氛琢。

通過僅向TubeStatusViewModel提供數(shù)據(jù)獲取服務(wù)用于返回數(shù)據(jù)（而不是實現(xiàn)）的協(xié)議喊递，視圖模型不會處理如何獲取數(shù)據(jù)。它可以是硬編碼的阳似，也可以通過JSON API下載骚勘。

Understanding Restrictions on Using SF Symbols

在發(fā)瘋并在各處添加SF符號之前，請注意撮奏，在何處以及如何使用它們均存在限制俏讹。

直接引自蘋果公司的Human Interface Guidelines：

“You may not use SF Symbols — or glyphs that are substantially or confusingly similar — in your app icons, logos, or any other trademark-related use. Apple reserves the right to review and, in its sole discretion, require modification or discontinuance of use of any Symbol used in violation of the foregoing restrictions, and you agree to promptly comply with any such request.”

此外，SF符號被認(rèn)為是系統(tǒng)提供的圖像畜吊，因此受Xcode and Apple SDK license agreements涵蓋泽疆。

此外，除Apple專有技術(shù)外玲献，不允許將124個SF符號導(dǎo)出殉疼，修改或用于任何其他目的。

Apple將發(fā)布這些更受限制的圖標(biāo)的full list捌年。 SF Symbols應(yīng)用程序的右側(cè)窗格還詳細(xì)說明了選擇符號時的所有其他限制瓢娜。

Creating Custom SF Symbols

即使Apple在SF Symbol庫中提供了數(shù)千種不同的符號，也無法覆蓋您在應(yīng)用程序中可能需要的所有可能的圖像礼预。蘋果所做的反而是使您在需要時可以非常輕松地構(gòu)建自己的自定義符號眠砾。

SF Symbols是使用非常特定的格式在SVG文件中構(gòu)建為矢量圖形的。在頂層托酸，文件必須包含三層：Symbols, Guides和Notes褒颈。這些層中的每一個都包含子層。例如励堡，Symbols層包含27個子層 —— 每個可用變體都一層谷丸。

此外，Apple允許您從SF Symbols應(yīng)用程序中導(dǎo)出現(xiàn)有符號念秧，從而可以輕松創(chuàng)建自己的符號淤井。這樣布疼，所有格式都已經(jīng)存在摊趾，您只需要更改要自定義的內(nèi)容即可币狠。

構(gòu)建自定義符號時，最好找到一個與您要繪制的內(nèi)容盡可能接近的內(nèi)置符號砾层，然后使其適應(yīng)您的需求漩绵。

現(xiàn)在，您將了解如何在應(yīng)用程序中添加自定義符號肛炮。

Making an “Information” Symbol

對于此部分止吐，您需要一個可以編輯SVG圖像的矢量藝術(shù)應(yīng)用程序。

提供許多不同的選項侨糟，包括Adobe Illustrator碍扔，Sketch, Figma 和Affinity Designer等付費產(chǎn)品。其中大多數(shù)提供免費試用秕重。還提供開源產(chǎn)品不同，例如Inkscape 和 OpenOffice Draw。

本教程使用Affinity Designer溶耘，但其他矢量藝術(shù)應(yīng)用程序的過程應(yīng)相似二拐。

1. Importing the Exclamation Mark Symbol

在Mac上打開SF Symbols應(yīng)用程序，然后搜索exclamationmark.circle符號凳兵。選擇它百新，然后選擇File ? Export Custom Symbol Template…。將符號模板保存在計算機上庐扫，然后在矢量圖形應(yīng)用程序中將其打開饭望。

如您所見，SVG文件針對9種字體粗細(xì)和3種大小分別包含27個單獨的圖像形庭。

更新所有27張圖像將花費很長時間杰妓，但是幸運的是，您不需要更改任何不使用的圖像碘勉。 您在這里所需的唯一變體是Regular-M巷挥，因為這是該應(yīng)用程序使用的所有東西。 Apple建議您創(chuàng)建常規(guī)S / M / L和半粗體S / M / L验靡，因為許多常見的UIKit控件都使用這些變體倍宾。

2. Customizing the Exclamation Mark Symbol

在畫布中心附近找到Regular-M變體。 每個符號在SVG中作為一個組構(gòu)建胜嗓。 刪除圓圈中心的感嘆號高职。 您可能需要先取消分層圖層，具體取決于您使用的矢量藝術(shù)應(yīng)用程序辞州。

接下來怔锌，在該圖層中添加一個文本塊，然后輸入一個小寫的i。 在SF Pro中將其大小調(diào)整為64pt埃元，重量Heavy涝涤。 然后將其放在圓的中心。

自定義SF符號中的每個變體只能包含形狀/曲線岛杀。 它們不得包含文本阔拳，位圖或任何其他類型的對象。 將您的i文字圖層轉(zhuǎn)換為曲線类嗤。 在Affinity Designer中糊肠，通過選擇Layer ? Convert to Curves來執(zhí)行此操作。

確保新層是Regular-M組的子層遗锣。 然后货裹，將新符號保存或?qū)С鰹榉Q為information.svg的SVG。

切換到SF Symbols應(yīng)用程序精偿，然后選擇File?Validate Custom Symbols…泪酱，然后選擇剛剛保存的文件。 如果您正確完成了所有操作还最，那么您的新符號將通過驗證 —— 耶墓阀！

Using Custom Symbols

在應(yīng)用程序中使用自定義符號非常簡單。 切換到Xcode拓轻，然后在左側(cè)的Project導(dǎo)航器中選擇主要資產(chǎn)目錄Assets.xcassets斯撮。 切換到Finder并將新的SF Symbol拖動到資產(chǎn)目錄中。

確認(rèn)Regular-M變體在圓圈中是字母i扶叉，而不是圓圈中的感嘆號勿锅。

接下來，切換到Finder并打開在教程開始時下載的資料中的Custom Symbols目錄枣氧。 將所有六個自定義符號也拖到資產(chǎn)目錄中溢十。 或者，使用您的矢量圖形應(yīng)用程序和新發(fā)現(xiàn)的知識來創(chuàng)建您自己的自定義符號集达吞。

加載自定義符號使用的API與用于加載提供的SF符號之一的API不同张弛。 不必在Image上調(diào)用init（systemName :)，而可以使用默認(rèn)的初始化程序init（）酪劫。

切換回Xcode并打開TFLLineStatus.swift吞鸭。 在image（）的底部，將以下代碼替換為default：

case .specialService:
  return Image("special.service")
case .partSuspended:
  return Image("part.suspended")
case .partClosure:
  return Image("part.closure")
case .partClosed:
  return Image("part.closure")
case .exitOnly:
  return Image("exit.only")
case .noStepFreeAccess:
  return Image("no.step.free.access")
case .diverted:
  return Image("diverted")
case .information:
  return Image("information")

確保仍然選擇Debug Data scheme覆糟。 然后刻剥，構(gòu)建并運行您的應(yīng)用程序。

您已經(jīng)成功將自定義符號添加到了Tube Status應(yīng)用中滩字！

Supporting Older Operating Systems

最后造虏，快速提示御吞！

如果您需要支持較早的操作系統(tǒng)版本，但仍想在應(yīng)用中使用SF Symbols漓藕，請使用以下變通辦法陶珠。 只需從SF Symbols macOS應(yīng)用程序?qū)С?code>SVG，然后在矢量圖形應(yīng)用程序（如Sketch，Affinity Designer或Figma）中將其打開。

將要用作PNG的圖層導(dǎo)出栖秕，并將其作為資產(chǎn)添加到應(yīng)用程序的資產(chǎn)目錄中蜂桶。 然后，只需使用默認(rèn)的初始化程序交排，而不要在Image中使用init（systemName :)划滋。

您將無法使用SF Symbols提供的高級功能，但仍可以使用圖像埃篓。

如您所見处坪，使用內(nèi)置的SF Symbols和提供自己的自定義符號對Swift來說都非常容易。

如果您想觀看有關(guān)如何在Affinity Designer中構(gòu)建自己的自定義符號的視頻架专，則Caroline Begbie匯集了出色而快速的演示demonstration同窘。

您還應(yīng)該查看有關(guān)在2019年和2020年WWDC事件中介紹SF Symbols的視頻，以及有關(guān)SF Symbols的AppleHuman Interface Guidelines的文檔部脚。

您可以從Apple學(xué)習(xí)有關(guān)creating your custom symbols,的所有詳細(xì)信息想邦，最后，別忘了閱讀official page for SF Symbols的官方頁面委刘。

后記

本篇主要講述了SF Symbols簡單使用介紹丧没，感興趣的給個贊或者關(guān)注~~~