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")
}
}
}
}
}
Related
I want to display a pop-up in my view, where I will be able to display a menu where I can choose how I fell, then it will show what I have chosen and close itself. If I am adding it to the view and it's presenting It shows wrong and Tab Bar does not disappear. Can someone provide a better way to show a pop-up over Tab Bar? The logic is something like this: button pressed -> shows pop-up -> choose status -> shows another pop-up -> disappears.
Code's provided below:
// Smile face that used in question
struct SmileFace: View {
var text: String
var image: String
#Binding var current: String
var body: some View {
Button {
withAnimation {
current = text
}
} label: {
VStack {
Image(image)
.resizable()
.scaledToFill()
.frame(width: 46, height: 46)
Text(text)
.foregroundColor(.white)
}
}
}
}
// Check in answer view
import SwiftUI
struct CheckInAskView: View {
let didClose: () -> Void
var didChose: Bool = false
#State var current: String
var emotions = [
"GREAT" : "good",
"GOOD" : "happy",
"OK" : "moderate",
"BAD" : "sad",
"TERRIBLE" : "verysad"
]
var body: some View {
VStack {
ZStack(alignment: .topLeading) {
Rectangle()
.fill(Color("navigation"))
.cornerRadius(15)
.frame(height: 601)
HStack(alignment: .top) {
ZStack(alignment: .top) {
Circle()
.fill(Color(red: 0.682, green: 0.384, blue: 0.486).opacity(0.10))
.frame(width: 173)
.offset(x: -173/2, y: -90/2)
.clipped()
}
Spacer()
Button {
didClose()
} label: {
ZStack {
Circle()
.fill(Color(red: 0.933, green: 0.933, blue: 0.933).opacity(0.30))
.frame(width: 24)
.clipped()
Image(systemName: "xmark")
.font(.system(size: 15))
.foregroundColor(Color(red: 0.762, green: 0.762, blue: 0.762))
}
.padding(10)
}
}
VStack(alignment: .center) {
Spacer()
Text("How do you feel now?")
.foregroundColor(.white)
.font(.custom("Manrope-Bold", size: 16))
HStack(spacing: 35) {
SmileFace(text: "GOOD", image: "good", current: $current)
}
.padding(.horizontal)
DoubleTextView(topText: "Recommendation for you", buttomText: "We have selected courses based on your goals and \nexperience", topTextSize: 16, buttomTextSize: 14)
BigFrameScrollViewHorizontal()
Spacer()
}
}
.frame(height: 601)
}
.frame(height: 601)
.transition(.move(edge: .bottom))
}
}
// View with all views
struct CheckInView: View {
#StateObject var sheetManager: SheetManager
var body: some View {
VStack {
HStack {
Text("How do you fell now?")
.foregroundColor(.white)
.font(.custom("Manrope-Bold", size: 16))
Spacer()
Button {
} label: {
ZStack {
HStack {
Text("Pass check in")
.padding([.top, .leading, .bottom])
.foregroundColor(.white)
.font(.custom("Manrope-Medium", size: 12))
Image(systemName: "chevron.right")
.foregroundColor(.white)
.font(.system(size: 15))
.padding(.trailing)
}
}
.background(Rectangle()
.fill(Color("active"))
.cornerRadius(100)
.frame(height: 26))
}
}
VStack {
Divider()
.background(Color("inactive"))
.padding(.vertical)
Divider()
.background(Color("inactive"))
.padding(.vertical)
Divider()
.background(Color("inactive"))
.padding(.vertical)
Divider()
.background(Color("inactive"))
.padding(.vertical)
Divider()
.background(Color("inactive"))
.padding(.vertical)
Divider()
.background(Color("inactive"))
.padding(.vertical)
}
HStack {
Button {
} label: {
ZStack {
Circle()
.fill(Color("navigation"))
.frame(width: 26)
Image(systemName: "chevron.left")
.foregroundColor(.white)
.font(.system(size: 14))
}
}
Button {
} label: {
ZStack {
Circle()
.fill(Color("navigation"))
.frame(width: 26)
Image(systemName: "chevron.right")
.foregroundColor(Color("inactive"))
.font(.system(size: 14))
}
}
}
.padding(.top)
}
.padding(.horizontal, 15.0)
}
}
struct CheckInView_Previews: PreviewProvider {
static var previews: some View {
CheckInView(sheetManager: SheetManager())
.background(.yellow)
}
}
If I have all of this, how can I create a pop-up over Tab View? Maybe a link to a similar problem?
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
I have a section that I have some items inside and I want those items to trigger separate Views the problem I have is the color contrast on my NavigationLink Button is blurry but if I use a regular button, it come out correct. This is my code and this is the image that shows up
VStack {
Form {
Section {
Button(action: {}, label: {
HStack(spacing: 2) {
Image("logouticon")
.frame(height: 40)
.frame(width: 40)
.foregroundColor(.black)
Text("Logout")
.foregroundColor(.red)
.font(.system(size: 14, weight: .regular, design: .default))
.multilineTextAlignment(.leading)
.foregroundColor(.black)
}.background(Color.clear)
})
NavigationLink(
destination: EmptyView(),
label: {
HStack(spacing: 2) {
Image("logouticon")
.frame(height: 40)
.frame(width: 40)
.foregroundColor(.black)
Text("Logout")
.foregroundColor(.red)
.font(.system(size: 14, weight: .regular, design: .default))
.multilineTextAlignment(.leading)
.foregroundColor(.black)
}
}
)
}
}
}
The image below is the NavigationLink while the one above it is the Button
You need to put all NavigationLinks in a NavigationView like this:
NavigationView {
VStack {
Form {
Section {
Button(action: {}, label: {
HStack(spacing: 2) {
Image("logouticon")
.frame(height: 40)
.frame(width: 40)
.foregroundColor(.black)
Text("Logout")
.foregroundColor(.red)
.font(.system(size: 14, weight: .regular, design: .default))
.multilineTextAlignment(.leading)
.foregroundColor(.black)
}.background(Color.clear)
})
NavigationLink(
destination: EmptyView(),
label: {
HStack(spacing: 2) {
Image("logouticon")
.frame(height: 40)
.frame(width: 40)
.foregroundColor(.black)
Text("Logout")
.foregroundColor(.red)
.font(.system(size: 14, weight: .regular, design: .default))
.multilineTextAlignment(.leading)
.foregroundColor(.black)
}
}
)
}
}
}
}
Otherwise, they are dimmed because they are disabled.
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 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)
}
}