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)
Related
A whiteness is seen in the area drawn with the red line. If I change the background color of the most inclusive Vstack, that white area changes.
Deleting spacer() lines doesn't work.
Why is there a gap even though there is no space in between?
struct TabbarView: View {
var body: some View {
VStack{
Spacer()
ZStack{
Color.orange.opacity(0.5)
VStack(spacing: 0){
Text("Home")
.padding()
}
}
Spacer()
HStack{
VStack{
Image(systemName: "homekit")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: UIScreen.main.bounds.size.width / 15, height: UIScreen.main.bounds.size.height / 25)
}
}
.frame(width: UIScreen.main.bounds.size.width, height: UIScreen.main.bounds.size.height / 13)
.background(Color.purple)
}
.ignoresSafeArea()
// .background(Color.purple.shadow(radius: 2))
}
}
enter image description here
you can add for VStack:
VStack {}
.frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity, alignment: .center)
updated:
struct ContentView: View {
var body: some View {
ZStack {
Color.orange.opacity(0.5)
VStack {
Spacer()
VStack(spacing: 0){
Text("Home")
.padding()
}
Spacer()
HStack {
VStack {
Image(systemName: "homekit")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 25, height: 25, alignment: .center)
.frame(width: UIScreen.main.bounds.size.width / 15, height: UIScreen.main.bounds.size.height / 25)
}
}
.frame(width: UIScreen.main.bounds.size.width, height: UIScreen.main.bounds.size.height / 13)
.background(Color.purple)
}
}
.ignoresSafeArea()
.frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
}
}
you used nesting incorrectly and there is a native TabView for tabs
result:
I am learning SwiftUI and was trying to replicate an app. I ran into a problem where the view is taking up space outside the frame as well.
It looks like this:
My code for the view is:
struct LessonsScreen: View {
var body: some View {
VStack (alignment: .leading) {
HStack {
Image(systemName: "arrow.left")
.font(.system(size: 30))
Spacer()
Image(systemName: "slider.horizontal.3")
.font(.system(size: 30))
}
Text("A2 - Elementary")
.font(.system(size: 28, weight: .semibold))
.padding()
LessonCompletion(lessonNum: 1, text: "How are you?", color: .purple)
Image("discussion")
.cornerRadius(20)
.frame(width: UIScreen.main.bounds.width, alignment: .center)
LessonCompletion(lessonNum: 2, text: "Pronunciation", color: .green)
LessonCompletion(lessonNum: 3, text: "Demonstrative pronouns", color: .red)
LessonCompletion(lessonNum: 4, text: "Present continuous", color: .yellow)
Button(action: {}, label: {
Text("Get started")
.foregroundColor(.white)
.frame(width: UIScreen.main.bounds.width - 150, height: 70, alignment: .center)
.background(Color.black)
.cornerRadius(10)
.frame(width: UIScreen.main.bounds.width, alignment: .center)
.padding()
})
}
}
}
Can anyone tell me where I messed up the formatting?
If you like to align the button in center in native SwiftUI way, you can use view modifier Spacer() inside HStack() instead of .frame, like this: (and same with 'discussion' Image)
...
Button(action: {}, label: {
HStack{
Spacer()
Text("Get started")
.foregroundColor(.white)
.frame(width: UIScreen.main.bounds.width - 150, height: 70, alignment: .center)
.background(Color.black)
.cornerRadius(10)
.padding()
Spacer()
}
})
...
In your button replace
.frame(width: UIScreen.main.bounds.width, alignment: .center)
with
.frame(maxWidth: .infinity, alignment: .center)
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 have a list of buttons that display perfectly on iOS 13 using SwiftUI, but on iOS 14 it cuts the content off where the screen ends.
Has anything changed with regards to how HStacks renders what isn't on the screen? I used to scroll and be able to see all the buttons.
I will attach some screenshots and the code.
var body: some View {
VStack(alignment: .leading, spacing: 0){
Text("Select a venue type")
.font(.custom("MavenProBold", size: 16))
.padding(.leading, 16)
.padding(.top, 18)
.foregroundColor(Color.black)
ScrollView(.horizontal, showsIndicators: false) {
HStack(alignment: .center, spacing: 4, content: {
Button(action: {
self.selectedButtonIndex = 0
})
{
VStack(alignment: .center, spacing: 0, content: {
ZStack(alignment: .bottomTrailing){
Image(systemName: "star.fill")
.frame(width: circleFrameSize, height: circleFrameSize, alignment: .center)
.font(.title)
.background(Color(hexString: "#1A88FF"))
.foregroundColor(Color.white)
.clipShape(Circle())
}
Text("Things to do")
.padding(.top, 8)
.font(.custom("MavenProBold", size: 12))
.multilineTextAlignment(.center)
.lineLimit(50)
})
.frame(width: 80, height: 80, alignment: .center)
.padding(.all, 10)
.foregroundColor(Color.black)
}
Button(action: {
self.selectedButtonIndex = 0
})
{
VStack(alignment: .center, spacing: 0, content: {
ZStack(alignment: .bottomTrailing){
Image(systemName: "star.fill")
.frame(width: circleFrameSize, height: circleFrameSize, alignment: .center)
.font(.title)
.background(Color(hexString: "#1A88FF"))
.foregroundColor(Color.white)
.clipShape(Circle())
}
Text("Things to do")
.padding(.top, 8)
.font(.custom("MavenProBold", size: 12))
.multilineTextAlignment(.center)
.lineLimit(50)
})
.frame(width: 80, height: 80, alignment: .center)
.padding(.all, 10)
.foregroundColor(Color.black)
}
Button(action: {
self.selectedButtonIndex = 0
})
{
VStack(alignment: .center, spacing: 0, content: {
ZStack(alignment: .bottomTrailing){
Image(systemName: "star.fill")
.frame(width: circleFrameSize, height: circleFrameSize, alignment: .center)
.font(.title)
.background(Color(hexString: "#1A88FF"))
.foregroundColor(Color.white)
.clipShape(Circle())
}
Text("Things to do")
.padding(.top, 8)
.font(.custom("MavenProBold", size: 12))
.multilineTextAlignment(.center)
.lineLimit(50)
})
.frame(width: 80, height: 80, alignment: .center)
.padding(.all, 10)
.foregroundColor(Color.black)
}
Button(action: {
self.selectedButtonIndex = 0
})
{
VStack(alignment: .center, spacing: 0, content: {
ZStack(alignment: .bottomTrailing){
Image(systemName: "star.fill")
.frame(width: circleFrameSize, height: circleFrameSize, alignment: .center)
.font(.title)
.background(Color(hexString: "#1A88FF"))
.foregroundColor(Color.white)
.clipShape(Circle())
}
Text("Things to do")
.padding(.top, 8)
.font(.custom("MavenProBold", size: 12))
.multilineTextAlignment(.center)
.lineLimit(50)
})
.frame(width: 80, height: 80, alignment: .center)
.padding(.all, 10)
.foregroundColor(Color.black)
}
Button(action: {
self.selectedButtonIndex = 0
})
{
VStack(alignment: .center, spacing: 0, content: {
ZStack(alignment: .bottomTrailing){
Image(systemName: "star.fill")
.frame(width: circleFrameSize, height: circleFrameSize, alignment: .center)
.font(.title)
.background(Color(hexString: "#1A88FF"))
.foregroundColor(Color.white)
.clipShape(Circle())
}
Text("Things to do")
.padding(.top, 8)
.font(.custom("MavenProBold", size: 12))
.multilineTextAlignment(.center)
.lineLimit(50)
})
.frame(width: 80, height: 80, alignment: .center)
.padding(.all, 10)
.foregroundColor(Color.black)
}
})
.padding(.leading, 8)
.padding(.trailing, 8)
.padding(.bottom, 8)
}
}
}
I also met this problem. It happens when you have a customized clipShape outside of ScrollView. By customized I mean customized Path of the shape.
From my test, when you use builtin shapes, it works fine, for example:
view.clipShape(Circle())
When you use customized shape but with builtin Path, it also works fine, for example:
view.clipShape(CustomShape())
// which CustomShape is something like:
struct CustomShape: Shape {
func path(in rect: CGRect) -> Path {
return Path(roundedRect: rect, cornerSize: CGSize(width: 10, height: 10)
}
}
But when you use a customized Path in your CustomShape, this issue happens:
view.clipShape(CustomShape())
// which CustomShape is something like:
struct CustomShape: Shape {
func path(in rect: CGRect) -> Path {
let path = UIBezierPath(roundedRect: rect,
byRoundingCorners: corners,
cornerRadii: CGSize(width: radius, height: radius))
return Path(path.cgPath)
}
}
I also tried to draw the path manually(use move, addLine, addArc), it doesn't work.
So the workaround is to use builtin Path in your customized Shape. I guess this is a bug of iOS 14, because it works fine on iOS 13.
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)
}