how to remove top space from navigation view
Note1: with out navigation it shows full screen
Note2: if i use this(.edgesIgnoringSafeArea(.all)) inside image it shows full screen but image not fill properly please check both image view.
Here is my code:
var body: some View {
NavigationView {
GeometryReader { geometry in
ZStack {
Image("splash_screen")
.resizable()
.aspectRatio(geometry.size, contentMode: .fill)
// .edgesIgnoringSafeArea(.all)
//.frame(height: geometry.size.height)
}
}
}
.navigationBarHidden(true)
.navigationBarTitle("")
.navigationBarBackButtonHidden(true)
//.edgesIgnoringSafeArea([.top, .bottom])
.edgesIgnoringSafeArea(.all)
.background(Color .red)
}
Works with this. Add property .scaledToFill() to Imageview.
ZStack {
Image("LandingBg")
.resizable()
.scaledToFill()
.edgesIgnoringSafeArea(.all)
// .edgesIgnoringSafeArea(.all)
//.frame(height: geometry.size.height)
}
Related
I'm trying to fill the capsuled strokeBorder but unfortunately it's filling the rectangle. See picture below:
Any ideas how I can make it fill till the strokeborder only? I'm wanting to use the field as search box which is why I want to use the textfield in it.
Here's my code:
struct ContentView: View {
var body: some View {
HStack{
TextField("Search", text: .constant(""))
}
.padding()
.frame(maxWidth:300)
.background(
Capsule()
.strokeBorder(Color.black,lineWidth: 0.8)
.background(Color.blue)
.clipped()
)
}
}
Many Thanks!
I think this is what you are after.
struct ContentView: View {
var body: some View {
HStack{
TextField("Search", text: .constant(""))
}
.padding()
.frame(maxWidth:300)
.background(
Capsule()
.strokeBorder(Color.black,lineWidth: 0.8)
.background(Color.blue)
.clipped()
)
.clipShape(Capsule())
}
}
Xcode preview of HStack with capsule border
Edit: Substitute your "system name:" of choice. "pencil.circle" works fine. "edit" is not a valid SF Symbol.
(I've simplified my code so you can cut and paste. That's why you see .frame, resizable, etc. where much simpler code might your first instinct.)
I have created a view which is a vertical list of row items (table view).
Each row item has a horizontal view with two images inside it.
The images take up too much space and do not fit correctly on the screen:
import SwiftUI
#main
struct StackOverflowDemoApp: App {
var body: some Scene {
WindowGroup {
TandemView()
}
}
}
struct PaddedImageView: View {
let color: Color = .red
var body: some View {
ZStack {
color
Image(systemName: "edit")
.resizable()
.padding()
}
Spacer()
}
}
struct TandemView: View {
var body: some View {
HStack {
Spacer()
Image(systemName: "pencil")
.resizable()
.background(Color.orange)
.frame(height: 80)
.aspectRatio(1, contentMode: .fill)
PaddedImageView()
.frame(width: 200, height: 80)
}
.padding()
.fixedSize()
}
}
struct TandemView_Previews: PreviewProvider {
static var previews: some View {
TandemView()
}
}
The above is the closest I can get to the desired layout (it just needs to fit horizontally). I experimented with GeometryReader but that did not produce desired results.
Here are some things I tried:
The code as provided
NoConstraintsOnPencilOrHStack
NoConstraintsOnTandemView
NoConstraintsOnImageInPaddedViewButWithFrameConstraint
I am trying to get a row view which consists of two Images (my actual source consists of UIImage objects) that fits within the width of the screen.
Edit:
After Accepting cedricbahirwe's spot-on response, I was able to simplify the code further. New results:
I added at the top level
TandemView()
.padding(.horizontal)
I removed:
// Spacer()
at the end of PaddedImageView
updated TandemView -- changed both frames and removed 3 lines:
struct TandemView: View {
var body: some View {
HStack {
Spacer()
Image(systemName: "pencil")
.resizable()
.background(Color.orange)
.frame(width: 80, height: 80)
// .aspectRatio(1, contentMode: .fill)
PaddedImageView()
.frame(height: 80)
}
// .padding()
// .fixedSize()
}
}
This is happening because of the layout of PaddedImageView View, you can actually remove the Spacer since it is not needed there.
So change
struct PaddedImageView: View {
let color: Color = .red
var body: some View {
ZStack {
color
Image(systemName: "edit")
.resizable()
.padding()
}
Spacer()
}
}
to
struct PaddedImageView: View {
let color: Color = .red
var body: some View {
ZStack {
color
Image(systemName: "edit")
.resizable()
.padding()
}
}
}
Note:
SwiftUI Engine infers the layout of your view from the implementation of the body property. It's recommended to have one Parent View inside the body property.
Why is there so much space between the three blue rectangles and the list? How can I remove the space so that all views within the VStack stack at the top? I tried using a Spacer() directly after the List, but nothing changed.
struct ContentView: View {
init() { UITableView.appearance().backgroundColor = UIColor.clear }
var body: some View {
NavigationView {
ZStack {
Color.red
.ignoresSafeArea()
VStack {
HStack {
Text("Faux Title")
.font(.system(.largeTitle, design: .rounded))
.fontWeight(.heavy)
Spacer()
Button(action: {
// settings
}, label: {
Image(systemName: "gearshape.fill")
.font(.system(.title2))
})
}
.padding()
GeometryReader { geometry in
HStack() {
Text("1")
.frame(width: geometry.size.width * 0.30, height: 150)
.background(Color.blue)
Spacer()
Text("2")
.frame(width: geometry.size.width * 0.30, height: 150)
.background(Color.blue)
Spacer()
Text("3")
.frame(width: geometry.size.width * 0.30, height: 150)
.background(Color.blue)
}
}
.padding()
List {
Text("One")
Text("Two")
Text("Three")
Text("Four")
Text("Five")
Text("Six")
}
.listStyle(InsetGroupedListStyle())
}
}
.navigationBarHidden(true)
}
}
}
Bonus question: In web development, you can open your browser's Web Inspector and use the element selector to click on elements which highlights their borders. Useful for something like this where you're trying to figure out which element the offending spacing belongs to. Is there something like that in Xcode?
VStack(spacing: 0) {...}
Spacer()
to your question you can in Xcode use the view inspector. https://developer.apple.com/library/archive/documentation/ToolsLanguages/Conceptual/Xcode_Overview/ExaminingtheViewHierarchy.html
Since you know that your HStack with the blue rectangles is going to be a height of 150, you should constrain it to that using .frame(height: 150):
GeometryReader { geometry in
...
}
.padding()
.frame(height: 150) //Here
Otherwise, the GeometryReader will occupy all available vertical space.
Re: your web dev comparison, check out the Xcode view hierarchy inspector. It's not exactly the same, but it's in the same vein: https://developer.apple.com/library/archive/documentation/ToolsLanguages/Conceptual/Xcode_Overview/ExaminingtheViewHierarchy.html
i want to have a full screen background image with a navigationview (must be on top because it is from the basis view and not in "this" view normally).
In this view i want a VStack which is just inside the secure area, so between navigationbar and bottom layout.
unfortunately i got (see picture)
I expected the texts inside...
struct ContentView: View {
var body: some View {
NavigationView {
ZStack(alignment: .center) {
Image("laguna")
.resizable()
.edgesIgnoringSafeArea(.all)
.scaledToFill()
.frame(width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height)
VStack(alignment: .center) {
Text("just a test")
.font(.largeTitle)
.foregroundColor(Color.white)
Spacer()
Text ("not centered....why?")
.font(.largeTitle)
.foregroundColor(Color.white)
}
.zIndex(4)
.navigationBarTitle("nav bar title")
}
}
}
}
Here is a bit modified variant. Tested with Xcode 11.4 (finally released) / iOS 13.4
struct TestFullScreenImage: View {
var body: some View {
NavigationView {
ZStack {
Image("large_image")
.resizable()
.edgesIgnoringSafeArea(.all)
.scaledToFill()
VStack {
Text("Just a test")
.font(.largeTitle)
.foregroundColor(.white)
Spacer()
Text("centered")
.font(.largeTitle)
.background(Color.green)
}
.navigationBarTitle("Navigation Title")
}
}
.frame(maxWidth: .infinity, maxHeight: .infinity)
}
}
If need to use NavigationView, and maintain the image's aspect ratio, you can do this:
import SwiftUI
struct FullScreenPictureDemo: View {
var body: some View {
NavigationView {
ZStack {
Image("your_full_screen_background_picture")
.resizable()
.aspectRatio(contentMode: .fill)
.edgesIgnoringSafeArea(.all)
.scaledToFill()
}
}
.frame(maxWidth: .infinity, maxHeight: .infinity)
}
}
I am experiencing a weird spacing behavior that I'm hoping someone can explain. I have two views, the main view (ContentView) contains a child view called PlayerToolbar. The desired behavior is for ContentView take up the entire screen with PlayerToolbar being rendered at the very bottom of the screen. PlayerToolbar contains image buttons and spacers. The issue I am running into is ContentView only takes up a portion of the screen and PlayerToolbar is not aligned to the bottom as shown in the image.
Here is the code for ContentView
struct ContentView: View {
var body: some View {
VStack{
Spacer()
Text("Main Content")
Spacer()
PlayerToolBar()
}.background(Color.blue)
}
}
And here is the code for PlayerToolbar:
struct PlayerToolBar: View {
var body: some View {
HStack{
Spacer()
Button(action: {
print("backward button pressed")
}){
Image(systemName: "gobackward.10").renderingMode(.original) .resizable().aspectRatio(contentMode: .fit)
}
Spacer()
Button(action: {
print("play button pressed")
}){
Image(systemName: "play.circle").renderingMode(.original) .resizable().aspectRatio(contentMode: .fit)
}
Spacer()
Button(action: {
print("go forward button pressed")
}){
Image(systemName: "goforward.10").renderingMode(.original) .resizable().aspectRatio(contentMode: .fit)
}
Spacer()
Button(action: {
print("jot button pressed")
}){
Image(systemName: "pencil.circle").renderingMode(.original) .resizable().aspectRatio(contentMode: .fit)
}
Spacer()
}.background(Color(UIColor.secondarySystemBackground))
}
}
I have found that if add one Text object in my PlayerToolbar between the first Spacer and Button, the screen renders as I expect
...
Spacer()
Text(" ")
Button(action: {
print("backward button pressed")
}){
Image(systemName: "gobackward.10").renderingMode(.original) .resizable().aspectRatio(contentMode: .fit)
}
...
Any idea of why it is behaving the way it is and why a Text makes it act the way I prefer?
The problem, I think, is because your PlayerToolbar has no height and it is hard for the layout logic to determine one. Nothing in your PlayerToolbar has an explicit height. Your images are made resizable, but nothing in your views is telling how to resize them.
By adding a Text() view, your images now have some height to match, and so it works as you expect it.
Other solutions to break the ambiguity are (choose any, not all):
Set a frame height to the PlayerToolbar:
PlayerToolBar().frame(height: 40)
Set the height for at least one of your images:
Image(systemName: "gobackward.10")
.renderingMode(.original)
.resizable()
.frame(height: 40)
.aspectRatio(contentMode: .fit)
Set the height to one of your buttons:
Button(action: {
print("backward button pressed")
}){
Image(systemName: "gobackward.10")
.renderingMode(.original)
.resizable()
.aspectRatio(contentMode: .fit)
}.frame(height: 40)
Set the height of the HStack in your PlayerToolbar.
Remove the resizable() modifier in at least one of your images.
Image(systemName: "pencil.circle").renderingMode(.original).aspectRatio(contentMode: .fit)
All these alternatives aim at the same thing, making sure your images know how much to grow/shrink. There are of course many other options. These are just a few.