Problem: I have a pinch gesture recognizer on a View Controller which I'm using to scale an image nested inside the View Controller. The transform below works fine, except that the image is scaled from the upper left instead of the center. I want it to scale from the center.
Setup:
a UIImageView set to Aspect Fill mode (nested within a few views, origin set to center).
a UIPinchGestureRecognizer on the container View Controller
I verified:
anchorPoint for image view is (0.5, 0.5)
the center is moving after every transform
no auto layout constraints on the view or its parent (at least at build time)
Also, I tried setting center of the UIImageView after the transform, the change doesn't take effect until after the user is done pinching.
I don't want to center the image on the touch because the image is smaller than the view controller.
CGFloat _lastScale = 1.0;
- (IBAction)pinch:(UIPinchGestureRecognizer *)sender {
if ([sender state] == UIGestureRecognizerStateBegan) {
_lastScale = 1.0;
}
CGFloat scale = 1.0 - (_lastScale - [sender scale]);
_lastScale = [sender scale];
CGAffineTransform currentTransform = self.imageView.transform;
CGAffineTransform newTransform = CGAffineTransformScale(currentTransform, scale, scale);
[self.imageView setTransform:newTransform];
NSLog(#"center: %#", NSStringFromCGPoint(self.imageView.center));
}
Here's a complete project demonstrating the issue.
https://github.com/adamloving/PinchDemo
no auto layout constraints on the view or its parent (at least at build time)
If your nib / storyboard uses auto layout, then there are certainly auto layout constraints, even if you did not deliberately construct them. And let's face it, auto layout does not play nicely with view transforms. A scale transform should scale from the center, but auto layout is fighting against you, forcing the frame to be reset by its top and its left (because that is where the constraints are).
See my essay on this topic here:
How do I adjust the anchor point of a CALayer, when Auto Layout is being used?
See also the discussion of this problem in my book.
In your case, the simplest solution is probably to apply the transform to the view's layer rather than to the view itself. In other words, instead of saying this sort of thing:
self.v.transform = CGAffineTransformMakeScale(1.3, 1.3);
Say this sort of thing:
self.v.layer.transform = CATransform3DMakeScale(1.3, 1.3, 1);
Related
I am having a problem rotating an image with subviews in an iOS 9+ app. I have a container view containing 2 subviews. The subviews are the same size as the container view. First subview contains an image from a PDF page. Second subview contains UIImageViews as subviews that sit on top of the PDF image. I use the coordinate system of the PDF to place and size the image views correctly. (Maybe I should mention that the container view is itself a subview of a UIScrollview).
The image views are properly placed and oriented whether the PDF is portrait or landscape. However, when the PDF is landscape, I would like to rotate and scale the final image so that it displays normally. One way I can do this is to rotate, transform and scale the PDF and each image view individually, putting drawing code in each view's drawRect method. This works but it's really slow.
I learned from a SO post that if I apply the rotation and transform to the CALayer of the container view, iOS applies the changes to the entire view hierarchy. This runs much more quickly when rotating a landscape image. But I have not been able to scale the final image using the layer of the container view. On an iPad I end up with a correctly rotated final image, centered horizontally at the top of the screen, but clipped on the left and right sides. The long axis of the image is still equal to the height of the screen, wider than the width of the screen.
The code in the container view is really short:
- (void) setOrientation:(NSInteger)orientation
{
_orientation = orientation;
if (orientation == foPDFLandscape)
{
// [[self layer] setNeedsDisplayOnBoundsChange:YES];// no effect
// [[self layer] setBounds:CGRectMake(0.0, 0.0, 100.0, 100.0)];//does not change image size or scale
// [[self layer] setContentsScale:0.5];//does not change image size or scale
[[self layer] setAnchorPoint:CGPointMake(0.0, 0.9)];
CATransform3D transform = CATransform3DMakeRotation(90.0 * (M_PI / 180.0), 0.0, 0.0, 1.0);
[[self layer] setTransform:transform];
//putting the scaling code here instead of before the transform makes no difference
}
}
Setting the bounds, frame, or the contentsScale, either before or after the transform and in various combinations, has no effect on the final image. Nor does changing the Content Gravity Values and autoResizeMask.
Is there a way I can do this?
Thanks
I needed to concatenate the transforms like this:
- (void) setOrientation:(NSInteger)orientation
{
_orientation = orientation;
if (orientation == foPDFLandscape)
{
[[self layer] setAnchorPoint:CGPointMake(0.0, 1.0)];
CATransform3D rotate = CATransform3DMakeRotation(90.0 * (M_PI / 180.0), 0.0, 0.0, 1.0);
CATransform3D scale = CATransform3DMakeScale(0.77, 0.77, 1.0);
CATransform3D concat = CATransform3DConcat(rotate, scale);
[[self layer] setTransform:concat];
}
}
But this is a partial solution. The final image is clipped to the size of the screen -- OK on an iPad but not on an iPhone. Also, the image no longer responds to pinch gestures for zooming.
I am building a custom UIView that you can rotate and resize. I can resize the UIView by dragging the corners of the UIView. I calculate how much I have dragged then change the frame of the UIView accordingly.
However, I am running into problems once I added a rotation gesture recognizer to the view. If I rotate or apply a transform to the view, I no longer know how to calculate drag distance and change the frame of the view. How could I calculate the width and height change between my new view and the original view when things are put at an added angle or if they have some other transform, like a translation transform?
I thought of possibilities to set the view's transform back to .identity, change the size of the view, then re-apply its transform, but I'm not sure how to actually go about implementing this.
After applying transform you can not use frame
You have two options
1) First Calculate everything using center of your view
2) As you know apply identity and change frame
for point 2 I have added example that might helpful to you
let transform = imageView.transform
imageView.transform = CGAffineTransform.identity
var rect: CGRect = imageView.frame
rect = // Change Rect here
imageView.frame = rect // Assign it
imageView.transform = transform // Apply Transform
I was trying to mimic the yahoo weather app screen transition between cities, I couldn't figure out what transition it is. Any clue?
I really appreciate you time.
Thanks
Edit:
I have slideView ctrler which has a subview. The sliderview has an image and the subview has text. When I make a swipe, the text view with text must be moving and dragging way the view ctrler with it at a slower rate and this intern should start dragging in the next view ctrler which is an instance of slider Ctrler.
There is no built-in transition that does this for you (I assume you're talking about the images that are transitioning their frame/center at a different rate than the view itself). You'd probably have to write it yourself. Some basic familiarity with gesture recognizers and view animation is needed.
The basic effect is by simultaneously adjusting the center property for two image views as you change the frame of those views (or their super views). (Or, you can achieve this by having image views whose contentMode is UIViewContentModeCenter and just changing the frame.) I'd suggest you start with some simple tests of the effect and build from there.
For example, I created a scene that has two image views, whose autolayout constraints were defined as follows:
H:|[leftImageView][rightImageView]|
V:|[leftImageView]|
V:|[rightImageView]|
I then defined a width constraint for the leftImageView, and hooked it up to an IBOutlet for that constraint, e.g. leftImageWidthConstraint. I then have a UIPanGestureRecognizer that could handle the gesture, simply changing this leftImageWidthConstraint accordingly (and with auto layout, the rest of the frame is calculated automatically for me from that):
- (void)handlePan:(UIPanGestureRecognizer *)gesture
{
CGPoint translate = [gesture translationInView:gesture.view];
static CGFloat width;
if (gesture.state == UIGestureRecognizerStateBegan)
{
width = self.leftImageWidthConstraint.constant;
}
CGFloat newWidth = width + translate.x;
if (newWidth < 0)
newWidth = 0;
else if (newWidth > self.view.bounds.size.width)
newWidth = self.view.bounds.size.width;
self.leftImageWidthConstraint.constant = newWidth;
// if you let go, animate the views to their final position
if (gesture.state == UIGestureRecognizerStateEnded)
{
// if more than half way, set left view's target width to take up full width,
// otherwise set left view's target width to zero
if (newWidth > (self.view.bounds.size.width / 2.0))
newWidth = self.view.bounds.size.width;
else
newWidth = 0;
// animate the changing of the constraint (and thus the `frame`) accordingly
self.leftImageWidthConstraint.constant = newWidth;
[UIView animateWithDuration:0.5 delay:0.0 options:UIViewAnimationOptionCurveEaseOut animations:^{
[self.view layoutIfNeeded];
} completion:nil];
}
}
Thus, as I pan across, the two images are centered within their clipped frames:
This is a very basic implementation of the idea. There are, though, a ton of implementation details (custom container vs subviews, autolayout vs not, etc.), so until you answer some of those questions, it's going to be hard to be more specific.
It is not default but i achieved similar to it in my old app
Register gesture on your view and on detection set isFromLeftSide accordingly
Call following. do fine tune this as per your requirements
[self.view addSubview:mySlidingView];
mySlidingView.frame = // set offscreen frame, in the direction you want it to appear from depending on flag isFromLeftSide
[UIView animateWithDuration:8.0
animations:^{
mySlidingView.frame = // desired end location
}];
I'm working on an app where the main view fills up the whole screen. This main view contains subviews that you could think of as sprites. They wander around using their own code. The logic of how they wander around could have them wandering off screen. What I'd like to do is to resize the main view so that it encloses all the subviews. It's really not the view size that is changing, though. It is the scaling that is changing. Kind of like zooming out of a google maps view. How do I do that? It will be a gesture recognizer that triggers this.
You should do this using a three-level view hierarchy:
top-level view
scaled view
sprite view 0
sprite view 1
sprite view 2
etc.
Set the bounds of the scaled view to encompass the frames of all of the sprite views. Then set the transform of the scaled view so that it fits in the top-level view.
- (void)updateBoundsAndTransformOfView:(UIView *)scaledView {
CGRect scaledBounds = CGRectNull;
for (UIView *spriteView in scaledView.subviews) {
scaledBounds = CGRectUnion(scaledBounds, spriteView.frame);
}
scaledView.bounds = scaledBounds;
// Now scaledView's size is large enough to contain all of its subviews,
// and scaledView's coordinate system origin is at the left edge of the
// leftmost sprite and the top edge of the topmost sprite.
UIView *topLevelView = scaledView.superview;
CGRect topLevelBounds = topLevelView.bounds;
CGFloat xScale =topLevelBounds.size.width / scaledBounds.size.width;
CGFloat yScale = topLevelBounds.size.height / scaledBounds.size.height;
CGFloat scale = MIN(xScale, yScale);
scaledView.transform = CGAffineTransformMakeScale(scale, scale);
scaledView.center = CGPointMake(CGRectGetMidX(topLevelBounds), CGRectGetMidY(topLevelBounds));
}
I want to simultaneously scale and translate a CALayer from one CGrect (a small one, from a button) to a another (a bigger, centered one, for a view). Basically, the idea is that the user touches a button and from the button, a CALayer reveals and translates and scales up to end up centered on the screen. Then the CALayer (through another button) shrinks back to the position and size of the button.
I'm animating this through CATransform3D matrices. But the CALayer is actually the backing layer for a UIView (because I also need Responder functionality). And while applying my scale or translation transforms separately works fine. The concatenation of both (translation, followed by scaling) offsets the layer's position so that it doesn't align with the button when it shrinks.
My guess is that this is because the CALayer anchor point is in its center by default. The transform applies translation first, moving the 'big' CALayer to align with the button at the upper left corner of their frames. Then, when scaling takes place, since the CALayer anchor point is in the center, all directions scale down towards it. At this point, my layer is the button's size (what I want), but the position is offset (cause all points shrank towards the layer center).
Makes sense?
So I'm trying to figure out whether instead of concatenating translation + scale, I need to:
translate
change anchor point to upper-left.
scale.
Or, if I should be able to come up with some factor or constant to incorporate to the values of the translation matrix, so that it translates to a position offset by what the subsequent scaling will in turn offset, and then the final position would be right.
Any thoughts?
You should post your code. It is generally much easier for us to help you when we can look at your code.
Anyway, this works for me:
- (IBAction)showZoomView:(id)sender {
[UIView animateWithDuration:.5 animations:^{
self.zoomView.layer.transform = CATransform3DIdentity;
}];
}
- (IBAction)hideZoomView:(id)sender {
CGPoint buttonCenter = self.hideButton.center;
CGPoint zoomViewCenter = self.zoomView.center;
CATransform3D transform = CATransform3DIdentity;
transform = CATransform3DTranslate(transform, buttonCenter.x - zoomViewCenter.x, buttonCenter.y - zoomViewCenter.y, 0);
transform = CATransform3DScale(transform, .001, .001, 1);
[UIView animateWithDuration:.5 animations:^{
self.zoomView.layer.transform = transform;
}];
}
In my test case, self.hideButton and self.zoomView have the same superview.