I am new to Swift programming. To start with, I want to simply make a button as a Mac OS application. What I want to do are as follows. One is making the button size (the blue part) bigger. Two is to be able to click the blue part.
But I got the result like the image.
I have no idea what I am going to do.
So I would like you to help me.
Thank you.
I am also learning SwiftUI. Here is my initial solution. The button needs a stoke outline which I did not handle since I am putting the button on a green background.
I am not sure if this is the best way to do it. It duplicates what I did in my Swift application so I did not spend more time on refining it.
It uses buttonStyle property since I have many buttons.
In my application, I named "MyButtonStyle" as "GameButtonStyle" since I am using it on a menu View for game actions.
struct ExampleView: View {
var body: some View {
ZStack {
Color(red: 0, green: 0.5, blue: 0)
VStack {
Button("Button") {
print("tap button")
}
.buttonStyle(MyButtonStyle(labelWidth: 150, labelHeight: 30, scaleFactor: 1))
}
}
}
}
struct MyButtonStyle: ButtonStyle {
let labelWidth:CGFloat
let labelHeight:CGFloat
let scaleFactor:CGFloat
let minWidth:CGFloat
let verticalPadding:CGFloat
init(labelWidth: CGFloat, labelHeight: CGFloat, scaleFactor: CGFloat, minWidth: CGFloat = 0, verticalPadding: CGFloat = 0) {
self.labelWidth = labelWidth
self.labelHeight = labelHeight
self.scaleFactor = scaleFactor
self.minWidth = minWidth
self.verticalPadding = verticalPadding
}
func makeBody(configuration: Configuration) -> some View {
let darkBlue = Color(red: 0, green: 0, blue: 1)
configuration.label
.frame(width: labelWidth, height: labelHeight)
.padding(EdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 0))
.font(Font.system(size: (7 * labelHeight) / 9))
.frame(minWidth: minWidth)
//.padding(.horizontal, 10)
.padding(.vertical, verticalPadding)
.foregroundColor(configuration.isPressed ? Color.white : Color.black)
.background(configuration.isPressed ? darkBlue : Color.white)
.cornerRadius(labelHeight)
}
}
Note that scaleFactor is not used in MyButtonStyle. It can be eliminated.
Looking at my actual application, the exampleView looks like the following:
.buttonStyle(GameButtonStyle(labelWidth: 140 * scaleFactor, labelHeight: 20 * scaleFactor, minWidth: 70 * scaleFactor, verticalPadding: 3 * scaleFactor))
I determine the scaleFactor depending upon the size of the window on OSX or the size of the screen on IOS.
Thank you for your advice. I tried it and I got the button I wanted. The code is a little bit difficult for me but it is so helpful. I am learning Swift(UI) everyday.
I am sorry, this was almost solved.
You could add a tap gesture:
Button(action: {
print ("tap buton")
})
{
Text ("Button")
}
.padding()
.frame (width: 250, height: 30)
.background(.blue)
.buttonStyle(.plain)
.cornerRadius(10)
.onTapGesture {
print("Tapped in blue")
}
Get more here: https://sarunw.com/posts/swiftui-button-background-color/?utm_content=cmp-true
Thank you for your advice. I tried it and I almost got what I wanted. Unfortunately, there is a subtlety: there are two tap actions, on the button part and the other part. I need some control but I am so glad that I could almost get the button I wanted.
I am also learning SwiftUI. Here is my initial solution. The button needs a stoke outline which I did not handle since I am putting the button on a green background.
I am not sure if this is the best way to do it. It duplicates what I did in my Swift application so I did not spend more time on refining it.
It uses buttonStyle property since I have many buttons.
In my application, I named "MyButtonStyle" as "GameButtonStyle" since I am using it on a menu View for game actions.
struct ExampleView: View {
var body: some View {
ZStack {
Color(red: 0, green: 0.5, blue: 0)
VStack {
Button("Button") {
print("tap button")
}
.buttonStyle(MyButtonStyle(labelWidth: 150, labelHeight: 30, scaleFactor: 1))
}
}
}
}
struct MyButtonStyle: ButtonStyle {
let labelWidth:CGFloat
let labelHeight:CGFloat
let scaleFactor:CGFloat
let minWidth:CGFloat
let verticalPadding:CGFloat
init(labelWidth: CGFloat, labelHeight: CGFloat, scaleFactor: CGFloat, minWidth: CGFloat = 0, verticalPadding: CGFloat = 0) {
self.labelWidth = labelWidth
self.labelHeight = labelHeight
self.scaleFactor = scaleFactor
self.minWidth = minWidth
self.verticalPadding = verticalPadding
}
func makeBody(configuration: Configuration) -> some View {
let darkBlue = Color(red: 0, green: 0, blue: 1)
configuration.label
.frame(width: labelWidth, height: labelHeight)
.padding(EdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 0))
.font(Font.system(size: (7 * labelHeight) / 9))
.frame(minWidth: minWidth)
//.padding(.horizontal, 10)
.padding(.vertical, verticalPadding)
.foregroundColor(configuration.isPressed ? Color.white : Color.black)
.background(configuration.isPressed ? darkBlue : Color.white)
.cornerRadius(labelHeight)
}
}
Note that scaleFactor is not used in MyButtonStyle. It can be eliminated.
Looking at my actual application, the exampleView looks like the following:
.buttonStyle(GameButtonStyle(labelWidth: 140 * scaleFactor, labelHeight: 20 * scaleFactor, minWidth: 70 * scaleFactor, verticalPadding: 3 * scaleFactor))
I determine the scaleFactor depending upon the size of the window on OSX or the size of the screen on IOS.
Thank you for your advice. I tried it and I got the button I wanted. The code is a little bit difficult for me but it is so helpful. I am learning Swift(UI) everyday.
Both answers could make my question solved and take me to the next step. I really thank you two.