I have a CustomView which has a simple logic! If this CustomView get a non EmptyView should return an HStack, and If this CustomView get an EmptyView should return a Circle, how could I find out the right option depending on input content?
for example it should work like this: But it does not! I must hard code true or false for the result you see in down
CustomView() { Text("Hello") }.background(Color.red).padding()
CustomView().background(Color.red)
Goal: This question try find an answer to set right value for useHStack value depending on input content!
PS: Logically there is a way to use useHStack as parameter of CustomView, in this case there was no need to ask this question! So we are trying solve the issue without using useHStack as input parameter of CustomView or any other also! I like detect at initialization on CustomView not in body or through GeometryReader and so on . . .
My issue is there, how can I know when useHStack must be true or false depending on incoming content! incoming content means from example: Text("Hello")
import SwiftUI
struct ContentView: View {
var body: some View {
CustomView() { Text("Hello") }
CustomView()
}
}
struct CustomView<Content: View>: View {
let content: () -> Content
let useHStack: Bool
init(#ViewBuilder content: #escaping () -> Content) {
self.content = content
self.useHStack = true // or: false depending on content(), if we got EmptyView() then false otherwise true! the idea is make this part Automatic!
}
init() where Content == EmptyView {
self.init(content: { EmptyView() })
}
var body: some View {
if useHStack {
HStack {
content()
Spacer()
Circle().frame(width: 50, height: 50, alignment: .center)
}
}
else {
Circle().frame(width: 50, height: 50, alignment: .center)
}
}
}
You can set useHStack to false inside the init() where Content == EmptyView. You either would need to make it var useHStack: Bool, or create a private init:
private init(content: #escaping () -> Content, useHStack: Bool) {
self.content = content
self.useHStack = useHStack
}
init(#ViewBuilder content: #escaping () -> Content) {
self.init(content: content, useHStack: true)
}
init() where Content == EmptyView {
self.init(content: { EmptyView() }, useHStack: false)
}
Related
I'm attempting to figure out how to display a message to my users when some asynchronous code takes some time to run. So far I've used a sample I found online to create a popup banner and tied the message together using an ObservedObject of the async method on my view and then Publish the values from my async method.
My sample code project is on a public GitHub repository here and I'll post the code at the bottom.
Right now I have an issue when setting the variables from the async method: Publishing changes from background threads is not allowed; make sure to publish values from the main thread (via operators like receive(on:)) on model updates. Solutions online seem to fix this issue by updating the value on the #mainActor thread but I want these methods to run asynchronously AND update the user on what's happening. What's the best way to update my variables from this location?
CODE
in the main app:
var body: some Scene {
WindowGroup {
ContentView(asyncmethod: myAsyncViewModel())
}
}
ContentView:
import SwiftUI
struct ContentView: View {
#State private var isLoaderPresented = false
#State private var isTopMessagePresented = false
#ObservedObject var asyncmethod: myAsyncViewModel
var body: some View {
VStack {
Spacer()
Button( action: {
Task {
isTopMessagePresented = true
let response = await asyncmethod.thisMethodTakesTime()
// Want to return a string or object so I know what happens.
print("Response Loader: \(response ?? "no response")")
isTopMessagePresented = false
}
},
label: { Text("Run Top Banner Code") }
)
Spacer()
}
.foregroundColor(.black)
.popup(isPresented: isTopMessagePresented, alignment: .top, direction: .top, content: {
Snackbar(showForm: $isTopMessagePresented, asyncmethod: asyncmethod)
})
}
}
struct Snackbar: View {
#Binding var showForm: Bool
#ObservedObject var asyncmethod: myAsyncViewModel
var body: some View {
VStack {
HStack() {
Image(systemName: asyncmethod.imageName)
.resizable()
.aspectRatio(contentMode: ContentMode.fill)
.frame(width: 40, height: 40)
Spacer()
VStack(alignment: .center, spacing: 4) {
Text(asyncmethod.title)
.foregroundColor(.black)
.font(.headline)
Text(asyncmethod.subTitle)
.font(.body)
.foregroundColor(.black)
.frame(maxWidth: .infinity)
}
}
.frame(minWidth: 200)
}
.padding(15)
.frame(maxWidth: .infinity, idealHeight: 100)
.background(Color.black.opacity(0.1))
}
}
My async sample method:
import Foundation
class myAsyncViewModel: ObservableObject {
#Published var imageName: String = "questionmark"
#Published var title: String = "title"
#Published var subTitle: String = "subtitle"
func thisMethodTakesTime() async -> String? {
print("In method: \(imageName), \(title), \(subTitle)")
title = "MY METHOD"
subTitle = "Starting out!"
print("In method. Starting \(title)")
subTitle = "This is the message"
print("Sleeping")
try? await Task.sleep(nanoseconds: 1_000_000_000)
subTitle = "Between"
try? await Task.sleep(nanoseconds: 1_000_000_000)
print("After sleep. Ending")
subTitle = "About to return. Success!"
print("In method: \(imageName), \(title), \(subTitle)")
return "RETURN RESULT"
}
}
And the supporting file for the popup:
import SwiftUI
struct Popup<T: View>: ViewModifier {
let popup: T
let isPresented: Bool
let alignment: Alignment
let direction: Direction
// 1.
init(isPresented: Bool, alignment: Alignment, direction: Direction, #ViewBuilder content: () -> T) {
self.isPresented = isPresented
self.alignment = alignment
self.direction = direction
popup = content()
}
// 2.
func body(content: Content) -> some View {
content
.overlay(popupContent())
}
// 3.
#ViewBuilder private func popupContent() -> some View {
GeometryReader { geometry in
if isPresented {
withAnimation {
popup
.transition(.offset(x: 0, y: direction.offset(popupFrame: geometry.frame(in: .global))))
.frame(width: geometry.size.width, height: geometry.size.height, alignment: alignment)
}
}
}
}
}
extension Popup {
enum Direction {
case top, bottom
func offset(popupFrame: CGRect) -> CGFloat {
switch self {
case .top:
let aboveScreenEdge = -popupFrame.maxY
return aboveScreenEdge
case .bottom:
let belowScreenEdge = UIScreen.main.bounds.height - popupFrame.minY
return belowScreenEdge
}
}
}
}
private extension GeometryProxy {
var belowScreenEdge: CGFloat {
UIScreen.main.bounds.height - frame(in: .global).minY
}
}
extension View {
func popup<T: View>(
isPresented: Bool,
alignment: Alignment = .center,
direction: Popup<T>.Direction = .bottom,
#ViewBuilder content: () -> T
) -> some View {
return modifier(Popup(isPresented: isPresented, alignment: alignment, direction: direction, content: content))
}
}
Again all this can be found in my GitHub page here.
You can annotate the observable class or just the function with ‘#MainActor’ or use DispatchQueue.main.async when you assign to the published variables.
I have a Button. I want to set custom background color for highlighted state. How can I do it in SwiftUI?
Button(action: signIn) {
Text("Sign In")
}
.padding(.all)
.background(Color.red)
.cornerRadius(16)
.foregroundColor(.white)
.font(Font.body.bold())
Updated for SwiftUI beta 5
SwiftUI does actually expose an API for this: ButtonStyle.
struct MyButtonStyle: ButtonStyle {
func makeBody(configuration: Self.Configuration) -> some View {
configuration.label
.padding()
.foregroundColor(.white)
.background(configuration.isPressed ? Color.red : Color.blue)
.cornerRadius(8.0)
}
}
// To use it
Button(action: {}) {
Text("Hello World")
}
.buttonStyle(MyButtonStyle())
As far as I can tell, theres no officially supported way to do this as of yet. Here is a little workaround that you can use. This produces the same behavior as in UIKit where tapping a button and dragging your finger off of it will keep the button highlighted.
struct HoverButton<Label: View>: View {
private let action: () -> ()
private let label: () -> Label
init(action: #escaping () -> (), label: #escaping () -> Label) {
self.action = action
self.label = label
}
#State private var pressed: Bool = false
var body: some View {
Button(action: action) {
label()
.foregroundColor(pressed ? .red : .blue)
.gesture(DragGesture(minimumDistance: 0.0)
.onChanged { _ in self.pressed = true }
.onEnded { _ in self.pressed = false })
}
}
}
I was looking for a similar functionality and I did it in the following way.
I created a special View struct returning a Button in the style I need, in this struct I added a State property selected. I have a variable named 'table' which is an Int since my buttons a round buttons with numbers on it
struct TableButton: View {
#State private var selected = false
var table: Int
var body: some View {
Button("\(table)") {
self.selected.toggle()
}
.frame(width: 50, height: 50)
.background(selected ? Color.blue : Color.red)
.foregroundColor(.white)
.clipShape(Circle())
}
}
Then I use in my content View the code
HStack(spacing: 10) {
ForEach((1...6), id: \.self) { table in
TableButton(table: table)
}
}
This creates an horizontal stack with 6 buttons which color blue when selected and red when deselected.
I am not a experienced developer but just tried all possible ways until I found that this is working for me, hopefully it is useful for others as well.
This is for the people who are not satisfied with the above solutions, as they raise other problems such as overlapping gestures(for example, it's quite hard to use this solution in scrollview now). Another crutch is to create a custom button style like this
struct CustomButtonStyle<Content>: ButtonStyle where Content: View {
var change: (Bool) -> Content
func makeBody(configuration: Self.Configuration) -> some View {
return change(configuration.isPressed)
}
}
So, we should just transfer the closure which will return the state of the button and create the button based on this parameter. It will be used like this:
struct CustomButton<Content>: View where Content: View {
var content: Content
init(#ViewBuilder content: () -> Content) {
self.content = content()
}
var body: some View {
Button(action: { }, label: {
EmptyView()
})
.buttonStyle(CustomButtonStyle(change: { bool in
Text("\(bool ? "yo" : "yo2")")
}))
}
}
Okey let me clear everything again. Here is the exact solution
Create the below button modifier.
struct StateableButton<Content>: ButtonStyle where Content: View {
var change: (Bool) -> Content
func makeBody(configuration: Configuration) -> some View {
return change(configuration.isPressed)
}
}
Then use it like below one
Button(action: {
print("Do something")
}, label: {
// Don't create your button view in here
EmptyView()
})
.buttonStyle(StateableButton(change: { state in
// Create your button view in here
return HStack {
Image(systemName: "clock.arrow.circlepath")
Text(item)
Spacer()
Image(systemName: "arrow.up.backward")
}
.padding(.horizontal)
.frame(height: 50)
.background(state ? Color.black : Color.clear)
}))
You need to define a custom style that can be used to provide the two backgrounds for normal and highlighted states:
Button(action: {
print("action")
}, label: {
Text("My Button").padding()
})
.buttonStyle(HighlightableButtonStyle(normal: { Color.red },
highlighted: { Color.green }))
// Custom button style
#available(iOS 15.0, macOS 12.0, tvOS 15.0, watchOS 8.0, *)
struct HighlightableButtonStyle<N, H>: ButtonStyle where N: View, H: View {
private let alignment: Alignment
private let normal: () -> N
private let highlighted: () -> H
init(alignment: Alignment = .center, #ViewBuilder normal: #escaping () -> N, #ViewBuilder highlighted: #escaping () -> H) {
self.alignment = alignment
self.normal = normal
self.highlighted = highlighted
}
func makeBody(configuration: Configuration) -> some View {
return ZStack {
if configuration.isPressed {
configuration.label.background(alignment: alignment, content: normal)
}
else {
configuration.label.background(alignment: alignment, content: highlighted)
}
}
}
}
I implemented a BasicContainer upon GeometryReader with the functionality of a #ViewBuilder. How can I use this inside GeometryProxy, outside when declaring the content?
Here is my BasicContainer:
struct BasicContainer<Content : View> : View {
let content : Content
init(#ViewBuilder content: () -> Content) {
self.content = content()
}
var body: some View {
GeometryReader { proxy in
content
.frame(width: proxy.size.width * 0.3, height: 200)
// do some other fancy stuff ...
}
}
}
Everything works fine, when I use the BasicContainer as it's meant to be:
struct ContentView: View {
var body: some View {
BasicContainer {
Text("Roberts BasicContainer")
}
}
}
But what, if I would like to have the GeometryProxy also outside, (like Apple implemented their GeometryReader), like so:
BasicContainer { outsideGeo in
Text("Width: \(outsideGeo.size.width)")
}
I guess some kind of a #Binding could make the trick, but so far I couldn't make it work.
Is this even possible to realize?
Any help is very appreciated !!!
This should work:
let content : (GeometryProxy) -> Content
init(#ViewBuilder content: #escaping (GeometryProxy) -> Content) {
self.content = content
}
then:
GeometryReader { proxy in
content(proxy)
.frame(width: proxy.size.width * 0.3, height: 200)
// do some other fancy stuff ...
}
edit: I assumed your geometryproxy is named proxy. -> Explicit implementation to avoid confusion.
when you call your container you can do:
BasicContainer { outsideGeo in
Text("Width: \(outsideGeo.size.width)")
}
I'm trying to embed a SwiftUI View within a UIKit UIView, within a View again. It will look something like this:
View
↓
UIView
↓
View
Current code:
struct ContentView: View {
var body: some View {
Representable {
Text("Hello world!")
}
}
}
struct Representable<Content: View>: UIViewRepresentable {
private let content: () -> Content
init(#ViewBuilder content: #escaping () -> Content) {
self.content = content
}
func makeUIView(context: Context) -> UIView {
let host = UIHostingController(rootView: content())
let hostView = host.view!
return hostView
}
func updateUIView(_ uiView: UIView, context: Context) {
uiView.backgroundColor = .systemRed
}
}
I want the Representable to only set the backgroundColor of the Text. It shouldn't be any bigger. Also, this is just an example, so this isn't just a Text and setting the background color.
Now
Aim
There is also a problem if the text is really long - it doesn't get constrained by the size of the screen / parent (using hugging priority in this case):
How can I make sure that Representable is only as big as the content itself, Text in this case? It should also work if the text wraps over a line for example when constrained to a certain width.
The simplest way is to use SwiftUI-Introspect and just grab the UIView from it. This is all the code needed:
Text("This is some really long text that will have to wrap to multiple lines")
.introspect(selector: TargetViewSelector.siblingOfType) { target in
target.backgroundColor = .systemRed
}
If the view is a bit more complex and there isn't a UIView specifically for it, you can embed it in a ScrollView so the content will now be a UIView:
ScrollView {
Text("Complex content here")
}
.introspectScrollView { scrollView in
scrollView.isScrollEnabled = false
scrollView.clipsToBounds = false
scrollView.subviews.first!.backgroundColor = .systemRed
}
If you don't want to use Introspect (which I would highly recommend), there is a second solution below. The second solution works in most situations, but not all.
See solution above first.
I've created a working answer. It looks quite complicated, but it works.
It basically works by using the inside GeometryReader to measure the size of the content to be wrapped and the outside GeometryReader to measure the size of the whole container. This means that Text will now wrap lines because it's constrained by the outside container's size.
Code:
struct ContentView: View {
var body: some View {
Wrapper {
Text("This is some really long text that will have to wrap to multiple lines")
}
}
}
struct Wrapper<Content: View>: View {
#State private var size: CGSize?
#State private var outsideSize: CGSize?
private let content: () -> Content
init(#ViewBuilder content: #escaping () -> Content) {
self.content = content
}
var body: some View {
GeometryReader { outside in
Color.clear.preference(
key: SizePreferenceKey.self,
value: outside.size
)
}
.onPreferenceChange(SizePreferenceKey.self) { newSize in
outsideSize = newSize
}
.frame(width: size?.width, height: size?.height)
.overlay(
outsideSize != nil ?
Representable {
content()
.background(
GeometryReader { inside in
Color.clear.preference(
key: SizePreferenceKey.self,
value: inside.size
)
}
.onPreferenceChange(SizePreferenceKey.self) { newSize in
size = newSize
}
)
.frame(width: outsideSize!.width, height: outsideSize!.height)
.fixedSize()
.frame(width: size?.width ?? 0, height: size?.height ?? 0)
}
.frame(width: size?.width ?? 0, height: size?.height ?? 0)
: nil
)
}
}
struct SizePreferenceKey: PreferenceKey {
static let defaultValue: CGSize = .zero
static func reduce(value: inout CGSize, nextValue: () -> CGSize) {
value = nextValue()
}
}
struct Representable<Content: View>: UIViewRepresentable {
private let content: () -> Content
init(#ViewBuilder content: #escaping () -> Content) {
self.content = content
}
func makeUIView(context: Context) -> UIView {
let host = UIHostingController(rootView: content())
let hostView = host.view!
return hostView
}
func updateUIView(_ uiView: UIView, context: Context) {
uiView.backgroundColor = .systemRed
}
}
Result:
Another example to show that it does make the wrapper the exact size as the SwiftUI view:
struct ContentView: View {
var body: some View {
VStack {
Wrapper {
Text("This is some really long text that will have to wrap to multiple lines")
}
.border(Color.green, width: 3)
Wrapper {
Text("This is some really long text that will have to wrap to multiple lines. However, this bottom text is a bit longer and may wrap more lines - but this isn't a problem here")
}
.border(Color.blue, width: 3)
}
}
}
I want to access the parent of my custom view to know whether my view parent is a HStack or VStack, like Divider() could do it. Currently I am hard coding value, but my goal is that I could be get access the parent information inside my custom view to select the right return view.
struct ContentView: View {
var body: some View {
HStack { Divider() }
VStack { Divider() }
HStack { CustomView(parentIsHStack: true) }
VStack { CustomView(parentIsHStack: false) }
}
}
struct CustomView: View {
let parentIsHStack: Bool
var body: some View {
if parentIsHStack {
Text("Parent is HStack")
}
else {
Text("Parent is VStack")
}
}
}
I would be tempted to say this is not a hidden environment variable. I don't see a relevant one when I dump all the environment variables (there are a lot though).
Instead, I believe it's how _VariadicView.Tree works. This contains a root and its content. I'll take how HStack works for example. Inspecting the SwiftUI interface, you can see the following snippet of code:
#frozen public struct HStack<Content> : SwiftUI.View where Content : SwiftUI.View {
#usableFromInline
internal var _tree: SwiftUI._VariadicView.Tree<SwiftUI._HStackLayout, Content>
#inlinable public init(alignment: SwiftUI.VerticalAlignment = .center, spacing: CoreGraphics.CGFloat? = nil, #SwiftUI.ViewBuilder content: () -> Content) {
_tree = .init(
root: _HStackLayout(alignment: alignment, spacing: spacing), content: content())
}
public static func _makeView(view: SwiftUI._GraphValue<SwiftUI.HStack<Content>>, inputs: SwiftUI._ViewInputs) -> SwiftUI._ViewOutputs
public typealias Body = Swift.Never
}
Notice that the Body is of type Never (therefore a primitive view type). The _tree stores information about the layout, and the type HStackLayout obviously shows this is a HStack.
SwiftUI will be using _makeView(view:inputs:) internally to create the view, which I'm assuming gives special treatment to certain views.
You'll need to make custom versions of HStack/VStack and pass an environment variable down to know which kind your subview is in.
I could solve the issue with replacing Apple Stack's, without broking apple api.
struct ContentView: View {
var body: some View {
HStack { Divider() }
VStack { Divider() }
HStack { CustomView() }
VStack { CustomView() }
ZStack { CustomView() }
}
}
struct CustomView: View {
#Environment(\.stack) var stack
var body: some View {
Text("Parent is " + stack.rawValue)
}
}
struct HStack<Content>: View where Content: View {
let alignment: VerticalAlignment
let spacing: CGFloat?
let content: () -> Content
init(alignment: VerticalAlignment = VerticalAlignment.center, spacing: CGFloat? = nil, #ViewBuilder content: #escaping () -> Content) {
self.alignment = alignment
self.spacing = spacing
self.content = content
}
var body: some View {
return SwiftUI.HStack(alignment: alignment, spacing: spacing, content: { content() })
.environment(\.stack, Stack.hStack)
}
}
struct VStack<Content>: View where Content: View {
let alignment: HorizontalAlignment
let spacing: CGFloat?
let content: () -> Content
init(alignment: HorizontalAlignment = HorizontalAlignment.center, spacing: CGFloat? = nil, #ViewBuilder content: #escaping () -> Content) {
self.alignment = alignment
self.spacing = spacing
self.content = content
}
var body: some View {
return SwiftUI.VStack(alignment: alignment, spacing: spacing, content: { content() })
.environment(\.stack, Stack.vStack)
}
}
struct ZStack<Content>: View where Content: View {
let alignment: Alignment
let content: () -> Content
init(alignment: Alignment = Alignment.center, #ViewBuilder content: #escaping () -> Content) {
self.alignment = alignment
self.content = content
}
var body: some View {
return SwiftUI.ZStack(alignment: alignment, content: { content() })
.environment(\.stack, Stack.zStack)
}
}
private struct StackKey: EnvironmentKey { static let defaultValue: Stack = Stack.unknown }
extension EnvironmentValues {
var stack: Stack {
get { return self[StackKey.self] }
set(newValue) { self[StackKey.self] = newValue }
}
}
enum Stack: String { case vStack, hStack, zStack, unknown }