偷偷摘套内射激情视频,久久精品99国产国产精,中文字幕无线乱码人妻,中文在线中文a,性爽19p

聊聊如何自定義 SwiftUI 中符號(hào)圖像的外觀

移動(dòng)開發(fā) 移動(dòng)應(yīng)用
在SwiftUI中增強(qiáng)符號(hào)圖像可以顯著改善應(yīng)用程序的外觀和感覺。通過調(diào)整大小、顏色、渲染模式、可變值和設(shè)計(jì)變體,我們可以創(chuàng)建使應(yīng)用程序更直觀和視覺吸引力的圖標(biāo)。

前言

符號(hào)圖像是來自 Apple的SF Symbols 庫的矢量圖標(biāo),設(shè)計(jì)用于在 Apple 平臺(tái)上使用。這些可縮放的圖像適應(yīng)不同的大小和重量,確保在我們的應(yīng)用程序中具有一致的高質(zhì)量圖標(biāo)。在 SwiftUI 中使用符號(hào)圖像非常簡單,只需使用 Image 視圖和所需符號(hào)的系統(tǒng)名稱。下面是一個(gè)快速示例:

import SwiftUI

struct ContentView: View {
    var body: some View {
        Image(systemName: "star")
    }
}

圖片圖片

大小

盡管符號(hào)被放置在Image視圖中,但它應(yīng)被視為文本。要調(diào)整符號(hào)的大小,我們可以應(yīng)用 font() 修飾符,就像在Text視圖中一樣。這使我們能夠?qū)⒎?hào)的大小與不同的文本樣式對(duì)齊,確保UI的視覺一致性。

HStack {
    Image(systemName: "star")
        .font(.title)
    
    Image(systemName: "star")
        .font(.body)
    
    Image(systemName: "star")
        .font(.caption)
}

圖片圖片

我們可以使用 fontWeight() 修飾符來調(diào)整符號(hào)的重量。這個(gè)修飾符改變符號(hào)筆畫的粗細(xì),使我們能夠?qū)⒎?hào)與周圍的文本匹配或?qū)Ρ取?/p>

HStack {
    Image(systemName: "star")
        .fontWeight(.light)
    
    Image(systemName: "star")
        .fontWeight(.bold)
    
    Image(systemName: "star")
        .fontWeight(.black)
}

圖片圖片

要根據(jù)字體大小相對(duì)縮放圖像,我們應(yīng)該使用 imageScale() 修飾符。有三個(gè)選項(xiàng):小、中、大,它們根據(jù)字體大小按比例縮放符號(hào)。如果沒有明確設(shè)置字體,符號(hào)將從當(dāng)前環(huán)境中繼承字體。

HStack {
    Image(systemName: "star")
        .imageScale(.small)
    
    Image(systemName: "star")
        .imageScale(.medium)
    
    Image(systemName: "star")
        .imageScale(.large)
}
.font(.headline)

圖片圖片

不建議通過應(yīng)用resizable()修飾符并設(shè)置框架來調(diào)整符號(hào)圖像的大小,因?yàn)檫@樣做會(huì)使圖像停止作為符號(hào)圖像,從而影響其與文本的布局和對(duì)齊。

顏色

使用SwiftUI中的foregroundStyle()視圖修飾符,可以輕松自定義符號(hào)圖像的顏色。這個(gè)修飾符允許我們直接設(shè)置符號(hào)圖像的顏色。

Image(systemName: "star")
    .foregroundStyle(.orange)

圖片圖片

foregroundStyle() 修飾符可以采用任何 ShapeStyle,包括漸變,這為我們的符號(hào)圖像提供了廣泛的自定義可能性。在這個(gè)例子中,星形符號(hào)使用了從黃色到紅色的線性漸變,從頂部到底部過渡。

Image(systemName: "star")
    .foregroundStyle(
        LinearGradient(
            colors: [.yellow, .red],
            startPoint: .top,
            endPoint: .bottom
        )
    )

圖片圖片

渲染模式

我們可以通過使用不同的渲染模式進(jìn)一步自定義符號(hào)圖像的外觀。SF Symbols有四種不同的渲染模式,這些模式會(huì)改變符號(hào)的顏色和外觀。一些渲染模式使整個(gè)圖標(biāo)保持相同顏色,而其他模式則允許多種顏色。

要在SwiftUI中設(shè)置符號(hào)圖像的首選渲染模式,我們使用 symbolRenderingMode() 修飾符。

單色

單色是默認(rèn)的渲染模式。在這種模式下,符號(hào)的每一層都是相同的顏色。

Image(systemName: "thermometer.snowflake")
    .symbolRenderingMode(.monochrome)

圖片

分層

分層模式將符號(hào)渲染為多個(gè)層,每層應(yīng)用不同的不透明度。層次結(jié)構(gòu)和不透明度在每個(gè)符號(hào)中是預(yù)定義的,但我們?nèi)匀豢梢允褂?nbsp;foregroundStyle() 修飾符自定義顏色。

HStack {
    Image(systemName: "thermometer.snowflake")
    Image(systemName: "thermometer.snowflake")
        .foregroundStyle(.indigo)
}
.symbolRenderingMode(.hierarchical)

symbolRenderingMode() 修飾符既可以直接應(yīng)用于圖像視圖,也可以通過將其應(yīng)用于包含多個(gè)符號(hào)圖像的父視圖來在環(huán)境中設(shè)置。這樣,父元素內(nèi)的所有符號(hào)圖像都會(huì)受到影響。

圖片圖片

調(diào)色板

調(diào)色板模式允許符號(hào)以多層呈現(xiàn),每層具有不同的顏色。這種模式非常適合創(chuàng)建色彩豐富的多層圖標(biāo)。

Image(systemName: "thermometer.snowflake")
    .symbolRenderingMode(.palette)
    .foregroundStyle(.blue, .teal, .gray)

我們不需要顯式地指定調(diào)色板呈現(xiàn)模式。如果我們在 foregroundStyle() 修飾符中應(yīng)用多個(gè)樣式,則調(diào)色板模式將自動(dòng)激活。

Image(systemName: "thermometer.snowflake")
    .foregroundStyle(.blue, .teal, .gray)

圖片圖片

如果我們?yōu)橐粋€(gè)定義了三個(gè)層次結(jié)構(gòu)的符號(hào)指定兩種顏色,那么第二層和第三層將使用相同的顏色。

Image(systemName: "thermometer.snowflake")
    .foregroundStyle(.blue, .gray)

圖片圖片

多色

多色模式使用由 Apple 定義的一組固定顏色渲染符號(hào)。在使用多色渲染時(shí),我們無法自定義符號(hào)的顏色,它將使用預(yù)定義的顏色。

HStack {
    Image(systemName: "thermometer.snowflake")
    Image(systemName: "thermometer.sun.fill")
}
.symbolRenderingMode(.multicolor)

圖片圖片

值得注意的是,由于這些顏色是固定的,它們不適應(yīng)明暗模式。例如,我們的溫度計(jì)符號(hào)具有白色輪廓,在白色背景上是不可見的。

并非所有符號(hào)都支持每種呈現(xiàn)模式。圖層較少的符號(hào)在不同模式下看起來可能相同,分層和調(diào)色板模式看起來類似于單色。

可變值

在 SwiftUI 中顯示符號(hào)圖像時(shí),我們可以提供一個(gè) 0.0 到 1.0 之間的可選值,渲染的圖像可以使用它來自定義外觀。如果符號(hào)不支持可變值,此參數(shù)無效。我們應(yīng)該在 SF Symbols 應(yīng)用程序中檢查哪些符號(hào)支持可變值。

HStack {
    Image(systemName: "speaker.wave.3", variableValue: 0)
    Image(systemName: "speaker.wave.3", variableValue: 0.3)
    Image(systemName: "speaker.wave.3", variableValue: 0.6)
    Image(systemName: "speaker.wave.3", variableValue: 0.9)
}

圖片圖片

可變值可以表示一個(gè)隨著時(shí)間變化的特性,例如容量或強(qiáng)度。這使得符號(hào)的外觀可以根據(jù)應(yīng)用程序的狀態(tài)動(dòng)態(tài)變化。

struct ContentView: View {
    @State private var value = 0.5
    
    var body: some View {
        VStack {
            Image(
                systemName: "speaker.wave.3",
                variableValue: value
            )
            Slider(value: $value, in: 0...1)
                .padding()
        }
        .padding()
    }
}

在這個(gè)例子中,符號(hào) speaker.wave.3 根據(jù) Slider 提供的值改變其外觀。

圖片圖片

我們應(yīng)該使用可變值來傳達(dá)狀態(tài)的變化,例如音量、電池電量或信號(hào)強(qiáng)度,為用戶提供動(dòng)態(tài)狀態(tài)的清晰視覺表示。為了傳達(dá)深度和視覺層次,我們應(yīng)該使用分層渲染模式,它可以提升某些圖層,并區(qū)分符號(hào)內(nèi)的前景和背景元素。

設(shè)計(jì)變體

符號(hào)可以有不同的設(shè)計(jì)變體,例如填充和斜杠,以幫助傳達(dá)特定的狀態(tài)和操作。斜杠變體可以表示項(xiàng)目或操作不可用,而填充變體可以表示選擇。

在 SwiftUI 中,我們可以使用 symbolVariant() 修飾符來應(yīng)用這些變體。

HStack {
    Image(systemName: "heart")
    
    Image(systemName: "heart")
        .symbolVariant(.slash)
    
    Image(systemName: "heart")
        .symbolVariant(.fill)
}

不同的符號(hào)變體用于各種設(shè)計(jì)目的。輪廓變體在工具欄、導(dǎo)航欄和列表中非常有效,而填充變體則用于強(qiáng)調(diào)選擇的狀態(tài)。

HStack {
    Image(systemName: "heart")
        .symbolVariant(.circle)
    
    Image(systemName: "heart")
        .symbolVariant(.square)
    
    Image(systemName: "heart")
        .symbolVariant(.rectangle)
}

不同的符號(hào)變體具有不同的設(shè)計(jì)用途。輪廓變體在工具欄、導(dǎo)航欄和列表中非常有效,因?yàn)檫@些地方通常會(huì)與文本一起顯示符號(hào)。將符號(hào)封裝在圓形或方形等形狀中可以增強(qiáng)其可讀性,特別是在較小尺寸下。填充變體由于其實(shí)心區(qū)域,使符號(hào)更具視覺強(qiáng)調(diào)性,非常適合用于 iOS 標(biāo)簽欄、滑動(dòng)操作以及指示選擇的強(qiáng)調(diào)顏色場景。

在許多情況下,顯示符號(hào)的視圖會(huì)自動(dòng)選擇合適的變體。例如,iOS 標(biāo)簽欄通常使用填充變體,而導(dǎo)航欄則偏好輪廓變體。這種自動(dòng)選擇確保符號(hào)在不同上下文中有效使用,而無需明確指定。

示例代碼

import SwiftUI

struct ContentView: View {
    @State private var value = 0.5
    
    var body: some View {
        VStack {
            Image(
                systemName: "speaker.wave.3",
                variableValue: value
            )
            .symbolRenderingMode(.hierarchical)
            .foregroundStyle(.blue)
            Slider(value: $value, in: 0...1)
                .padding()
        }
        .padding()
    }
}

運(yùn)行 Demo

  1. 打開Xcode并創(chuàng)建一個(gè)新的 SwiftUI 項(xiàng)目。
  2. 將上述代碼粘貼到 ContentView.swift 文件中。
  3. 運(yùn)行項(xiàng)目,查看效果。

結(jié)論

在SwiftUI中增強(qiáng)符號(hào)圖像可以顯著改善應(yīng)用程序的外觀和感覺。通過調(diào)整大小、顏色、渲染模式、可變值和設(shè)計(jì)變體,我們可以創(chuàng)建使應(yīng)用程序更直觀和視覺吸引力的圖標(biāo)。SwiftUI使這些調(diào)整變得簡單易行,使我們能夠輕松實(shí)現(xiàn)和改進(jìn)這些自定義以提供更好的用戶體驗(yàn)。

責(zé)任編輯:武曉燕 來源: Swift社區(qū)
相關(guān)推薦

2022-06-06 09:01:16

SwiftUI自定義導(dǎo)航

2023-01-03 07:40:27

自定義滑塊組件

2024-06-03 10:00:51

Vue 3語法插槽

2021-08-09 10:31:33

自定義授權(quán)響應(yīng)

2009-11-23 20:13:33

ibmdwLotus

2022-09-07 15:57:41

KubernetesCRD

2011-08-09 17:16:56

CoreAnimati動(dòng)畫

2013-06-27 11:10:01

iOS開發(fā)自定義UISlider

2021-11-23 15:06:42

Kubernetes 運(yùn)維開源

2023-11-01 08:01:04

SpringWeb容器

2020-11-19 10:50:43

ImportPython代碼

2010-05-11 13:16:21

Unix awk

2021-03-16 10:39:29

SpringBoot參數(shù)解析器

2019-12-02 21:29:45

Keras神經(jīng)網(wǎng)絡(luò)TensorFlow

2011-09-05 18:54:03

windowsUbuntu

2021-07-01 11:07:49

Swift 自定義操作符

2018-07-17 14:47:55

Windows 10Windows任務(wù)欄

2009-09-07 22:00:15

LINQ自定義

2021-07-16 11:00:40

Django用戶模型Python

2010-02-07 14:02:16

Android 界面
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)