How to zoom an UIImageView - ios

I'm rendering CGPDFPage in UIImageView but not zooming how we can zoom if any know plz let me know
PDFDocument = CGPDFDocumentCreateWithURL((__bridge CFURLRef)pdfUrl);
totalPages = (int)CGPDFDocumentGetNumberOfPages(PDFDocument);
NSLog(#"total pages %i",totalPages);
//struct CGPDFPage *page =CGPDFDocumentGetPage(PDFDocument, 1);
CGFloat width = 600.0;
// Get the page
CGPDFPageRef myPageRef = CGPDFDocumentGetPage(PDFDocument, i);
// Changed this line for the line above which is a generic line
//CGPDFPageRef page = [self getPage:page_number];
CGRect pageRect = CGPDFPageGetBoxRect(myPageRef, kCGPDFMediaBox);
CGFloat pdfScale = width/pageRect.size.width;
pageRect.size = CGSizeMake(pageRect.size.width*pdfScale, pageRect.size.height*pdfScale);
pageRect.origin = CGPointZero;
UIGraphicsBeginImageContext(pageRect.size);
CGContextRef context = UIGraphicsGetCurrentContext();
// White BG
CGContextSetRGBFillColor(context, 1.0,1.0,1.0,1.0);
CGContextFillRect(context,pageRect);
CGContextSaveGState(context);
// ***********
// Next 3 lines makes the rotations so that the page look in the right direction
// ***********
CGContextTranslateCTM(context, 0.0, pageRect.size.height);
CGContextScaleCTM(context, 1.0, -1.0);
CGContextConcatCTM(context, CGPDFPageGetDrawingTransform(myPageRef, kCGPDFMediaBox, pageRect, 0, true));
CGContextDrawPDFPage(context, myPageRef);
CGContextRestoreGState(context);
imageView= UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

You should add your imageView as subview of UIScrollView.
This SO answer describes how to zoom UIImageView inside UIScrollView:
Set your view controller up as a <UIScrollViewDelegate>
Draw your UIScrollView the size you want for the rectangle at the center of the view. Set the max zoom in the inspector to something bigger than 1. Like 4 or 10.
Right click on the scroll view and connect the delegate to your view controller.
Draw your UIImageView in the UIScrollView and set it up with whatever image you want. Make it the same size as the UIScrollView.
Ctrl + drag form you UIImageView to the .h of your View controller to create an IBOutlet for the UIImageView, call it something clever like imageView.
Add this code:
-(UIView *) viewForZoomingInScrollView:(UIScrollView *)scrollView
{
return self.imageView;
}
Run the app and pinch and pan til your heart's content.

Go with this
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
{
return self.imageView;
}
- (void)viewDidLoad {
[super viewDidLoad];
self.scrollView.minimumZoomScale=0.5;
self.scrollView.maximumZoomScale=6.0;
self.scrollView.contentSize=CGSizeMake(1280, 960);
self.scrollView.delegate=self;
}
Check Apple Documentation
Another way is to implement UITapGestureRecognizer in your viewController
- (void)viewDidLoad
{
[super viewDidLoad];
// target - what object is going to handle
// the gesture when it gets recognised
// the argument for tap: is the gesture that caused this message to be sent
UITapGestureRecognizer *tapOnce =
[[UITapGestureRecognizer alloc] initWithTarget:self
action:#selector(tapOnce:)];
UITapGestureRecognizer *tapTwice =
[[UITapGestureRecognizer alloc] initWithTarget:self
action:#selector(tapTwice:)];
tapOnce.numberOfTapsRequired = 1;
tapTwice.numberOfTapsRequired = 2;
//stops tapOnce from overriding tapTwice
[tapOnce requireGestureRecognizerToFail:tapTwice];
// then need to add the gesture recogniser to a view
// - this will be the view that recognises the gesture
[self.view addGestureRecognizer:tapOnce];
[self.view addGestureRecognizer:tapTwice];
}
Basically this code is saying that when a UITabGesture is registered in self.view the method tapOnce or tapTwice will be called in self depending on if its a single or double tap. You therefore need to add these tap methods to your UIViewController:
- (void)tapOnce:(UIGestureRecognizer *)gesture
{
//on a single tap, call zoomToRect in UIScrollView
[self.myScrollView zoomToRect:rectToZoomInTo animated:NO];
}
- (void)tapTwice:(UIGestureRecognizer *)gesture
{
//on a double tap, call zoomToRect in UIScrollView
[self.myScrollView zoomToRect:rectToZoomOutTo animated:NO];
}
Hope that helps

Related

How do I calculate the correct CGRect origin on a scaled UIView subview?

I need to calculate the visible CGRect of a UIView subview, in the coordinates of the original view. I've got it working if the scale is 1, but if one of the superviews or the view itself is scaled (pinch), the visible CGRect origin is offset slightly.
This works when the scale of the views is 1 or the view is a subview of the root view:
// return the part of the passed view that is visible
// TODO: figure out why result origin is wrong for scaled subviews
//
- (CGRect)getVisibleRect:(UIView *)view {
// get the root view controller (and it's view is vc.view)
UIViewController *vc = UIApplication.sharedApplication.keyWindow.rootViewController;
// get the view's frame in the root view's coordinate system
CGRect frame = [vc.view convertRect:view.frame fromView:view.superview];
// get the intersection of the root view bounds and the passed view frame
CGRect intersection = CGRectIntersection(vc.view.bounds, frame);
// adjust the intersection coordinates thru any nested views
UIView *loopView = view;
do {
intersection = [loopView convertRect:intersection fromView:loopView.superview];
loopView = loopView.superview;
} while (loopView != vc.view);
return intersection; // may be same as the original view frame
}
When a subview is scaled, the size of the resultant view is correct, but the origin is offset by a small amount. It appears that the convertRect does not calculate the origin properly for scaled subviews.
I tried adjusting the origin relative to the X/Y transform scale but I could not get the calculation correct. Perhaps someone can help?
To save time, here is a complete test ViewController.m, where a box with an X is drawn on the visible part of the views - just create a reset button in the Main.storyboard and connect it to the reset method:
//
// ViewController.m
// VisibleViewDemo
//
// Copyright © 2018 ByteSlinger. All rights reserved.
//
#import "ViewController.h"
CG_INLINE void drawLine(UIView *view,CGPoint point1,CGPoint point2, UIColor *color, NSString *layerName) {
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:point1];
[path addLineToPoint:point2];
CAShapeLayer *shapeLayer = [CAShapeLayer layer];
shapeLayer.path = [path CGPath];
shapeLayer.strokeColor = color.CGColor;
shapeLayer.lineWidth = 2.0;
shapeLayer.fillColor = [UIColor clearColor].CGColor;
shapeLayer.name = layerName;
[view.layer addSublayer:shapeLayer];
}
CG_INLINE void removeShapeLayers(UIView *view,NSString *layerName) {
if (view.layer.sublayers.count > 0) {
for (CALayer *layer in [view.layer.sublayers copy]) {
if ([layer.name isEqualToString:layerName]) {
[layer removeFromSuperlayer];
}
}
}
}
CG_INLINE void drawXBox(UIView *view, CGRect rect,UIColor *color) {
NSString *layerName = #"xbox";
removeShapeLayers(view, layerName);
CGPoint topLeft = CGPointMake(rect.origin.x,rect.origin.y);
CGPoint topRight = CGPointMake(rect.origin.x + rect.size.width,rect.origin.y);
CGPoint bottomLeft = CGPointMake(rect.origin.x, rect.origin.y + rect.size.height);
CGPoint bottomRight = CGPointMake(rect.origin.x + rect.size.width, rect.origin.y + rect.size.height);
drawLine(view,topLeft,topRight,color,layerName);
drawLine(view,topRight,bottomRight,color,layerName);
drawLine(view,topLeft,bottomLeft,color,layerName);
drawLine(view,bottomLeft,bottomRight,color,layerName);
drawLine(view,topLeft,bottomRight,color,layerName);
drawLine(view,topRight,bottomLeft,color,layerName);
}
#interface ViewController ()
#end
#implementation ViewController
UIView *view1;
UIView *view2;
UIView *view3;
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
CGFloat width = [UIScreen mainScreen].bounds.size.width / 2;
CGFloat height = [UIScreen mainScreen].bounds.size.height / 4;
view1 = [[UIView alloc] initWithFrame:CGRectMake(width / 2, height / 2, width, height)];
view1.backgroundColor = UIColor.yellowColor;
[self.view addSubview:view1];
[self addGestures:view1];
view2 = [[UIView alloc] initWithFrame:CGRectMake(width / 2, height / 2 + height + 16, width, height)];
view2.backgroundColor = UIColor.greenColor;
[self.view addSubview:view2];
[self addGestures:view2];
view3 = [[UIView alloc] initWithFrame:CGRectMake(10, 10, width / 2, height / 2)];
view3.backgroundColor = [UIColor.blueColor colorWithAlphaComponent:0.5];
[view1 addSubview:view3]; // this one will behave differently
[self addGestures:view3];
}
- (void)viewWillLayoutSubviews {
[super viewWillLayoutSubviews];
[self checkOnScreen:view1];
[self checkOnScreen:view2];
[self checkOnScreen:view3];
}
- (IBAction)reset:(id)sender {
view1.transform = CGAffineTransformIdentity;
view2.transform = CGAffineTransformIdentity;
view3.transform = CGAffineTransformIdentity;
[self.view setNeedsLayout];
}
- (void)addGestures:(UIView *)view {
UIPanGestureRecognizer *panGestureRecognizer = [[UIPanGestureRecognizer alloc]
initWithTarget:self action:#selector(handlePan:)];
[view addGestureRecognizer:panGestureRecognizer];
UIPinchGestureRecognizer *pinchGestureRecognizer = [[UIPinchGestureRecognizer alloc]
initWithTarget:self action:#selector(handlePinch:)];
[view addGestureRecognizer:pinchGestureRecognizer];
}
// return the part of the passed view that is visible
- (CGRect)getVisibleRect:(UIView *)view {
// get the root view controller (and it's view is vc.view)
UIViewController *vc = UIApplication.sharedApplication.keyWindow.rootViewController;
// get the view's frame in the root view's coordinate system
CGRect frame = [vc.view convertRect:view.frame fromView:view.superview];
// get the intersection of the root view bounds and the passed view frame
CGRect intersection = CGRectIntersection(vc.view.bounds, frame);
// adjust the intersection coordinates thru any nested views
UIView *loopView = view;
do {
intersection = [loopView convertRect:intersection fromView:loopView.superview];
loopView = loopView.superview;
} while (loopView != vc.view);
return intersection; // may be same as the original view
}
- (void)checkOnScreen:(UIView *)view {
CGRect visibleRect = [self getVisibleRect:view];
if (CGRectEqualToRect(visibleRect, CGRectNull)) {
visibleRect = CGRectZero;
}
drawXBox(view,visibleRect,UIColor.blackColor);
}
//
// Pinch (resize) an image on the ViewController View
//
- (IBAction)handlePinch:(UIPinchGestureRecognizer *)recognizer {
static CGAffineTransform initialTransform;
if (recognizer.state == UIGestureRecognizerStateBegan) {
[self.view bringSubviewToFront:recognizer.view];
initialTransform = recognizer.view.transform;
} else if (recognizer.state == UIGestureRecognizerStateEnded) {
} else {
recognizer.view.transform = CGAffineTransformScale(initialTransform,recognizer.scale,recognizer.scale);
[self checkOnScreen:recognizer.view];
[self.view setNeedsLayout]; // update subviews
}
}
- (IBAction)handlePan:(UIPanGestureRecognizer *)recognizer {
static CGAffineTransform initialTransform;
if (recognizer.state == UIGestureRecognizerStateBegan) {
[self.view bringSubviewToFront:recognizer.view];
initialTransform = recognizer.view.transform;
} else if (recognizer.state == UIGestureRecognizerStateEnded) {
} else {
//get the translation amount in x,y
CGPoint translation = [recognizer translationInView:recognizer.view];
recognizer.view.transform = CGAffineTransformTranslate(initialTransform,translation.x,translation.y);
[self checkOnScreen:recognizer.view];
[self.view setNeedsLayout]; // update subviews
}
}
#end
So you need to know the real visible frame of a view that is somehow derived from bounds+center+transform and calculate everything else from that, instead of the ordinary frame value. This means you'll also have to recreate convertRect:fromView: to be based on that. I always sidestepped the problem by using transform only for short animations where such calculations are not necessary. Thinking about coding such a -getVisibleRect: method makes me want to run away screaming ;)
What is a frame?
The frame property is derived from center and bounds.
Example:
center is (60,50)
bounds is (0,0,100,100)
=> frame is (10,0,100,100)
Now you change the frame to (10,20,100,100). Because the size of the view did not change, this results only in a change to the center. The new center is now (60,70).
How about transform?
Say you now transform the view, by scaling it to 50%.
=> the view has now half the size than before, while still keeping the same center. It looks like the new frame is (35,45,50,50). However the real result is:
center is still (60,50): this is expected
bounds is still (0,0,100,100): this should be expected too
frame is still (10,20,100,100): this is somewhat counterintuitive
frame is a calculated property, and it doesn't care at all about the current transform. This means that the value of the frame is meaningless whenever transform is not the identity transform. This is even documented behaviour. Apple calls the value of frame to be "undefined" in this case.
Consequences
This has the additional consequences that methods such as convertRect:fromView: do not work properly when there are non-standard transforms involved. This is because all these methods rely on either frame or bounds of views, and they break as soon as there are transforms involved.
What can be done?
Say you have three views:
view1 (no transform)
view2 (scale transform 50%)
view3 (no transform)
and you want to know the coordinates of view3 from the point of view of view1.
From the point of view of view2, view3 has frame view3.frame. Easy.
From the point of view of view1, view2 has not frame view2.frame, but the visible frame is a rectangle with size view2.bounds/2 and center view2.center.
To get this right you need some basic linear algebra (with matrix multiplications). (And don't forget the anchorPoint..)
I hope it helps..
What can be done for real?
In your question you said that there is an offset. Maybe you can just calculate the error now? The error should be something like 0.5 * (1-scale) * (bounds.size) . If you can calculate the error, you can subtract it and call it a day :)
Thanks to #Michael for putting in so much effort in his answer. It didn't solve the problem but it made me think some more and try some other things.
And voila, I tried something that I'm certain I had done before, but this time I started with my latest code. It turns out a simple solution did the trick. The builtin UIView convertRect:fromView and convertRect:toView worked as expected when used together.
I apologize to anyone that has spent time on this. I'm humbled in my foolishness and how much time I have spent on this. I must have made a mistake somewhere when I tried this before because it didn't work. But this works very well now:
// return the part of the passed view that is visible
- (CGRect)getVisibleRect:(UIView *)view {
// get the root view controller (and it's view is vc.view)
UIViewController *vc = UIApplication.sharedApplication.keyWindow.rootViewController;
// get the view's frame in the root view's coordinate system
CGRect rootRect = [vc.view convertRect:view.frame fromView:view.superview];
// get the intersection of the root view bounds and the passed view frame
CGRect rootVisible = CGRectIntersection(vc.view.bounds, rootRect);
// convert the rect back to the initial view's coordinate system
CGRect visible = [view convertRect:rootVisible fromView:vc.view];
return visible; // may be same as the original view frame
}
If someone uses the Viewcontroller.m from my question, just replace the getVisibleRect method with this one and it will work very nicely.
NOTE: I tried rotating the view and the visible rect is rotated too because I displayed it on the view itself. I guess I could reverse whatever the view rotation is on the shape layers, but that's for another day!

UIView that follows UICollectionView indicator

I want to create a custom UIView that contains a UIImageView and a UILabel, that points to the UICollectionView scroll indicator, and scrolls with it.
i am using this code :
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
//get refrence of vertical indicator
UIImageView *verticalIndicator = ((UIImageView *)[scrollView.subviews objectAtIndex:(scrollView.subviews.count-1)]);
// get the relative position of the indicator in the main window
CGPoint p = [verticalIndicator convertPoint:verticalIndicator.bounds.origin toView:[[UIApplication sharedApplication] keyWindow]];
// set the custom view new position
CGRect indicatorFrame = self.indicatorView.frame;
indicatorFrame.origin.y = p.y;
self.indicatorView.frame = indicatorFrame;
}
But the indicatorView does not follow the indicator exactly !!
This worked for me: Please look at the attached gif. I have added the custom uiview with blue color parallel to the scrool indicator.
I tried for the table view, but this also works for the collection view too.
-(void)scrollViewDidScroll:(UIScrollView *)scrollView{
dispatch_async(dispatch_get_main_queue(), ^{
//get refrence of vertical indicator
UIImageView *verticalIndicator = ((UIImageView *)[scrollView.subviews objectAtIndex:(scrollView.subviews.count-1)]);
// get the relative position of the indicator in the main window
// CGPoint p = [verticalIndicator convertPoint:verticalIndicator.bounds.origin toView:[[UIApplication sharedApplication] keyWindow]];
CGPoint p = CGPointMake(verticalIndicator.frame.origin.x-10,
verticalIndicator.frame.origin.y - scrollView.contentOffset.y);
// set the custom view new position
CGRect indicatorFrame = CGRectMake(verticalIndicator.frame.origin.x, verticalIndicator.frame.origin.y, 10, 10);
self.indicatorView.frame = indicatorFrame;
});
}
Also maske sure you added the uiview in you view did load method.
//in viewDidLoad:
Note that I have used the sample values for the indicatorView postion.You can replace these as per your need.
indicatorView=[[UIView alloc]initWithFrame:CGRectMake( p.x, p.y , 10, 10)];
indicatorView.backgroundColor=[UIColor blueColor];
[self.tableView addSubview:indicatorView];
For me this works:
....
scrollIndicatorView = [self scrollIndicator];
[self.collectionView addSubview:scrollIndicatorView];
....
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
// percentage of the content reached * height
CGFloat yPos = (self.collectionView.contentOffset.y / (self.collectionView.contentSize.height - self.collectionView.bounds.size.height)) * self.collectionView.bounds.size.height;
yPos += self.collectionView.contentOffset.y; // add content offset becasue view is inside colelctionview which content moves
CGRect indicatorFrame = CGRectMake(self.collectionView.bounds.size.width - 10,
yPos,
10,
30);
scrollIndicatorView.frame = indicatorFrame;
}

Objective C - Cannot zoom UIImageView that is embedded into UIScrollView

I'm a new kid on the block here. Nice to meet you all.
I'm trying to implement Ray Wenderlich's zooming of an UIScrollView that was described here:
http://www.raywenderlich.com/10518/how-to-use-uiscrollview-to-scroll-and-zoom-content
But it seemed like it didn't work for me. What I would like to do is:
Create the UIImageView from a nib.
Add UIImageView to the UIScrollView.
Zoom it in from the center of the image with the scale of 2 at the start of the view if the app is executed from an iPad.
Here's my code:
- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view.
//Hide the status bar
[[UIApplication sharedApplication] setStatusBarHidden:YES];
//------------------------------
//Initialize the image view of the home screen
_mapView = (TM_MapView *)[[[NSBundle mainBundle]loadNibNamed:#"MapView" owner:self options:nil]objectAtIndex:0];
// set the content size to be the size our our whole frame
mapScrollView.contentSize = _mapView.imageView.image.size;
[mapScrollView setScrollEnabled:YES];
//set the selector for the buttons in the map view
[self setButtonsSelector];
// now add our scroll view to the main view
[mapScrollView addSubview:_mapView];
//------------------------------
NSLog(#"_mapView.imageView.frame: %#", NSStringFromCGRect( _mapView.imageView.frame));
NSLog(#"_mapView.imageView.image.size: %#", NSStringFromCGSize( _mapView.imageView.image.size));
NSLog(#"mapScrollView.contentSize: %#", NSStringFromCGSize( mapScrollView.contentSize));
}
-(void)viewWillAppear:(BOOL)animated
{
mapScrollView.minimumZoomScale = 1.0f;
mapScrollView.maximumZoomScale = 2.5f;
mapScrollView.zoomScale = 1.0f;
if (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad)
{
[self zoomOnStart];
}
}
-(void)zoomOnStart
{
NSLog(#"Zooming on start");
CGPoint zoomPoint = CGPointMake(512.0f, 384.0f);
CGFloat newZoomScale = 2.0f;
CGSize scrollViewSize = self.mapScrollView.bounds.size;
CGFloat w = scrollViewSize.width / newZoomScale;
CGFloat h = scrollViewSize.height / newZoomScale;
CGFloat x = zoomPoint.x - (w/2.0f);
CGFloat y = zoomPoint.y - (h/2.0f);
CGRect rectToZoomTo = CGRectMake(x, y, w, h);
//CGRect rectToZoomTo = CGRectMake(300, 300, 200, 100);
NSLog(#"rectToZoomTo: %#", NSStringFromCGRect(rectToZoomTo));
[self.mapScrollView zoomToRect:rectToZoomTo animated:YES];
}
#pragma mark - Delegates
-(UIView*)viewForZoomingInScrollView:(UIScrollView*)scrollView
{
NSLog(#"Scroll View viewForZoomingInScrollView");
return _mapView;
}
-(void)scrollViewDidEndZooming:(UIScrollView *)scrollView withView:(UIView *)view atScale:(CGFloat)scale
{
NSLog(#"Scroll View End Zooming!");
}
-(void)scrollViewDidZoom:(UIScrollView *)scrollView
{
NSLog(#"Scroll View Zoom changed to: %f", scrollView.zoomScale);
}
As you can see, I've logged some of the frames and delegates to see the input for the zooming and to see whether or not we are zooming. Here's the console logs:
2014-10-09 17:24:18.507 TrueMuzeiOS[13268:60b] _mapView.imageView.frame: {{0, 0}, {1024, 768}}
2014-10-09 17:24:18.511 TrueMuzeiOS[13268:60b] _mapView.imageView.image.size: {1024, 768}
2014-10-09 17:24:18.513 TrueMuzeiOS[13268:60b] mapScrollView.contentSize: {1024, 768}
2014-10-09 17:24:18.519 TrueMuzeiOS[13268:60b] Zooming on start
2014-10-09 17:24:18.521 TrueMuzeiOS[13268:60b] rectToZoomTo: {{320, 128}, {384, 512}}
As you can see, the logs inside viewForZoomingInScrollView:, scrollViewDidEndZooming:withView:atScale:, and scrollViewDidZoom: didn't get called, meaning we are not zooming at all (CMIIW). I've added the UIScrollViewDelegate so it should've worked.
So, can you guys help me here? I've followed the steps correctly, IMHO. So I'm lost now. Thanks a lot in advance.
do you set the delegate property of the UIScrollView?
I don´t see this on the code you published although you could have done it on Interface Builder.
If this the case, simply this would make your methods get called:
mapScrollView.delegate = self;
Check the UIScrollView documentation on the delegate property section to more information.
https://developer.apple.com/library/ios/documentation/uikit/reference/uiscrollview_class/index.html#//apple_ref/occ/instp/UIScrollView/delegate

Having to 're-focus' on a UIView with VoiceOver

I am trying to make a simple app accessible with VoiceOver.
The app loads a view controller with an opaque view, and tracks the location of one finger on this view. However I cannot understand why I have to re-focus (by tapping) on my view, even after its '(void) accessibilityElementDidBecomeFocused' method is called. I am confused because my view's '(void) accessibilityElementDidLoseFocus' is never called either.
I believe I am correctly following the instructions for View Controller containment from SO and the Apple docs:
1 - http://developer.apple.com/library/ios/#documentation/uikit/reference/UIViewController_Class/Reference/Reference.html#//apple_ref/doc/uid/TP40006926-CH3-SW81
2 - How does View Controller Containment work in iOS 5?
The code to show the new view controller is as follows:
CGRect frame = self.view.bounds;
customViewController = [[FocusIssueCustomViewController alloc] init];
[customViewController loadWithFrame:frame forViewController:self withAlpha:0.5];
// setting properties of the custom view:
[customViewController.view setAccessibilityLabel:#"Touch area"];
[customViewController.view setMultipleTouchEnabled:YES];
[customViewController.view setIsAccessibilityElement:YES];
[customViewController.view setAccessibilityTraits:UIAccessibilityTraitAllowsDirectInteraction];
// inform user the screen has changed:
UIAccessibilityPostNotification(UIAccessibilityLayoutChangedNotification, customViewController.view);
and the loadWithFrame method is as follows:
- (void) loadWithFrame: (CGRect) frame forViewController: (UIViewController*) viewController withAlpha: (float) alphaValue
{
// keep a reference to the view controller that requested the Custom View
[self setOriginatingViewController:viewController];
// load the custom view
[self setCustomView:[[FocusIssueCustomView alloc] initWithFrame:frame]];
[self customView].alpha = alphaValue;
// make this the ViewController for this view
self.view = [self customView];
// add the view controller following guidelines from the
// viewController containment in the UIViewController class reference from the Apple docs
[self.originatingViewController addChildViewController:self];
[self.originatingViewController.view addSubview:self.view];
[self didMoveToParentViewController:self.originatingViewController];
}
This custom view then tracks one touch: the implementation file is given below.
#import "FocusIssueCustomView.h"
#define CIRCLE_DIAMETER 110
#interface FocusIssueCustomView ()
{
// coordinate of this one touch
float xCood, yCood;
}
#end
#implementation FocusIssueCustomView
- (id)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
// Initialization code
}
return self;
}
// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect
{
// make the custom view opaque
CGContextRef ctx = UIGraphicsGetCurrentContext();
CGFloat black[] = {0, 0, 0, 1.0};
CGContextSetFillColor(ctx, black);
CGContextAddRect(ctx, rect);
CGContextFillPath(ctx);
[self setAlpha:0.5];
// clear current context
CGContextRef CurrentContext = UIGraphicsGetCurrentContext();
CGContextClearRect(CurrentContext, rect);
// draw a blue circle, no fill for the touch
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetLineWidth(context, 4.0);
CGContextSetRGBStrokeColor(context, 0, 0, 255, 1);
CGRect rectangle = CGRectMake(xCood - CIRCLE_DIAMETER/2, yCood - CIRCLE_DIAMETER/2, CIRCLE_DIAMETER, CIRCLE_DIAMETER);
CGContextAddEllipseInRect(context, rectangle);
CGContextStrokePath(context);
}
- (void) accessibilityElementDidBecomeFocused
{
NSLog(#"Inside the custom view's \"accessibilityElementDidBecomeFocused\" method");
}
- (void) accessibilityElementDidLoseFocus
{
NSLog(#"Inside the custom view's \"accessibilityElementDidLoseFocus\" method");
}
#pragma mark - touch method
- (void) touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
// if 1 touch on screen, track this touch
if ([[event allTouches] count] == 1)
{
CGPoint point = [[touches anyObject] locationInView:self];
xCood = point.x;
yCood = point.y;
NSLog(#"Touch at (%f, %f)", xCood, yCood);
}
// redraw
[self setNeedsDisplay];
}
#end
I genuinely will need a view controller to control this transparent CustomView (hence the view controller containment approach). That is why I am not simply taking an 'addSubview' approach. Any help is greatly appreciated..
Thanks -
VP

Static subview background image effect

In the latest Expedia app for iOS, they have a very interesting effect that I am trying to wrap my head around. The have two columns of infinitely scrolling subviews which I know can be accomplished with 2 scrollviews. The interesting part is that the overall scrollview appears to have a linen background that stays static and can be seen in the gap between each of the subview cells. The really cool part is that the subviews have a different background that stays in place. In the screenshot below it is city skyline image. When the subviews scroll, the city image can only be seen behind the subview cells. It appears to be some sort of masking trick but I can't quite figure out how the effect is done. How can I achieve the same result?
Essentially, how can you show a static background behind subviews that act as little windows and not show the linen. The linen should only be shown around the cells.
You can download the app, hit airplane mode and try it for yourself.
Here is a screenshot:
Here is another to show that the cells scrolled but the city stays the same:
I'd like to found an elegant solution, for now I would do it by tracking the visible subviews offset and configuring their appearance.
Please check the result at sample project.
For the future reference I'll attach the code below:
ViewController.m
//
// OSViewController.m
// ScrollMasks
//
// Created by #%$^Q& on 11/30/12.
// Copyright (c) 2012 Demo. All rights reserved.
//
#import "OSViewController.h"
#interface OSViewController ()
// subviews
#property (strong) IBOutlet UIScrollView * scrollView;
// all the subviews
#property (strong) NSArray * maskedSubviews;
// subviews visible at scrollview, we'll update only them
#property (strong) NSArray * visibleMaskedSubviews;
// updates the views from visibleMaskedSubviews
-(void) updateVisibleSubviews;
// updates the visibleMaskedSubviews array with the given scrollView offset
-(void) updateVisibleSubviewsArrayForOffset:(CGPoint) offset;
#end
#implementation OSViewController
-(void) unused {}
#pragma mark - view
-(void) viewWillAppear:(BOOL)animated {
[self updateVisibleSubviews];
[super viewWillAppear:animated];
}
- (void)viewDidLoad
{
[super viewDidLoad];
/*
See -updateVisibleSubviews comment for the class comments
*/
UIView * newMaskedView = nil;
NSMutableArray * newMaskedSubviews = [NSMutableArray array];
const CGSize scrollViewSize = self.scrollView.bounds.size;
const int totalSubviews = 10;
const float offset = 20.;
const float height = 100.;
UIImage * maskImage = [UIImage imageNamed:#"PeeringFrog.jpg"];
/*
// Uncomment to compare
UIImageView * iv = [[UIImageView alloc] initWithFrame:self.scrollView.bounds];
iv.image = maskImage;
[self.view insertSubview:iv atIndex:0];
*/
// add scrollview subviews
for (int i = 0; i < totalSubviews; i++) {
CGRect newViewFrame = CGRectMake(offset, offset*(i+1) + height*i, scrollViewSize.width - offset*2, height);
newMaskedView = [UIView new];
newMaskedView.frame = newViewFrame;
newMaskedView.clipsToBounds = YES;
newMaskedView.backgroundColor = [UIColor redColor];
newMaskedView.autoresizingMask = UIViewAutoresizingFlexibleRightMargin | UIViewAutoresizingFlexibleWidth;
UIImageView * maskImageView = [UIImageView new];
maskImageView.frame = CGRectMake(0, 0, self.scrollView.bounds.size.width, self.scrollView.bounds.size.height);
maskImageView.image = maskImage;
[newMaskedView addSubview:maskImageView];
[self.scrollView addSubview:newMaskedView];
[newMaskedSubviews addObject:newMaskedView];
}
self.scrollView.contentSize = CGSizeMake(scrollViewSize.width, (height+offset)*totalSubviews + offset*2);
self.maskedSubviews = [NSArray arrayWithArray:newMaskedSubviews];
[self updateVisibleSubviewsArrayForOffset:self.scrollView.contentOffset];
}
-(void) updateVisibleSubviews {
[self updateVisibleSubviewsArrayForOffset:self.scrollView.contentOffset];
for (UIView * view in self.visibleMaskedSubviews) {
/*
TODO:
view must be UIView subclass with the imageView initializer and imageView frame update method
*/
CGPoint viewOffset = [self.view convertPoint:CGPointZero fromView:view];
UIImageView * subview = [[view subviews] objectAtIndex:0];
CGRect subviewFrame = subview.frame;
subviewFrame = CGRectMake(-viewOffset.x, -viewOffset.y, subviewFrame.size.width, subviewFrame.size.height);
subview.frame = subviewFrame;
}
}
#pragma mark - scrollview delegate & utilities
-(void) scrollViewDidScroll:(UIScrollView *)scrollView {
[self updateVisibleSubviews];
}
-(void) updateVisibleSubviewsArrayForOffset:(CGPoint) offset {
NSMutableArray * newVisibleMaskedSubviews = [NSMutableArray array];
for (UIView * view in self.maskedSubviews) {
CGRect intersectionRect = CGRectIntersection(view.frame, self.scrollView.bounds);
if (NO == CGRectIsNull(intersectionRect)) {
[newVisibleMaskedSubviews addObject:view];
}
}
self.visibleMaskedSubviews = [NSArray arrayWithArray:newVisibleMaskedSubviews];
}
#pragma mark - memory
- (void)didReceiveMemoryWarning
{
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
#end
ViewController.h
//
// OSViewController.h
// ScrollMasks
//
// Created by #%$^Q& on 11/30/12.
// Copyright (c) 2012 Demo. All rights reserved.
//
/*
PeeringFrog image is taken (and resized) from Apple sample project "PhotoScroller"
*/
#import <UIKit/UIKit.h>
#interface OSViewController : UIViewController <UIScrollViewDelegate>
#end
I did something similar a few years ago. At first I tried using the CGImageMaskCreate stuff, but found it far easier just to create an image that had transparent "cutouts" and then used animation effects to scroll the picture(s) under it.
For your case, I'd find an image of linen the size of the screen. Then I'd use a image editor (I use GIMP) to draw some number of boxes on the linen using a flat color. Then I'd map that box color to transparent to make the cutouts. There's other ways to do this, but that's the way I do it.
In your app, add two or more image views to the main view. Don't worry about the placement because that will be determined at run time. You'll want to set these image views to contain the images you want to have "scroll" under. Then add your linen-with-cutouts UIImageView so it's on top and it's occupying the entire screen size. Make sure that the top UIImageView's background is set to transparent.
When the app starts, layout your "underneath" imageviews, top to bottom, and then start a [UIView beginAnimation] that scrolls your underneath images views up by modifying the "y" position. This animation should have a done callback that gets called when the top image view is completely off the screen. Then, in the done callback, layout the current state and start the animation again. Here's the guts of the code I used (but note, my scrolling was right to left, not bottom to top and my images were all the same size.)
- (void)doAnimationSet
{
[iv1 setFrame:CGRectMake(0, 0, imageWidth, imageHeight)];
[iv2 setFrame:CGRectMake(imageWidth, 0, imageWidth, imageHeight)];
[iv3 setFrame:CGRectMake(imageWidth*2, 0, imageWidth, imageHeight)];
[self loadNextImageSet];
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:10];
[UIView setAnimationCurve:UIViewAnimationCurveLinear];
[iv1 setFrame:CGRectMake(-imageWidth, 0, imageWidth, imageHeight)];
[iv2 setFrame:CGRectMake(0, 0, imageWidth, imageHeight)];
[iv3 setFrame:CGRectMake(imageWidth, 0, imageWidth, imageHeight)];
[UIView setAnimationDelegate:self];
[UIView setAnimationDidStopSelector:#selector(doneAnimation:finished:context:)];
[UIView commitAnimations];
}
- (void)doneAnimation:(NSString *)aid finished:(BOOL)fin context:(void *)context
{
[self doAnimationSet];
}
This should give you the effect that you are looking for. Good luck :)

Resources