In my app, after an image is picked with uiimagepicker, it is processed via a webservice. The web processing takes a second, so I'd like to create an grayed out overlay with an activity indicator view.
My problem is that the UIImagePickerView view seems to stay on top of everything until the processing is finished.
I have tried using [myPicker dismissModalViewControllerAnimated:YES]; before the overlay is loaded or the processing even starts, but the view is still on screen. After that, my overlay is loaded as followed
ovController = [[OverlayViewController alloc] initWithNibName:#"OverlayViewController" bundle:[NSBundle mainBundle]];
CGFloat yaxis = self.navigationController.navigationBar.frame.size.height;
CGFloat width = self.view.frame.size.width;
CGFloat height = self.view.frame.size.height;
CGRect frame = CGRectMake(0, yaxis, width, height);
ovController.view.frame = frame;
ovController.view.backgroundColor = [UIColor grayColor];
ovController.view.alpha = 0.7;
[self.view insertSubview:ovController.view aboveSubview:self.view];
I have also tried using [[myPicker cameraOverlayView] insertSubview:ovController.view]; before I dismiss myPicker, but to no avail.
To be clear, I am trying bring the "loading" overlay on the screen after the UIImagePicker goes away, but before the web processing starts.
Any input will be appreciated. Thanks
It sounds like you are doing the upload on the main thread which is locking the view from being updated. You might try doing the upload on a sperate thread so that the main thread can dismiss the image picker and display the overlay.
Related
In my iPad app I have a view controller with a small table view. When you tap on the table view it opens a modal view controller that is a larger and more refined version of the small table view. I would like to create an animation from a pre-rendered image of the large view controller by scaling the image down to be the size of the small table view and zoom it to full screen size and then replace the image with the "real" view controller.
Something like:
LargeViewController* lvc = [[LargeViewController alloc] init];
[self presentModalViewController:lvc byZoomingFromRect:CGRectMake(50,50,200,300)];
I know you can produce an image from a view:
- (UIImage *) imageWithView:(UIView *)view
{
UIGraphicsBeginImageContextWithOptions(view.bounds.size, view.opaque, [[UIScreen mainScreen] scale]);
[view.layer renderInContext:UIGraphicsGetCurrentContext()];
UIImage * img = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return img;
}
But how do I make the view controller draw itself (offscreen) so I can take it's view and scale the image in an animation to fill screen?
Thanks in advance.
I suppose you want to create your very own animation. Last month I played around with something like that. My solution was adding a custom view (maybe taken from a view controller) to the current view as an overlay. This works with layers, too.
First you fetch the Image from your "future" or "present" view controller, like you did in your code example above. Normally the view controllers content should be available while rendering to the context.
Now you have the image. The manipulation of the image must be done by you.
Add the image to a UIImageView. This ImageView can be added as subview or layer. Now you have a layer where you can freely draw above your actual user interface. Sometimes you have to move the layer or view around, so that it perfectly overlays your view. This depends on your view setup. If you are dealing with Tableviews, adding a subview is not that easy. So better use the layer.
After all the work was done, present the new view controller without animation, so that it appears immediately.
Remove the layer or view from your parent view after the work was done, and clean up.
This sounds complicated, but once you've done that you have a template for that. In "WWDC 2011, Session 309 Introducing Interface Builder Storyboarding" apple introduced 'custom segues', where you'll find a mechanism for exactly what you want to do. The code below is a cut out of an older project and is somehow messy and must be cleaned up. But for showing the principle this should work:
-(void) animate {
static LargeViewController* lvc = [[LargeViewController alloc] init];
UIGraphicsBeginImageContextWithOptions(self.bounds.size, view.opaque, [[UIScreen mainScreen] scale]);
[lvc.view.layer renderInContext:UIGraphicsGetCurrentContext()];
// Create a ImageView to display your "zoomed" image
static UIImageView* displayView = [[UIImageView alloc] initWithFrame:self.view.frame];
static UIImage * img = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
// Add your image to the view
displayView.image = img;
// insert the view above your actual view, adjust coordinates in the
// frame property of displayView if overlay is misaligned
[[self.view] addSubview:displayView];
// alternatively you can use the layer
// [self.view.layer addSublayer:displayView.layer];
// draw the imageView
[displayView setNeedsDisplay];
// do something in background. You may create your own
// construction, i.e. using a timer
dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{
NSDate *now = [NSDate date];
NSTimeInterval animationDuration = 3.;
NSTimeInterval t = -[now timeIntervalSinceNow];
while (t < animationDuration) {
t = -[now timeIntervalSinceNow];
// Do some animation here, by manipulation the image
// or the displayView
// <calculate animation>, do something with img
// you have exact timing information in t,
// so you can set the scalefactor derived from t
// You must not use an UIImage view. You can create your own view
// and do sth. in draw rect. Do whatever you want,
// the results will appear
// in the view if you added a subview
// or in a layer if you are using the layer
dispatch_sync(dispatch_get_main_queue(), ^{
// display the result
displayView.image = img;
[displayView setNeedsDisplay];
});
}
});
// now the animation is done, present the real view controller
[self presentModalViewController:lvc animated:NO];
// and clean up here
}
Perhaps you could use something like
CGAffineTransform tr = CGAffineTransformScale(lvc.view.transform, 0.5, 0.5);
to embed a scaled down version of the view in your parent view controller, then present lvc modally and restore scale when the user taps the view.
UIKit takes care of most of this for you. While jbat100's solution could be made to work too, you should be able to do this simply by setting lvc's initial frame to the smaller rect you want to start out at and then when you set the frame too its full size, the implicit animation for changing the frame will handle the zooming animation for you. Each UIView has a CALayer that its content is drawn in and that layer has several implicit animtions setup to animated changes to certain properties such as the frame or position properties. Here is my untested stab at it:
.
.
lvc.view.frame = CGRectMake(50,50,200,300);
[self performSelector:#selector(setFrameToFullScreen) withObject:nil afterDelay:0];
}
- (void)setFrameToFullScreen {
lcv.view.frame = [UIScreen mainScreen].bounds;
}
The performSelector:withObject:afterDelay call will cause setFrameToFullScreen to be called on the next run loop cycle. If you don't do something like that, then only the final frame will be used and the system won't recognize the change in the frame and apply its implicit animation to the views layer.
I'm using an picker Controller with a cameraOverlayView to display an image of a product in the camera view. The product image is resized before applying on the overlay.
It works fine on iOS 4.2 but on iOS 4.3 the product image is displayed full size.
pickerController.sourceType = UIImagePickerControllerSourceTypeCamera;
UIImageView *imgView = [[[UIImageView alloc] initWithImage:[UIImage imageNamed:produitAffiche.img_realite]] autorelease];
// Resize
if(imgView.frame.size.height == 480)
{
//Portrait
imgView.frame = CGRectMake(80.0f, 120.0f, 160.0f, 240.0f);
}
else
{
// Landscape
imgView.frame = CGRectMake(40.0f, 160.0f, 240.0f, 160.0f);
}
imgView.contentMode = UIViewContentModeCenter;
imgView.clipsToBounds = NO;
imgView.contentMode = UIViewContentModeScaleAspectFit;
pickerController.cameraOverlayView = (UIView *) imgView;
I changed the frame of the UIImageView I use as overlay but it's still displayed at 320*480.
I know that the cameraOverlayView have been modified in iOS 4.3 but I don't know what has changed and what I have to do to correct my application.
Thanks for your help.
In iOS 4.3 the overlay view is stretched to full screen. Because you set the content mode to aspect fit, the image is stretched to fit the new view size which is 320x480.
You need to make a transparent UIView that is fullscreen, add the imageview to that view and make the UIView the new overlay view.
UIView *fullscreenView = [[UIView alloc] initWithFrame:CGRectZero];
fullscreenView.backgroundColor = [UIColor clearColor];
....
[fullscreenView addSubview:imgView];
pickerController.cameraOverlayView = fullscreenView;
Found this article that seems to fit the bill. The long and short of it is to use
- (UIImage *)
resizedImageWithContentMode:(UIViewContentMode)contentMode
bounds:(CGSize)bounds
interpolationQuality:(CGInterpolationQuality)quality;
Comment out this line in your code
imgView.clipsToBounds = NO;
It should work.
If you really want to clip, #slf 's answer should help.
try setting these properties of UIImagePicker:
mImagePickerController.showsCameraControls = NO;
mImagePickerController.navigationBarHidden = YES;
mImagePickerController.toolbarHidden = YES;
mImagePickerController.wantsFullScreenLayout = YES;
My problem was actually that a UIImagePicker displayed full-screen on iOS5 did not work on iOS4.3, on an iPad. I was starting the image picker up offscreen, then animating it into view... You would see the shutter image open up, but then the camera view itself was simply transparent with no camera output.
My solution was to not animate that in for iOS4.3 on the iPad. It seems that having the camera view started offscreen was leaving the camera rendering part behind (fixed as I noted in iOS5).
This answer is not quite right for the original question but I place it here for someone that comes into the same issue and hits this question as I did.
How to add a UIActivityIndicator to a splash screen ?
Edit : I tried the following things
I created UIViewController Sub class called SplashViewController. and the code is as below, still the image is not persisting long enough .
If by "Splash Screen" you mean the image that is displayed when your app launches, the answer is that you can't.
What you can do is have an initial view that includes a background image that looks just like your launch image, and then add an activity indicator into that view. To the user, it will appear that the activity indicator is "part" of your launch image.
The trick is to load your initial nib as quickly as possible (keep it small and simple) so the static images transitions to a view you can manipulate right away.
It depends on what you mean by a splash screen. If you mean the image that is first shown when the app is run, then we have a more tricky situation. This is just a static image (Default.png) so what you would then need to do is create a view that has your splash screen image as the background, add the activity indicator view on top of it, and then add that view directly from the app delegate. When whatever you're loading is done, you can get rid of this view and proceed with the rest of your program. Probably easier to do in a NIB, but here's an idea of it programmatically:
- (void)loadView;
{
CGRect r = [UIScreen mainScreen].applicationFrame;
UIView *activityView = [[[UIView alloc] initWithFrame:r] autorelease];
self.view = activityView;
activityView.backgroundColor = [UIColor blackColor];
activityView.alpha = 0.5;
UIImageView *imgView = [[[UIImageView alloc] initWithImage:[UIImage imageNamed:#"Default.png"]] autorelease];
[activityView addSubview:imgView];
CGRect wheelR = CGRectMake(r.size.width / 2 - 12, r.size.height / 2 - 12, 24, 24);
UIActivityIndicatorView *activityWheel = [[UIActivityIndicatorView alloc] initWithFrame:wheelR];
activityWheel.activityIndicatorViewStyle = UIActivityIndicatorViewStyleWhite;
activityWheel.autoresizingMask = (UIViewAutoresizingFlexibleLeftMargin |
UIViewAutoresizingFlexibleRightMargin |
UIViewAutoresizingFlexibleTopMargin |
UIViewAutoresizingFlexibleBottomMargin);
[activityWheel startAnimating];
[activityView addSubview:activityWheel];
}
Hi Pradeep I implement this code in monotouch for ios so this code is help ful to implement your logic
#region Splash Screen
public void ShowSplash(){
// get the Height & Width of device Screen
float mainSrcWidth = this.View.Bounds.Width;
float mainSrcHeight = this.View.Bounds.Height;
splashScreen = new UIImageView (UIImage.FromFile ("Images/loadNew1536_2008.png"));
splashScreen.Frame = new RectangleF (0, 0, mainSrcWidth, mainSrcHeight);
//Start the thread;
ThreadPool.QueueUserWorkItem (delegate {
Load ();
}
)
this.View.AddSubview(splashScreen);
}
#endregion
#region Load() splashscreen
private void Load ()
//Sleep for 3 seconds to simulate a long load.
Thread.Sleep (new TimeSpan (0, 0, 0, 3));
this.BeginInvokeOnMainThread (delegate {
splashScreen.RemoveFromSuperview ();
splashScreen = null;
});
}
#endregion
Call the ShowSplash() method from Appdelegate Class of FinishedLaunching Method
UIActivityIndicators are UIViews and can be added like any other.
something like:
[myView addSubview:mySpinner];
Or just drop one in your NIB.
here's another answer:
How to use activity indicator view on iPhone?
I've coded a "generic" ads management class for all my applications and i have an issue. This class can add an ads view to any view of my application, randomly; in order to do so, my idea is to resize the frame of my current view to reduce its height (let's say 50 pixels less) and add my ads view in the free space i created. This way, i don't have to bother modifying my views for ads integrations, everything is done automatically. It's working well but my ads aren't responding to touch events. I guess it's because this ads view is "outside" the frame of my controller.
It is possible to reduce the height of my view frame and raise its bounds so my ads subview is really part of my view?
Thanks a lot :)
UIView *adView = [[UIView alloc] init];
adView.frame = CGRectMake(0,267,320,100);
adView.backgroundColor = [UIColor grayColor];
adView.tag = 123456;
adView.userInteractionEnabled = YES;
CGRect myFrame = [self.view frame];
myFrame.size.height = myFrame.size.height - 100;
[self.view setFrame:myFrame];
[self.view addSubview:adView];
Here's a picture representing what i would like to do :
http://i49.tinypic.com/2iw7lz4.jpg
This is not an answer but I do not have option to post a comment to your question.
Can you please post the code you have in your touchesBegan method?
I think there can be the problem
Regards
Alejandra
UIScrollView in paging mode assumes the pages are located right next to each other, with no gap. However if you open a photo in the Photos app and swipe through photos, you can see that it has some gap between pages. I want these gaps too.
I'm looking for existing solutions if any, or for some more bizarre ideas about implementing the page gaps besides the one I have explained below. Or maybe there's some obvious easy way I am missing?
To be clear: I want the gap to only be visible while scrolling, so I cannot simply inset the page content.
My plan is to try moving the page content from inside scrollViewDidScroll callback, so that (assuming you're scrolling to the right) initially the target page is slightly offset to the right of its page boundaries, and by the time you arrive at the target page it's back at its proper location, and the source page is slightly offset to the left of its boundaries. (Or maybe instead of moving things continuously, I'll be better off shifting the offsets, say, exactly halfway between pages.)
I'm the author of the ScrollingMadness article+example that I've been referring some people to here. I've implemented progammatic zooming, and got in-photo zooming+scrolling working together with inter-photo paging. So I know how to play with UIScrollView, and am looking for the advanced stuff.
Please don't point me at TTScrollView. I've already pointed many people to it myself, but I consider it's feel too far from the native UIScrollView behaviour, and do not want to use it in my projects.
Note that this answer is quite old. The basic concept still works but
you should not be hard coding view sizes in iOS7 and 8. Even if you ignore
that advice, you should not use 480 or 330.
Have you tried making the frame of the UIScrollView slightly larger than the screen (assuming that you want to display your images fullscreen and then arranging your subviews on the same slightly-larger-than-the-screen boundaries.
#define kViewFrameWidth 330; // i.e. more than 320
CGRect scrollFrame;
scrollFrame.origin.x = 0;
scrollFrame.origin.y = 0;
scrollFrame.size.width = kViewFrameWidth;
scrollFrame.size.height = 480;
UIScrollView* myScrollView = [[UIScrollView alloc] initWithFrame:scrollFrame];
myScrollView.bounces = YES;
myScrollView.pagingEnabled = YES;
myScrollView.backgroundColor = [UIColor redColor];
UIImage* leftImage = [UIImage imageNamed:#"ScrollTestImageL.png"];
UIImageView* leftView = [[UIImageView alloc] initWithImage:leftImage];
leftView.backgroundColor = [UIColor whiteColor];
leftView.frame = CGRectMake(0,0,320,480);
UIImage* rightImage = [UIImage imageNamed:#"ScrollTestImageR.png"];
UIImageView* rightView = [[UIImageView alloc] initWithImage:rightImage];
rightView.backgroundColor = [UIColor blackColor];
rightView.frame = CGRectMake(kViewFrameWidth * 2,0,320,480);
UIImage* centerImage = [UIImage imageNamed:#"ScrollTestImageC.png"];
UIImageView* centerView = [[UIImageView alloc] initWithImage:centerImage];
centerView.backgroundColor = [UIColor grayColor];
centerView.frame = CGRectMake(kViewFrameWidth,0,320,480);
[myScrollView addSubview:leftView];
[myScrollView addSubview:rightView];
[myScrollView addSubview:centerView];
[myScrollView setContentSize:CGSizeMake(kViewFrameWidth * 3, 480)];
[myScrollView setContentOffset:CGPointMake(kViewFrameWidth, 0)];
[leftView release];
[rightView release];
[centerView release];
Apologies if this doesn't compile, I tested it in a landscape app and hand edited it back to portrait. I'm sure you get the idea though. It relies on the superview clipping which for a full screen view will always be the case.
So I don't have enough "rep" to post a comment on the answer above. That answer is correct, but there is a BIG issue to be aware of:
If you're using a UIScrollView in a viewController that's part of a UINavigationController, the navigation controller WILL resize the frame of your scrollView.
That is, you have an app that uses a UINavigationController to switch between different views. You push a viewController that has a scrollView and you create this scrollView in the viewController's -init method. You assign it a frame of (0, 0, 340, 480).
Now, go to your viewController's -viewDidAppear method, get the frame of the scrollView you created. You'll find that the width has been reduced to 320 pixels. As such, paging won't work correctly. You'll expect the scrollView to move 340 pixels but it will, instead, move 320.
UINavigationController is a bit notorious for messing with subviews. It moves them and resizes them to accommodate the navigation bar. In short, it's not a team player -- especially in this case. Other places on the web suggest that you not use UINavigationController if you need precise control over your views' size and locations. They suggest that, instead, you create your own navigationController class based on UINavigationBar.
Well that's a ton of work. Fortunately, there's an easier solution: set the frame of the scrollView in your viewController's -viewDidAppear method. At this point, UINavigationController is done messing with the frame, so you can reset it to what it should be and the scrollView will behave properly.
This is relevant for OS 3.0. I have not tested 3.1 or 2.2.1. I've also filed a bug report with Apple suggesting that they modify UINavigationController with a BOOL such as "-shouldAutoarrangeSubviews" so that we can make that class keep its grubby hands off subviews.
Until that comes along, the fix above will give you gaps in a paginated UIScrollView within a UINavigationController.
Apple has released the 2010 WWDC session videos to all members of the iphone developer program. One of the topics discussed is how they created the photos app!!! They build a very similar app step by step and have made all the code available for free.
It does not use private api either. Here is a link to the sample code download. You will probably need to login to gain access.
http://connect.apple.com/cgi-bin/WebObjects/MemberSite.woa/wa/getSoftware?code=y&source=x&bundleID=20645
And, here is a link to the iTunes WWDC page:
http://insideapple.apple.com/redir/cbx-cgi.do?v=2&la=en&lc=&a=kGSol9sgPHP%2BtlWtLp%2BEP%2FnxnZarjWJglPBZRHd3oDbACudP51JNGS8KlsFgxZto9X%2BTsnqSbeUSWX0doe%2Fzv%2FN5XV55%2FomsyfRgFBysOnIVggO%2Fn2p%2BiweDK%2F%2FmsIXj
The way to do this is like you said, a combination of a few things.
If you want a gap of 20px between your images, you need to:
First, expand your scroll view's total width by 20px and move it left by 10px.
Second, when you lay out the xLoc of your images, add 20px for each image so they're spaced 20px apart.
Third, set the initial xLoc of your images to 10px instead of 0px.
Fourth, make sure you set the content size of your scroll view to add 20px for each image. So if you have kNumImages images and each is kScrollObjWidth, then you go like this:
[scrollView setContentSize:CGSizeMake((kNumImages * (kScrollObjWidth+20)), kScrollObjHeight)];
It should work after that!
This is just a hunch, so apologies if completely wrong, but is it possible that the contentSize is just set to slightly wider than the screen width.
The correct information is then rendered within the view to the screen width and UIScrollView takes care of the rest ?
Maybe you want to try UIScrollView's contentInset property?
myScrollView.contentInset = UIEdgeInsetsMake(0, 0, 0, 10.0);
I just thought I'd add here for posterity the solution I ended up going with. For a long time I've been using Bryan's solution of adjusting the frame in -viewDidAppear, and this has worked brilliantly. However since iOS introduced multitasking I've been running into a problem where the scroll view frame gets changed when the app resumes from the background. In this case, -viewDidAppear was not being called and I couldn't find a delegate method that would be called at the right time to reverse the change. So I decided to make my scroll view a subview of my View Controller's view, and this seemed to fix the problem. This also has the advantage of not needing to use -viewDidAppear to change the frame - you can do it right after you create the scroll view. My question here has the details, but I'll post them here as well:
CGRect frame = CGRectMake(0, 0, 320, 460);
scrollView = [[UIScrollView alloc] initWithFrame:frame];
// I do some things with frame here
CGRect f = scrollView.frame;
f.size.width += PADDING; // PADDING is defined as 20 elsewhere
scrollView.frame = f;
[self.view addSubview:scrollView];
To avoid messing with UIScrollView's frame, you could subclass UIScrollView and override layoutSubviews to apply an offset to each page.
The idea is based on the following observations:
When zoomScale !=1, the offset is zero when it is at the left / right edge
When zoomScale ==1, the offset is zero when it is at the visible rect centre
Then the following code is derived:
- (void) layoutSubviews
{
[super layoutSubviews];
// Find a reference point to calculate the offset:
CGRect bounds = self.bounds;
CGFloat pageGap = 8.f;
CGSize pageSize = bounds.size;
CGFloat pageWidth = pageSize.width;
CGFloat halfPageWidth = pageWidth / 2.f;
CGFloat scale = self.zoomScale;
CGRect visibleRect = CGRectMake(bounds.origin.x / scale, bounds.origin.y / scale, bounds.size.width / scale, bounds.size.height / scale);
CGFloat totalWidth = [self contentSize].width / scale;
CGFloat scrollWidth = totalWidth - visibleRect.size.width;
CGFloat scrollX = CGRectGetMidX(visibleRect) - visibleRect.size.width / 2.f;
CGFloat scrollPercentage = scrollX / scrollWidth;
CGFloat referencePoint = (totalWidth - pageWidth) * scrollPercentage + halfPageWidth;
// (use your own way to get all visible pages, each page is assumed to be inside a common container)
NSArray * visiblePages = [self visiblePages];
// Layout each visible page:
for (UIView * view in visiblePages)
{
NSInteger pageIndex = [self pageIndexForView:view]; // (use your own way to get the page index)
// make a gap between pages
CGFloat actualPageCenter = pageWidth * pageIndex + halfPageWidth;
CGFloat distanceFromRefPoint = actualPageCenter - referencePoint;
CGFloat numOfPageFromRefPoint = distanceFromRefPoint / pageWidth;
CGFloat offset = numOfPageFromRefPoint * pageGap;
CGFloat pageLeft = actualPageCenter - halfPageWidth + offset;
view.frame = CGRectMake(pageLeft, 0.f, pageSize.width, pageSize.height);
}
}