I have a scrollview and I'm watching user input. I would like to know where their finger currently is on the X plane. Is this possible through the ScrollView and/or its delegate or do I have to override touchesBegan, etc?
I'm assuming you set up your scroll view delegate. If you did, then you only need to implement the scrollViewDidScroll: method from the UIScrollViewDelegate protocol...
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
CGPoint touchPoint = [scrollView.panGestureRecognizer locationInView:scrollView];
NSLog(#"Touch point: (%f, %f)", touchPoint.x, touchPoint.y);
}
This will update while the user is scrolling.
Additional info: Note that if you have something like a UIPageControl, that your scroll view is navigating between, you may have to calculate the x position based on the number of pages (ie if each page is 100 pixels wide, page 0 will start at point 0, page one at point 100, etc..).
CGPoint touchPoint = [scrollView.panGestureRecognizer locationInView:scrollView];
CGFloat x = touchPoint.x;
CGPoint point = [_scrollView locationOfTouch:touchIndex inView:_scrollView];
touchindex: 0 for first touch and 1, 2,3 so on
if inview:nil then point will be in the window base coordinate sysytem
CGFloat x = point.x;
CGFloat y = point.y
I use the panGesture of the scrollView because it's more accurate if you want to know the position of the x plane when you have only vertical scroll.
[self.scrollView.panGestureRecognizer addTarget:self action:#selector(handlePanForScrollView:)];
and then:
- (void)handlePanForScrollView:(UIPanGestureRecognizer *)gesture {
CGPoint positionInView = [gesture locationInView:self.scrollView];
}
Related
I'm using UIScroll View to make a gallery-like ui with paging functionality. Basically like this:
Since I need paging, so I set the width of scrollview equals to the width of a single page, in my example, the width of the pink rectangular.
But I want two extra things:
Tapping the yellow or blue area will bring the corresponding rectangular to the center.
One can scroll/swipe on yellow or blue area (out of the scrollview), which means the entire width of the screen is scrollable.
I followed this thread and added - (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event. BUT by doing so, I can only achieve my second goal. When I set selector or delegate handling tapping reaction of yellow and blue, it does't work. Any idea about it?
That answer you referenced is one of my old favorites. It doesn't contemplate your first requirement, but I think it can handle it very neatly with just the addition of a tap gesture recognizer.
Create it on your "ClipView":
UITapGestureRecognizer *tapGR = [[UITapGestureRecognizer alloc] initWithTarget:self action:#selector(tap:)];
[self.myClipView addGestureRecognizer:tapGR];
// myClipView is the view that contains the paging scroll view
- (void)tap: (UITapGestureRecognizer *)gr {
// there are a few challenges here:
// 1) get the tap location in the correct coordinate system
// 2) convert that to which "page" was tapped
// 3) scroll to that page
}
Challenge 1) is easy thanks to the gesture recognizer, which answer locationInView:
CGPoint location = [gr locationInView:self.scrollView];
For challenge 2) we need to work out what page within your scroll view was tapped. That can be done with pretty simple arithmetic given the page width.
// assuming you have something like this
#define kPAGE_WIDTH // some float
// page is just how many page-width's are represented by location.y
NSInteger page = floor(location.y/kPAGE_WIDTH);
Now, challenge 3) is easy now because we can change a page to it's scroll position straight-forwardly...
CGFloat y = page * kPAGE_WIDTH;
[self.scrollView setContentOffset:CGPointMake(y, 0.0f) animated:YES];
Or, all in one chunk of code...
- (void)tap: (UITapGestureRecognizer *)gr {
CGPoint location = [gr locationInView:self.scrollView];
NSInteger page = floor(location.y/kPAGE_WIDTH);
CGFloat y = page * kPAGE_WIDTH;
[self.scrollView setContentOffset:CGPointMake(y, 0.0f) animated:YES];
}
EDIT
You may also want to exclude the "current page" area from the gesture recognizer. That's simply done by qualifying the test in the tap method.
The only trick is to get the tap position in the same coordinate system as the scroll view's frame, that is, the clip view...
CGPoint locationInClipper = [gr locationInView:gr.view];
And the SDK provides a nice method to test...
BOOL inScrollView = [self.scrollView pointInside:locationInClipper withEvent:nil];
So...
- (void)tap: (UITapGestureRecognizer *)gr {
CGPoint locationInClipper = [gr locationInView:gr.view];
BOOL inScrollView = [self.scrollView pointInside:locationInClipper withEvent:nil];
if (!inScrollView) {
CGPoint location = [gr locationInView:self.scrollView];
NSInteger page = floor(location.y/kPAGE_WIDTH);
CGFloat y = page * kPAGE_WIDTH;
[self.scrollView setContentOffset:CGPointMake(y, 0.0f) animated:YES];
}
}
Right now i am working on custom control for fitness related app following is the image of control i have developed so far.
the red view can be draggable vertically only from inner most circle to outer circle.
i have so far managed to drag view vertically from inner most circle to outer circle.
here what i want to achieve,
each circle represent 2500 steps for e.g. innermost circle is 0,then 2500,5000 till outer circle 15000
user can select goal in increment of 500 only
so i am stuck at how to convert red view's sliding points to steps
also i have noticed when i swipe fast i got irregular interval of current touch points so steps increment are low on fast swipe & high on low speed swipe.
any help pointing towards solution is highly appreciated.
here is my code so far.
Circle Code
I would use an overlay UIScrollView for the red draggable part. And only allow vertical scrolling and set pagingEnabled to NO. And set its delegate as the viewcontroller.
Then, you can make your custom paging for 500step per page as follows by setting kCellHeigth to the number of pixels corresponding to 500steps in your image:
- (void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint *)targetContentOffset
{
CGFloat kMaxIndex = 30; //=15000/500
CGFloat targetY = scrollView.contentOffset.y + velocity.y * 60.0;
CGFloat targetIndex = round(targetY / (kCellHeigth + kCellSpacing));
if (targetIndex < 0)
targetIndex = 0;
if (targetIndex > kMaxIndex)
targetIndex = kMaxIndex;
targetContentOffset->y = targetIndex * (kCellHeigth + kCellSpacing);
}
-- New Solution After looking at your code --
I see that for iPhone5(width=320) the radius delta between adjacent circles are roughly 20 points. And this space corresponds to 2500steps.
So 1 point = 125 steps
Since you want 500 step increments, it corresponds to 4 points in the iPhone5/5s screen. Maybe when the users touch ends, you can try to snap the navigator to the closest 4 point grid:
-(void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
NSLog(#"%s",__FUNCTION__);
UITouch *touch = [touches anyObject];
touchPoint = [touch locationInView:_navView];
CGPoint newCenter = CGPointMake(_navView.center.x, _navView.center.y + (touchPoint.y - touchStart.y));
CGFloat yDelta = newCenter.y - _navMinPoint.y;
int yDeltaMultiple = yDelta / 4;
int newYDelta = yDeltaMultiple * 4;
newCenter.y = newYDelta;
_navView.center = newCenter;
_labelSteps.center = [self setStepsLabelfromNavView];
}
I didn't write these in Xcode so there might be typos/errors. If this works in iPhone 5/5s, then we will need to change 4 points to a variable.
I have a scenario where I need to implement an Offline Map concept for which I am using the image of map on a UIScrollView that zooms on PinchGesture, which works fine.
Problem
I have a UIButton on map. While zooming, the button does not track its position with respect to UIImageView which is being scaled.I am able to reframe the button without affecting its size. But the position is wrong.
TLDR,
I need to reproduce the mapView with annotation kinda concept on UIScrollView with UIImage on it. Can any one help?
Thanks in advance :)
I have found the answer for this. I initially stored the button value in a CGRect initialButtonFrame. Then I updated the button frame (only origins, not the size of the button size as I wanted the button not to zoom like the image ie; I button should not zoom) using the scrollview delegate
- (void)scrollViewDidEndZooming:(UIScrollView *)scrollView withView:(UIView *)view atScale:(float)scale
{
[self manageImageOnScrollView];//here i managed the image's coordinates and zoom
[self manageButtonCoordinatesWithRespectToImageWithScale:scale];
}
-(void)manageButtonCoordinatesWithRespectToImageWithScale:(float)scaleFactor
{
//initialButtonFrame is frame of button
self.button.frame = CGRectMake((initialButtonFrame.origin.x * scaleFactor),
(initialButtonFrame.origin.y * scaleFactor),
initialButtonFrame.size.width,
initialButtonFrame.size.height);
[self.scrollView addSubview:self.button];// I removed the button from superview while zooming and later added with updated button coordinates which I got here
}
If you know your current offset and zoom of your map, you should be able to compute the position of your button:
//Assuming your map image has its origin at 0, 0
CGPoint mapOffsetX, mapOffsetY; // these would come from your map as you calculated it.
CGPoint mapZoomFactor; // 1.0 means not zoomed, 3.0 means zooming in 3x, etc
CGPoint buttonAnchorPosition; //the position of your button on your map at 1.0 zoom
CGFloat buttonX = buttonAnchorPosition.x * mapZoomFactor + mapOffsetX;
CGFloat buttonY = buttonAnchorPosition.y * mapZoomFactor + mapOffsetY;
CGPoint buttonPosition = CGPointMake(buttonX, buttonY);
button.position = buttonPosition;
Try that, good luck
I am building an iPad app where I needed to allow resizing views functionality using divider view provided between two views. The divider view is just a 20px height view between two half screen content views - please refer attached images.
When user scrolls this divider view up or down, both content views changes their sizes appropriately. I have extended UIView and implemented this using touchMoved delegate as code given below in touchesMoved delegate. It works fine. The only thing is missing with TouchMoved is you can't flick divider view to top or bottom directly. You have to drag all the way to top or bottom!
To support flicking the view I have tried UIPanGestureRecognizer but I don't see smooth dragging with it. Setting split-position of parent resizes both content views as shown in the code. When I handle split position change in UIGestureRecognizerStateChanged state, just touching divider view flick it to top or bottom. Handling split position change in UIGestureRecognizerStateEnded does the same but I don't see content view resizing with dividerview scrolling!
Could someone please tell me how could I achieve both smooth scrolling of divider view with resizing content views (like touchMoved) and flicking the view? Any alternative approach would also be fine. Thanks.
- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
UITouch *touch = [touches anyObject];
if (touch) {
CGPoint lastPt = [touch previousLocationInView:self];
CGPoint pt = [touch locationInView:self];
float offset = pt.y - lastPt.y;
self.parentViewController.splitPosition = self.parentViewController.splitPosition + offset;
}
}
- (void)handlePan:(UIPanGestureRecognizer*)recognizer {
CGPoint translation = [recognizer translationInView:recognizer.view];
CGPoint velocity = [recognizer velocityInView:recognizer.view];
if (recognizer.state == UIGestureRecognizerStateBegan) {
} else if (recognizer.state == UIGestureRecognizerStateChanged) {
// If I change split position here, I don't see smooth scrolling dividerview...it directly jumps to the top or bottom!
self.parentViewController.splitPosition = self.parentViewController.splitPosition + translation.y;
} else if (recognizer.state == UIGestureRecognizerStateEnded) {
// If I change split position here, the same thing happens at end and I don't see my divider view moving with my scrolling and resizing my views.
self.parentViewController.splitPosition = self.parentViewController.splitPosition + translation.y;
}
}
Initial screen
Increased top view size by scrolling divider view towards bottom.
Top view is totally hidden here but I have to scroll divider view all
the way to top. I want to flick the divider view so that it directly
goes from any position to top
If I understand you correctly, you have two separate problems here.
1st: The 'unsmooth' dragging when using the GestureRecognizer. The problem in your code is, that you add the translation every time the GR calls it's handle method. Since the translation is measured continuously, you're adding a higher value every time it's called (i.e. the first call adds 10 to the split position, the 2nd 20, the 3rd 30 and so on).
To solve this you should set the translation to zero after you've updated the split position:
- (void)handlePan:(UIPanGestureRecognizer*)recognizer {
CGPoint translation = [recognizer translationInView:recognizer.view];
if (recognizer.state == UIGestureRecognizerStateChanged) {
self.parentViewController.splitPosition = self.parentViewController.splitPosition + translation.y;
}
[recognizer setTranslation:CGPointZero inView:recognizer.view];
}
2nd: To allow the user to flick the split position to the top or bottom, you could check the velocity in UIGestureRecognizerStateEnded, and if it exeeds some value instantly set the splitposition to top or bottom.
But it might be more convenient to use a UISwipeGestureRecognizer.
- (void)handleSwipe:(UISwipeGestureRecognizer *)gr
{
if (gr.direction == UISwipeGestureRecognizerDirectionUp){
[self.parentViewController moveSplitViewToTop];
}
else if (gr.direction == UISwipeGestureRecognizerDirectionDown){
[self.parentViewController moveSplitViewToBottom];
}
}
In this case it might be necessary (not sure, maybe it's not) to require the SwipeGR to fail before the PanGR triggers by setting:
[panGestureRecognizer requireGestureRecognizerToFail:swipeGestureRecognizer];
Hope that helped.
Edit:
Regarding your comment, I assume by frequency you mean velocity. If you only use the PanGR you could modify the code above to sth. like this:
- (void)handlePan:(UIPanGestureRecognizer*)recognizer {
CGPoint translation = [recognizer translationInView:recognizer.view];
CGPoint velocity = [recognizer velocityInView:recognizer.view];
if (recognizer.state == UIGestureRecognizerStateChanged) {
self.parentViewController.splitPosition = self.parentViewController.splitPosition + translation.y;
}
else if (recognizer.state == UIGestureRecognizerStateEnded){
if (velocity.y > someValue){
[self.parentViewController moveSplitViewToBottom];
}
else if (velocity.y < someValue){
[self.parentViewController moveSplitViewToTop];
}
}
[recognizer setTranslation:CGPointZero inView:recognizer.view];
}
I'm not sure if the velocity is signed, if not you've got to check for the translation again in the if-block.
UIPanGestureRecognizer *panRecognizer = [[UIPanGestureRecognizer alloc] initWithTarget:self action:#selector(pan:)];
[self addGestureRecognizer:panRecognizer];
- (void)pan:(UIPanGestureRecognizer *)gesture {
NSLog(#"%f", [gesture translationInView:self].x);
}
The above code will log the relative position of my current pan, but how can I get the absolute position for the view I'm in?
I'm simply just wanting to slide a UIImageView to wherever the user's finger is.
translationInView gives you the pan translation (how much x has changed) and not the position of the pan in the view (the value of x). If you need the position of the pan, you have to use the method locationInView.
You can find the coordinates relatively to the view as follows:
- (void)pan:(UIPanGestureRecognizer *)gesture {
NSLog(#"%f", [gesture locationInView:self].x);
}
Or relatively to the superview:
- (void)pan:(UIPanGestureRecognizer *)gesture {
NSLog(#"%f", [gesture locationInView:self.superview].x);
}
Or relatively to the window:
- (void)pan:(UIPanGestureRecognizer *)gesture {
NSLog(#"%f", [gesture locationInView:self.window].x);
}
Swift 5
Use the method .location() that returns a CGPoint value. [documentation]
For example, relative location of your gesture to self.view:
let relativeLocation = gesture.location(self.view)
print(relativeLocation.x)
print(relativeLocation.y)
I think a simple way of something like this is to get the x and y of the touch and tracking it, once it has 2 points (say X:230 Y:122) you set the scroll of the UIScroll view to the x and y.