I have a litte SwiftUI example with a strange behaviour. It displays a Button and an optional Text. With a button tap the text is updated.
Strange effect: Sometimes the button label gets cropped.
Of course I could assign some frame size for the button as a work around. But is this really necessary?
struct ContentView: View {
#State var tapCount = 0
var body: some View {
VStack{
Button(action: {
self.tapCount+=1
}) {
HStack{
Image(systemName: "hand.point.right").font(.system(size: 25, weight: .bold))
Text("Tap Me")
Image(systemName: "hand.point.left").font(.system(size: 25, weight: .bold))
}
}
if self.tapCount > 0{
Text("You tapped \(tapCount) times")
}
}
}
}
No, frame is not needed, it is enough to point that text is fixed size, as below
Text("Tap Me")
.fixedSize()
Related
I've got a TextField in SwiftUI that is centered on the screen. I want to add a pencil icon immediately. to the left of it to indicate that it is editable - how can I do this? I've tried embedding both the TextField and Image in an HStack like this:
HStack {
Spacer()
Image(systemName: "pencil")
TextField(...)
}
But that only yields something like this:
where the textfield is no longer centered and the pencil is aligned to the left of the screen.
Any guidance is appreciated.
this should do it:
TextField("", text: $input)
.overlay(alignment: .leading) {
Image(systemName: "pencil")
.offset(x: -24, y: 0)
}
struct CustomTextFieldView: View {
#State private var text: String = ""
var body: some View {
VStack(alignment: .leading) {
textfeild
.padding()
}
}
var textfeild: some View {
HStack {
Image(systemName: "pencil")
TextField("Edit me!", text: $text)
}
.textFieldStyle(DefaultTextFieldStyle())
}
}
struct CustomTextFieldView_Previews: PreviewProvider {
static var previews: some View {
CustomTextFieldView()
}
}
I have a VStack wrapped around a NavigationView. I made a NavigationTitle by adding the modifier to VStack. However, my title is not appearing near the top of the screen as it should.
Here is my code:
NavigationView{
VStack{
Image(club.image)
.resizable()
.scaledToFit()
.frame(height: 300)
Text(club.name)
.font(.system(size: 40, weight: .black))
HStack(alignment: .center, spacing: 20){
Label(title: {
Text(club.league)
.foregroundColor(.secondary)
}, icon: {
Image(systemName: "location.north.circle.fill")
.foregroundColor(.blue)
})
Label(title: {
Text(club.netWorth)
.foregroundColor(.secondary)
}, icon: {
Image(systemName: "dollarsign.circle.fill")
.foregroundColor(.blue)
})
}
}.navigationTitle(club.name)
}
I have tried adding the '.navigationTitle' modifier to the NavigationView as well, but that isn't working.
Here is an image as well:
Navigation title image
Does anybody have a solution to this?
As lorem ipsum has mentioned. It's as simple as removing the extra NavigationView. When using a Navigation Link it's assumed that it's within a NavigationView. So you only need to declare it once in the root view. If you wanted additional NavigationLink you'd add it without a NavigationView.
struct ContentView: View {
var body: some View {
NavigationView {
VStack {
Text("Chelsea")
NavigationLink("Second View Link", destination: SecondView())
}
.navigationTitle("Chelsea")
}
}
}
struct SecondView: View {
var body: some View {
VStack {
Text("Second View")
}
.navigationTitle("Second View")
}
}
When placing a SwiftUI Menu button in the top-trailing corner, using ignoresSafeArea(), it works correctly in the SwiftUI preview:
But not on the actual device/in simulator:
When I use ignoresSafeArea() again on the menu itself, a strange behavior occurs (iOS 14.5): without padding the menu looses function, with padding, the button moves down when the Menu appears and the Menu will have an odd spacing between button and Menu:
Is there a way to get a Menu to appear correctly in the top-trailing corner?
Example code:
struct MenuButtonExampleView: View {
var body: some View {
Color.yellow
.ignoresSafeArea()
.overlay(self.menuButton, alignment: .topTrailing)
}
#ViewBuilder var menuButton: some View {
Menu(
content: {
Button(
action: {
debugPrint("Action")
},
label: {
Label("Action", systemImage: "xmark")
}
)
},
label: {
Button(
action: {},
label: {
ZStack {
Circle()
.foregroundColor(.green)
.frame(width: 30, height: 30)
Image(systemName: "ellipsis")
.foregroundColor(.white)
}
}
)
.padding(20)
}
)
}
}
This may be due to the navigation bar.
You can try to add this code.
.navigationBarHidden(true)
Create a let constant and get the complete screen height and assign it to that constant and after that change the body code as you can see in the code below and it will work for every device
let customHeight = UIScreen.main.bounds.height
var body: some View {
Color.yellow
.overlay(self.menuButton, alignment: .topTrailing)
.statusBar(hidden: true)
.frame(height: customHeight + (customHeight/18))
.ignoresSafeArea()
}
I try to make a smooth animation when the NetStatus change but it's not working like i want.
I want to get the same effect as when i press the button with the toggle animation. The commented button animation is working great and i try to replicate it with the scaling of the height of the text frame.
The commented button code is just for a working example of the animation effect that i want (expand and close gracefully), i don't need this code.
How can i do that?
import SwiftUI
struct NoNetwork: View {
let screenSize: CGRect = UIScreen.main.bounds
#ObservedObject var online = NetStatus()
var body: some View {
VStack{
Text("NoNetworkTitle")
.fontWeight(.bold)
.foregroundColor(Color.white)
.frame(width: screenSize.width, height: self.online.connected ? 0 : 40, alignment: .center)
// .animation(.easeIn(duration: 5))
.background(Color.red)
// Button(action: {
// withAnimation {
// self.online.connected.toggle()
// }
// }, label: {
// Text("Animate")
// })
}
}
}
struct NoNetwork_Previews: PreviewProvider {
static var previews: some View {
NoNetwork()
}
}
To animate when online.connected changes, put the .animation modifier on the VStack:
VStack{
Text("NoNetworkTitle")
.fontWeight(.bold)
.foregroundColor(Color.white)
.frame(width: screenSize.width, height: self.online.connected ? 0 : 40, alignment: .center)
.background(Color.red)
Button(action: {
self.online.connected.toggle()
}, label: {
Text("Animate")
})
}
.animation(.easeInOut(duration: 0.5))
This will animate the other views in the VStack as the Text appears and disappears.
What is an effective & effecient way to get the Dismiss button (X) into the top right corner?
I'm struggling with container alignment... can't say I GROK it.
Needless to say ... this ain't it!
var body: some View {
ZStack {
Image("Biz-card_2020")
.resizable()
.edgesIgnoringSafeArea(.all)
HStack(alignment: .top) {
VStack() {
Spacer(minLength: 5) // vertical space
HStack() {
Spacer()
// close Welcome page (X) button
Button(action: {
//print(" - Button to dismiss page \(self.isPresented)")
self.isPresented = false // dismiss the Welcome view
//print(" - after action Button to dismiss Welcome page \(self.isPresented)")
}, label: {
Image(systemName: "xmark.circle" )
.scaledFont(name: "Georgia", size: Const.titleText)
.minimumScaleFactor(0.3)
.accentColor(.white)
.padding(10)
})
}
Spacer()
}
}
}
}
You need to remove Spacer(minLength: 5) and replace it with padding for HStack.
Spacer(minLength: 5) doesn't mean its length will be exactly 5 (only that the minimum length will be 5).
You may also want to extract close button to another function for clarity.
Try the following:
struct ContentView: View {
...
var body: some View {
ZStack {
Image("Biz-card_2020")
.resizable()
.edgesIgnoringSafeArea(.all)
closeButton
}
}
var closeButton: some View {
VStack {
HStack {
Spacer()
Button(action: {
...
}) {
Image(systemName: "xmark.circle")
.padding(10)
}
}
.padding(.top, 5)
Spacer()
}
}
}
ZStack can be configured using .topTrailing etc. You should use those alignments to configure your view. Using something like Spacer() is going to cause the rest of your views to get pushed down.
ZStack(alignment: .topTrailing) {
// your code here
}
If you need to move your code a bit more, use either padding, or offset modifiers.