The color.red is my widgets main background but I would like to add a black background to the top behind the text "Line1" and image "2". So basically a black bar that stretches across the top under the text and image.
var body: some View {
ZStack {
Color.red
VStack(alignment: .leading, spacing: 0) {
HStack {
Text("Line1")
.foregroundColor(.orange)
.bold()
.font(.system(size: 17.5))
.padding(.top)
Spacer()
Image("2")
.resizable()
.frame(width: 25, height: 25)
.padding(.top)
}
.padding(.horizontal)
.border(Color.green)
VStack(alignment: .leading) {
Image("2")
.resizable()
.frame(width: 67, height: 30)
Text("State")
.foregroundColor(Color.green)
.font(.system(size: 15))
Text("1")
.foregroundColor(Color.blue)
.font(.system(size: 10))
.opacity(0.5)
Spacer()
Spacer()
}
.padding(.horizontal)
.border(Color.blue)
}
}
}
You can add a .background modifier to your first HStack:
HStack {
//content here
}
.padding(.horizontal)
.border(Color.green)
.background(Color.black)
Keep in mind that order of modifiers is important, so if you put the background before the padding, the padding will not have that background color -- that's why I used it last.
Related
So I have an HStack nested inside of a VStack inside of a ScrollView and I am trying to center the middle photos in a straight line. As you can see in the photo, the pictures are offset based on the size of the text label to the left. (The longer the word, the more the images are offset to the right). I want to have the images be centered in the middle of the HStack in a way where they are all perfectly aligned on top of each other.
The format of the HStack should be (Label - Image - Label) and I want the two labels to be on the far left/right of the image touching the sides of the screen.
I am currently using two Spacer() to do the job but it creates an offset.
Here is what it looks like right now (unaligned)
Here is the code of my view that holds the scrollview and vstack:
ScrollView(.vertical){
VStack(alignment: .center, spacing: 5){
ForEach(weatherViewModel.dailyDataArray){
DailyCell(dailyData: $0)
.background(Color.clear)
.padding(10)
}
}
}
And here is the code for my CellView
struct DailyCell: View {
let dailyData: DailyData
var body: some View {
HStack(alignment: .center){
Text(dailyData.time)
.fontWeight(.semibold)
.foregroundColor(Color(UIColor.white))
.font(.system(size: 16))
Spacer()
Image(dailyData.icon)
.resizable()
.scaledToFit()
.frame(width: 25, height: 25, alignment: .center)
.multilineTextAlignment(.leading)
Spacer()
HStack(spacing: 10){
Text(dailyData.lowtemp + "°")
.fontWeight(.regular)
.foregroundColor(Color(UIColor.white))
.font(.system(size: 16))
Text(dailyData.hightemp + "°")
.fontWeight(.regular)
.foregroundColor(Color(UIColor.white))
.font(.system(size: 16))
}
}
}
}
Wrapping everything in a geometryreader and assigning relative width to your textviews should do the trick:
var body: some View {
//decide which image to show
GeometryReader{ readerProxy in <- add this
HStack(alignment: .center){
Text(dailyData.time)
.fontWeight(.semibold)
.foregroundColor(Color(UIColor.white))
.font(.system(size: 16))
.frame(width: readerProxy.size.width / 3, alignment: .left) <- add this
Spacer()
Image(dailyData.icon)
.resizable()
.scaledToFit()
.frame(width: 25, height: 25, alignment: .center)
.multilineTextAlignment(.leading)
Spacer()
HStack(spacing: 10){
Text(dailyData.lowtemp + "°")
.fontWeight(.regular)
.foregroundColor(Color(UIColor.white))
.font(.system(size: 16))
Text(dailyData.hightemp + "°")
.fontWeight(.regular)
.foregroundColor(Color(UIColor.white))
.font(.system(size: 16))
}
.frame(width: readerProxy.size.width / 3, alignment: .right) <- add this
}
}
}
One possibility is to use LazyVGrid :
struct HStackCenterCell: View {
var weatherViewModel = WeatherViewModel();
let columns: [GridItem] = Array(repeating: .init(.flexible()), count: 3) // 3 columns LazyVGrid
var body: some View {
ScrollView(.vertical){
// Lazy grid to have columns
LazyVGrid(columns: columns) {
ForEach(weatherViewModel.dailyDataArray){
DailyCell(dailyData: $0)
.background(Color.clear)
.padding(10)
}
}
}
}
}
struct DailyCell: View {
let dailyData: DailyData
var body: some View {
// need to suppress global HStack and Spacers
HStack { // HStack to align day on left
Text(dailyData.time)
.fontWeight(.semibold)
.font(.system(size: 16)).multilineTextAlignment(.leading)
Spacer()
}
// For my tests i used SF symbols
Image(systemName: dailyData.icon)
.resizable()
.scaledToFit()
.frame(width: 25, height: 25, alignment: .center)
.multilineTextAlignment(.leading)
HStack(spacing: 10)
{
Text(dailyData.lowtemp + "°")
.fontWeight(.regular)
.font(.system(size: 16))
Text(dailyData.hightemp + "°")
.fontWeight(.regular)
.font(.system(size: 16))
}
}
Note : I removed white foreground because my background is white
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’m trying to align the bottom of two Text but the larger one looks like thismy widget looks like this. I don’t know why there’s still some space below this Text view.
This is my code:
var body: some View {
GeometryReader{geometry in
ZStack(alignment: .center){
Image("background")
.resizable()
VStack(){
HStack(alignment: .bottom){
Text("3")
.lineLimit(1)
.font(.bold(.system(size: 100))())
.minimumScaleFactor(0.1)
.foregroundColor(Color.white)
.frame(width: nil, height: geometry.size.height/3, alignment: .bottom)
.lineLimit(1)
.shadow(radius: 2)
Text("cups")
.foregroundColor(Color.white)
.font(.system(size: 12))
.shadow(radius: 2)
}
Text("Next cup on")
.foregroundColor(Color.white)
.font(.system(size: 10))
.shadow(radius: 2)
.opacity(0.5)
Text("10 : 00")
.foregroundColor(Color.white)
.font(.system(size: 12))
.shadow(radius: 1)
.opacity(0.5)
}
}
}
}
What I want is the number 3’s bottom aligned to “cups”’s bottom.
Thanks!
Instead of .bottom, you can use .lastTextBaseline as your HStack alignment:
HStack(alignment: .lastTextBaseline) {
Text("Hello").font(.system(size: 40))
Text("World").font(.system(size: 10))
}
So basically this is my code.
Text("Melbourne, Victoria")
.font(.largeTitle)
.fontWeight(.bold)
.foregroundColor(Color.white)
.padding(.bottom, 30)
Image(systemName: "moon.fill")
.foregroundColor(Color.white)
.font(.system(size: 60))
Text("Today")
.font(.title)
.fontWeight(.medium)
.foregroundColor(Color.white)
Text("34°C")
.font(.title3)
.fontWeight(.medium)
.foregroundColor(Color.white)
Spacer()
HStack {
Image(systemName: "sun.max.fill")
.foregroundColor(Color.yellow)
.font(.system(size: 40))
.padding(.bottom, 550)
Text("Mon 34°C")
.font(.title)
.fontWeight(.medium)
.foregroundColor(Color.white)
.padding(.bottom, 550)
}
}
.background(
Image("night")
.ignoresSafeArea()
)
I want to make more of the days in this weather app each with it's on SF Symbol and everything is inside this VStack. And the days and SF symbols are inside a HStack to keep them horizontal. But if I want to put more of those the next time I do it they go next to each other but the symbol goes on top look at this.
This is the image with only 1 of those days
And this one is when I put more than 1 but its next to each other when I want them vertically aligned.
This is the one if I put them in another VStack which makes the SF symbol go above the text
IS there any solution to this?
The problem is your .padding(.bottom, 550).
Image(systemName: "sun.max.fill")
.foregroundColor(Color.yellow)
.font(.system(size: 40))
.padding(.bottom, 550) /// here!
It's currently attached to your first Image. As a result, the HStack is stretched vertically and it appears as though the first Image is higher up than second one.
To fix, move both .padding(.bottom, 550)s to outside your HStack.
You have quite a lot of arbitrary values for padding. You should have your layout adapt to various devices, rather than hard-coding that .bottom spacing for example.
Working example:
struct ContentView: View {
var body: some View {
VStack(spacing: 40) {
Text("Melbourne, Victoria")
.font(.largeTitle)
.fontWeight(.bold)
.foregroundColor(Color.white)
VStack {
Image(systemName: "moon.fill")
.foregroundColor(Color.white)
.font(.system(size: 60))
Text("Today")
.font(.title)
.fontWeight(.medium)
.foregroundColor(Color.white)
Text("34°C")
.font(.title3)
.fontWeight(.medium)
.foregroundColor(Color.white)
}
VStack(spacing: 10) {
HStack {
Image(systemName: "sun.max.fill")
.renderingMode(.original)
.font(.system(size: 40))
Text("Mon 34°C")
.font(.title)
.fontWeight(.medium)
.foregroundColor(Color.white)
}
HStack {
Image(systemName: "cloud.sun.fill")
.renderingMode(.original)
.font(.system(size: 40))
Text("Tue 28°C")
.font(.title)
.fontWeight(.medium)
.foregroundColor(Color.white)
}
}
Spacer()
}
.frame(maxWidth: .infinity)
.background(
Color(red: 0.34, green: 0.36, blue: 0.71)//Image("night")
.ignoresSafeArea()
)
}
}
Result:
Although there is already an outer VStack, they are nested VStacks because they have different amounts of padding. Multiple views are grouped together, and then those are grouped together with larger paddings to separate them.
Bonus
SF Symbols colors
Use:
.renderingMode(.original)
Rather than:
.foregroundColor(Color.yellow)
To color the SF Symbols with the default colors, as shown in the above example.
Align days
You can align the days across each HStack with a custom alignment guide. Use the following:
extension HorizontalAlignment {
struct LeadingDay: AlignmentID {
static func defaultValue(in context: ViewDimensions) -> CGFloat {
context[.leading]
}
}
static let leadingDay = HorizontalAlignment(LeadingDay.self)
}
Making the other following changes:
VStack(alignment: .leadingDay, spacing: 10) { // <- HERE
HStack {
Image(systemName: "sun.max.fill")
.renderingMode(.original)
.font(.system(size: 40))
Text("Mon 34°C")
.font(.title)
.fontWeight(.medium)
.foregroundColor(Color.white)
.alignmentGuide(.leadingDay) { d in // <- HERE
d[.leading]
}
}
HStack {
Image(systemName: "cloud.sun.fill")
.renderingMode(.original)
.font(.system(size: 40))
Text("Tue 28°C")
.font(.title)
.fontWeight(.medium)
.foregroundColor(Color.white)
.alignmentGuide(.leadingDay) { d in // <- HERE
d[.leading]
}
}
}
Result:
I have build a ZStack containing an image, an overlay and a systemImage. I want to open a sheet when the user taps on this image but it only works when the user clicks on a very specific point on the very bottom of the ZStack. Does anyone know how I can make this work? And also why this doesn't work?
My code:
NavigationView {
VStack {
VStack {
ZStack {
if let image = pfimage {
Image (uiImage: image)
.resizable()
.frame(width: 100, height: 100)
} else {
Image ("testimage")
.resizable()
.frame(width: 100, height: 100)
}
Image(systemName: "photo")
.resizable()
.frame(width: 30, height: 25)
.foregroundColor(Color.white)
}
.clipShape(Circle())
.contentShape(Circle())
.onTapGesture {
print("tap")
changepfsheet = true
}
Text("Displayname")
.padding(.top)
.foregroundColor(Color.white)
.font(.title3)
}
.frame(width: UIScreen.main.bounds.width, height: 225)
.background(Color.red)
HStack {
Image(systemName: "person.2.circle")
TextField("Enter newdisplayname", text: $newdisplayname)
}
.padding()
.background(Color.gray.opacity(0.1))
.cornerRadius(10)
.padding(.horizontal)
.padding(.top, 25)
Text("Change displayname")
Spacer()
HStack {
Spacer()
Text("Change password")
.foregroundColor(Color.white)
Spacer()
Image(systemName: "key")
.foregroundColor(Color.white)
}
.padding()
.background(Color.red)
.cornerRadius(15)
.padding(.horizontal)
.padding(.bottom, 5)
HStack {
Spacer()
Text("Logout")
Spacer()
}
.padding(.horizontal)
.padding(.bottom, 20)
}
.edgesIgnoringSafeArea(.top)
Spacer()
}
.navigationBarHidden(false)
.navigationBarBackButtonHidden(false)
You have interfering tap gestures. Instead, just have one tap gesture on the ZStack. Now you can tap anywhere on it:
ZStack {
Image(uiImage: image)
.resizable()
.frame(width: 100, height: 100)
Color.black.opacity(0.5)
.frame(width: 100, height: 100)
Image(systemName: "photo")
.resizable()
.frame(width: 30, height: 25)
.foregroundColor(.white)
}
.clipShape(Circle())
.contentShape(Circle())
.onTapGesture {
print("tap")
showsheet = true
}
I suspect the real issue is that you using a NavigationView, and putting content behind where the title would be. That means that you can't click through the view that the title is in, even if it's an empty title. You should either remove the NavigationView (as you aren't making use of it) or don't ignore safe area and use a NavigationView as you should do.
Removing edgesIgnoringSafeArea(.top) makes your code work, because the content will no longer be behind the navigation bar.