When I drag the rectangle to the left, the symbol is under the rectangle but on the right the symbol is over the rectangle, when I drag it to the right. I know, that the hierarchy of the HStack decides the layer but if I would do the right symbol over the rectangle, then both of the symbols are on the right side. I'm new at SwiftUI
HStack(spacing: 0.0){
Image(systemName: "lessthan.square")
.resizable()
.frame(width: 20.0, height: 20.0)
.padding(.leading, 30.0)
ZStack(alignment: .center) {
Group {
Rectangle()
.cornerRadius(20.0)
.frame(width: 250, height: 150)
.foregroundColor(Color(.white))
.position(rectPosition)
.shadow(radius: 5)
VStack{
Text("i")
.font(.system(size: 30))
Text("l")
.font(.system(size: 25))
}.position(rectPosition)
}.gesture(DragGesture().onChanged({ value in
self.rectPosition = CGPoint(x: value.location.x, y: 130)
}))
}
Image(systemName: "greaterthan.square")
.resizable()
.frame(width: 20.0, height: 20.0)
.padding(.trailing, 30.0)```
zIndex should help you... add it to ZStack
HStack {
Image(...)
ZStack {
...
}.zIndex(1) // << here !!
Image(...)
}
Related
I'm trying to make a converter app using SwiftUI. I added navigationlinks on the Home Screen these buttons go to the right places,no problem until here. However, I couldn't position it.
Currently, when I position them with .position, they appear in different places on different devices.
How should I do the positioning here?
I want to provide an image that will be the same on all devices as in the screenshot.
Thanks for your help.
import SwiftUI
struct ContentView: View {
var body: some View {
NavigationView{
VStack() {
// WEIGHT * MASS
NavigationLink(destination: UnitView()) {
Image(systemName: "scalemass")
.font(.system(size: 60))
.padding()
.frame(width: 150, height: 150, alignment: .center)
.background(Rectangle().fill(Color.purple.opacity(0.5))
.shadow(radius: 3)).cornerRadius(20)
.foregroundColor(.black)
.overlay(Text("Mass")
.foregroundColor(.black)
.padding()
.font(.system(size: 22)),
alignment: .bottom )}
.position(x:110, y:100)
//DISTANCE *
NavigationLink(destination: DistanceView()) {
Image(systemName: "figure.walk")
.font(.system(size: 60))
.padding()
.frame(width: 150, height: 150, alignment: .center)
.background(Rectangle().fill(Color.orange.opacity(0.5))
.shadow(radius: 3)).cornerRadius(20)
.foregroundColor(.black)
.overlay(Text("Distance")
.foregroundColor(.black)
.padding()
.font(.system(size: 22)),
alignment: .bottom )}
.position(x:110, y:100)
//TEMPERATURE *
NavigationLink(destination: TemperatureView()) {
Image(systemName: "thermometer.sun")
.font(.system(size: 56))
.padding()
.frame(width: 150, height: 150, alignment: .center)
.background(Rectangle().fill(Color.yellow.opacity(0.5))
.shadow(radius: 3)).cornerRadius(20)
.foregroundColor(.black)
.overlay(Text("Temperature")
.foregroundColor(.black)
.padding()
.font(.system(size: 21)),
alignment: .bottom )}
.position(x:280, y:-84)
// TIME *
NavigationLink(destination: TimeView()) {
Image(systemName: "clock")
.font(.system(size: 60))
.padding()
.frame(width: 150, height: 150, alignment: .center)
.background(Rectangle().fill(Color.blue.opacity(0.5))
.shadow(radius: 3)).cornerRadius(20)
.foregroundColor(.black)
.overlay(Text("Time")
.foregroundColor(.black)
.padding()
.font(.system(size: 21)),
alignment: .bottom ) }
.position(x:280, y:-444)
}
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
Sample
import SwiftUI
struct ContentView: View {
var body: some View {
NavigationView {
VStack {
Image("example-image")
.resizable()
.frame(width: 100, height: 100)
.cornerRadius(10)
NavigationLink(destination: DetailView()) {
Text("View Details")
.foregroundColor(.white)
.padding()
.background(Color.blue)
.cornerRadius(10)
}
.padding(.top, 20)
}
}
}
}
struct DetailView: View {
var body: some View {
Text("Details View")
}
}
In this example, we use a VStack to position an image and a NavigationLink. The image is resized to 100x100 and given a corner radius of 10 using the frame and cornerRadius modifiers. The NavigationLink leads to a DetailView that simply displays the text "Details View". The text inside the NavigationLink is styled to have white foreground color, padding, a blue background color, and a corner radius of 10. The .padding(.top, 20) adds some space between the image and the link.
Here is my code:
import SwiftUI
struct TrendingView : View {
#State var selectedTab: Tabs = .hot
#State private var searchText = ""
var body: some View {
NavigationView {
VStack {
HStack {
Text(" Trending")
.font(.largeTitle)
.frame(width: 175, height: 50, alignment: .leading)
.overlay(
RoundedRectangle(cornerRadius: 5)
.stroke(.black, lineWidth: 2)
)
.italic()
.fontWeight(.heavy)
.foregroundColor(Color(hue: 1.0, saturation: 0.977, brightness: 0.985))
.offset(x: -75, y: -25)
.padding(.bottom, -20)
NavigationLink(destination: testT()) {
Image(systemName: "magnifyingglass.circle.fill")
.resizable()
.scaledToFit()
.frame(width: 40, height: 40)
.foregroundColor(.black)
.padding(.bottom, -20)
}
.offset(x: 50, y: -25)
.padding(.leading, 5.0)
}
ScrollView {
VStack {
Text("Hot Items 🔥")
.bold()
.italic()
.offset(x: 5)
.frame(width: 120, height: 25, alignment: .leading)
.overlay(
RoundedRectangle(cornerRadius: 5)
.stroke(.black, lineWidth: 2)
)
.background(.yellow)
.offset(x: -130, y: 5)
ScrollView(.horizontal) {
HStack {
NavigationLink(destination: ImageTest()) {
Image("testpic1")
.resizable()
.frame(width: 200, height: 200)
}
NavigationLink(destination: ImageTest()) {
Image("testpic3")
.resizable()
.frame(width: 200, height: 200)
}
}.offset(y: 30)
}
}
}
There seems to be some error with scrollview above my vstack as it randomly causes all the content on this view to shift downwards when switching to and from other views.Ive tried removing the scrollview and the error disappears and also tried changing it around in other places but I still get the error Can anybody point me in the right direction? Thanks
Fixed, added to the bottom of my code and it seems like the issue is solved
.navigationBarTitle(Text(""), displayMode: .inline)
.navigationBarHidden(true)
I'm having some trouble understanding how to properly align items in top of each other:
So I have the following VStack:
VStack(spacing: 0) {
Text("\(placeC.places.count)")
Image("map-pin-full-cluster-1")
.renderingMode(.template)
.resizable()
.frame(width: 35, height: 35)
.foregroundColor(.brown)
} //: END VStack
Which produces the following output:
What is the best way to have the number inside the circle? Is there a recommended SwiftUI builder that you all use that I can explore?
Typically you would use an .overlay:
Image("map-pin-full-cluster-1")
.renderingMode(.template)
.resizable()
.frame(width: 35, height: 35)
.foregroundColor(.brown)
.overlay(alignment: .top) {
Text("\(placeC.places.count)")
}
or a ZStack:
ZStack(alignment: .top) { // other alignments: .center, .bottom, .leading, .trailing
Image("map-pin-full-cluster-1")
.renderingMode(.template)
.resizable()
.frame(width: 35, height: 35)
.foregroundColor(.brown)
Text("\(placeC.places.count)")
.padding(.top, 4) // adjust this to move the text up/down
}
I build the following View:
NavigationView{
VStack(spacing: 120){
HStack{
Spacer()
NavigationLink(destination: LoginView()){
Image(systemName: "person.crop.circle")
.resizable()
.frame(width: 40, height: 40)
.foregroundColor(.primary)
.padding()
}
}
VStack{
Image("pic1")
.resizable()
.frame(width: 200, height: 160)
.padding()
Image(colorScheme == .dark ? "pic2" : "pic3")
.resizable()
.frame(width: 200, height: 65)
.padding()
}
Spacer(minLength: 250)
}
}
I need this Spacer(minLength: 250) to get the image (circle) on the top left corner. But when I do this, the Image does not work as a NavigationLink. When I delete this Spacer everything is centered and the Link works. How can I get it in the position I want and get the link work?
use navigationBarHidden(true):
NavigationView {
VStack(spacing: 120) {
...
Spacer() // no need for minHeight
}
.navigationBarHidden(true) // << here
}
not sure if you have got your issue sorted
but based on your question, if I understand it properly you want to have the Image(systemName: "person.crop.circle") in the top left corner when clicked it should navigate to the new View
if you want the image to be in the top right corner instead you just need to change the placement of the ToolbarItem
i can't post any images yet so I included a gif link
here is the code, i use the ToolbarItem and add NavigationLink in it
let me know if this help
Cheers,
Jono
NavigationView{
VStack(spacing: 120){
VStack{
Image("pic1")
.resizable()
.frame(width: 200, height: 160)
.padding()
Image(colorScheme == .dark ? "pic2" : "pic3")
.resizable()
.frame(width: 200, height: 65)
.padding()
}
Spacer(minLength: 250)
}
.toolbar {
ToolbarItem(placement: .navigationBarLeading){
NavigationLink(destination: LoginView()){
Image(systemName: "person.crop.circle")
.resizable()
.frame(width: 40, height: 40)
.foregroundColor(.primary)
.padding()
}
}
}
}
I have a view and I want to add two icons to it, at top right side and at bottom right side. I managed to do that:
I used two ZStacks:
ZStack(alignment: .bottomTrailing)
{
ZStack(alignment: .topTrailing)
{
Image(item.thumbnailImage)
.clipShape(Circle())
.overlay(Circle()
.stroke(Color.gray, lineWidth: 2))
if item.isFavorite
{
Image(systemName: "star.fill")
.foregroundColor(.yellow)
.offset(x: 7, y: -7)
}
}
if item.ordered
{
Image(systemName: "checkmark.square.fill")
.offset(x: 7, y: 7)
}
}
But I have a feeling that there should be a simpler way than nesting ZStacks inside. Besides looks like the small icons don't have their x-centers aligned. I can probably fix that by changing an offset but that would make the code even more clumsy.
Is there a simpler way?
Use only one Zstack and wrap the two icons in a VStack.
ZStack(alignment: .trailing) {
Circle()
.stroke(Color.gray, lineWidth: 2)
VStack {
Image(systemName: "star.fill")
Spacer()
Image(systemName: "checkmark.square.fill")
}
// Adjust the position of star and checkmark
.offset(x: -10)
}
.frame(width: 100, height: 100)
You can use the overlay modifier, like this:
import PlaygroundSupport
import SwiftUI
PlaygroundPage.current.setLiveView(
Circle()
.strokeBorder(Color.gray, lineWidth: 6)
.frame(width: 44, height: 44)
.overlay(
Image(systemName: "star.fill")
.foregroundColor(.yellow)
.offset(x: 7, y: -7),
alignment: .topTrailing)
.overlay(
Image(systemName: "checkmark.square.fill")
.offset(x: 7, y: 7),
alignment: .bottomTrailing)
.padding()
)
If your deployment target is iOS 15 or later (or an aligned version of macOS, tvOS, or watchOS), you can use the ViewBuilder version of overlay instead:
import PlaygroundSupport
import SwiftUI
PlaygroundPage.current.setLiveView(
Circle()
.strokeBorder(Color.gray, lineWidth: 6)
.frame(width: 44, height: 44)
.overlay(alignment: .topTrailing) {
Image(systemName: "star.fill")
.foregroundColor(.yellow)
.offset(x: 7, y: -7)
}
.overlay(alignment: .bottomTrailing) {
Image(systemName: "checkmark.square.fill")
.offset(x: 7, y: 7)
}
.padding()
)
We can use lorem's suggestion to align the symbol centers using a VStack. Then we can factor out the two offset modifiers into a padding on the VStack.
import PlaygroundSupport
import SwiftUI
PlaygroundPage.current.setLiveView(
Circle()
.strokeBorder(Color.gray, lineWidth: 6)
.frame(width: 44, height: 44)
.overlay(
VStack(spacing: 0) {
Image(systemName: "star.fill")
.foregroundColor(.yellow)
Spacer()
Image(systemName: "checkmark.square.fill")
}.padding([.top, .bottom, .trailing], -7),
alignment: .trailing)
.padding()
)