Is it possible to present a SwiftUI view from a SpriteKit scene?
I have various sprites in the game scene. When certain one receive touch data I want a SwiftUI view to pop up.
In the past I have used something like this to present another UI view.
if bloqsLogo.contains(location) {
if instructionsOn == false {
let pop = InstructionsPopUp()
pop.tag = 104
self.view?.addSubview(pop)
instructionsOn = true
} else
if instructionsOn == true {
if let viewWithTag = self.view!.viewWithTag(104) {
viewWithTag.removeFromSuperview()
instructionsOn = false
}else{
print("nah")
}
}
}
My SKScene is an instance of another SwiftUI view and presented there. A good part of my GUI is done in SwiftUI. I am basically wanting to code as much of my App as I can in SwiftUI while keeping the physics and sprites in a SKScene. All of which is going rather well besides this!
Related
I'm starting to learn swiftui and I've run into a problem that is both very basic and easily solvable in UIKit; but after spending days searching the internet and watching WWDC videos I've found no native solution.
The premise is simple: I have an array of songs I want to display in a list; when a user taps on a song view it should highlight the view on press, unhighlight after release, and then play the song (ie trigger an action). Sounds simple right?
Here's what I tried and spent way too much time on:
Using List(selection) + .onEvent(changed): I end up with a UUID (because i've only gotten selection to work with a UUID) that I then have to check against an array of songs to match AND the cell won't unhighlight/select itself; even when I try to manually set the State variable to nil or another generated UUID.
Using .onTap (either on or in the cell): I have to tap on the text of the cell to trigger onTap so I get a lot of taps that just don't work (because I have lots of white space in the cell). I also don't get a nice UI color change on press/release.
So after spending hours trying many different things I've finally come up with a solution and I basically wanted to create an account and share it to hopefully help other developers in my position. Because this so very annoyed me that something so basic took so much effort and time to do.
In the end the best solution I came up with was this:
Using ZStack and an empty button:
edit: I found I need to include and hide the content otherwise the button doesn't grow to fill the space (seems in lists it does for some reason). Though not sure what the hit on performance is of rendering the content twice when hiding it. Maybe a GeometryReader would work better?
struct SelectionView: ViewModifier {
let onSelect: () -> Void
func body(content: Content) -> some View {
ZStack (alignment: .leading) {
Button {
onSelect()
} label: {
content
.hidden()
}
content
}
}
}
extension View {
func onSelection(_ selection: #escaping () -> Void) -> some View {
self.modifier(SelectionView(onSelect: selection))
}
}
then to use it:
SongCell(song: song)
.onSelection {
// Do whatever action you want
}
No messing around with list selection, no weird tap hit boxes, and get the press/release color change. Basically put an empty button in a ZStack and trigger off it's action. Could possibly cause tap/touch issues with more complicated cells (?) but it does exactly what I need it to do for my basic app. I'm just not sure why it took so much effort and why apple doesn't support such a basic use case by default? If I've overlooked something native please do inform me. Thanks.
I got the basic idea what you are trying to do. I'm Going to show simple example. Maybe using this you will be able to find proper solution.
First let's create a color : -
#State var colorToShow : Color = Color.blue
Now in body we have our ZStack or Your cell that we want to deal with : -
ZStack{
colorToShow
}.frame(width: 50, height: 50).padding()
.onLongPressGesture(minimumDuration: 3) {
print("Process Complete")
colorToShow = .green
} onPressingChanged: { pressing in
if pressing {
print("Pressing")
colorToShow = .red
} else {
print("Pressing Released")
colorToShow = .blue
}
}
Here we are using .onLongPressGesture. You can set minimum duration on which you want to perform action. Now on process completion You set what you want to do. OnPressingChange give you a bool value that changes according to user is pressing that button or not. Show color change(Highlight) or do action while bool value is true. When user release button do action or unhighlight since bool value turns false.
Hope you find it useful.
During Xcode UI test, I found my custom view's (MenuViewButton) is un-hittable in a test, I could found it but cannot touch it. In debug , when I po isHittable in console, it returns false. However I'm not sure if this is the correct behavior.
Per this thread XCUIElement exists, but is not hittable said, isHittable is default false for custom view element, and default true for UIKit standard view. But I don't know if it is the same behavior in SwiftUI.
Since the way someView.isAccessibilityElement = true is not possible in SwiftUI. My question is how could I let my custom view became hittable? Then it could be tapped in a test.
private var aView: some View {
MenuViewButton(
image: Image("an image name"),
text: Text("a string")
)
.accessibility(identifier: "xxx name")
}
I also use force tap with coordinate in case tap() is not working, but to give a offset of normalizedOffset didn't fix the problem in all places, it means some un-hittable element could be tapped, that is great but some others still not.
So may I know where normalizedOffset is start, from the middle of frame to give the offset or the top left?
func forceTapElement(timeout: TimeInterval) {
if !self.waitForExistence(timeout: timeout) {
return
}
if self.isHittable {
self.tap()
} else {
let coordinate: XCUICoordinate = self.coordinate(withNormalizedOffset: CGVector(dx: 0.1, dy: 0.0))
coordinate.tap()
}
}
Add https://github.com/devexperts/screenobject as a dependency
Use .tapUnhittable() instead of .tap() for this particular view. It gets the coordinates and taps using them
I have the same situation and am looking for answers. What has worked for me was to use:
let coordinate = element.coordinate(withNormalizedOffset: CGVector(dx: 0.5, dy: 0.5))
Still this seems like workaround for a real problem. One other strange thing is that i do not have this problem on iOS15.0 simulator, only for later versions. Currently trying with iOS15.2
One more thing I've tried is to add
.accessibilityElement(children: .combine)
and specificly telling it's a button with
.accessibility(addTraits: .isButton)
But this doesn't solve the problem.
Seems that isAccessibilityElement would be an answer here, but SwiftUI doesn't seem to have such.
I add Left Navigation Back button in collection view controller with code.
//Add Navigation Bar
navbar.autoresizingMask = [.flexibleWidth, .flexibleBottomMargin, .flexibleRightMargin]
navbar.delegate = self
UINavigationBar.appearance().barTintColor = UIColor(red: 0.0/255.0, green:49.0/255.0, blue:79.0/255.0, alpha:0.1)
UINavigationBar.appearance().tintColor = UIColor.white
UINavigationBar.appearance().isTranslucent = true
UINavigationBar.appearance().titleTextAttributes = [NSForegroundColorAttributeName : UIColor.white]
navItem.title = prefs.value(forKey: "PROVIDER_NAME") as! String?
let image = UIImage(named: "back_image")
navItem.leftBarButtonItem = UIBarButtonItem(image: image, style: .plain, target: self, action: #selector(addTapped))
navItem.leftBarButtonItem?.imageInsets = UIEdgeInsetsMake(0, 0, 0, 0)
Back button is so close to the left. I would like to add padding about 10px from the left. So, I changed the code into
navItem.leftBarButtonItem?.imageInsets = UIEdgeInsetsMake(0, 15, 0, 0)
but it is not working and image Back button looks smaller. How can I do to add space to the left of Back button?
I would recommend replacing UINavigationBar with a simple UIView. This way you would gain a full control over the layout of the navigation bar. It wouldn't be anything more than a transparent UIView with a back button and a title label inside. As simple as that.
The real UINavigationBar is more than that. It's meant to manage a stack of UINavigationItem objects. It adjusts itself depends on the current item and knows how to make an animated (and even interactive) transition from one state to another. That's why you can't change much about the bar's appearance. You shouldn't treat it as a regular view.
UPDATE
Another way to achieve this is a little tricky. You can implement it completely from a storyboard and you don't need mess with appearance.
Add UINavigationBar to a view controller.
Add a plain UIView to the left side of UINavigationBar and make its background color completely transparent.
Add UIButton to the view added in the previous step and set a back icon as its image.
Add constraints to the button to align it to the right side of its superview.
Adjust the width of the view so the back button position is exactly where you want it to be.
This is a view hierarchy in the storyboard:
This is how your UINavigationBar will look like (for you the background will be transparent):
I'm performing flip view transition on two views, which are bounded in A Container View. Flippng them first time is working fine. On second time views Frame goes out of view.
like
[<UIView: 0x7fc2316aa030; frame = (-154 -529; 0 0); autoresize = RM+BM; layer = <CALayer: 0x7fc2316aa1a0>>]
After flipping again, it shows container view.
It's working fine if I Uncheck "Use Autolayout" in my project.
But wWhat to do if I am using AutoLayout???
Here is code:
#IBAction func flipViews()
{
if a==false
{
UIView.transitionFromView(new, toView: old, duration: 1, options: .TransitionFlipFromLeft, completion: {(isFinished : Bool)
in
print(self.view_Effects.subviews)
// self.old.frame=self.view_Effects.frame
})
a=true
}
else
{
UIView.transitionFromView(old, toView: new, duration: 1, options: .TransitionFlipFromLeft, completion:{(isFinished : Bool)
in
print(self.view_Effects.subviews)
//self.view_Effects.hidden=true
//self.new.frame=self.view_Effects.frame
})
a=false
}
When I layout my views, all start work just fine. When you make a transform, it's important to remember, that autolayout always calculate your views bounds and frame, based on constraints that you set. So, in my case, I just added center vertical and horizontal align, width and height to my rotated view, so the autolayout mechanism knows when exactly my view is. And all goes just fine. Here is a good autolayout tutorial
http://www.raywenderlich.com/50319/beginning-auto-layout-tutorial-in-ios-7-part-1
I need a select box with options and an on select / on change so i can populate a second select box.
My first instinct was to just create one using a surface with a click event and a renderController / scrollview to make my drop down appear. This works wonderfully except that if I leave and come back to the page the zindex of the scrollview breaks and it scrolls over the container size.
Its a bug I need to deal with but my other problem is that with the small Iphone screen size conventional drop downs just eat to much screen real-estate.
This stackoverflow famo.us: how to handle textbox.onchange events had some great hints on how to edit an InputSurface. I thought using that and looking at the code for a Surface I could do it but no luck.
Any Ideas on how to deal with the lack of a select surface?
You can access the value property from inside the callback function:
function SelectSurface(options) {
Surface.apply(this, arguments);
this.onchange = options.onchange;
this._superDeploy = Surface.prototype.deploy;
SelectSurface.prototype.elementType = 'select';
}
SelectSurface.prototype = Object.create(Surface.prototype);
SelectSurface.prototype.constructor = SelectSurface;
SelectSurface.prototype.deploy = function deploy(target) {
target.onchange = this.onchange;
this._superDeploy(target);
};
var regionSelector = new SelectSurface({
size:[140,40],
onchange: regionSelect(),
content: '<option disabled selected style="display:none;">REGION</option><option value="central">CENTRAL</option><option value="northern">NORTHERN</option><option value="pacific">PACIFIC</option><option value="southern">SOUTHERN</option><option value="western">WESTERN</option>',
});
var regionSelect = function(){
return function() {
alert(this.value);
}
};