SwiftUI Touchable Area of a Button - xcode

I am trying to increase the touchable area of a button inside a NavigationView. It does not work even though the area is made bigger. My code is below:
var body: some View {
NavigationView {
List(taskStore.tasks) { tasks in
Text(tasks.name)
}
.navigationBarTitle("Tasks")
.navigationBarItems(
trailing: Button(action: {
self.modalIsPresented = true
}){
Image(systemName: "plus")
.frame(width: 200, height: 200)
.contentShape(Rectangle())
.background(Color.yellow)
})}
The green area is touchable and the red area isn't touchable.
I found a solution online that works. However this solution only works for a button that is NOT in the NavigationView. So if I put the button in "some view" like the following below, it works as per the solution:
var body: some View {
Button(action: {self.modalIsPresented = true} ) {
Text("Default padding")
.padding(50)
.background(Color.yellow)
}}}
But when I put the button in a Navigation View like my code, the yellow area is not touchable. How can I get the whole yellow area (red box) to be touchable like the solution?
Thanks :D
Example of solution:

If you want a button in the navigation bar, it is only going to be clickable inside the navigation bar, no matter what you try to set the image's frame at, and the NavigationView determines that height, no matter what the children- the button, in this case- may want.
Historically, changing the height of the NavigationBar has not been supported: see the comments here
Now you could do something funky with ZStacks- put a button on top of the navigation view, perhaps- but you're not going to be able to put anything larger than the set height inside the navigation bar.

I think you may find your desired effect inside the .navigationBarItems(trailing:) if you use .contentShape(Rectangle()) modifier. Or you could use other shapes to suit your needs. Then adjust the size of the .frame to adjust the tappable area as desired. Here is a quick code example.
struct ContentView: View {
var body: some View {
NavigationView {
List {
Text("Hello, World")
}
.navigationBarTitle(Text("Items"))
.navigationBarItems(trailing: Button(action: {
print("Do Something")
}, label: {
Image(systemName: "plus")
.frame(width: 100, height: 50)
.contentShape(Rectangle())
.border(Color.red, width: 3)
.background(Color.gray)
}))
}
}
}
I hope this helps.

Related

Animate a button's text and position at the same time in SwiftUI

I have a very simple view that only shows a Text, a Shape, and a Button stacked vertically in a ScrollView. The Shape is a Capsule and is conditionally shown only when showCapsule is true.
struct ContentView: View {
#State var showCapsule = true
var body: some View {
ScrollView {
VStack(spacing: 16) {
Text("Why, oh why? 😩")
.font(.headline)
if showCapsule {
Capsule()
.frame(maxWidth: .infinity)
.frame(height: 100)
.foregroundColor(.blue)
}
Button {
showCapsule.toggle()
} label: {
Text(showCapsule ? "Hide" : "Show")
}
.buttonStyle(.bordered)
}
.frame(maxWidth: .infinity)
.padding()
}
.animation(.default, value: showCapsule)
}
}
Observed and expected animation
I want to animate the appearance and disappearance of the Capsule, but the result is totally not what I want. While the Capsule fades out (which is okay), the button is animated in two different ways simultaneously:
Its background shape (the grey rounded rectangle) move from the old to its new position.
Its text fades out at its old position and fades in at its new position.
Of course, (2) is not what I want. Instead, I want the button to move as a unit: The entire thing should move from its old to its new position while the text is faded inside of it.
The broader picture
This is a minimal example for a broader question: How do I animate changes to a view that is semantically the same but value-wise different?
In the Button initializer, I use a ternary operator to conditionally pass a different string to its Text label:
Button {
showCapsule.toggle()
} label: {
Text(showCapsule ? "Hide" : "Show")
}
Text("Hide") is a different value than Text("Show"), so I guess that's why SwiftUI can't identify them and doesn't "understand" that it should animate them in place. I observed the same behavior with custom views with let constants. Is there a way to make SwiftUI treat such views – and especially this Button – as a unit and animate them correctly?
Note
I'm not looking for a workaround like using two Text fields (or Buttons) and show/hide them by setting their opacity accordingly. Rather looking for a general solution for this kind of problem that solves the identity problem rather than patching its symptoms.
You can fix this by adding .drawingGroup modifier to your button:
Button(showCapsule ? "Hide" : "Show") {
showCapsule.toggle()
}
.drawingGroup()
.buttonStyle(.bordered)
Alternatively, you could have two buttons that are shown and hidden:
ZStack {
Button("Hide") {
showCapsule.toggle()
}
.buttonStyle(.bordered)
.opacity(showCapsule ? 1 : 0)
Button("Show in a very long button") {
showCapsule.toggle()
}
.buttonStyle(.bordered)
.opacity(showCapsule ? 0 : 1)
}

Image resizing makes Button unclickable

I have a simple scrollview with a SDWebImage pulling in Firebase URL links to display images. For some bizarre reason, when I do not give a specific frame to my images, I can click on the button positioned in the bottom left corner. But when I give it a max height or any height at all, the button becomes unclickable. This seriously might be the weirdest SwiftUI issue I have ever seen - any help would be great.
import SwiftUI
import SDWebImageSwiftUI
struct Test2FeedView: View {
#StateObject var viewmodel = FeedViewModel()
#State var show : Bool = false
var body: some View {
ScrollView{
VStack(spacing:5) {
ForEach(viewmodel.posts){ post in
ZStack(alignment:.bottomLeading) {
WebImage(url: URL(string: post.original_posted_image))
.resizable()
.scaledToFill()
.frame(maxHeight:440)
.clipped()
Button(action: {
show.toggle()
}){
Text("PRESS ME")
}
}
}
}
}.sheet(isPresented: $show) {
Text("hey")
}
}
}
The Button becomes unclickable because the result of .clipped() is only visual — in reality, the image spans all the way 'above' the button, thus is being used for hit testing. You should use .allowsHitTesting(false) to disable that.
WebImage(url: URL(string: post.original_posted_image))
.resizable()
.scaledToFill()
.frame(maxHeight:440)
.clipped()
.allowsHitTesting(false) // <- here
try putting the .frame(maxHeight:440) just before .scaledToFill(), works for me.

How to hide text behind navigationBar with animation at loading

The code below hide a text view behind a navigationBar based on Network status and it works great. The only problem is that we see the text going to hide behind the navigation bar at the first loading of the page.
How can i fix that? I want the text view to be already hidden at the start (Y Position -20)...
import SwiftUI
struct TestZStackNavigationView: View {
let screenSize: CGRect = UIScreen.main.bounds
#ObservedObject var online = NetStatus()
var body: some View {
NavigationView {
Text("NoNetworkTitle")
.fontWeight(.bold)
.foregroundColor(Color.white)
.frame(width: screenSize.width, height: 40, alignment: .center)
.background(Color.red)
.position(x: screenSize.width / 2, y: self.online.connected ? -20 : 20)
.animation(.easeIn(duration: 0.5), value: self.online.connected)
.navigationBarTitle(Text("Navigation Bar Title"), displayMode:.inline)
}
}
}
Ok i got it!
By default 'connected' is set to false in NetStatus() class.
I set it to true and now it's working like i want. ;-)

How to make clickable area of button be the buttons frame

First attempt at SwiftUI here, converting a Swift Macos app to SwiftUI.
I'm wondering if it is possible to have the entire area within a Buttons frame be clickable as a part of the button. Seems only the highlighted area around the text is a part of the button.
Buttons
Code for one of the calculator buttons:
Button("÷", action: {
self.calculatorVM.operate("÷")
})
.frame(width: self.calculatorVM.buttonWidth, height: self.calculatorVM.buttonHeight)
.border(Color.blue)
.font(.body)
Got it squared away by configuring the button as follows:
Button(action: {
self.calculatorVM.recieveInput(self.button)
}) {
Text(button.title)
.font(.body)
.frame(width: buttonWidth, height: 50)
.background(button.buttonHeight)
}
.buttonStyle(PlainButtonStyle())

Issue with Buttons in SwiftUI on MacOS

I'm using SwiftUI on MACOS
If I do this:
Button(action: { } ) {
Text("Press")
.padding()
.background(Color.blue)
}
I get this:
and the two grey areas are the ends of a tappable button.
but I would expect the button to be the shape of the blue area.
Any ideas how I can get the whole blue area to be tappable.
(I did look at using .onTapGesture but this doesn't animate the button so that you know you've tapped it.)
You can achieve the look you want by using a ButtonStyle and then specifying colors and other style attributes based on the configuration values being passed in.
It would be nice if there was a happy medium where you could inherit the default button radius, automatic width based on the text length and other attributes, but at least there is the ability to specify all the attributes and get the look you want.
Hope this helps!
import SwiftUI
struct BlueButtonStyle: ButtonStyle {
func makeBody(configuration: Self.Configuration) -> some View {
configuration.label
.foregroundColor(configuration.isPressed ? Color.blue : Color.white)
.background(configuration.isPressed ? Color.white : Color.blue)
.cornerRadius(6.0)
.padding()
}
}
struct ContentView: View {
var body: some View {
VStack {
Text("Hello World")
.frame(maxWidth: .infinity, maxHeight: .infinity)
Button(action: {
}) {
Text("Press")
.frame(maxWidth: 100, maxHeight: 24)
}
.buttonStyle(BlueButtonStyle())
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
Inspired by #Gene Z. Ragan 's great answer I've started with that answer and taken this a bit further:
Making the ButtonStyle a bit more flexible:
struct NiceButtonStyle: ButtonStyle {
var foregroundColor: Color
var backgroundColor: Color
var pressedColor: Color
func makeBody(configuration: Self.Configuration) -> some View {
configuration.label
.font(.headline)
.padding(10)
.foregroundColor(foregroundColor)
.background(configuration.isPressed ? pressedColor : backgroundColor)
.cornerRadius(5)
}
}
and then some sugar to make it cleaner at the call site:
extension View {
func niceButton(
foregroundColor: Color = .white,
backgroundColor: Color = .gray,
pressedColor: Color = .accentColor
) -> some View {
self.buttonStyle(
NiceButtonStyle(
foregroundColor: foregroundColor,
backgroundColor: backgroundColor,
pressedColor: pressedColor
)
)
}
}
then means we can use default colouring:
white foreground, grey background and accentedColor pressedColor
Button(action: { } ) {
Text("Button A")
}
.niceButton()
or we can customise the colours:
Button(action: { } ) {
Text("Button B has a long description")
}
.niceButton(
foregroundColor: .blue,
backgroundColor: .yellow,
pressedColor: .orange
)
And we get:
Thanks again Gene.
I raised this with Apple on the Feedback assistant to see if they had any useful thoughts.
Dialogue here:
I said:
If on MACOS with SwiftUI I do this:
Button(action: { } ) {
Text("Press")
.padding()
.background(Color.blue)
}
I get a blue box with two grey bits sticking out the sides.
Image attached.
These are the two grey areas are the ends of a tappable button. but I would expect the button to be the shape of the blue area.
The same code works fine as expected on iOS.
(I did look at using .onTapGesture but this doesn't animate the button so that you know you've tapped it.)
Apple said:
iOS and macOS have different default ButtonStyles — iOS is borderless, macOS has that standard bezel effect.
It sounds like you’re trying to create a custom ButtonStyle (and so not have any system provided chrome). So you’ll want to create that, which can apply that blue background to the label of the button, and then apply that to your simple button with Text, e.g.
Button("Press"), action {}).buttonStyle(BluePaddingButtonStyle()
This will ensure that it has the same appearance on every platform you run it on.
I said:
Hi, Thanks for the explanation.
I get what you are saying and I’m ok with the method I’ve come up with.
It still doesn’t seem right that:
Button(action: { } ) {
Text("Press")
.padding()
.background(Color.blue)
}
should produce something so odd looking.
I don’t understand why that bit of code couldn’t just produce a blue button.
As I say - it’s not a problem because I’ve worked around it but it
currently doesn’t seem intuitive.
Apple said:
The provided content inside the ViewBuilder is used as the label of the button: not the entire button. The button will still come with the surrounding background, bezel, foreground styling, etc as described by it’s ButtonStyle. So if your button needs to have a very specific appearance, then it needs to customize that style: either to the BorderlessButtonStyle (though note that still does come with a specific foreground appearance style), or to a custom ButtonStyle.
My thoughts:
This did help me understand why it shows as it does but intuitively it still seems wrong !!!
You can "force" an iOS-like behavior on macOS by adding .buttonStyle(.borderless).
Button(action: { } ) {
Text("Press")
.padding()
.background(Color.blue)
}
.buttonStyle(.borderless)
I don't think this is possible but you could try using this
Supports SPM, is build for Swift 5.1 and is lean
In Swift 5, this could be achieved with below simple code -
Button("First Button") {
print("Hello World")
}
.padding(10)
.accentColor(.yellow)
.background(Color.blue)
.cornerRadius(10)

Resources