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()
}
}
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 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)
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)
}
Still working on SwiftUI, but I got a problem.
I created an Image with a dynamic frame, and I want a label which needs to be half width of the image (e.g Image width = 300; Label width 150)
In UIKit I should code something like this:
Label.widthAnchor.constraint(image.widthAnchor, multiplier: 1/2).isActive = true
I tried something similar in SwiftUI:
Image(systemName: "j.circle.fill")
.resizable()
.frame(width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.width)
Text("Placeholder").frame(width: Image.frame.width/2, height: 30)
But this doesn't work.
What shall I do?
Why not setting hard sizes for both then :
Image(systemName: "j.circle.fill")
.resizable()
.frame(width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.width)
Text("Placeholder")
.frame(width: UIScreen.main.bounds.width/2, height: 30)
If you want to change the whole size of the component in one place you could just do it like this :
struct MyView : View {
private var compWidth: CGFloat { UIScreen.main.bounds.width }
var body: some View {
VStack {
Image(systemName: "j.circle.fill")
.resizable()
.frame(width: compWidth, height: compWidth)
Text("Placeholder")
.frame(width: compWidth/2, height: 30)
}
}
}
Or, for a more elegant approach you could look into GeometryReader.