投稿の経緯 SwiftUI × 個人開発でアプリ内で使う配色を管理する場合に使った方法を投稿します。 環境 Swift version 5.4.2 Xcode version 12.5.1 Colors.xcassetsの作成 File > New > File...でAsset Catalogを選択して今回はColorsという名前でファイルを新規作成します。 ファイルを作成したら下記画像のようにNew Color Setで色を追加します。 左側がライトモード対応で右側がダークモード対応です。 ここで設定した色が端末のライト or ダークで自動で切り替えられます。超便利ですね。 次はColorsファイルで作成した色をコードで使えるように設定します。 ColorManagerの作成 Colorsで作成した色をコードで扱うために、ファイルを新規作成し、構造体ColorManagerを定義します。 ColorManagerでは以下のように定義します。 struct ColorManager { static let 定数名 = Color("Colorsで設定したColor名") } 私の場合は以下のように設定しています。参考に。。 struct ColorManager { static let baseColor = Color("base_color") static let mainColor = Color("main_color") } 後は、コードで呼び出すだけです。 反映方法 反映方法は以下の通り。 ColorManager.baseColor .foregroundColor(ColorManager.baseColor) .background(ColorManager.baseColor) UIColorに設定する場合は以下の通り。 UIColor(ColorManager.baseColor) ポイントはColorとして扱われる点です。参考にしてください。 お知らせ 現在、iOS開発案件を業務委託で募集中です（副業）。TwitterDMでご依頼をお待ちしています

やったことなど 今回はタブボタンを選択した時の変化を「アイコン」に対してやってみようと思いました。 参考ページでは「SF Symbol」のフォントを変化させる方法が掲載されています。 とある案件で選択時のタブボタンを画像毎変える必要があったため、なんとか手を加えて試してみました。 構成やソースはほぼ参考サイトを引用しています。 コード 引用したソースから「systemName:」を削除して少しImageの名前を変えた程度でなんとかうまくいきました。 struct ContentView: View { // タブの種類 enum Tab { case circle case square } // 選択中のタブ @State private var selection: Tab = .circle var body: some View { TabView (selection: $selection) { Text("円の画面") .tabItem { Image(selection == .circle ? "circle-shadow" : // 選択時 "circle") // 非選択時 .imageScale(.large) Text("円") } .tag(Tab.circle) // タブの種類を指定 Text("四角の画面") .tabItem { Image(selection == .square ? "square-shadow" : // 選択時 "square") // 非選択時 .imageScale(.large) Text("四角") } .tag(Tab.square) // タブの種類を指定 } } } 結果 円のタブ選択時のタブ画像の変化 四角のタブ選択時のタブ画像の変化 思ったこと 「.tag(Tab.circle)」の記載が重要でした。 このtagがないと思い通りにタブボタンが変化してくれませんでした。 あとは、selectionの記法で選択中のタブ情報を保持できるのはお手軽で楽だなと思いました。 参考サイトに感謝を申し上げます。 参考 [SwiftUI]TabViewで選択時のアイコンを変更する

環境 Xcode 12.5 iOS14以上 概念 GeometryReader https://developer.apple.com/documentation/swiftui/geometryreader Overlay https://developer.apple.com/documentation/swiftui/view/overlay(_:alignment:) RotationEffect https://developer.apple.com/documentation/swiftui/text/rotationeffect(_) Animation https://developer.apple.com/documentation/swiftui/animation 画面作成 最初はボタンを作る前に中身を作る。 LazyVGridでUIKitのUICollectionViewように画面を作成した。 画面はこんな感じ。 GeometryReaderでoffsetの値を取る GeometryReaderでフレームのYの座標を取ることができる。 .padding() .navigationBarTitle("Home") .overlay( GeometryReader{ proxy -> Color in let offset = proxy.frame(in: .global).minY print(offset) return Color.clear }.frame(width: 0, height: 0) ) コンソール 570.5 556.0 545.0 519.5 532.0 520.0 (省略) 198.0 Yの座標を０からスタートしたいから少し調整した。 @State var scrollViewOffset: CGFloat = 0 @State var startOffset: CGFloat = 0 .overlay( GeometryReader{ proxy -> Color in DispatchQueue.main.async { if startOffset == 0 { self.startOffset = proxy.frame(in: .global).minY } let offset = proxy.frame(in: .global).minY self.scrollViewOffset = offset - startOffset print(self.scrollViewOffset) } return Color.clear }.frame(width: 0, height: 0) ) コンソール 0.0 -17.5 -51.5 -51.5 -51.5 -51.0 -67.5 -67.5 (省略) 画面の上にボタンを配置 }) // ScrollView .overlay( Button(action: { }, label: { ZStack { RoundedRectangle(cornerRadius: 50, style: .continuous) .fill(Color.purple) .frame(width: 100, height: 100) } }) .padding() ,alignment: .bottom ) ScrollViewに重ねるボタンを生成して形を作る。 そうするとフローティングボタンようになる。 アニメーション追加していい動作で見えるようにする 上のようにできたらほぼ実装終わり。 アニメーションを追加してもっといいボタンの動作を作る @State var scrollViewOffset: CGFloat = 0 @State var startOffset: CGFloat = 0 @State var width: CGFloat = 50 @State var changedWidth: CGFloat = 200 }) // ScrollView .overlay( Button(action: { }, label: { ZStack { RoundedRectangle(cornerRadius: 50, style: .continuous) .fill(Color.purple) .frame(width: -scrollViewOffset > 365 ? changedWidth : width, height: 50) .animation(.easeInOut) Text("メニューの一覧を見る") .foregroundColor(Color.white) .font(.system(size: 14)) .fontWeight(.bold) } .rotationEffect(-scrollViewOffset > 365 ? .degrees(0) : .degrees(90)) }) .padding() .opacity(-scrollViewOffset > 365 ? 1 : 0) .animation(.linear) ,alignment: .bottom ) .opacityである程度スクロール下がったらボタン出るようにする。 ボタンのフレームは条件がtrueになったらサイズを変更するようにしてテキストも表示するようにする。 最後に角度を入れて動的なボタンで見えるようにする。 完成 ホーム画面に配置されたボタンの活用 シンプルなメニュー画面と詳しいメニュー画面がある場合、ボタン押したら画面切り替えができるようにする ScrollViewReaderでスクロールのトップへの移動 お問合せや質問コーナーなどで活用 Twitterように活用することもできる。

環境 Xcode 12.5 iOS14以上 概念 GeometryReader https://developer.apple.com/documentation/swiftui/geometryreader Overlay https://developer.apple.com/documentation/swiftui/view/overlay(_:alignment:) RotationEffect https://developer.apple.com/documentation/swiftui/text/rotationeffect(_) Animation https://developer.apple.com/documentation/swiftui/animation 画面作成 最初はボタンを作る前に中身を作る。 LazyVGridでUIKitのUICollectionViewように画面を作成した。 画面はこんな感じ。 GeometryReaderでoffsetの値を取る GeometryReaderでフレームのYの座標を取ることができる。 .padding() .navigationBarTitle("Home") .overlay( GeometryReader{ proxy -> Color in let offset = proxy.frame(in: .global).minY print(offset) return Color.clear }.frame(width: 0, height: 0) ) コンソール 570.5 556.0 545.0 519.5 532.0 520.0 (省略) 198.0 Yの座標を０からスタートしたいから少し調整した。 @State var scrollViewOffset: CGFloat = 0 @State var startOffset: CGFloat = 0 .overlay( GeometryReader{ proxy -> Color in DispatchQueue.main.async { if startOffset == 0 { self.startOffset = proxy.frame(in: .global).minY } let offset = proxy.frame(in: .global).minY self.scrollViewOffset = offset - startOffset print(self.scrollViewOffset) } return Color.clear }.frame(width: 0, height: 0) ) コンソール 0.0 -17.5 -51.5 -51.5 -51.5 -51.0 -67.5 -67.5 (省略) 画面の上にボタンを配置 }) // ScrollView .overlay( Button(action: { }, label: { ZStack { RoundedRectangle(cornerRadius: 50, style: .continuous) .fill(Color.purple) .frame(width: 100, height: 100) } }) .padding() ,alignment: .bottom ) ScrollViewに重ねるボタンを生成して形を作る。 そうするとフローティングボタンようになる。 アニメーション追加していい動作で見えるようにする 上のようにできたらほぼ実装終わり。 アニメーションを追加してもっといいボタンの動作を作る @State var scrollViewOffset: CGFloat = 0 @State var startOffset: CGFloat = 0 @State var width: CGFloat = 50 @State var changedWidth: CGFloat = 200 }) // ScrollView .overlay( Button(action: { }, label: { ZStack { RoundedRectangle(cornerRadius: 50, style: .continuous) .fill(Color.purple) .frame(width: -scrollViewOffset > 365 ? changedWidth : width, height: 50) .animation(.easeInOut) Text("メニューの一覧を見る") .foregroundColor(Color.white) .font(.system(size: 14)) .fontWeight(.bold) } .rotationEffect(-scrollViewOffset > 365 ? .degrees(0) : .degrees(90)) }) .padding() .opacity(-scrollViewOffset > 365 ? 1 : 0) .animation(.linear) ,alignment: .bottom ) .opacityである程度スクロール下がったらボタン出るようにする。 ボタンのフレームは条件がtrueになったらサイズを変更するようにしてテキストも表示するようにする。 最後に角度を入れて動的なボタンで見えるようにする。 完成 ホーム画面に配置されたボタンの活用 シンプルなメニュー画面と詳しいメニュー画面がある場合、ボタン押したら画面切り替えができるようにする ScrollViewReaderでスクロールのトップへの移動 お問い合せや質問コーナーなどで活用 Twitterように活用することもできる。

ExpoでiOSアプリをビルドするとエラー終了してしまう 実際に表示されていたエラーは以下。 ビルドを実行したコンソールに出るエラー You can press Ctrl+C to exit. It won't cancel the build, you'll be able to monitor it at the printed URL. ✖ Build failed. Standalone build failed! Expoのダッシュボードで見れるビルドログのエラー Error: xcrun exited with non-zero code: 1 at ChildProcess.completionListener (/usr/local/turtle-js/node_modules/@expo/xdl/node_modules/@expo/spawn-async/build/spawnAsync.js:52:23) at Object.onceWrapper (events.js:418:26) at ChildProcess.emit (events.js:311:20) at ChildProcess.EventEmitter.emit (domain.js:482:12) at maybeClose (internal/child_process.js:1021:16) at Process.ChildProcess._handle.onexit (internal/child_process.js:286:5) ... 原因 どうやら使用しているアイコンがガイドラインに沿っていない場合に出るエラーらしい。 対処 Expoのドキュメントに、Appleのガイドラインについての記載があるのでこれに従う。

外部ライブラリを使用する 使用したライブラリ: NeumorphismTab CocoaPodsでインストール pod 'NeumorphismTab' コード ライブラリをimport import NeumorphismTab NeumorphismTabBarControllerを継承したMainTabBarControllerクラスを作る class MainTabBarController: NeumorphismTabBarController override func setupView()メソッドに下記を記述 colorを設定 view.backgroundColor = #colorLiteral(red: 0.9725490196, green: 0.9725490196, blue: 0.9725490196, alpha: 1) TabBarItemを生成 ここではiconにSFSymbolsの画像を入れている titleを空にするとテキストが表示されないボタンになる let first = NeumorphismTabBarItem(icon: UIImage(systemName: "newspaper")!, title: "") let second = NeumorphismTabBarItem(icon: UIImage(systemName: "person.crop.circle")!, title: "") let third = NeumorphismTabBarItem(icon: UIImage(systemName: "info.circle")!, title: "") 別ファイルで各タブの中身となるViewControllerを作りインスタンス化する let firstViewController = FirstViewController() let secondViewController = SecondViewController() let thirdViewController = ThirdViewController() tabBarItemとViewControllerをセットする setTabBar(items: [first, second, third]) setViewControllers([firstViewController, secondViewController, thirdViewController], animated: false) 完成形 全体のコード import UIKit import NeumorphismTab class MainTabBarController: NeumorphismTabBarController { override func setupView() { let first = NeumorphismTabBarItem(icon: UIImage(systemName: "newspaper")!, title: "") let second = NeumorphismTabBarItem(icon: UIImage(systemName: "person.crop.circle")!, title: "") let third = NeumorphismTabBarItem(icon: UIImage(systemName: "info.circle")!, title: "") view.backgroundColor = #colorLiteral(red: 0.9725490196, green: 0.9725490196, blue: 0.9725490196, alpha: 1) let firstViewController = FirstViewController() let secondViewController = SecondViewController() let thirdViewController = ThirdViewController() setTabBar(items: [first, second, third]) setViewControllers([firstViewController, secondViewController, thirdViewController], animated: false) } }