I have this code:
import SwiftUI
struct MyBackGround: View {
var body: some View {
ZStack() {
Color.pink.ignoresSafeArea()
RoundedRectangle(cornerRadius: 20).background(Color.white.opacity(0.5))
.frame(width: 220, height: 100)
}
}
}
And this image:
I want to achieve the similar look of iOS blur background, but it did not work.
You can achieve this with a simpler code. Your code does not work because your RoundedRectangle contains black as its foreground color originally.
import SwiftUI
struct ContentView: View {
var body: some View {
ZStack {
Color.pink.ignoresSafeArea(.all)
RoundedRectangle(cornerRadius: 20)
.fill(.ultraThinMaterial)
.frame(width: 200, height: 200)
}
}
}
Related
I have AsyncImage inside a TabView. When I do this the image never appears. I just see the progress bar.
#available(iOS 15.0, *)
struct TEST: View {
var body: some View {
VStack {
TabView {
AsyncImage(url: URL(string: "https://blckbirds.com/wp-content/uploads/2021/10/pexels-kammeran-gonzalezkeola-6128227-2.jpg"), scale: 2) { image in
image
.resizable()
.aspectRatio(contentMode: .fill)
} placeholder: {
ProgressView()
.progressViewStyle(.circular)
}
}.tabViewStyle(PageTabViewStyle(indexDisplayMode: .automatic))
}//V
}
}
try using a ZStack to wrap the AsyncImage, like this, works for me:
struct TEST: View {
var body: some View {
VStack {
TabView {
ZStack { // <--- here
AsyncImage(url: URL(string: "https://blckbirds.com/wp-content/uploads/2021/10/pexels-kammeran-gonzalezkeola-6128227-2.jpg"), scale: 2) { image in
image
.resizable()
.aspectRatio(contentMode: .fill)
} placeholder: { ProgressView().progressViewStyle(.circular) }
}
}.tabViewStyle(PageTabViewStyle(indexDisplayMode: .automatic))
}
}
}
I am new to SwiftUI. I copied the #workingdog support's code and it worked well. But I think there is some glitch with the preview and I am not sure this an unknown issue or not.
With the original code, I can only see the loading view, not matter I close and re-open the preview window. Then I added a frame for the image view. I can see the image being properly loaded by changing frame size to something else then change it back, e.g. 300 -> 350 -> 300.
struct ExampleImgItem: View {
var body: some View {
`workingdog support`'s code
}
struct ExampleImgItem_Previews: PreviewProvider {
static var previews: some View {
ExampleImgItem()
.frame(width: 300, height: 300, alignment: .leading)
}
}
P.S. I am using Xcode 13.3.1,
Got the same issue. My solution is to add
.aspectRatio(CGSize(width: 6, height: 9), contentMode: .fill)
.scaledToFit()
to TabView.
I'm drawing icons on a toolbar with a material background. The Text and symbol Images are white, but if I draw my own Path, it's gray.
struct ContentView: View {
var body: some View {
HStack {
Text("Hi")
Image(systemName: "square.and.arrow.up.fill")
Path { p in
p.addRect(CGRect(origin: .zero, size: .init(width: 20, height: 30)))
}.fill()
.frame(width: 20, height: 30)
}
.padding()
.background(.regularMaterial)
}
}
I get the same result with .fill(), .fill(.foreground), or .fill(.primary).
Why is it gray? How do I get it to match the white text color?
I find it weird that .white or .black work, but .primary doesn't.
Upon discovering the Material documentation, I found this interesting snippet:
When you add a material, foreground elements exhibit vibrancy, a context-specific blend of the foreground and background colors that improves contrast. However using foregroundStyle(_:) to set a custom foreground style — excluding the hierarchical styles, like secondary — disables vibrancy.
Seems like you have to force a different color (see previous edit which I used the environment color scheme), since hierarchical styles such as .primary won't work by design.
Luckily there is a way around this - you can use colorMultiply to fix this problem. If you set the rectangle to be .white, then the color multiply will make it the .primary color.
Example:
struct ContentView: View {
var body: some View {
HStack {
Text("Hi")
Image(systemName: "square.and.arrow.up.fill")
Path { p in
p.addRect(CGRect(origin: .zero, size: .init(width: 20, height: 30)))
}
.foregroundColor(.white)
.colorMultiply(.primary)
.frame(width: 20, height: 30)
}
.padding()
.background(.regularMaterial)
}
}
There is no issue with code, your usage or expecting is not correct! Text and Image in that code has default Color.primary with zero code! So this is you, that messing with .fill() you can delete that one!
struct ContentView: View {
var body: some View {
HStack {
Text("Hi")
Image(systemName: "square.and.arrow.up.fill")
Path { p in
p.addRect(CGRect(origin: .zero, size: .init(width: 20, height: 30)))
}
.fill(Color.primary) // You can delete this line of code as well! No issue!
.frame(width: 20, height: 30)
}
.padding()
.background(Color.secondary.cornerRadius(5))
}
}
Starting a new Mac App project from scratch and assigning Color.red and Color.green to two Rectangles results in the following:
Code:
struct ContentView: View {
var body: some View {
HStack {
Rectangle()
.frame(width: 200, height: 200)
.background(Color.green)
Spacer()
Rectangle()
.frame(width: 200, height: 200)
.background(Color.red)
}
}
}
#main
struct TestApp: App {
var body: some Scene {
WindowGroup {
ContentView()
}
}
}
Where do those very dark colors come from? How to have the interface use "normal" colors? I don't have dark mode activated and I'm on Big Sur.
You need to use fill or foregroundColor instead of background:
struct ContentView: View {
var body: some View {
HStack {
Rectangle()
.fill(Color.green) // first possibility: `fill`
.frame(width: 200, height: 200)
Spacer()
Rectangle()
.foregroundColor(Color.red) // second possibility: `foregroundColor`
.frame(width: 200, height: 200)
}
}
}
It's correct. To fill a shape use .fill(Color.green).
I try to make a smooth animation when the NetStatus change but it's not working like i want.
I want to get the same effect as when i press the button with the toggle animation. The commented button animation is working great and i try to replicate it with the scaling of the height of the text frame.
The commented button code is just for a working example of the animation effect that i want (expand and close gracefully), i don't need this code.
How can i do that?
import SwiftUI
struct NoNetwork: View {
let screenSize: CGRect = UIScreen.main.bounds
#ObservedObject var online = NetStatus()
var body: some View {
VStack{
Text("NoNetworkTitle")
.fontWeight(.bold)
.foregroundColor(Color.white)
.frame(width: screenSize.width, height: self.online.connected ? 0 : 40, alignment: .center)
// .animation(.easeIn(duration: 5))
.background(Color.red)
// Button(action: {
// withAnimation {
// self.online.connected.toggle()
// }
// }, label: {
// Text("Animate")
// })
}
}
}
struct NoNetwork_Previews: PreviewProvider {
static var previews: some View {
NoNetwork()
}
}
To animate when online.connected changes, put the .animation modifier on the VStack:
VStack{
Text("NoNetworkTitle")
.fontWeight(.bold)
.foregroundColor(Color.white)
.frame(width: screenSize.width, height: self.online.connected ? 0 : 40, alignment: .center)
.background(Color.red)
Button(action: {
self.online.connected.toggle()
}, label: {
Text("Animate")
})
}
.animation(.easeInOut(duration: 0.5))
This will animate the other views in the VStack as the Text appears and disappears.
I am trying to create a layout with multiple horizontal ScrollViews inside a vertical ScrollView, similar to the template picker in Apple's Pages app. I would like the content of the horizontal ScrollViews to be visible beyond the safe area. However I seem to be unable to get the content of the vertical ScrollView outside the horizontal safe insets. This is visible when iPhones with a notch are used in landscape orientation.
I have tried adding negative padding to the content of the vertical ScrollView. This kind of works, but creates issues when using the device in portrait mode.
Below example code shows the issue. I would expect the rectangles to be visible in beyond the safe area when scrolling horizontally, but they get clipped. How can I make them visible beyond the safe area?
import SwiftUI
struct ContentView: View {
var body: some View {
ScrollView(.vertical) {
ScrollView(.horizontal) {
HStack {
Rectangle()
.frame(width: 200, height: 300)
Rectangle()
.frame(width: 200, height: 300)
Rectangle()
.frame(width: 200, height: 300)
}
} .edgesIgnoringSafeArea(.horizontal)
} .edgesIgnoringSafeArea(.horizontal)
}
}
You can detect when the device's orientation changes and adapt your view:
struct ContentView: View {
#Environment(\.verticalSizeClass) var verticalSizeClass
var body: some View {
Group {
if verticalSizeClass == .compact {
content.edgesIgnoringSafeArea(.horizontal)
} else {
content
}
}
}
var content: some View {
ScrollView(.vertical) {
ScrollView(.horizontal) {
HStack {
Rectangle()
.frame(width: 200, height: 300)
Rectangle()
.frame(width: 200, height: 300)
Rectangle()
.frame(width: 200, height: 300)
}
}
}
.edgesIgnoringSafeArea(.horizontal)
}
}