I tried to do an overlay, but it doesn't work ,
That part on the bottom keeps bugging me.
is there any other method beside doing an overlay of a rectangle??
ZStack {
RoundedRectangle(cornerRadius: 15)
.foregroundColor(Color("Hello"))
.frame(height: 700, alignment: /*#START_MENU_TOKEN#*/.center/*#END_MENU_TOKEN#*/)
.overlay(
VStack {
RoundedRectangle(cornerRadius: 15)
.frame(width:381, height: 130.36, alignment: /*#START_MENU_TOKEN#*/.center/*#END_MENU_TOKEN#*/)
.shadow(radius: 4,y:3)
.foregroundColor(.white)
.overlay(
HStack {
Button(action: /*#START_MENU_TOKEN#*//*#PLACEHOLDER=Action#*/{}/*#END_MENU_TOKEN#*/) {
ButtonBig(ButtonText: "Keuangan",ButtonIcon: "creditcard.fill")
}
Button(action: /*#START_MENU_TOKEN#*//*#PLACEHOLDER=Action#*/{}/*#END_MENU_TOKEN#*/) {
ButtonBig(ButtonText: "Penjurusan",ButtonIcon: "figure.walk")
}
Button(action: /*#START_MENU_TOKEN#*//*#PLACEHOLDER=Action#*/{}/*#END_MENU_TOKEN#*/) {
ButtonBig(ButtonText: "Status",ButtonIcon: "person.crop.circle.badge.plus")
}
}.buttonStyle(PlainButtonStyle()))
RoundedRectangle(cornerRadius: 15)
.frame(width:381, height: 535, alignment: /*#START_MENU_TOKEN#*/.center/*#END_MENU_TOKEN#*/)
.shadow(radius: 4,y:3)
.foregroundColor(.white)
}
I wanted to create something like that basically
if there's a library for it, please do tell me. Thank you
Try these 2 modifiers:
.background(RoundedRectangle(cornerRadius: 10))
.clipped()
Related
I'm trying to get an image of a logo to be a button. I'm new to Swift/SwiftUI and the resources I've found so far seem to be outdated information. I have the image loaded in to see that I can get the image in there, and I've created a button in the location I want it, I just want to combine the two. Code is below.
struct ContentView: View {
var body: some View {
VStack {
Image("logo1024")
.resizable()
.padding()
.frame(width: 120, height: 120)
Group{
Button(action: {
print("tapped!")
}, label: {
Text("+")
.foregroundColor(.white)
.frame(width: 40, height: 40)
.background(Color.green)
.cornerRadius(15)
.padding()
})
}.frame(maxHeight: .infinity, alignment: .bottom)
}
}
}
Just place image instead of Text into button (all other modifiers on your needs), like
Group{
Button(action: {
print("tapped!")
}, label: {
Image("logo1024")
.resizable()
.padding()
.frame(width: 120, height: 120)
.foregroundColor(.white)
.frame(width: 40, height: 40)
.background(Color.green)
.cornerRadius(15)
.padding()
})
}.frame(maxHeight: .infinity, alignment: .bottom)
I am beginner in SwiftUI, updating my app and remaking it on SWIFTUI.
Here is the screenshot what I had to do...
Screenshot
I've successfully done actually the same, but the problem is that I have a bunch of this white boxes with text and etc. the Idea was to make it using foreach loop, and I didn't realize that there Rectangles, and I will be needed to always change the number of them. How can I make it using foreach or maybe there is another way of doing this? Here is the screenshot what I've done on Swift UI and the code.
SwiftUI screenshot
VStack(spacing: 32){
HStack(alignment: .center,spacing: 8){
Rectangle()
.frame(width: 24, height: .infinity)
.foregroundColor(Color(red: 0.098, green: 0.303, blue: 0.476))
.padding(.leading, 20)
.padding(.top, 28)
.padding(.bottom, 12)
Rectangle()
.frame(width: 24, height: .infinity)
.foregroundColor(Color(red: 0.098, green: 0.303, blue: 0.476))
.padding(.trailing, 20)
.padding(.top, 28)
.padding(.bottom, 12)
Spacer()
Image("high_volume_blue")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 32, height: 32, alignment: .center)
.padding(.top, 8)
.padding(.trailing, 8)
}
Text(NSLocalizedString("SoundSignals_In_Description_1", comment: ""))
.font(.system(size: 20))
.fontWeight(.light)
.foregroundColor(Color.black)
.multilineTextAlignment(.center)
.padding(.horizontal, 16)
.padding(.bottom, 20)
}
.frame(width: UIScreen.screenWidth - 25, height: .infinity, alignment: .center)
.background(Color.white)
This is only the white box code.
Thanks!
if you want to display a list of Text views you can do this:
ScrollView {
VStack(alignment: .leading, spacing: 10) {
ForEach(boxes, id: \.self) { box in //Boxes is whatever Array of values you have to display
Text("Write your text here")
.font(.title)
.onTapGesture { } // Also a possibility to tap on each box and execute some functionality
// You can add here more views: Rectangle() or Image() or whatever
}
}
}
.padding(25)
.background(.white)
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)
I would like to create a button with a rounded rectangle view with a border, and a background color.
I wrote this so far :
Button(action: {
}, label: {
Text("TAP ME")
.foregroundColor(Color.blue)
})
.frame(height: 50)
.frame(maxWidth: .infinity)
.overlay(
RoundedRectangle(cornerRadius: 50, style: .continuous)
.strokeBorder(Color.blue, lineWidth: 1)
)
I tried to add .background(Color.red) at many different places, but here is what I get everytime:
What to do here?
Thank you for your help
As far as I understood your needs, here is a solution
Button(action: {
}, label: {
Text("TAP ME")
.foregroundColor(Color.blue)
})
.frame(height: 50)
.frame(maxWidth: .infinity)
.background(
RoundedRectangle(cornerRadius: 50, style: .continuous).fill(Color.red)
)
.overlay(
RoundedRectangle(cornerRadius: 50, style: .continuous)
.strokeBorder(Color.blue, lineWidth: 1)
)
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.