So I have the following code:
private var googleButton: some View {
Button {
// Empty
} label: {
HStack(alignment: .firstTextBaseline) {
Image(systemName: "globe")
Text("Continue with Google")
.font(.headline)
.frame(height: 35)
}
.foregroundColor(.black)
.frame(maxWidth: .infinity)
}
.tint(.white)
.buttonStyle(.borderedProminent)
.controlSize(.regular)
}
Which produces this look:
How do I properly apply a border with the proper corner radius?
I have tried applying .border, etc.. to the button but it's all causing errors.
You can use Label if you want.
Label("Continue with Google", systemImage: "heart")
.padding()
.background {
Color.gray
}.foregroundColor(.white)
.clipShape(RoundedRectangle(cornerRadius: 10.0, style: .continuous))
I would go with something like:
Button {
print("example")
} label: {
HStack(alignment: .firstTextBaseline) {
Image(systemName: "globe")
Text("Continue with Google")
.font(.headline)
.frame(height: 35)
}
.foregroundColor(.black)
.frame(maxWidth: .infinity)
}
.background(.white)
.controlSize(.regular)
.cornerRadius(5) // Have your custom value here
Related
I am new to Swift for a macOS app and I don't understand how to make NavigationLink work to go to a new view. For example, I made a Sign In view and want to make a button that leads to a Sign Up view. Would I use NavigationLink so that the app can change to a different view? Is there an alternative to NavigationLinK? I tried to use NavigationLink, but the button was greyed out and I could not click it.
Here is what I tried:
HStack{
Text("Don't have an account yet?")
.foregroundColor(.gray)
}
.padding(.top, 10)
NavigationLink("Create Account", destination:SignUpView())
}
Here is my SignUp view:
struct SignUpView: View {
var screen=NSScreen.main?.visibleFrame
//email and password fields
#State var email=""
#State var password=""
#State var keepLogged=false
#EnvironmentObject var viewModel: AppViewModel
//alert
#State var alert = false
var body: some View {
HStack(spacing:0){
VStack{
Spacer(minLength:0)
Image("logo")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width:100, height:100)
Text("The Organized Cook")
.font(.largeTitle)
.fontWeight(.heavy)
.foregroundColor(.black)
.padding(.vertical, 10)
Group{
//Email
TextField("Email", text:$email)
.textFieldStyle(PlainTextFieldStyle())
.padding(.vertical, 10)
.padding(.horizontal)
//Borders
.background(RoundedRectangle(cornerRadius:2).stroke(Color.gray.opacity(0.7), lineWidth:1))
//password
SecureField("Password", text:$password)
.textFieldStyle(PlainTextFieldStyle())
.padding(.vertical,10)
.padding(.horizontal)
//Borders
.background(RoundedRectangle(cornerRadius:2).stroke(Color.gray.opacity(0.7), lineWidth:1))
.padding(.vertical)
//keep login and forget password
HStack{
Toggle("", isOn: $keepLogged)
.labelsHidden()
.toggleStyle(CheckboxToggleStyle())
Text("Stay Logged In")
.foregroundColor(.black)
Spacer(minLength:0)
Button(action: {}, label: {
Text("Forget Password")
.foregroundColor(.black)
.underline(true,color:Color.black)
})
.buttonStyle(PlainButtonStyle())
}
// log in
Button(action: {alert.toggle()
guard !email.isEmpty, !password.isEmpty else{
return
}
viewModel.signUp(email: email, password: password)
}, label: {
HStack{
Spacer()
Text("Sign up")
Spacer()
Image(systemName: "arrow.right")
}
.foregroundColor(.white)
.padding(.vertical, 10)
.padding(.horizontal)
.background(Color("test"))
.cornerRadius(2)
})
.buttonStyle(PlainButtonStyle())
.padding(.top)
//sign up
HStack{
Text("Already have an account?")
.foregroundColor(.gray)
Button(action: {}, label: {
Text("Sign in")
.foregroundColor(.blue)
.underline(true,color:Color.black)
})
.buttonStyle(PlainButtonStyle())
}
.padding(.top, 10)
}
Spacer(minLength:0)
}
//white half of signup
.padding(.horizontal, 50)
.frame(maxWidth: .infinity, maxHeight: .infinity)
.background(Color.white)
//always light mode
.preferredColorScheme(.light)
.alert(isPresented: $alert, content: {
Alert(title: Text("Message"), message: Text("Logged Successfully"), dismissButton: .destructive(Text("Ok")))
})
VStack{
Spacer()
}
.frame(width: (screen!.width / 1.8) / 2)
.background(Color("test"))
}
.ignoresSafeArea(.all, edges: .all)
.frame(width: screen!.width / 1.8, height: screen!.height - 100)
}
}
A NavigationLink only works inside a NavigationView.
Somewhere in the view hierarchy above the navigation link make sure you have a NavigationView.
An example of this:
NavigationView{
...
HStack{
Text("Don't have an account yet?")
.foregroundColor(.gray)
}
.padding(.top, 10)
NavigationLink("Create Account", destination:SignUpView())
}
...
}
Using Swiftui I'm creating a chat application. I'm trying to align the text so that it appears on the right side of the screen and then messages from the other user will appear on the left. I have tried using VStack and using leading and trailing alignment, I have also tried just aligning the text attribute. I have a text, and then two buttons. I would like the trash can button and pencil button to all evenly line up on the right side.
VStack (alignment: .trailing ) {
HStack {
Text(data.text)
.padding(.bottom, 4)
.padding(.top, 4)
.padding(.leading, 8)
.padding(.trailing, 8)
.foregroundColor(Color.white)
.background(Color(UIColor.systemBlue))
.cornerRadius(20)
Button(action: {
self.showingPopover = true
}) {
Image(systemName: "pencil")
}
Button(action: {
viewModel.deleteData(id: data.id)
}) {
Image(systemName: "trash")
}
}
}
It is enough to use frame alignment for text, depending to user it can be conditionally changed in place, like
Text(data.text)
.padding(.bottom, 4)
.padding(.top, 4)
.padding(.leading, 8)
.padding(.trailing, 8)
.foregroundColor(Color.white)
.background(Color(UIColor.systemBlue))
.cornerRadius(20)
.frame(maxWidth: .infinity, alignment: isMe ? .trailing : .leading) // << here !!
You just need to add a Spacer() in the beginning of the HStack:
VStack (alignment: .trailing ) {
HStack {
// This Spacer() will "push" the text to the right
Spacer()
Text(data.text)
.padding(.bottom, 4)
.padding(.top, 4)
.padding(.leading, 8)
.padding(.trailing, 8)
.foregroundColor(Color.white)
.background(Color(UIColor.systemBlue))
.cornerRadius(20)
Button(action: {
self.showingPopover = true
}) {
Image(systemName: "pencil")
}
Button(action: {
viewModel.deleteData(id: data.id)
}) {
Image(systemName: "trash")
}
}
}
Similarly, for the replies put a Spacer() at the end of the HStack, too push the text to the left.
I want to place button at the bottom of the screen and also want to make it little transparent.
Here I am sharing my code with image. Can please any one suggest me like how to make button transparent and how to change the position.
card.swift
//
// testCard.swift
// demoApp
//
// Created by ZAREEN NAUSHAD on 17/01/21.
//
import SwiftUI
struct testCard: View {
var testItem : testCourse
var body: some View {
ZStack{
Image(testItem.testImage)
VStack{
Text(testItem.testName)
.font(.largeTitle)
.fontWeight(.bold)
.foregroundColor(Color.white)
.multilineTextAlignment(.center)
Text("Marks: " + testItem.testMarks)
.font(.subheadline)
.fontWeight(.semibold)
.foregroundColor(Color.white)
Text("Minute: " + testItem.testTime)
.font(.subheadline)
.fontWeight(.semibold)
.foregroundColor(Color.white)
Text("Question: " + testItem.testQuestion)
.font(.subheadline)
.fontWeight(.semibold)
.foregroundColor(Color.white)
}.offset(y : -160)
Button(action: ({
print("Button Clicked")
}), label: {
HStack{
Text("Take Test Now")
.fontWeight(.heavy)
.foregroundColor(Color("LCOdarkpink"))
Image(systemName: "arrow.right.square")
.accentColor(Color("LCOdarkpink"))
}
.padding(.horizontal, 40)
.padding(.vertical, 10)
.background(Color.white)
.clipShape(Capsule())
}).offset(y : 0) // here i am trying to change the position of button but its not moving
}
.frame(width: 280, height: 430)
.background(testItem.testColor)
.cornerRadius(18)
}
}
struct testCard_Previews: PreviewProvider {
static var previews: some View {
testCard(testItem: testList[1])
.previewLayout(.sizeThatFits)
}
}
Instead of using offsets to change the position of your elements you can use a Spacer() inside a VStack(). To change the transparency of the button you can use the .opacity() modifier.
You could try something like this:
struct ContentView: View {
var body: some View {
ZStack{
//Image(testItem.testImage)
RoundedRectangle(cornerRadius: 15)
.fill(Color(.blue))
VStack {
Text("testItem.testName")
.font(.largeTitle)
.fontWeight(.bold)
.foregroundColor(Color.white)
.multilineTextAlignment(.center)
Text("Marks: " + "testItem.testMarks")
.font(.subheadline)
.fontWeight(.semibold)
.foregroundColor(Color.white)
Text("Minute: " + "testItem.testTime")
.font(.subheadline)
.fontWeight(.semibold)
.foregroundColor(Color.white)
Text("Question: " + "testItem.testQuestion")
.font(.subheadline)
.fontWeight(.semibold)
.foregroundColor(Color.white)
Spacer() // <-- 1. Spacer instead of offset
Button(action: ({
print("Button Clicked")
}), label: {
HStack{
Text("Take Test Now")
.fontWeight(.heavy)
.foregroundColor(Color(.black))
Image(systemName: "arrow.right.square")
.accentColor(Color(.black))
}
.padding(.horizontal, 40)
.padding(.vertical, 10)
.background(Color.white
.opacity(0.8)) // <-- 2. Change transperancy of button here
.clipShape(Capsule())
})
}.padding()
}
.frame(width: 280, height: 430)
.background(testItem.testColor)
.cornerRadius(18)
}
}
I want to change background color and add an okay button image to the selection point when I tap to that point. How can I do that ? I do know how to change the background color but I'm not sure how can I add confirmation image in. Should I use ZStack for this or is there any other way to do so ?
HStack {
Button(action: {
self.tap1.toggle()
}) {
Text("")
.padding(.horizontal, 10)
.padding(.vertical, 5)
.background((self.tap1) ? Color(.gray) : Color(.blue)
.cornerRadius(4)
.padding(.leading, 40)
}
Spacer()
Text("Diyabet")
.font(.system(size: 20, weight: .regular, design: .rounded))
.padding(.trailing, 200)
Spacer()
}.padding(.bottom, 20)
HStack {
Button(action: {
self.tap2.toggle()
}) {
Text("")
.padding(.horizontal, 10)
.padding(.vertical, 5)
.background(self.tap2 ? Color(.gray) : Color(.blue)
.cornerRadius(4)
.padding(.leading, 40)
}
Spacer()
Text("Yüksek Tansiyon")
.font(.system(size: 20, weight: .regular, design: .rounded))
.padding(.trailing, 130)
Spacer()
}.padding(.bottom, 20)
HStack {
Button(action: {
self.tap3.toggle()
}) {
Text("")
.padding(.horizontal, 10)
.padding(.vertical, 5)
.background(self.tap3 ? Color(.gray) : Color(.blue)
.cornerRadius(4)
.padding(.leading, 40)
}
Spacer()
Text("Kalp ve Damar Hastalıkları")
.font(.system(size: 20, weight: .regular, design: .rounded))
.padding(.trailing, 45)
Spacer()
}.padding(.bottom, 20)
#State private var pressed = false
var body: some View {
ZStack {
Button(action: {
self.pressed.toggle()
}) {
ZStack {
Rectangle().fill(self.pressed ? Color.blue : Color.gray)
if self.pressed {
Image(systemName: "checkmark")
}
}
}
}
}
I have the following
struct hScrollView: View {
#State private var meals = ["short", "long Text", "really long text"]
var body: some View {
VStack(alignment: .leading) {
ScrollView(.vertical, showsIndicators: false) {
VStack(spacing: 30) {
ForEach(0 ..< meals.count) { count in
VStack(alignment: .leading) {
HStack(alignment: .center) { // .center is by default, so also remove
Text("\(count + 1) ")
.foregroundColor(Color.black)
.multilineTextAlignment(.leading)
.padding(.horizontal, 15)
.padding(.vertical, 5)
.background(
Capsule()
.fill(Color.black)
.opacity(0.20)
)
Spacer()
Text("\(self.meals[count]) ")
.foregroundColor(Color.black)
.multilineTextAlignment(.leading)
Spacer()
Button(action: {
print("Button was tapped")
}) {
Image(systemName: "pencil")
.foregroundColor(Color.yellow)
.font(.system(size: 25, weight: .bold))
.shadow(radius: 1)
}
}
}
.padding(.horizontal)
}
}
.frame(width: UIScreen.main.bounds.width) // set a fixed width
}
.frame(height: 500)
.frame(maxWidth: 400)
.padding(.top, 190)
}
}
}
If you noticed, the text is centered, I want it that way, but all beginning with .leading alignment so they all start at the same start point. What can I fix there? I tried putting the leading alignment in all the stacks :/
Thanks
Your view would be like
(1)|-------|short|-------|✏️
(2)|-----|long text|-----|✏️
(3)|-|really long text|-|✏️
so you should remove the Spacer() between the first Text and second instead of set text alignment.
HStack(alignment: .center) { // .center is by default, so also remove
Text("\(count + 1) ")
.foregroundColor(Color.black)
.multilineTextAlignment(.leading)
.padding(.horizontal, 15)
.padding(.vertical, 5)
.background(
Capsule()
.fill(Color.black)
.opacity(0.20)
)
// Spacer()
Text("\(self.meals[count]) ")
.foregroundColor(Color.black)
.multilineTextAlignment(.leading)
Spacer()
Button(action: {
print("Button was tapped")
}) {
Image(systemName: "pencil")
.foregroundColor(Color.yellow)
.font(.system(size: 25, weight: .bold))
.shadow(radius: 1)
}
}