I'm currently implementing an expanding timeline. When I pinch zoom into the timeline, I need my drawn text to stay at the same relative locations on the UIView they're drawn on inside the UIScrollView that handles the zooming. (Essentially like pins on GoogleMaps) However, I don't want to zoom vertically, so I apply a transform by overriding:
- (void)setTransform:(CGAffineTransform)newValue;
{
newValue.d = 1.0;
[super setTransform:newValue];
}
This works great in keeping the timeline fixed vertically and allowing it to expand horizontally. However, I am drawing my text labels as such in a method called during setNeedsDisplay:
for (int i = 1; i < 11; i++)
{
CGRect newFrame = CGRectMake(i * (512.0/11.0) - (512.0/11.0/2.0), self.frame.size.height - 16.0, 512.0/11.0, 32.0);
NSString *label = [NSString stringWithFormat:#"%d", i+1];
[label drawInRect:newFrame withFont:[UIFont systemFontOfSize:14.0]];
}
This draws my text at the correct position in the scrollview, and nearly works perfectly. However, because of my transform to keep the zooming view static vertically, the text expands horizontally and not vertically, and so stretches out horribly. I can't seem to get the text to redraw at the correct aspect ratio. Using UILabels works, however I am going to be rendering and manipulating upwards of 1,000 such labels, so I'd preferably like to draw static images in drawRect or something similar.
I've tried changing the CGRect I'm drawing the text in (was worth a shot), and applying CGAffineTransformIdentity isn't possible because I'm already transforming the view to keep it from zooming vertically. I've also tried drawing the text in various Views to no avail, and again, I'd rather not populate an obscene amount of objects if I can avoid it.
Thanks for any help!
Instead of applying a transform inside the 'setTransform:' method, I intercepts the scale at which it is being transformed, and resize the frame of the view being transformed. The code (roughly) follows:
- (void)setTransform:(CGAffineTransform)newValue;
{
// The 'a' value of the transform is the transform's new scale of the view, which is reset after the zooming action completes
// newZoomScale should therefore be kept while zooming, and then zoomScale should be updated upon completion
_newZoomScale = _zoomScale * newValue.a;
if (_newZoomScale < 1.0)
_newZoomScale = 1.0;
// Resize self
self.frame = CGRectMake(self.frame.origin.x, self.frame.origin.y, _originalFrame.size.width * _newZoomScale, self.frame.size.height);
}
As mentioned in the comments, the transform value of the CGAffineTransform is reset each time a new zooming action occurs (however, it is kept for the duration of the zooming action). So, I keep two instance variables in my UIView subclass (not sure if it's incredibly elegant, but it's not insanely terrible): the original frame the the view was instantiated with, and the "current" zoom scale of the view (prior to the current zooming action).
The _originalFrame is what is referenced in order to determine the proper sizing of the now zoomed frame, and the _zoomScale(the scale of the view prior to the current zooming action) is set to the value of _newZoomScale when the didFinishZooming callback is called in the UIScrollView containing this UIView.
All of this allows for the coordinate system of the UIView to not be transformed during zooming, so text, etc. may be drawn on the view without any distortion. Looking back at this solution, I'd wager a guess that you could also account for the transform and draw based on a stretched coordinate system. Not sure which is more effective. I had a slight concern by not calling super in setTransform:, but I haven't noticed any ill effects after about 6 months of use and development.
Related
I'm trying to implement a simple control to allow the user to zoom in and out of an image. I have a UIImageView inside a UIScrollView. Additionally, I would like to prevent the user from zooming out so much that either the width or height of the image is smaller than the scroll view's size. Here is where the problem lies: when I set the minimumZoomScale to the appropriate size, the image appears in a weird location. Here's my code to configure the scroll view and image view:
- (void)openNewImage:(UIImage *)image
{
_originalImage = image;
// Reset scroll view's zoom scales
// (must be reset before setting the image to the image view)
self.imageScrollView.zoomScale = 1.0f;
self.imageScrollView.minimumZoomScale = 0.01f;
// Set scroll view's content size to allow scrolling
self.imageScrollView.contentOffset = CGPointZero;
self.imageScrollView.contentSize = image.size;
// Set image and resize image view to image size
self.imageView.image = _originalImage;
self.imageView.frame =
CGRectMake(0.0f, 0.0f, image.size.width, image.size.height);
[self.imageScrollView zoomToRect:self.imageView.frame animated:YES];
self.imageScrollView.minimumZoomScale = self.imageScrollView.zoomScale;
}
The last line is causing problems because if I comment it out, things appear where they should, but then the user can zoom out too much. While trying to debug the problem, I found that the last line causes the image view's frame origin to change to very small negative numbers, like -1.11015e-06 rather than just 0. If I comment out the last line, the image view's frame origin is 0. I wonder if somehow this is causing problems, although that small negative number is virtually 0.
I add few labels in UIScrollView and I want when I scroll, the the middle label font size can become bigger. And the previous middle label font size shrinks to smaller. And the change happens gradually. Like below. Label 1 move to left shrink smaller and label 2 move to middle becomes bigger. All labels in a UIScroll view.
I tried some, like when scroll I tried zoom scroll page, seems complex than I thought...
Anyone has good idea? Thanks!
Pretty simple really. Just stick a UIScrollViewDelegate to the scrollview and do something like this..
-(void)scrollViewDidScroll:(UIScrollView *)scrollView
{
for (int i = 0; i < [scrollView.subviews count]; i++) {
UIView *v = [scrollView.subviews objectAtIndex:i];
float position = v.center.x - scrollView.contentOffset.x;
float offset = 2.0 - (abs(scrollView.center.x - position) * 1.0) / scrollView.center.x;
v.transform = CGAffineTransformIdentity;
v.transform = CGAffineTransformScale(v.transform, offset, offset);
}
}
But, if you aren't impressed by the affine transform, you could still scale the rect using the offset factor and set the UILabel to adjustsFontSizeToFitWidth... and you are done!
Just make sure there is enough space! Else it could get out of hand very easily.
Assumptions :
There are no other views in the scrollview apart from these labels.
Its required to work just horizontally.
It could be done with CoreAnimation. You have to keep the index of the main label (that one in the center), and after scrolling is done or when scrolling starts (use some proper for you method in UIScrollViewDelegate) and simply shrink side labels by animation.
Just make the size of the font bigger (with an animation block) when it is the middle one, and smaller when it is not.
You can add a category to UILabel with -(BOOL)isMiddle and set it to true/false.
How to make UITextView scrolling when text is not vertical?
Like
+--------------+
/ Text /
/ Here /
/ Is /
/ Not /
/ Vertical /
+--------------+
Where starts of lines are in the same angle as border (background) image.
Or we can use another element than UITextView if it can solve the problem.
Scrolling only in vertical direction,
Background image is fixed,
No, visible is only part which fits to shape, other is hidden
Screen is covered by private license, I can't publish it.
You can skew the textfield by using this code:
float angle = -20.0/180*M_PI;
CATransform3D skew = CATransform3DIdentity;
skew.m21 = tanf(angle);
textField.layer.transform = skew;
EDIT: perhaps I've misunderstood your question- you want straight text, but oblique scrolling? If that's the case, you can put your UITextField (or UITextView) into a UIScrollView, but give the scrollView the opposite transform to your textField, like so
float angle = -20.0/180*M_PI;
CATransform3D skew = CATransform3DIdentity;
skew.m21 = tanf(-angle);
scrollView.layer.transform = skew;
skew.m21 = tanf(angle);
textField.layer.transform = skew;
Do you mean that you want the text view to scroll along a diagonal? It's not the most elegant solution but something like this perhaps:
Implement the scrollViewDidScroll: delegate method
Get the existing contentOffset at each delegate callback
Modify the x-value of the offset to an amount that corresponds to the amount of "diagonal-ness" you want to go in
[scrollView setContentOffset:newOffset animated:NO];
Also set the scroll view's directionalLockEnabled to NO.
I have a UIButton of the custom button type, where I just set a background and border color on the underlying CALayer of the button. I then applied a mask to this underlying layer composed of a CAShapeLayer (to get two rounded corners) as described in this post.
So far so good. I animate the UIButton to grow in size. So far so good. See below (everything in the image is the _fusedBar, save the x-axis line snippet you see below it and the dollar amount text).
When I go to animate the UIButton to shrink using the same animation routine but different parameter values (affine translation with simultaneous frame height change), none of the UIButton (save for a sliver) is visible as the shrinking is taking place.
I've tried to have the CAShapeLayer that is the mask remove itself from its super layer, I've tried to set the mask property on the UIButton's layer to nil, etc., but none of these remove the mask such that I can see the UIButton animate (shrinking with affine translation and frame height change).
Here's the relevant animation code:
// Stackoverflow readers: Assume 'duration', 'scaledHeight' and 'delay'
// already defined.
void (^fusedBarChange)(void) = ^{
_fusedBar.transform = CGAffineTransformMakeTranslation(0, -scaledHeight);
[_fusedBar nd_setNewSizeHeight:scaledHeight];
};
[UIView animateWithDuration:duration
delay:delay
options:UIViewAnimationCurveEaseOut
animations:^(void) {
fusedBarChange();
}
completion:^(BOOL finished) {
// Other stuff not relevant to _fusedBar animation
}];
Before this animation gets called, I have the mask setup per the post cited above. That code is below. Note that '_fusedBar' is the UIButton at the heart of this discussion.
- (void)configureRoundedTop {
// YES: Start by creating the path (with only the top-left corner rounded)
UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:_fusedBar.bounds
byRoundingCorners:UIRectCornerTopLeft | UIRectCornerTopRight
cornerRadii:CGSizeMake(4.0, 4.0)];
// Create the shape layer and set its path
CAShapeLayer *maskLayer = [CAShapeLayer layer];
maskLayer.frame = _fusedBar.bounds;
maskLayer.path = maskPath.CGPath;
// Set the newly created shape layer as the mask for the image view's layer
_fusedBar.layer.mask = maskLayer;
}
When growing the _fusedBar from a sliver to a few hundred points, the growth is animated, and you can see it.
Prior to using this CAShapeLayer mask, when shrinking the _fusedBar back to a sliver, I could see the animation (same code above, just a different value for 'scaledHeight'). Now, I cannot see the shrinking animation.
So, I know I need to somehow shake-off the effects of the masking layer before animating the shrinking operation, but the obvious things (to me) haven't worked. Here's an example of various things I've tried:
// None of these do the trick. I call them just before
// the shrinking animation is invoked:
[_fusedBar setNeedsLayout];
[_fusedBar setNeedsDisplay];
[_fusedBar.layer.mask removeFromSuperlayer];
_fusedBar.layer.mask = nil;
Clearly, I'm missing some nugget of CALayers, masking and perhaps even presentationLayer semantics.
Any guidance much appreciated!
Coming back to it after a couple of days, I saw my mistake (not visible from the extracts posted above).
Essentially, after the animation to grow or shrink the "fusedBar", I was reapplying a mask based on the view's frame. Since this would effectively execute in concert with the animation block, it was going to have a mask that the view was shrinking into.
I needed to put that re-apply mask code in my animation completion block or suppress it if the fusedBar was shrinking.
Thanks to all those who took a look to help out!
EDIT - I've worked out what I was originally doing wrong. I was changing the size of the UIScrollView, instead of the pattern subview. I have fixed that, but amended my question with the new problem this has thrown up.
I am making a notes section in my app with a lined-paper effect. The lines are on a separate UIScrollView which responds to scrollViewDidScroll: so the lines and text always move together. My lines are set up like this in viewWillAppear:
CGRect noteLinesRect = CGRectMake(self.view.bounds.origin.x,
self.view.bounds.origin.y,
self.view.bounds.size.width,
noteTextView.contentSize.height+self.view.bounds.size.height);
UIScrollView *anoteXLinesView = [[UIScrollView alloc] initWithFrame:self.view.bounds];
self.noteXLinesView = anoteXLinesView;
[anoteXLinesView release];
LinePatternView *linesPattern = [[LinePatternView alloc] initWithFrame:noteLinesRect];
self.linesPatternView = linesPattern; [linesPattern release];
[self.noteXLinesView addSubview:self.linesPatternView];
[linesPattern release];
CGPoint newOffset = CGPointMake(self.noteTextView.contentOffset.x, noteTextView.contentOffset.y - NOTE_LINES_OFFSET);
self.noteXLinesView.contentOffset = newOffset;
[self.view insertSubview:self.noteXLinesView atIndex:0];
This works fine when the user first looks at a stored note - all the text is nicely underlined. But when they write more text, eventually they get to the bottom of the lines I created in viewWillAppear and are writing on 'blank paper'. So I need my lined-paper pattern to dynamically get bigger and smaller so it is always a bit bigger than the contentSize of my textView. I am trying to do that like this:
-(void)textViewDidChange:(UITextView *)textView
{
self.linesPatternView.frame = CGRectMake( self.linesPatternView.frame.origin.x, //-self.noteTextView.contentOffset.y+NOTE_LINES_OFFSET,
self.linesPatternView.frame.origin.y,
self.linesPatternView.frame.size.width,
noteTextView.contentSize.height+self.view.bounds.size.height );
}
The problem is, although the lined-paper pattern does increase in size, it doesn't add new lines at the bottom. Instead, the pattern stretches out and gets bigger as the view gets bigger. What am I doing wrong?
One of the solutions is to make 3 views, each containing the lines of the size of your scrollview frame on screen. You position the three one underneath the other in the scrollview and monitor the scrollview through its delegate.
When scrolling down you check:
As soon as the topmost one goes offscreen for more than Y pixels you remove it from the scrollview and insert it underneath the bottom one.
When scrolling up you check:
As soon as the bottommost one goes offscreen for more than Y pixels you remove it from the scrollview and insert it above the top one.
Is there a reason you’re not simply using a tiled pattern as your background view’s backgroundColor? UIColor’s +colorWithPatternImage: will let you set a background that’ll tile indefinitely and won’t stretch as your view resizes. If part of the background has to be different—like the top of your paper, for instance—you can just place an image view containing that at the top of your background view.
Fixed! In addition to the changes outlined in my edit to the question above, I just needed to call [self.linesPatternView setNeedsDisplay]; after the resize.