I'm trying to replicate a common view that I've seen in the iPhone settings where you can see some settings field and underneath it, there's an explanation text:
I can't find a way to add the explanation text below and make it look neat like Apple are doing:
struct SomeView: View {
#State private var someBool = true
var body: some View {
Form {
Toggle("I am a toggle", isOn: $someBool)
Text("This is not formatted well :(")
.font(.caption)
.foregroundColor(.gray)
}
.navigationBarTitle(Text("Some form"))
.navigationBarTitleDisplayMode(.inline)
}
}
Here's the result:
Use section footer for that, like
Form {
Section {
Toggle("I am a toggle", isOn: $someBool)
} footer: {
Text("This is not formatted well :(") // << here !!
.font(.caption)
.foregroundColor(.gray)
}
}
Tested with Xcode 13.4 / iOS 15.5
Related
SwiftUI provides the .help() modifier but it is too small, cannot be customised and takes too long to appear to actually serve its intended purpose. I would like to create a tooltip that appears immediately on hover and is larger, similar to the one that appears on hovering on an icon in the Dock.
Something like this:
Is this possible to create from SwiftUI itself? I've tried using a popover but it prevents hover events from propagating once its open, so I can't make it close when the mouse moves away.
Solution #1: Check for .onHover(...)
Use the .onHover(perform:) view modifier to toggle a #State property to keep track of whether your tooltip should be displayed:
#State var itemHovered: Bool = false
var body: some View {
content
.onHover { hover in
itemHovered = hover
}
.overlay(
Group {
if itemHovered {
Text("This is a tooltip")
.background(Color.white)
.foregroundColor(.black)
.offset(y: -50.0)
}
}
)
}
Solution #2: Make a Tooltip Wrapper View
Create a view wrapper that creates a tooltip view automatically:
struct TooltipWrapper<Content>: View where Content: View {
#ViewBuilder var content: Content
var hover: Binding<Bool>
var text: String
var body: some View {
content
.onHover { hover.wrappedValue = $0 }
.overlay(
Group {
if hover.wrappedValue {
Text("This is a tooltip")
.background(Color.white)
.foregroundColor(.black)
.offset(y: -50.0)
}
}
)
}
}
Then you can call with
#State var hover: Bool = false
var body: some View {
TooltipWrapper(hover: $hover, text: "This is a tooltip") {
Image(systemName: "arrow.right")
Text("Hover over me!")
}
}
From this point, you can customize the hover tooltip wrapper to your liking.
Solution #3: Use my Swift Package
I wrote a 📦 Swift Package that makes SwiftUI a little easier for personal use, and it includes a tooltip view modifier that boils the solution down to:
import ShinySwiftUI
#State var showTooltip: Bool = false
var body: some View {
MyView()
.withTooltip(present: $showTooltip) {
Text("This is a tooltip!")
}
}
Notice you can provide your own custom views in the tooltip modifier above, like Image or VStack. Alternatively, you could use HoverView to get a stateful hover variable to use solely within your view:
HoverView { hover in
Rectangle()
.foregroundColor(hover ? .red : .blue)
.overlay(
Group {
if hover { ... }
}
)
}
I’m trying to build a custom sidebar menu that animates out when a button in it is tapped. For debugging purposes the animation is deliberately slow at 2.0 seconds. As you can see the animation does not work properly:
I suspect there are two parts to this problem:
The background of the newly selected button is moving out faster than the menu. I think this is rooted in the default system animation of Button.
When I replace Button with Text and use an .onTapGesture, there is still the fading animation, so I assume there is something structurally wrong in the way I’m setting selected in FeatureButton.
Sorry the example code is a bit long, tried to simplify my app architecture as much as possible. The reason for using MenuState as an EnvironmentObject is to be able to the change its properties from various places throughout the app.
Here’s the code:
class MenuState: ObservableObject {
#Published var currentFeature: Feature = .featureA
#Published var menuOffset: CGFloat = 0
}
enum Feature: String, CaseIterable {
case featureA = "Feature A"
case featureB = "Feature B"
case featureC = "Feature C"
}
extension Feature: Identifiable {
var id: RawValue { rawValue }
}
struct ContentView: View {
#StateObject var menuState = MenuState()
var body: some View {
ZStack(alignment: .leading) {
content
menu
}
.environmentObject(menuState)
.animation(.easeOut(duration: 2.0), value: menuState.menuOffset)
}
var menu: some View {
VStack {
ForEach(Feature.allCases) { feature in
FeatureButton(feature: feature)
}
}
.frame(maxHeight: .infinity)
.frame(width: 200)
.background(.thinMaterial)
.offset(x: menuState.menuOffset)
}
var content: some View {
VStack {
Button("Show Menu") {
menuState.menuOffset = 0
}
Text(menuState.currentFeature.rawValue)
.frame(maxWidth: .infinity, maxHeight: .infinity)
}
}
}
struct FeatureButton: View {
#EnvironmentObject var menuState: MenuState
let feature: Feature
var selected: Bool {
return menuState.currentFeature == feature
}
var body: some View {
Button(feature.rawValue) {
menuState.currentFeature = feature
menuState.menuOffset = -200
}
.buttonStyle(FeatureButtonStyle(selected: selected))
}
}
struct FeatureButtonStyle: ButtonStyle {
#EnvironmentObject var menuState: MenuState
var selected: Bool
public func makeBody(configuration: Configuration) -> some View {
configuration.label
.frame(maxWidth: .infinity, minHeight: 44)
.foregroundColor(selected ? .blue : .primary)
.background(Color.gray.opacity(selected ? 0.4 : 0))
.contentShape(Rectangle())
}
}
EDIT:
For some reason making the animation explicit solves the issue, see answer below.
The problem can be solved by making the animation explicit instead of using the .animation modifier:
Button(feature.rawValue) {
menuState.currentFeature = feature
withAnimation(.easeOut) {
menuState.menuOffset = -200
}
}
.buttonStyle(FeatureButtonStyle(selected: selected))
I don't understand why it only works like this though.
I'm assuming I should probably file this as a feedback report with Apple, but posting here in case I am missing something - or if there is new guidance with latest SwiftUI.
This code works as expected in Xcode 13, but in Xcode 14 beta 2, the navigation bar and "Cancel" button are missing. Is this ProgressView with deferred content loading somehow a technique that doesn't work anymore?
import SwiftUI
struct ContentView: View {
#State private var isFlowDetermined = false
var body: some View {
NavigationView {
//NestedView()
if self.isFlowDetermined {
NestedView()
} else {
ProgressView()
.task {
await self.determineFlow()
}
}
}
}
private func determineFlow() async {
self.isFlowDetermined = true
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
struct NestedView: View {
var body: some View {
ScrollView {
Text("Where is the \"Cancel\" button?")
}
.frame(maxWidth: .infinity, maxHeight: .infinity)
.background(Color.green)
#if !os(macOS)
.navigationBarTitleDisplayMode(.inline)
#endif
.toolbar {
#if !os(macOS)
ToolbarItem(placement: .navigationBarLeading) {
Button("Cancel") {
print("got here")
}
}
#endif
}
}
}
UPDATE: Xcode 14 beta 4 appears to resolve this issue. The suggested workaround below is no longer needed.
It seems they optimised toolbar construction (and don't assume it is changed). Anyway I see only one workaround for now:
NavigationView {
// .. content
}
.id(isFlowDetermined) // << here !!
Tested with Xcode 14b2 / iOS 16
*Note: NavigationView is deprecated since iOS 16
I'm just starting to learn SwiftUI, so I decided to work thru Apple's tutorial, using the latest Xcode (12.5). One line of code immediately got me a semantic error: "Value of type 'Color' has no member 'accessibleFontColor'"Here's the entire source module:
//
// CardView.swift
// Scrumdinger
//
// Created by Vacuumhead on 6/4/21.
//
import SwiftUI
struct CardView: View {
let scrum: DailyScrum
var body: some View {
VStack(alignment: .leading) {
Text(scrum.title).font(.headline)
Spacer()
HStack {
Label("\(scrum.attendees.count)", systemImage: "person.3")
.accessibilityElement(children: .ignore)
.accessibilityLabel(Text("Attendees"))
.accessibilityValue(Text("\(scrum.attendees.count)"))
Spacer()
Label("\(scrum.lengthInMinutes)", systemImage: "clock")
.padding(.trailing, 20)
.accessibilityElement(children: .ignore)
.accessibilityLabel(Text("Meeting length"))
.accessibilityValue(Text("\(scrum.lengthInMinutes) minutes"))
}
.font(.caption)
}
.padding()
.foregroundColor(scrum.color.accessibleFontColor)
}
}
struct CardView_Previews: PreviewProvider {
static var scrum = DailyScrum.data[0]
static var previews: some View {
CardView(scrum: scrum)
.background(scrum.color)
.previewLayout(.fixed(width: 400, height: 60))
}
}
The line that gets the error is the last line of body:
.foregroundColor(scrum.color.accessibleFontColor)
The message is "Value of type 'Color' has no member 'accessibleFontColor'".The program compiles and runs just fine when I comment out that line, of course without any color. I've been writing C++ since the age of dinosaurs but I'm new to SwiftUI and don't even know where I should look to fix this.
Any suggestions are welcome.
There's a file that you're probably missing in the sample project called Color+Codable.swift that defines some extensions on Color. One is accessibleFontColor:
extension Color {
var accesibleFontColor : Color {
//etc.
}
}
Download the files from https://developer.apple.com/tutorials/app-dev-training/managing-state-and-life-cycle and make sure that you're using Color+Codable.swift in your project.
I'm building an app that shares quite a bit of SwiftUI code between its iOS and macOS targets. On iOS, onDisappear seems to work reliably on Views. However, on macOS, onDisappear doesn't get called if the View is inside a sheet or popover.
The following code illustrates the concept:
import SwiftUI
struct ContentView: View {
#State private var textShown = true
#State private var showSheet = false
#State private var showPopover = false
var body: some View {
VStack {
Button("Toggle text") {
self.textShown.toggle()
}
if textShown {
Text("Text").onDisappear {
print("Text disappearing")
}
}
Button("Toggle sheet") {
self.showSheet.toggle()
}.sheet(isPresented: $showSheet, onDismiss: {
print("On dismiss")
}) {
VStack {
Button("Close sheet") {
self.showSheet = false
}
}.onDisappear {
print("Sheet disappearing")
}
}
Button("Toggle popover") {
self.showPopover.toggle()
}.popover(isPresented: $showPopover) {
VStack {
Text("popover")
}.onDisappear {
print("Popover disappearing")
}
}
}
.frame(maxWidth: .infinity, maxHeight: .infinity)
}
}
Note that onDisappear works fine on the Text component at the beginning of the VStack but the other two onDisappear calls don't get executed on macOS.
One workaround I've found is to attach an ObservableObject to the View and use deinit to call cleanup code. However, this isn't a great solution for two reasons:
1) With the popover example, there's a significant delay between the dismissal of the popover and the deist call (although it works quickly on sheets)
2) I haven't had any crashes on macOS with this approach, but on iOS, deinit have been unreliable in SwiftUI doing anything but trivial code -- holding references to my data store, app state, etc. have had crashes.
Here's the basic approach I used for the deinit strategy:
class DeinitObject : ObservableObject {
deinit {
print("Deinit obj")
}
}
struct ViewWithObservableObject : View {
#ObservedObject private var deinitObj = DeinitObject()
var body: some View {
Text("Deinit view")
}
}
Also, I would have thought I could use the onDismiss parameter of the sheet call, but that doesn't get called either on macOS. And, it's not an available parameter of popover.
All of this is using Xcode 11.4.1 and macOS 10.15.3.
Any solutions for good workarounds?