I'm new to iOS development and I am struggling to make the .background() modifier to a view apply to the entire background. My code is as follows, intended to be an apple watch complication:
struct DrinkCountComplicationsEntryView : View {
var entry: SimpleEntry
var body: some View {
let theCount = getCount()
let link = URL(string: "myApp://widgetClick")?
.appending(queryItems: [URLQueryItem(name: "count", value: String(theCount))])
ZStack {
Text("DRINK")
.offset(x: 0, y: -15)
.foregroundColor(Color.orange)
.font(.system(size: 10, weight: .semibold))
Text(String(theCount))
.font(.title)
.offset(x: 0, y: 0)
Text("COUNT")
.offset(x: 0, y: 15)
.foregroundColor(Color.orange)
.font(.system(size: 10, weight: .semibold))
}
.widgetURL(link)
.background()
.ignoresSafeArea()
}
}
I thought having .ignoresSafeArea() plus .background() would do the trick, but instead it applies the background as a box around the text. It also flashes on refresh. Thoughts?
It also appears completely broken on both Preview and Simulator.
The issue you are encountering is caused by the fact that, by default, the background will have the same dimensions as the content within that View.
You can use the following modifier on the View, before setting the background, so that it will take the full available width and height, and so will the background.
.frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
.ignoresSafeArea() in the other end doesn't help because it tells the View to ignore the safe area layout guides, and in your specific case there are no safe areas to respect.
Official SwiftUI frame documentation
Related
I have this code and I am trying to make the webview height to be a full screen
struct ContentView: View {
#State private var showWebView = false
private let urlString: String = "https://example"
var body: some View {
VStack(spacing: 40) {
// Normal WebView
WebView(url: URL(string: urlString)!).frame(height: 900)
.cornerRadius(10)
.shadow(color: .black.opacity(0.3), radius: 20.0, x: 5, y: 5)
}
}
}
I have tried to add to the height :
height: self.view.frame.height
but it didn't work
You should just add .ignoresSafeArea() modifier to your WebView:
struct ContentView: View {
#State private var showWebView = false
private let urlString: String = "https://example"
var body: some View {
VStack(spacing: 40) {
WebView(url: URL(string: urlString)!)
.cornerRadius(10)
.shadow(color: .black.opacity(0.3), radius: 20.0, x: 5, y: 5)
.ignoresSafeArea()
}
}
}
Also you can remove corenerRadius() modifier, because in this case it's not necessary.
To make a web view full screen with SwiftUI, you can use the .edgesIgnoringSafeArea(.all) modifier on the WebView object, like this:
WebView(url: url).edgesIgnoringSafeArea(.all)
This will make the web view occupy the entire screen, ignoring the safe area. The safe area is the part of the screen that is not obscured by the device's bezel or other device-specific elements. Ignoring the safe area will ensure that the web view takes up the maximum amount of space on the screen.
You can also use the .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity) modifier to achieve the same effect, like this:
WebView(url: URL(string: urlString)!)
.frame(
minWidth: 0,
maxWidth: .infinity,
minHeight: 0,
maxHeight: .infinity
)
This will make the web view occupy the entire screen, regardless of the device's safe area.
In the wonderful world of SwiftUI, I have a View that I use as a cell. I intend to reproduce the Layout of a previous application of mine, with Autolayout, not SwiftUI, in which the background image filled the entire cell, adjusting to the width and losing pieces of image above and below.
In my new app, the code in SwiftUI is the following:
struct CharacterRow2: View {
var character: Character
var body: some View {
Text(character.name)
.font(Font.custom(avengeanceHeroicAvengerNormal, size: 30))
.foregroundColor(.white)
.baselineOffset(-10)
.shadow(color: .black, radius: 1, x: -1, y: 1)
.frame(width: UIScreen.main.bounds.width, height: 140)
.background {
WebImage(url: extractImage(data: character.thumbnail))
.resizable()
.frame(width: UIScreen.main.bounds.width, height: 150)
}
}
}
With this code, my app looks like this:
I tried to add scaledToFill():
WebImage(url: extractImage(data: character.thumbnail))
.resizable()
.scaledToFill()
.frame(width: UIScreen.main.bounds.width, height: 150)
But this is the result:
I'm stuck...
Thank you in advance!
In this case, you are simply using too many frames. And using them incorrectly. You should avoid using UIScreen.main.bounds in SwiftUI, especially in something like a view cell. By doing this, the cell will not behave properly with other views, and can cause UI issues that would be difficult to trace.
The simplest way to get the behavior you want is this:
Text(character.name)
.font(.largeTitle)
.foregroundColor(.white)
.baselineOffset(-10)
.shadow(color: .black, radius: 1, x: -1, y: 1)
.frame(height: 140)
.frame(maxWidth: .infinity) // use .infinity for max width to make it
// as large as the space offered by the
// parent view
.background {
WebImage(url: extractImage(data: character.thumbnail))
.resizable()
// .frame(width: UIScreen.main.bounds.width, height: 150) <-- Remove this frame altogether
.scaledToFill()
}
.clipped // This keeps the image from being larger than the frame
This will size to be as wide as the parent view allows it to be. Leaving the UIScreen.main.bounds.width could cause it to be larger than the parent view and cause partial eclipsing.
In your last example the images are overlaying each other. This is due to calling scaleToFill(). The images are now ignoring their frame boundaries regarding the height. Adding .clipped solves the problem.
struct CharacterRow2: View {
var character: String
var body: some View {
Text(character)
.font(.largeTitle)
.foregroundColor(.white)
.baselineOffset(-10)
.shadow(color: .black, radius: 1, x: -1, y: 1)
.frame(width: UIScreen.main.bounds.width, height: 140)
.background {
Image(character)
.resizable()
.scaledToFill()
.frame(width: UIScreen.main.bounds.width, height: 150)
.clipped() // <-- Add this
}
}
}
It seems this will work only with a ForEach inside a ScrollView. Using a List seems to breack the vertical frame boundary.
struct ContentView: View{
let content = ["1.jpg", "2.jpg", "3.jpg" ]
var body: some View{
//These look really weird
// List(content, id: \.self){ name in
// CharacterRow2(character: name)
// }
// List{
// VStack{
// ForEach(content, id: \.self){ name in
// CharacterRow2(character: name)
// }
// }
// }
//working
ScrollView{
VStack{
ForEach(content, id: \.self){ name in
CharacterRow2(character: name)
.padding()
}
}
}
}
}
Result:
I created very simple views with SwiftUI including ZStack.
struct ContentView: View {
var body: some View {
ZStack(alignment: .topLeading) {
Text("aaa")
.frame(width: 50, height: 50)
.font(.system(size: 20))
}
.frame(width: 142.0, height: 142.0)
.background(.pink)
}
}
I expected that the Text("aaa") would appear in the top leading of pink square.
But the result was this.
More strangely, it works well if I add 'Color.clear' to ZStack like this.
struct ContentView: View {
var body: some View {
ZStack(alignment: .topLeading) {
Color.clear
Text("aaa")
.frame(width: 50, height: 50)
.font(.system(size: 20))
}
.frame(width: 142.0, height: 142.0)
.background(.pink)
}
}
And the result it this.
I cannot understand this situation. SwiftUI is totally crazy.
Does anybody know about this?
The elements of the ZStack are laid out and aligned based on the size of the largest child, not the frame of the ZStack itself.
You should think of the "content area" of the stack being seperate to the frame of the stack.
When you add a Color.clear, its default frame is unbounded (the height and width are infinity), so when it is added to the ZStack, it will grow the "content area" to the maximum possible size.
This makes the content area of the stack the same size as the ZStacks frame.
You can achieve the same result (in a clearer way) by using a Spacer() with explicit infinite bounds.
This will ensure the children always fill the same available to them.
struct ContentView: View {
var body: some View {
ZStack(alignment: .topLeading) {
Spacer()
.frame(maxWidth: .infinity, maxHeight: .infinity)
Text("aaa")
.frame(width: 50, height: 50)
.font(.system(size: 20))
}
.frame(width: 142.0, height: 142.0)
.background(.pink)
}
}
I need a MainView that is centered on the screen, and a flexible HeaderView that takes up the remaining space between the MainView and the top of the screen (see below). How do I accomplish this in SwiftUI?
Starter code:
struct TestView: View {
var body: some View {
ZStack {
//Center Line
Divider()
VStack {
Text("HeaderView")
.border(Color.orange, width: 6)
Text("MainView")
.frame(width: 400, height: 200, alignment: .center)
.border(Color.red, width: 6)
}
}
}
}
VStack {
// Let the HeaderView expand to whatever is available, in both directions
Text("HeaderView")
.frame(maxWidth: .infinity, maxHeight: .infinity)
.border(Color.orange, width: 6)
Text("MainView")
.frame(maxWidth: .infinity) // Added to allow this view to expand horizontally
.frame(height: 200) // alignment is not needed here.
.border(Color.red, width: 6)
// And then add a Spacer() at the end that also has flexible height
Spacer()
.frame(maxHeight: .infinity)
}
Since Main is fixed in height, it will get its requested height first. Then since Header and Spacer are equally prioritized and flexible, they will each get half of what remains, causing Main to be centered vertically.
So I just started developing with SwiftUI and I'm running in a small problem. Subviews are also displaying superview's shadow, even if the superview has a background. Does someone know how to fix this?
HStack {
HStack {
[...]
}
.padding(.leading, 12.0)
.padding(.trailing, 4.0)
.padding(.vertical, 16.0)
.background(Color("lightGreen"))
.cornerRadius(10)
}
.padding(8)
.background(Color.white)
.shadow(color: Color("tabShadow"), radius: 0.0, x: 0.0, y: -0.5)
.shadow(color: Color("tabShadow"), radius: 0.0, x: 0.0, y: 0.5)
As stated, the first HStack's shadow shouldn't be replicated into the child one, but it is. Only the first one though. Any hints?
Certain modifiers, when placed on a stack, are inherited by all their children. For instance, if you have a stack containing a bunch of Text views, you can place one .font() modifier on the stack and they will all be modified.
It appears that .shadow() is one of those modifiers. As to why only one is inherited, I suspect that the designers of SwiftUI don't expect .shadow() to be called more than once on a particular view, and didn't test for that.
If you are just trying to get a colored line across the top and bottom of the view, maybe try something like
.background(Color.white)
.background(Color("tabShadow").offset(x: 0, y: -0.5))
.background(Color("tabShadow").offset(x: 0, y: 0.5))
I am also newbie in swiftUI , but I think the problem is related to modifiers order and the fact that they change the View type.
I was able to solve the problem by adding .background(Color.white) and .cornerRadius(2.0) modifiers just before the shadow modifier and that applied the changes in parent (not children) View.
struct TestSwiftUIView: View {
var body: some View {
VStack {
Text("Hello World")
Text("Hello World")
}
.padding()
.background(Color.white)
.cornerRadius(2.0)
.shadow(radius: 3)
}
}
You can try overlay and background tricks when you have to make them render in multiple passes. In above case, the overlay will not be affected by the shadow or other effects.
If you think they are subViews, actually, they just render after the superView. It's a 2D world. So the overlay will be quite independently.
The only problem is just the size of overlay.
The hidden() is used here to occupy the position of invisible overlay. It's very cool if you master these layout skills.
struct ContentView: View {
var body: some View {
HStack {
SubContentView().hidden()
}
.padding(8)
.background(Color.white)
.shadow(color: Color.red, radius: 0, x: 0.0, y: -0.5)
.shadow(color: Color.red, radius: 0, x: 0.0, y: 0.5)
.overlay(SubContentView())
}
}
struct SubContentView: View {
var body: some View {
HStack{
Text("a")
Text("b")
Text("c")
Text("a")
Text("b")
Text("c")
}.padding(.leading, 12.0)
.padding(.trailing, 4.0)
.padding(.vertical, 16.0)
.background(Color.green)
.cornerRadius(10)
}
}
If you want to prevent the shadow the be applied to subviews then use the shadow modifier only inside the .background modifier like so:
VStack {
...
}.background(Color.white.shadow(color: .black.opacity(0.3), radius: 1, x: 1, y: 1))
Just Wrap your main view with some View and setShadow(1) to that view. and setShadow(0) to your main view. it overrides the parents shadow.
Lets say you have:
VStack{
Text("1")
Text("2")
}
and you want to set shadow to this VStack. So, wrap this VStack with another VStack (any View), and setShadow to that stack. Inner shadow overrides outer shadow. Finally your code should be:
VStack{
VStack{
Text("1")
Text("2")
}.shadow(radius: 0)
}
.shadow(radius: 1)