Custom transition iOS 7 - ios7

I have been struggling writing a custom transition to present a controller. What I would like to do is to have a side menu (right side), and when user makes a swipe gesture present this controller.
I already wrote a custom transitioning delegate which is presenting the controller, but I would like to dismiss it using the same kind of animation. I have tried and tried, but the controller dismisses with no animation at all, it just disappears.
This is what I have so far, I'm using xamarin IOS:
var container = transitionContext.ContainerView;
var fromViewController = transitionContext.GetViewControllerForKey (UITransitionContext.FromViewControllerKey);
var toViewController = transitionContext.GetViewControllerForKey (UITransitionContext.ToViewControllerKey);
var endingFrame = new RectangleF (66, container.Frame.Y, container.Frame.Width, container.Frame.Height);
var startFrame = new RectangleF (UIScreen.MainScreen.Bounds.Width, 0, 0, container.Frame.Height);
if (Presenting) {
container.AddSubview (fromViewController.View);
container.AddSubview (toViewController.View);
toViewController.View.Frame = startFrame;
UIView.Animate (TransitionDuration (transitionContext), () => {
toViewController.View.Frame = endingFrame;
}, () => {
transitionContext.CompleteTransition (true);
});
} else {
container.AddSubview (fromViewController.View);
container.AddSubview (toViewController.View);
UIView.Animate (TransitionDuration (transitionContext), () => {
fromViewController.View.Frame = startFrame;
}, () => {
transitionContext.CompleteTransition (true);
});
}
I think the problem is with the frames, I don't know if I'm setting them correctly.
please help!!

Related

How to work with EventListeners for draggable scrolling?

I'm trying to build a calendar in which you can scroll. I would like to achieve the scrolling also by dragging. So I use EventListeners.
mousemove continuously triggers, after the first mousedown, even if I already released the mouse. So the removeEventListeners don't really work. I don't quite understand what's wrong or how to get the interactions between all Listeners to work correctly.
Here is my CodeSandBox
mounted() {
this.initScrollCalendar()
},
methods: {
initScrollCalendar() {
const calendar = this.$refs.calendar
calendar.scrollLeft = this.position.left;
calendar.addEventListener('mousedown', (e) => this.mouseDownHandler())
},
mouseDownHandler() {
const calendar = this.$refs.calendar
calendar.addEventListener('mousemove', (e) => this.mouseMoveHandler(e) )
calendar.addEventListener('mouseup', this.mouseUpHandler());
},
mouseMoveHandler(e) {
console.log("Move")
const calendar = this.$refs.calendar
const rect = calendar.getBoundingClientRect()
const clientX = e.clientX - rect.left
const dx = clientX - this.position.x
calendar.scrollLeft = this.position.left + dx
},
mouseUpHandler() {
console.log("Up")
const calendar = this.$refs.calendar
calendar.removeEventListener('mousemove', (e) => this.mouseMoveHandler(e));
calendar.removeEventListener('mouseup', this.mouseUpHandler());
}
}
I ended up using vue-dragscroll. Works like a charm and the setup is totally simple. If needed, I can also set a starting position of my scroll container.
Don't forget overflow: auto in css
<div ref="scrollContainer" v-dragscroll>
...
</div>
// Setting starting point
const scrollContainer = this.$refs.scrollContainer
scrollContainer.scrollLeft = 500;

How can I present an overlay above the keyboard in SwiftUI?

I have a screen in my app that automatically displays a keyboard when the screen is presented. The screen allows users to enter their mobile number. In order to select a dialling code, the user needs to tap a button which will then trigger the presentation of an overlay.
Problem
The overlay is being presented, but it's showing up behind the currently present keyboard.
Question
How can I make this overlay be the very top view?
There is no way for me to use the zIndex modifier on the keyboard for obvious reasons. I'm wondering if there is a way to make the overlay the top view when it's about to be presented, or if the overlay can be added to the window.
Thanks in advance
You should probably only have one source of input at any given time — either the keyboard should be presented to enter a number, or the overlay should be presented to pick the dialing code, not both. Here's an example which hides the keyboard when overlay appears, and vice versa. (Keyboard dismissal code from this answer.)
struct ContentView: View {
#State private var number = ""
#State private var showingOverlay = false
var body: some View {
GeometryReader { proxy in
ZStack(alignment: .top) {
// Just here to force ZStack to use the whole screen
Rectangle()
.fill(Color.clear)
VStack(alignment: .leading) {
Button("Select Dialing Code") {
UIApplication.shared.endEditing()
self.showingOverlay = true
}
TextField("Enter your number", text: self.$number, onEditingChanged: {
if $0 { self.showingOverlay = false }
})
.keyboardType(.phonePad)
}
Overlay(showing: self.$showingOverlay)
.frame(height: 400)
.offset(x: 0, y: proxy.size.height + (self.showingOverlay ? -300 : 100))
.animation(.easeInOut)
}
}
}
}
struct Overlay: View {
#Binding var showing: Bool
var body: some View {
ZStack {
RoundedRectangle(cornerRadius: 15)
.fill(Color(.systemGray4))
Button("Dismiss") {
self.showing = false
}
}
}
}
extension UIApplication {
func endEditing() {
sendAction(#selector(UIResponder.resignFirstResponder), to: nil, from: nil, for: nil)
}
}

React Native : How can I get gestures onTouchStart, onTouchEnd and onTouchMove event positions ( like X and Y Coordinations) in Android

How would I get the coordinates of my onTouchEnd event. So I touch or move figure anywhere within the display and I can retrieve the X, Y positioning of where it happened. onResponderRelease is not triggered in a onTouchEnd on Android,
I've included example implementations for all of the gesture response event handlers, but have commented out most of them on my View to just provide the basic functionality: subscribing to all touch and move events
pseudo code would look like this :
<View
style={this.props.style}
ref={this._saveRef}
onStartShouldSetResponder={(event) => {
return this.handleDoubleTap({nativeEvent:
event.nativeEvent});
}}
onResponderGrant={this._onTouchStart}
onResponderMove={this._onTouchMove}
onResponderRelease={this._onTouchEnd}
onResponderTerminate={this._onTouchEnd} // When
onResponderRelease can't call by some reason
>
{this.props.children}
</View>
Responder Event Handler Methods :
if (this.isDoubleTap) {
return false;
}
this.context.setScroll && this.context.setScroll(false);
const currentTouchTimeStamp = Date.now();
this._prevTouchInfo = {
prevTouchX: nativeEvent.pageX,
prevTouchY: nativeEvent.pageY,
prevTouchTimeStamp: currentTouchTimeStamp
};
this.props.onStart(nativeEvent);
};
_onTouchMove = ({nativeEvent}) => {
if (nativeEvent.touches.length <= 1) {
if (this.isDoubleTap) {
return false;
}
const self = this;
const gesture = {
x0: this._prevTouchInfo.prevTouchX,
x1: nativeEvent.pageX,
y0: this._prevTouchInfo.prevTouchY,
y1: nativeEvent.pageY,
dx: nativeEvent.pageX - this._prevTouchInfo.prevTouchX,
dy: nativeEvent.pageY - this._prevTouchInfo.prevTouchY
};
InteractionManager.runAfterInteractions(function () {
self.props.onMove(nativeEvent, gesture);
});
}
};
_onTouchEnd = ({nativeEvent}) => {
nativeEvent.touches.length === 0 && this.context.setScroll && this.context.setScroll(true);
this.props.onEnd(nativeEvent);
};
}
I am Developing an Application in React native.Actually when i am touch on Particular Position On view, getting the Corresponding x and y co-ordinates. App UI would look like this:
If this is still not enough functionality for android (eg. if you need multi-touch info), refer to PanResponde

Touch events on UIButton stop after delayed Animation is started

I am creating a UIButton inside a UIView. If I apply a transition to the UIView the myButton_TouchUpInside touch event on the UIButton stops firing. Can anyone advise? (see edit)
(I am using Xamarin here)
UIView myView = new UIView()
{
BackgroundColor = UIColor.Black,
RestorationIdentifier = identifier,
UserInteractionEnabled = true,
ClipsToBounds = true
};
UIButton myButton = new UIButton()
{
BackgroundColor = UIColor.Red,
UserInteractionEnabled = true
};
myButton.TouchUpInside += myButton_TouchUpInside;
myButton.SizeToFit();
myButton.Frame = new CGRect(0, 10, myButton.Bounds.Width, myButton.Bounds.Height);
myView.AddSubview(myButton);
View.AddSubview(myView);
Click events fire at this point. If I add a transition they stop working after the transition has occurred, I presume they have been left behind in the transition:
var myNewFrame = new CGRect(0, 50, myButton.Frame.Width, myButton.Frame.Height);
UIView.Transition(myView, 0.5, UIViewAnimationOptions.CurveEaseIn, () => { myView.Frame = myNewFrame; }, null);
I have read that the Frame of the UIButton is the key here. I checked the Frame after adding it to the UIView and then again in the completed Action in the UIView.Transition (not shown in the code above) and it's size and position are exactly the same.
edit
It isn't the transition that's causing the issue, its the animation that follows (the UIView slides then after X seconds it fades out). Directly following the transition is this code:
UIView.Animate(0.25, 10, UIViewAnimationOptions.CurveEaseInOut, () => { myView.Alpha = 0; }, () => { myView.RemoveFromSuperview(); });
If I remove this, it works.
OK, rather than using the inbuilt delay property I wrapped it in an async method as so:
UIView.Transition(myView, 0.5, UIViewAnimationOptions.CurveEaseIn, () => { myView.Frame = myNewFrame; }, ()=> {FadeOut(duration)});
private async FadeOut(int duration){
await Task.Delay(duration * 1000);
UIView.Animate(0.25, 0, UIViewAnimationOptions.CurveEaseInOut, () => { myView.Alpha = 0; }, () => { myView.RemoveFromSuperview(); });
}

Close NavigationWindow (modal ) from another js file in Titanium IOS7

I am migrating a current project to 3.1.3 . I need a close button on the modal window so i had to use a NavigationWindow as suggested in the IOS7 migration guide. Here is what i have
btnSubscription.addEventListener('click', function(e) {
Ti.API.info('Subscription Button Clicked.');
openWindow("paymentsubscription.js", "Subscription");
});
function openWindow(url, title) {
var win = Ti.UI.createWindow({
url : url,
backgroundColor : 'white',
modal : true,
title : title
});
if (Titanium.Platform.osname !== "android") {
var winNav = Ti.UI.iOS.createNavigationWindow({
modal: true,
window: win
});
}
if (Titanium.Platform.osname !== "android") {
winNav.open();
}
else {
win.open();
}
}
Now on paymenttransaction.js i was previously doing this when i was using titanium 2.x
var mainWindow = Ti.UI.currentWindow;
var mainWinClose = Ti.UI.createButton({
style : Ti.UI.iPhone.SystemButtonStyle.DONE,
title : 'close'
});
if (Titanium.Platform.osname !== "android") {
mainWinClose.addEventListener('click', function() {"use strict";
mainWindow.close();
});
responseWindow.setRightNavButton(responseWinRightNavButton);
mainWindow.setRightNavButton(mainWinClose);
}
The problem i am facing is that i need to close winNav in the case of IOS and not win anymore. In paymenttransaction.js i was previously using
var mainWindow = Ti.UI.currentWindow;
But now i need to close the navigation window(winNav) and this does not hold good anymore. Is there anyway to do this? . Is there a Ti.UI.currentWindow equivalent for NavigationWindow ?
You aren't using the navigationWindow properly. You shouldn't be calling open() on a window when you use one.
You are looking for:
`winNav.openWindow(yourWindow)
Also when you are creating a new window, pass a pointer to your navigationWindow in the constructor, then you can close the window properly. Don't create a window like that use CommonJS's require() to return your window:
paymenttransaction.js:
function paymentTransactionWindow(navGroup, otherArgs) {
var mainWinClose = Ti.UI.createButton({
style : Ti.UI.iPhone.SystemButtonStyle.DONE,
title : 'close'
});
var win = Ti.UI.createWindow({
url : url,
backgroundColor : 'white',
modal : true,
title : title,
rightNavButton: mainWinClose
});
if (Titanium.Platform.osname !== "android") {
mainWinClose.addEventListener('click', function() {
navGroup.closeWindow(win);
});
return win;
}
module.exports = paymentTransactionWindow;
Then in your previousWindow:
PaymentTransactionWindow = require('/paymentTransactionWindow); //the filename minus .js
var paymentTransactionWindow = new PaymentTransactionWindow(winNav, null);
mainNav.openWindow(paymentTransactionWindow);
watch some of the videos on commonJS: http://www.appcelerator.com/blog/2011/08/forging-titanium-episode-1-commonjs-modules/