web-dev-qa-db-ja.com

macOSのSwiftUI、Buttonでカスタムイメージシンボルを使用する方法

質問を注意深く読んでください、これはIS MACアプリ、systemNameはmac osでは利用できません

MacOSでswiftUIを使用してシンプルなアプリケーションを構築しようとしていますが、一部のアイコンの表示に問題があります。

SF Symbolsアプリをダウンロードし、使用するために自分でシンボルをエクスポートする必要があることをすべて読んだので、それを行った後、エクスポートされたシンボルを.xcassetsに追加しました。画像付きのボタンを作成するため、コードは次のとおりです。

import SwiftUI

struct ActionBar: View {

    var body: some View {
        HStack {
            Spacer()
            Button(action: {

            }) {
                Image("Plus")
                    .font(Font.system(size: 24, weight: .light))
                    .foregroundColor(Color.red)
                Text("Test")
            }
        }
        .frame(maxWidth: .infinity)
        .padding()
        .background(Color.init(red: 0.8, green: 0.8, blue: 0.8))
    }
}

struct ActionBar_Previews: PreviewProvider {
    static var previews: some View {
        ActionBar()
    }
}

私は多くのバリエーションを試しました、例えば：

Image(nsImage: NSImage(name: "Plus"))

しかし、アップル自身を含むそこにあるすべての情報 ドキュメント 私が理解している限り、UIフレームワークのiOSバージョンであるUIKitの一部であるUIImageについてのみ話し、誰もがこれをmacOSで動作するようにしています？

どうもありがとう！

編集：アセットはImage Symbol Setとしてインポートされました。SFシンボルアプリで生成されたsvgを取得して直接アセットに配置しただけなので、Xcodeはエラーをスローしません。

編集2：私はこれに遭遇しました post これはSVGサポートが不安定であると述べています... SVGをPNGに変換しようとしましたが、xcodeはシンボルセットとしてpngを受け入れません...それで、私は推測しますこの機能は単純に壊れていますか？それは吸う...

swiftmacosswiftui
3
Oscar

これが私の解決策ですが、これは非常に大したハックであり、Appleがそれを承認するかどうかはわかりません。したがって、この「教育目的」、私は推測します。

概念

主なアイデアは、SFシンボルアプリによってエクスポートされたSVGファイルを変更して、テンプレート全体ではなく、選択されたシンボルの1つのインスタンスのみが含まれるようにし、NSViewRepresentableを介してSVGKitフレームワークを使用して表示することです。オブジェクト。

書き出す

MacでSFシンボルアプリを使用し、使用するシンボルを選択して、[カスタムシンボルテンプレートのエクスポート]を実行します。

修正

Sublime TextやCotEditorなどのテキストエディターで、エクスポートされたSVGファイルを開きます。

ヘッダーと「シンボル」フィールドを除いて、ファイル内のすべてを削除します。これらのフィールドには、使用したいシンボルのバリエーションのみを含める必要があります。次に、レンダリングされたキャンバスのサイズを変更し、シンボルを適切に配置します。

たとえば、「通常」Lバージョンの「プラス」記号を使用する場合、最終的な「plus.svg」ファイルは次のようになります。

_<?xml version="1.0" encoding="UTF-8"?>
<!--Generator: Apple Native CoreSVG 123-->
<!DOCTYPE svg
PUBLIC "-//W3C//DTD SVG 1.1//EN"
       "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128">
 <!--glyph: "uni10017C.medium", point size: 100.000000, font version: "Version 15.0d7e11", template writer version: "5"-->

 <g id="Symbols">
  <g id="Regular-L" transform="matrix(1 0 0 1 0 100)">
   <path d="M 67.4316 17.3828 C 70.0684 17.3828 72.2168 15.2832 72.2168 12.7441 L 72.2168 -30.3711 L 114.062 -30.3711 C 116.65 -30.3711 118.848 -32.5684 118.848 -35.1562 C 118.848 -37.793 116.65 -39.9414 114.062 -39.9414 L 72.2168 -39.9414 L 72.2168 -83.1055 C 72.2168 -85.6445 70.0684 -87.7441 67.4316 -87.7441 C 64.8438 -87.7441 62.6953 -85.6445 62.6953 -83.1055 L 62.6953 -39.9414 L 20.8496 -39.9414 C 18.2617 -39.9414 16.0645 -37.793 16.0645 -35.1562 C 16.0645 -32.5684 18.2617 -30.3711 20.8496 -30.3711 L 62.6953 -30.3711 L 62.6953 12.7441 C 62.6953 15.2832 64.8438 17.3828 67.4316 17.3828 Z"/>
  </g>
</g>
</svg>
_

総括する：

  • ヘッダーを残す
  • _id="Symbols"_フィールドを保持する
  • [記号]フィールドには、1つのカテゴリのみを保持します。この例では_id="Regular-L"_
  • ヘッダーのサイズを変更します。私の例では_width="128" height="128"_
  • 変換フィールドの最後の2つのパラメーターを変更してシンボルを整列します。この例ではtransform="matrix(1 0 0 1 0 100)"（x 0およびy 100）です。

SVGKitをインストールする

  • Xcodeを閉じる
  • Cocoapodsバージョンを使用してSVGKit（ https://github.com/SVGKit/SVGKit ）をインストールします
  • Cocoapodsによって作成された.xcworkspaceファイルを開きます。

ビューを作る

変更された_plus.svg_ファイルをプロジェクトに追加します（アセットカタログではなく、プロジェクト自体にのみ）

次のようにNSViewRepresentable構造体を作成します。

_import SVGKit

struct IconView: NSViewRepresentable {

    let name: String

    func makeNSView(context: Context) -> SVGKFastImageView {
        let img = SVGKImage(named: name)!
        return SVGKFastImageView(svgkImage: img)!
    }

    func updateNSView(_ nsView: SVGKFastImageView, context: Context) {
        // not implemented
    }

}
_

ビューを使用する

次に、それをContentViewで使用します（ウィンドウ全体に表示されないようにフレームを設定します）。次に例を示します。

_struct ContentView: View {
    var body: some View {
        VStack {
            IconView(name: "plus")
                .frame(width: 200, height: 200, alignment: .center)
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
    }
}
_
1
Eric Aya

シンボルを自分でダウンロードまたはエクスポートする必要はありません。これを行うだけで、iOSおよびMacの触媒でも機能します。

import SwiftUI

struct ContentView: View {
var body: some View {
    HStack {
        Spacer()
        Button(action: {

        }) {
            Image(systemName: "plus")
                .font(Font.system(size: 24, weight: .light))
                .foregroundColor(Color.red)
            Text("Test")
        }
    }
    .frame(maxWidth: .infinity)
    .padding()
    .background(Color.init(red: 0.8, green: 0.8, blue: 0.8))
}
}
1
workingdog