The code:
VStack(alignment: .trailing) {
Image("Useful")
.resizable()
.ignoresSafeArea()
.scaledToFill()
.frame(width: 105, height: 105)
.padding(.trailing, -60.0)
}
The problem is that image is not at the side and has a small gap near the image and widget as shown in the photo.
How to make this little gap disappear
:)
If I correctly understood your concern, here is possible solution
var body: some View {
Color.clear.overlay(
Image("plant")
.resizable()
.scaledToFill()
.frame(width: 105, height: 105)
, alignment: .bottomTrailing)
}
Related
UI on iPhone Pro Max here the UI is not in the right place
UI on iPhone Pro thats perfectly
Hello I am new to SwiftUI and have a question. I had to implement the UI with the Star and the Number Count. I did everything, but when I switch the phones my UI is miss placed depends on the iPhone I choose. How can I fix that ? I search in the Internet for Responsiveness in SwiftUI but it didn't really helped me. I thought also that SwiftUI does most of the Responsiveness because I know in UIKIT you have to declare the constraints by yourself. Thanks for helping me, the Code is below. I also have after the CustomerCardPoints an List which works perfectly but since I added the CustomerCardPoints there is a small space between the Views, if anybody has experience how can I fix that also? (Not Necessary)
var body: some View {
VStack(spacing: 0) {
shopModel.logo
.resizable()
.aspectRatio(contentMode: .fit)
.frame(maxWidth: 200, maxHeight: 100)
.padding([.top, .leading, .trailing])
Text(shopModel.name)
.fontWeight(.bold)
.padding()
CustomerCardPoints()
}
struct CustomerCardPoints: View {
var body: some View {
VStack(){
ZStack() {
Image("Slice")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(maxWidth: 180, maxHeight: 60)
.offset(x: 160, y: -127)
HStack(alignment: .firstTextBaseline) {
Text("22")
.font(.system(size: 19))
.fontWeight(.bold)
.foregroundColor(.white)
.offset(x: 237, y: -126)
Image("favoriten")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 110, height: 25)
.offset(x: 132, y: -120)
}
}
}
}
}
I am experiencing some very odd behavior from a Horizontal ScrollView, it seems as if the clickable frame of the cells are offset. For example, if you click on left half of the first cell it will register the click for the first cell, but if you click the right half of the first cell it will register a click on the second cell. I'm not sure why this is happening.
I've included the code below, you can copy and paste this code into a playground to reproduce the issue. Any ideas here?
struct TestView: View {
var image: String
var body: some View {
ZStack {
Image(systemName: image)
.resizable()
.aspectRatio(contentMode: .fill)
.frame(width: 104, height: 168)
.cornerRadius(8)
.clipped()
VStack {
Spacer()
Text("Testing")
.foregroundColor(Color.white)
.frame(alignment: .leading)
.padding(EdgeInsets(top: 0, leading: 10, bottom: 0, trailing: 10))
.shadow(radius: 5)
Text("1:40")
.foregroundColor(Color.white)
.frame(alignment: .leading)
.padding(EdgeInsets(top: 3, leading: 10, bottom: 10, trailing: 10))
.shadow(radius: 5)
}
.frame(width: 104, height: 168)
}
}
}
struct TestViewCollection: View {
var collection = ["tv", "faxmachine", "printer"]
var body: some View {
ScrollView {
HStack {
ForEach(collection, id: \.self) { image in
TestView(image: image)
.onTapGesture {
print(image)
}
}
}
}
}
}
PlaygroundPage.current.setLiveView(TestViewCollection())
The issue is that your images are not the same aspect ratio as the frame you have put them in, so they are overflowing the frame. The solution is pretty simple. Instead of using .clipped() which just clips what you can see, use .contentShape() which will will provide an area that the .tapGesture() will use as its tappable area. Like this:
Image(systemName: image)
.resizable()
.aspectRatio(contentMode: .fill)
.frame(width: 104, height: 168)
.cornerRadius(8)
.contentShape(Rectangle())
the problem is:
Image(systemName: image)
.resizable()
.aspectRatio(contentMode: .fill)
.frame(width: 104, height: 168)
.cornerRadius(8)
.clipped()
Change that .aspectRatio(contentMode: .fill). -> into .fit
if you just move .clipped() like this:
Image(systemName: image)
.resizable()
.aspectRatio(contentMode: .fill)
.clipped()
.frame(width: 104, height: 168)
You are going to see:
That's why is happening.
I need to align a UIImageView in a way that only top portion of the image is shown.
Original Image:-
I achieved Image from below Code:-
Code:-
Image("ImageDemo")
.resizable()
.scaledToFill()
.frame(height: 120, alignment: .center)
.clipped()
.cornerRadius(20, corners: [.topLeft, .topRight])
.padding(.bottom)
Can someone please explain to me how to show image with top portion only, I've tried to implement by above but no results yet.
Any help would be greatly appreciated.
Thanks in advance.
Use alignment: .top it will fix your issue.
struct ContentView: View {
var body: some View {
Image("Your Image Here!")
.resizable()
.scaledToFill()
.cornerRadius(20)
.frame(height: 120, alignment: .top) // <<: Here
.clipped()
.padding()
}
}
I notice when i use an overlay on a rounded rectangle that there are some parts that are not overlayed, or maybe i'm doing it wrong
and then i tried to switch the view to a regular Iphone SE display, and i notice something that i really dislike, the top is not convered by red
Is there a way to fix it?? or any keyword for me to search? cuz there's probably someone with the same question as i am
Thanks
RoundedRectangle(cornerRadius:25)
.frame(height: 350, alignment:.center)
.foregroundColor(Color("Kolor1"))
.overlay(
ZStack {
Text("Makan")
HStack {
Spacer().frame(width:80)
VStack {
Spacer()
Image("Labtek")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 360, height: 260, alignment:.center)
}
}
}
)
.edgesIgnoringSafeArea(.top)
I have a google image stored that have transparent background. Because the blue part of the logo is almost the same as the background (as the 1st image) where is at, I want to add a white circle behind it.
To do it, this is what I did:
ZStack{
Circle().frame(width: 40, height: 40)
.background(Color.white)
Image("Google")
.renderingMode(.original)
.resizable()
.frame(width: 35, height: 35)
.padding(.all, 3)
}
But, what I'm getting is this, as if the center of the image doesn't " recognizes" there's a white circle (its also displaying a square instead of a circle) in front of the blue background :
How can I solve this problem?
You can use clipShape to make it a circle like this:
ZStack{
Circle().frame(width: 40, height: 40)
.background(Color.white)
.clipShape(Circle())
Image("Google")
.renderingMode(.original)
.resizable()
.frame(width: 35, height: 35)
.padding(.all, 3)
}
If you want to get ride of the circle background and keep just it's line, you can use .stroke() as shown below:
ZStack{
Circle()
.stroke()
.frame(width: 40, height: 40)
.background(Color.white)
.clipShape(Circle())
Image("Google")
.renderingMode(.original)
.resizable()
.frame(width: 35, height: 35)
.padding(.all, 3)
}
After reading the answers given, I got an easier way to solve it. I just changed .background(Color.white) to .foregroundcolor(.white)