I'm trying to create a cardView that has a Date on it. Right now, I have the below look, with today's Date within a Square.
I would like to add 2 parallel lines (shown as RED coloured Lines in below pic) such that it looks like a Calendar Icon. Is it possible to do it using Rectangle() instead of using path()
Q: How do I draw the 2 lines thru the top, centre of the Square?
I've tried permutations of this
Rectangle().frame(width: 3, height: 5, alignment: .top).opacity(0.9)
but obviously, it didn't work as the line ended up in the middle of the Date.
VStack {
Text(FormatDisplay.yyyymmdd_day0(inputDate: workout.date))
.padding(2)
.background(RoundedRectangle(cornerRadius: 2).stroke(Color(UIColor.label).opacity(0.8), lineWidth: 2))
.font(.footnote)
.minimumScaleFactor(0.5)
if workout.icuId != "" {
Image("intervalsLogo")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 20, height: 20, alignment: .top)
.clipShape(Circle())
}
if workout.priorityCompliance > 0 {
RingView(compliancePct: workout.priorityCompliance, lineWidth: 2, primaryColor: Color.orange, secondaryColor: Color.orange, size: .tiny)
.frame(width: 20, height: 20)
.font(.caption)
}
Spacer()
}
}
This is what the end result I'm looking for. (the horizontal line above the number is an added bonus if possible)
I have bit modified your code. get This if useful.
RoundedRectangle(cornerRadius: 3)
.stroke(Color(UIColor.label).opacity(0.8), lineWidth: 3)
.frame(width: 35, height: 35, alignment: .center)
.overlay(
VStack(spacing: 2.5) {
HStack(spacing: 8) {
ForEach(0..<3) { _ in
RoundedRectangle(cornerRadius: 3)
.stroke(Color.black.opacity(0.8), lineWidth: 1.5)
.frame(width: 1, height: 7, alignment: .top)
}
}
.offset(y: -3.5)
RoundedRectangle(cornerRadius: 3)
.stroke(Color.black.opacity(0.8), lineWidth: 1.5)
.frame(height: 1)
.padding(.horizontal, 5)
Text(date)
.font(.system(size: 15))
.fontWeight(.bold)
}
,alignment: .top
)
preview
So yeah.. couple hours after I posted this.. figured out the solution.
Key was using the .offset(x: y:) modifier
VStack {
ZStack {
Text(FormatDisplay.yyyymmdd_day0(inputDate: workout.date))
.offset(y: 1)
RoundedRectangle(cornerRadius: 2)
.stroke(Color(UIColor.label).opacity(0.8), lineWidth: 2)
.frame(width: 20, height: 20, alignment: .center)
.offset(y: 0)
RoundedRectangle(cornerRadius: 2)
.stroke(Color.black.opacity(0.8), lineWidth: 2)
.frame(width: 1, height: 6, alignment: .top)
.offset(x: 4, y: -10)
RoundedRectangle(cornerRadius: 2)
.stroke(Color.black.opacity(0.8), lineWidth: 2)
.frame(width: 1, height: 6, alignment: .top)
.offset(x: -4, y: -10)
}
Related
Below is my code which has 4 VStacks which I want to be clickable to take me to my next view:
ForEach (data) { order in
NavigationLink(destination: OrderDetailView(typeof: order.title)){
VStack(spacing: 32){
HStack {
Text(order.title)
.font(.system(size: 22, weight: .bold))
.foregroundColor(.black)
Spacer(minLength: 0)
}
ZStack {
Circle()
.trim(from: 0, to:1)
.stroke(order.color.opacity(0.05),lineWidth: 10)
.frame(width: ((UIScreen.main.bounds.width - 150) / 2), height: ((UIScreen.main.bounds.width - 150) / 2))
Circle()
.trim(from: 0, to: (order.totalcount/tcount))
.stroke(order.color, style: StrokeStyle(lineWidth: 10, lineCap: .round))
.frame(width: ((UIScreen.main.bounds.width - 150) / 2), height: ((UIScreen.main.bounds.width - 150) / 2))
Text(getPercent(current: order.totalcount, max: tcount) + " %")
.font(.system(size: 22, weight: .bold))
.foregroundColor(order.color)
.rotationEffect(.init(degrees: 90))
}
.rotationEffect(.init(degrees: -90))
Text("Total count: " + getDec(val: order.totalcount))
.font(.system(size: 22, weight: .bold))
.foregroundColor(.black)
}
.padding()
.background(.white)
.cornerRadius(15)
.shadow(color: Color.white.opacity(0.2), radius: 10, x:0, y: 0)
}
Everything works fine and the transition takes place but there is no back button for me to come back to my original view. NavigationLink works fine in other parts of the code but not here, not sure why.
iam unsing a UiKit Image picker and trying to setup an Profil Pic for the User. Everything's works fine, the image gets displayed. But iam trying to make it into a Circle. I Tried using clipShape with an circle but it doesn't work. i followed the tutorial "My Images 1: Photo Picker and Camera in SwiftUI"
struct ProfileView: View {
#EnvironmentObject var appUser: User
#EnvironmentObject var appInfo: AppInformation
var body: some View {
ZStack {
Rectangle()
.frame(width: 400, height: 720)
.cornerRadius(50)
.foregroundColor(.gray)
.overlay(
HStack {
if let image = appUser.profilBild {
Image(uiImage: image)
.resizable()
.frame(width: 100, height: 100)
.scaledToFill()
.clipShape(RoundedRectangle(cornerRadius: 15))
.overlay(Circle().stroke(Color.orange, lineWidth: 10))
.onTapGesture {
appInfo.source = .library
appInfo.showPicker = true
}
.padding(20)
.shadow(radius: 10)
.overlay(
ZStack{
Rectangle()
.frame(width: 20, height: 20)
.offset(x: 35, y: -35)
.foregroundColor(.white)
Image(systemName: "plus.circle.fill")
.resizable()
.frame(width: 30, height: 30)
.offset(x: 35, y: -35)
.foregroundColor(.blue)
.shadow(radius: 10)
}
)
}
else {
Image(systemName: "person.circle")
.resizable()
.frame(width: 100, height: 100)
.onTapGesture {
appInfo.source = .library
appInfo.showPicker = true
}
.padding(20)
.shadow(radius: 10)
.overlay(
ZStack{
Rectangle()
.frame(width: 20, height: 20)
.offset(x: 35, y: -35)
.foregroundColor(.white)
Image(systemName: "plus.circle.fill")
.resizable()
.frame(width: 30, height: 30)
.offset(x: 35, y: -35)
.foregroundColor(.blue)
.shadow(radius: 10)
}
)
}
VStack {
Text(appUser.username)
.font(.largeTitle)
.frame(width: 240 ,alignment: .leading)
.offset(x: -10, y: -25)
.lineLimit(1)
Text(appUser.name)
.frame(width: 220, alignment: .leading)
.offset(x: -15,y: -20)
.lineLimit(1)
}
}
.frame(width: 400, height: 720, alignment: .topLeading)
)
.padding()
ZStack {
Rectangle()
.foregroundColor(.secondary)
.frame(width: 380, height: 510)
.cornerRadius(45)
}
.frame(width: 400, height: 700, alignment: .bottom)
.padding()
}
.sheet(isPresented: $appInfo.showPicker) {
ImagePicker(sourceType: appInfo.source == .library ? .photoLibrary : .camera, selectedImage: $appUser.profilBild)
}
.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .top)
}
}
You were almost there :)
Your only mistake was the order you placed your modifiers. ORDER MATTERS!!
Place scaledToFill() and clipShape() before the frame modifier.
Like such:
.resizable()
.scaledToFill()
.clipShape(Circle())
.frame(width: size, height: size)
swiftui i am learning new. I couldn't align my brain stopped. In the picture I said how I wanted to do this. Can you help?
HStack{
Text("Picture")
.font(.custom("Pacifico-Regular",size: 50))
.padding()
.foregroundColor(Color.white)
.shadow(color: .white, radius: 10, x: 0, y: 0)
Image("1coin").resizable()
.aspectRatio(contentMode: .fit)
.frame(width:30, height: 30)
Text("123")
.font(.custom("Pacifico-Regular",size: 20))
.foregroundColor(Color.white)
}
Here is possible layout (with some replicated components instead of your custom). Prepared with Xcode 12.1 / iOS 14.1
HStack{
Spacer()
Text("Picture")
.font(.custom("Pacifico-Regular",size: 50))
.padding()
.foregroundColor(Color.white)
.shadow(color: .white, radius: 10, x: 0, y: 0)
Spacer().overlay(
HStack {
Image(systemName: "1.circle").resizable()
.foregroundColor(Color.white)
.aspectRatio(contentMode: .fit)
.frame(width:30, height: 30)
Text("123")
.font(.custom("Pacifico-Regular",size: 20))
.foregroundColor(Color.white)
}
, alignment: .trailing)
}
You can use ZStack to embed two HStacks and align them separately.
They will be displayed on top of each other.
You align "Picture" text to the middle - it happens by default.
And then align second HStack with Spacer()
ZStack {
HStack{
Text("Picture")
.font(.custom("Pacifico-Regular",size: 50))
.background(Color.red)
.padding()
.shadow(color: .black, radius: 10, x: 0, y: 0)
}
HStack {
Spacer()
Image("1coin").resizable()
.aspectRatio(contentMode: .fit)
.frame(width:30, height: 30)
.background(Color.red)
Text("123")
.font(.custom("Pacifico-Regular",size: 20))
.background(Color.red)
}
}
If you want to keep all elements at the top, you will need another VStack + Spacer on top of ZStack:
VStack {
ZStack {
HStack{
Text("Picture")
.font(.custom("Pacifico-Regular",size: 50))
.background(Color.red)
.padding()
.shadow(color: .black, radius: 10, x: 0, y: 0)
}
HStack {
Spacer()
Image("1coin").resizable()
.aspectRatio(contentMode: .fit)
.frame(width:30, height: 30)
.background(Color.red)
Text("123")
.font(.custom("Pacifico-Regular",size: 20))
.background(Color.red)
}
}
Spacer()
}
I could not adjust the appearance of the Text Editor I created.text will have margins.
I tried to do it myself but I messed it up, I couldn't.I want it to be like the picture.
VStack {
TextEditor(text: $inputText)
.background(Color.black)
.frame(height:geometry.size.height / 3, alignment: .center)
.cornerRadius(25)
.border(Color.yellow, width: 5)
.lineSpacing(10)
.autocapitalization(.words)
.disableAutocorrection(true)
.padding()
}
Spacer().frame(height: geometry.size.height / 15)
VStack {
Button(action: {}, label: {
Text("Gönder")
.frame(width: geometry.size.width / 3, height: 50)
.padding(10)
.font(Font.system(size: 30, weight: .medium, design: .serif))
.foregroundColor(.white)
.background(RoundedRectangle(cornerRadius: 30))
.foregroundColor(.init(red: 45 / 255, green: 0 / 255, blue: 112 / 255))
})
}
First , for changing TextEditor background color
I could not find a SwiftUI 100% solution for that (maybe apple will support this in future ) , so you need to change every UITextView.appearance().backgroundColor in the app
init() {
UITextView.appearance().backgroundColor = UIColor.black
}
don't miss import UIKit
Then for corner radius , you need to use overlay modifier for a rounded corners
VStack {
TextEditor(text: $inputText)
.frame(height:geometry.size.height / 3, alignment: .center)
.lineSpacing(10)
.autocapitalization(.words)
.disableAutocorrection(true)
.padding()
}.overlay(
RoundedRectangle(cornerRadius: 25)
.stroke(Color.yellow, lineWidth: 5)
)
.padding()
I'm trying to give a shadow to Button using following code.
Code:
Button(action: {
}) {
Text("SIGN IN")
.font(.system(size: 17))
.fontWeight(.bold)
.foregroundColor(.green)
.frame(minWidth: 0, maxWidth: .infinity)
.padding()
.background(Color.white)
.clipped()
.overlay(
RoundedRectangle(cornerRadius: 25)
.stroke(lineWidth: 1)
.foregroundColor(.white)
)
}
.shadow(color: .gray, radius: 2, x: 0, y: 2)
Output:
In above image you can see that shadow is not proper.
How can I achieve the following?
I would do it like this
Note: the last .padding is not important, depending on where and how the button will be placed, here is just for demo.
Button(action: {
}) {
Text("SIGN IN")
.font(.system(size: 17))
.fontWeight(.bold)
.foregroundColor(.green)
.frame(minWidth: 0, maxWidth: .infinity)
.padding()
.background(
RoundedRectangle(cornerRadius: 25)
.fill(Color.white)
.shadow(color: .gray, radius: 2, x: 0, y: 2)
)
.padding()
}
Instead of setting the shadow to the Button directly try setting the shadow to your overlay like this:
Button(action: {
}) {
Text("SIGN IN")
.font(.system(size: 17))
.fontWeight(.bold)
.foregroundColor(.green)
.frame(minWidth: 0, maxWidth: .infinity)
.padding()
.background(Color.white)
.clipped()
.overlay(
RoundedRectangle(cornerRadius: 25)
.stroke(lineWidth: 1)
.foregroundColor(.white)
.shadow(color: .gray, radius: 2, x: 0, y: 2)
)
}
Let me know if it helps!
Use this if you only want the shadow to be on the bottom of your button.
Button(action: {
}) {
Text("SIGN IN")
.font(.system(size: 17))
.fontWeight(.bold)
.foregroundColor(.green)
.frame(minWidth: 0, maxWidth: .infinity)
.padding()
.background(Color.white)
.cornerRadius(25)
.shadow(color: .gray, radius: 2, x: 0, y: 2)
}