☰

SwiftUI TabViewで画像のサイズが変更されない 質問する

tag-icon • tag-icon ios swiftui
SwiftUI TabViewで画像のサイズが変更されない 質問する

SwiftUI TabView でカスタム アイコンを使用しようとしています。このコードの何が問題なのかわかりません。resizable画像に含めましたが、縮小されません。

HomeView()
          .tag(0)
          .tabItem {
            VStack {
              Image("tab-home")
                .resizable()
                .aspectRatio(CGSize(width: 20, height: 20), contentMode: .fit)
              Text("Home")
            }

          }

これを見ると、画像はフルサイズです。

大きなホームアイコンが表示されたスクリーンショット

ImageSF シンボルの場合は正常に動作します。

SwiftUI 忍者の皆さん、何かアイデアはありますか?

ベストアンサー1

システムが画像サイズを選択することを受け入れられる場合は、実際にカスタムを追加してSymbol Image Setこれを実現できます。任意のベクター アイコンをベースとして使用できます。

既存のシンボルをエクスポートする

必要なシンボルテンプレートを入手するには、SFシンボルアプリ、アイコンを選択してエクスポートします。

SF Symbolsからシンボルをエクスポートする

スケッチで編集

Sketch (または他のお好みのツール) で開きます。明確な構造が定義されていることに注意してください。この構造に従う必要があります。中央に「Regular-M」というサイズがありますが、これを定義すれば目的には十分です。「Shape」グループを開き、そこにパス要素を配置します。

シンボルをカスタムシンボルに置き換える

他のサイズは削除できます。次に、ページ全体をエクスポート可能にし、SVG としてエクスポートします。

SVGをクリーンアップしてエクスポートする

Xcodeでインポート

XCAsset ファイルに新しいものを追加し、Symbol Image Set新しく作成した SVG ファイルをそこにドラッグ アンド ドロップします。

これで、期待どおりに XCAsset ファイルで定義した名前を使用して画像を参照できます。画像のサイズは自動的に調整され、アクセント カラーが適切に使用されます。

TabView {
    Text("Hello, world 1").tabItem {
        Image("your.image.name")
        Text("title1")
    }
}

おすすめ記事