Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: 馃幐 [JIRA: HCPSDKFIORIUIKIT-2459] Tab Bar (#621)
* feat: 馃幐 [JIRA: HCPSDKFIORIUIKIT-2459] Tab Bar * feat: 馃幐 add tap audio
- Loading branch information
1 parent
26ae03e
commit ba03a23
Showing
5 changed files
with
218 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Binary file not shown.
132 changes: 132 additions & 0 deletions
132
Apps/Examples/Examples/FioriSwiftUICore/TabViewExample/TabViewDetailView.swift
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,132 @@ | ||
| import AVFAudio | ||
| import FioriThemeManager | ||
| import SwiftUI | ||
|
|
||
| struct TabBarModel: Identifiable { | ||
| var id = UUID() | ||
| var name: String | ||
| var badge: String? = nil | ||
| var imageName: String | ||
| } | ||
|
|
||
| struct TabViewDetailView: View { | ||
| @Binding var numberOfTabs: Int | ||
| @Binding var isCustomColor: Bool | ||
| @Binding var isCustomSelectionIndicatorImage: Bool | ||
| @Binding var isCustomBackgroundImage: Bool | ||
| @State private var selection = 0 | ||
| @State private var accendColor = Color.random | ||
| @State private var selectionAudioPlayer: AVAudioPlayer! | ||
|
|
||
| var tabs: [TabBarModel] = [TabBarModel(name: "bicycle", badge: "2", imageName: "bicycle"), | ||
| TabBarModel(name: "list", imageName: "list.dash"), | ||
| TabBarModel(name: "cart", badge: "NEW", imageName: "cart"), | ||
| TabBarModel(name: "person", imageName: "person.crop.circle"), | ||
| TabBarModel(name: "1", imageName: "1.square"), | ||
| TabBarModel(name: "2", imageName: "2.circle"), | ||
| TabBarModel(name: "3", imageName: "3.circle.fill")] | ||
|
|
||
| var handler: Binding<Int> { Binding( | ||
| get: { self.selection }, | ||
| set: { | ||
| if selection != $0 { | ||
| self.selection = $0 | ||
| accendColor = Color.random | ||
| } | ||
|
|
||
| selectionAudioPlayer?.play() | ||
| } | ||
| ) } | ||
|
|
||
| var body: some View { | ||
| TabView(selection: handler) { | ||
| ForEach(0 ..< numberOfTabs, id: \.self) { index in | ||
| let t = tabs[index] | ||
| Group { | ||
| if index.isMultiple(of: 2) { | ||
| Color.random | ||
| } else { | ||
| List(0 ..< 20) { index in | ||
| Text("index: \(index)") | ||
| } | ||
| } | ||
| } | ||
| .badge(t.badge) | ||
| .tag(index) | ||
| .tabItem { | ||
| Label( | ||
| title: { Text(t.name) }, | ||
| icon: { Image(systemName: t.imageName) } | ||
| ) | ||
| } | ||
| } | ||
| } | ||
| .navigationTitle("Customized TabView") | ||
| .accentColor(accendColor) | ||
| .onAppear { | ||
| if let path = Bundle.main.path(forResource: "08 Tap", ofType: "wav") { | ||
| let url = URL(fileURLWithPath: path) | ||
| do { | ||
| selectionAudioPlayer = try AVAudioPlayer(contentsOf: url) | ||
| selectionAudioPlayer.prepareToPlay() | ||
| } catch let error as NSError { | ||
| print("Error creating AVAudioPlayer \(error)") | ||
| } | ||
| } | ||
|
|
||
| if isCustomColor { | ||
| customTabColor() | ||
| } else { | ||
| resetTabColor() | ||
| } | ||
| if isCustomSelectionIndicatorImage { | ||
| UITabBar.appearance().selectionIndicatorImage = UIImage(systemName: "car") | ||
| } else { | ||
| UITabBar.appearance().selectionIndicatorImage = nil | ||
| } | ||
|
|
||
| if isCustomBackgroundImage { | ||
| UITabBar.appearance().backgroundImage = UIImage(named: "SAPLogo")?.stretchableImage(withLeftCapWidth: 0, topCapHeight: 0) | ||
| } else { | ||
| UITabBar.appearance().backgroundImage = nil | ||
| } | ||
| } | ||
| .onDisappear { | ||
| resetTabColor() | ||
| UITabBar.appearance().selectionIndicatorImage = nil | ||
| UITabBar.appearance().backgroundImage = nil | ||
| } | ||
| } | ||
|
|
||
| func customTabColor() { | ||
| UITabBarItem.appearance().setTitleTextAttributes([.font: UIFont.preferredFioriFont(forTextStyle: .title3), | ||
| .foregroundColor: UIColor(Color.preferredColor(.primaryLabel))], for: .normal) | ||
| UITabBarItem.appearance().setTitleTextAttributes([.font: UIFont.preferredFioriFont(forTextStyle: .title3), | ||
| .foregroundColor: UIColor(Color.random)], for: .selected) | ||
| UITabBarItem.appearance().setBadgeTextAttributes([.font: UIFont.preferredFioriFont(forTextStyle: .callout), | ||
| .foregroundColor: UIColor(Color.random)], for: .normal) | ||
| UITabBarItem.appearance().setBadgeTextAttributes([.font: UIFont.preferredFioriFont(forTextStyle: .callout), | ||
| .foregroundColor: UIColor(Color.random)], for: .selected) | ||
| UITabBar.appearance().unselectedItemTintColor = UIColor(Color.preferredColor(.red11)) | ||
| UITabBar.appearance().backgroundColor = UIColor(Color.preferredColor(.green11)) | ||
| UITabBarItem.appearance().badgeColor = UIColor(Color.preferredColor(.base1)) | ||
| } | ||
|
|
||
| func resetTabColor() { | ||
| UITabBar.appearance().unselectedItemTintColor = nil | ||
| UITabBar.appearance().backgroundColor = nil | ||
| UITabBarItem.appearance().badgeColor = UIColor.systemRed | ||
|
|
||
| UITabBarItem.appearance().setTitleTextAttributes([:], for: .normal) | ||
| UITabBarItem.appearance().setTitleTextAttributes([:], for: .selected) | ||
| UITabBarItem.appearance().setBadgeTextAttributes([:], for: .normal) | ||
| UITabBarItem.appearance().setBadgeTextAttributes([:], for: .selected) | ||
| } | ||
| } | ||
|
|
||
| #Preview { | ||
| TabViewDetailView(numberOfTabs: .constant(6), | ||
| isCustomColor: .constant(false), | ||
| isCustomSelectionIndicatorImage: .constant(false), | ||
| isCustomBackgroundImage: .constant(true)) | ||
| } |
61 changes: 61 additions & 0 deletions
61
Apps/Examples/Examples/FioriSwiftUICore/TabViewExample/TabViewExample.swift
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,61 @@ | ||
| import FioriSwiftUICore | ||
| import SwiftUI | ||
|
|
||
| struct TabViewExample: View { | ||
| @State var isPresented: Bool = false | ||
| @State var numberOfTabs: Int = 4 | ||
| @State var isModalPresentation: Bool = false | ||
| @State var isCustomColor: Bool = false | ||
| @State var isCustomSelectionIndicatorImage: Bool = false | ||
| @State var isCustomBackgroundImage: Bool = false | ||
|
|
||
| var body: some View { | ||
| Form { | ||
| if isModalPresentation { | ||
| HStack { | ||
| Text("Selecte to Test") | ||
| Spacer() | ||
| } | ||
| .contentShape(Rectangle()) | ||
| .onTapGesture { | ||
| isPresented.toggle() | ||
| } | ||
| .sheet(isPresented: $isPresented) { | ||
| TabViewDetailView(numberOfTabs: $numberOfTabs, | ||
| isCustomColor: $isCustomColor, | ||
| isCustomSelectionIndicatorImage: $isCustomSelectionIndicatorImage, | ||
| isCustomBackgroundImage: $isCustomBackgroundImage) | ||
| } | ||
| } else { | ||
| NavigationLink { | ||
| TabViewDetailView(numberOfTabs: $numberOfTabs, | ||
| isCustomColor: $isCustomColor, | ||
| isCustomSelectionIndicatorImage: $isCustomSelectionIndicatorImage, | ||
| isCustomBackgroundImage: $isCustomBackgroundImage) | ||
| } label: { | ||
| Text("Selecte to Test") | ||
| } | ||
| } | ||
|
|
||
| Picker("Number of Tabs", selection: $numberOfTabs) { | ||
| Text("2").tag(2) | ||
| Text("3").tag(3) | ||
| Text("4").tag(4) | ||
| Text("5").tag(5) | ||
| Text("6").tag(6) | ||
| } | ||
|
|
||
| Toggle("Modal Presentation", isOn: $isModalPresentation) | ||
| Toggle("Custom Colors", isOn: $isCustomColor) | ||
| Toggle("Custom Selection Indicator Image", isOn: $isCustomSelectionIndicatorImage) | ||
| Toggle("Custom Background Image", isOn: $isCustomBackgroundImage) | ||
| } | ||
| .navigationTitle("TabView Example") | ||
| } | ||
| } | ||
|
|
||
| #Preview { | ||
| NavigationStack { | ||
| TabViewExample() | ||
| } | ||
| } |