I have a row of colors and I want to display a ToolTip for each of the colors.
struct ColorsView: View {
let colors = [UIColor.red, UIColor.white, UIColor.gray, UIColor.blue, UIColor.black]
var body: some View {
HStack {
ForEach(0..<colors.count) { index in
Color(self.colors[index])
.frame(width: (UIScreen.main.bounds.size.width - 30) / 5, height: 25)
}
}.cornerRadius(12)
}
}
How can I create a custom toolTip for this? I tried wrapping in a ZStack but this doesn't seem to solve the problem exactly. Any help :)
You can also try using this tool: https://github.com/quassummanus/SwiftUI-Tooltip
Here's an example of how you could use it with a simple Text view, you can extrapolate from there. It's very nice because it doesn't rely on any Apple-provided APIs that are not fundamental to SwiftUI, so you can use it on all platforms.
Text("Say something nice...")
.tooltip(.bottom) {
Text("Something nice!")
}
And you get something like this:
Related
In iOS 16, there are now new SwiftUI modifiers for adjusting navigation bars.
The following:
struct ContentView: View {
var body: some View {
NavigationStack {
Rectangle()
.fill(.red)
.frame(width: 200)
.edgesIgnoringSafeArea(.top)
.navigationTitle("Hello")
.navigationBarTitleDisplayMode(.inline)
// New modifiers
.toolbarBackground(.clear, for: .navigationBar)
.toolbarColorScheme(.dark, for: .navigationBar)
.toolbarBackground(.visible, for: .navigationBar)
}
}
}
Produces:
Notice there is an translucent effect applied.
Does anyone know how to remove this translucent effect and instead make it transparent whilst keeping dark color scheme (title/status bar is white)?
Maybe this could work for you:
.toolbarBackground(.hidden, for: .navigationBar
Edit:
You can try:
.toolbarColorScheme
You can find more information here:
How to change status bar color in SwiftUI
I have this code:
HStack (alignment:.center) {
Text("50")
ProgressView("", value: 50, total: 100)
Text("100")
Text("mg")
}
the result is
I want this
I have tried everything like adding alignment center to HStack, adding the progress view inside a VStack, etc
Why Apple never manage to make things related to interface design work intuitively?
There is another way like not using "", and it works as you want.
import SwiftUI
struct ContentView: View {
var body: some View {
HStack {
Text("50")
ProgressView(value: 50, total: 100) // <<: Here
Text("100")
Text("mg")
}
}
}
The Version that you used is also good, but has another usage like this down code. And it needs the ProgressView pushed down for Text, actually, in your code ProgressView thinks that "" is the information to show! that is why you see that.
import SwiftUI
struct ContentView: View {
var body: some View {
HStack {
Text("50")
ProgressView("This part is for information to help", value: 50, total: 100)
Text("100")
Text("mg")
}
}
}
First off. I know the SwiftUI ScrollView has limitations. I am hoping to get around that here.
My problem is I have a chat box...so a VStack with a ScrollView and a text input. I am able to get the text input to be keyboard adaptive...i.e. when you type it shifts up with the keyboard.
The issue is that the ScrollView loses its scroll position. So, if you scroll to the bottom and then activate the keyboard...you can't see the bottom anymore. It's almost like a ZStack.
What I want is to mimic the same behavior as WhatsApp which maintains scroll position while typing a new message.
I know about the ScrollViewReader and scrollTo...that seems to be a hack in this case and I'm hoping to avoid it. If anything, maybe there is a layout related fix?
By a stroke of luck I was able to solve this by adding .keyboardAdaptive() to both the ScrollView and the text input as well as changing from padding to offset
struct KeyboardAdaptive: ViewModifier {
#State private var keyboardHeight: CGFloat = 0
#State var offset: CGFloat
func body(content: Content) -> some View {
content
.offset(y: -keyboardHeight)
.onReceive(Publishers.keyboardHeight) {
self.keyboardHeight = $0 == 0 ? 0 : $0 - offset
}
}
}
Maybe a better option.
If you are using iOS 14+ with scrollview or have the option to use scrollview.
https://developer.apple.com/documentation/swiftui/scrollviewproxy
https://developer.apple.com/documentation/swiftui/scrollviewreader
Below might help
ScrollViewReader { (proxy: ScrollViewProxy) in
ScrollView {
view1().frame(height: 200)
view2().frame(height: 200)
view3() <-----this has textfields
.onTapGesture {
proxy.scrollTo(1, anchor: .center)
}
.id(1)
view4() <-----this has text editor
.onTapGesture {
proxy.scrollTo(2, anchor: .center)
}
.id(2)
view5().frame(height: 200)
view6().frame(height: 200)
submtButton().frame(height: 200)
}
}
imp part from above is
anyView().onTapGesture {
proxy.scrollTo(_ID, anchor: .center)
}.id(_ID)
Hope this helps someone :)
I'm trying to mimic the grouped Cancel / Set button pair that you see in places like the Stopwatch app.
I've currently done this by using a ZStack with two overlapping RoundedRectangle with different cornerRadius and padding.
This seems to work well shape-wise but there's a subtle colour overlap that I haven't found a way to fix.
I've tried playing with BlendMode and `opacity' with no luck.
Button(action: {}, label: { Text("Cancel").foregroundColor(Color.white) })
.background(VStack(spacing: 0) {
ZStack {
RoundedRectangle(cornerRadius:20).foregroundColor(Color.gray)
RoundedRectangle(cornerRadius: 8).foregroundColor(Color.gray).padding(.leading, 20)
}})
Does anyone have any ideas?
I've realised that this is actually the button's accent colour being applied. If I set the accentColour to Color.clear, this overlap disappears.
I actually need this behaviour elsewhere so I've followed Alejandro Martinez's guide on creating reusable Button styles and created this:
public struct AccentlessButtonStyle: ButtonStyle {
public func body(configuration: Button<Self.Label>, isPressed: Bool) -> some View {
configuration.accentColor(Color.clear)
}
}
extension StaticMember where Base: ButtonStyle {
public static var accentless: AccentlessButtonStyle.Member {
StaticMember<AccentlessButtonStyle>(AccentlessButtonStyle())
}
}
It seems to inherit the default button styling in all other ways.
Using it requires this:
Button(action: {}, label: { Text("Cancel") }).buttonStyle(.accentless)
I am playing around with SwiftUI and I am stuck on this View. everything is working fine but this little bug is very frustrating.I am trying to display the images as a vertical view and it won't show on the view . I know the Images are loaded but the view is not showing it . Its covered in blue color.
import SwiftUI
struct PlanetHome : View {
var planets : [Planet]
var body : some View {
NavigationView {
ScrollView {
ZStack {
Color.black .edgesIgnoringSafeArea (.all)
VStack (alignment: .center)
{
ForEach (self.planets.identified(by: \.imageName))
{
planet in NavigationLink (destination: PlanetDetail(planets: planet))
{
PlanetsView (planets: planet)
.frame (width: 500, height: 500)
.padding (.vertical, 5)
}
}
}
}
}
.navigationBarTitle (Text("Planets"))
}
}
}
I tried to put the NavigationView under the ZStack but it did not work.I have no Idea what I did wrong on the code. No error message on the debugger. just doesn't show the images.
The NavigationLink applies a button style to the objects it holds. Button does the same. To remove the blue color, add the buttonStyle modifier:
NavigationLink(destination: ...) {
...
}
.buttonStyle(PlainButtonStyle())
You can create and apply your own button style as well.
Its covered in blue color.
You can change blue color to whatever you want with .foregroundColor(.YourColor) or just change Render as Default to Render as Original Image at Assets.xcassets -> Pick Any Image -> Show the Attribute inspector
To fix other problem you should include PlanetsView because when i put Image(systemName: "photo") instead your view it's shows correctly