I am creating a photo editor in my app and working on a multiple picture layout option.
Currently when the user takes a picture, I display their image in UIImageView nested in a UIScrollView. The reason I nest it in a UIScrollView is so I can pan and zoom.
In the situation where the user selects duo layout mode, the app puts 2 images side by side (so 2 UIScrollViews).
If they hold a finger on one UIScrollView I want to raise the UIScrollView up a tad and give it a drop shadow.
I have a long way of doing this, but I was curious if there was anything in the native libraries that will let me automatically create this hover effect for dragging a view class.
Thanks
No, there isn't any preexisting functionality for this. You can add shadow and animate a "lift" motion yourself with something like this:
// define dragged somewhere as the UIView subclass of your choosing
dragged.layer.shadowColor = [UIColor blackColor].CGColor;
dragged.layer.shadowOffset = CGSizeMake(-2, 2);
dragged.layer.masksToBounds = NO;
dragged.layer.shadowRadius = 4;
dragged.layer.shadowOpacity = .7;
[UIView animateWithDuration:.2 delay:0
options:UIViewAnimationOptionCurveEaseInOut
animations:^{self.draggedPhoto.transform = CGAffineTransformMakeScale(1.2, 1.2);}
completion:nil];
Related
Here's my drawRect code:
- (void)drawRect:(CGRect)rect {
if (currentLayer) {
[currentLayer removeFromSuperlayer];
}
if (currentPath) {
currentLayer = [[CAShapeLayer alloc] init];
currentLayer.frame = self.bounds;
currentLayer.path = currentPath.CGPath;
if ([SettingsManager shared].isColorInverted) {
currentLayer.strokeColor = [UIColor blackColor].CGColor;
} else {
currentLayer.strokeColor = [UIColor whiteColor].CGColor;
}
currentLayer.strokeColor = _strokeColorX.CGColor;
currentLayer.fillColor = [UIColor clearColor].CGColor;
currentLayer.lineWidth = self.test;
currentLayer.contentsGravity = kCAGravityCenter;
[self.layer addSublayer:currentLayer];
//currentLayer.position = CGPointMake(CGRectGetMidX(self.frame), CGRectGetMidY(self.frame));
}
//[currentPath stroke];
}
"The portion of the view’s bounds that needs to be updated"
That's from the apple dev docs.
I am dealing with a UIView and a device called a slate -the slate has the ability to record pencil drawings to my iOS app. I managed to get it working on the entire view. But, I dont want the entire view to be filled with the slate input. Instead, I'd like to modify the UIView to have a height of phonesize - 40px; Makes sense?
I found out if I set the frame that I have as currentLayer to new bounds the screen that can be drawn on is resized accordingly.
I think you’re mixing up the meaning of the various rectangles in UIView. The drawRect parameter designates a partial section of the view that needs to be redrawn. This can be that you called setNeedsDisplay(rect), or this can be because iOS thinks it needs to be redrawn (e.g. because your app‘s drawings were ignored because the screen was locked, and now the user unlocked the screen and current drawings are needed).
This rectangle has nothing to do with the size at which your contents are drawn. The size of the area your view is drawn in is controlled by its frame and bounds, the former of which is usually controlled using Auto Layout (i.e. layout constraint objects).
In general, while in drawRect, you look at the bounds of your view to get the full rectangle to draw in. The parameter to drawRect, on the other hand, is there to allow you to optimize your drawing to only redraw the parts that actually changed.
Also, it is in general a bad idea to manipulate the view and layer hierarchies from inside drawRect. The UIView drawing mechanism expects you to only draw your current view‘s state in there. Since it recursively walks the list of views and subviews to call drawRect, you changing the list of views or layers can cause weird side effects like views being skipped until the next redraw.
Create and add new layers in your state-changing methods or event handling methods, and position them using auto layout or from inside layoutSubviews.
I'm writing an app with a series of cards in a table view, similar to the layout of the Google app for iOS when Google Now cards are enabled. When the user taps on a card, there should be a custom transition to a new view controller which is basically the card looking bigger, almost filling the screen, and it has more details on it. The custom transition itself should look like the card is animated upward and growing in size until it reaches its final size and position, which is now the new view controller holding the card.
I have been trying to approach this using a custom view controller transition. When the card is tapped, I initiate a custom view controller transition with UIModalPresentationCustom, and I set a transition delegate, which itself vends a custom animator and a custom UIPresentationController. In animateTransition:, I add the new view controller's view into the container view, setting the frame to the card's frame initially (so it looks like the card is still there and unchanged). Then I attempt to perform an animation where the presented view's frame grows in size and changes in position so that it moves into its final position.
Here's some of my code which does what I've described above - I'm trying to keep it short and sweet, but I can provide more info if needed:
Transition Delegate
-(void)animateTransition:(id<UIViewControllerContextTransitioning>)transitionContext {
// NOWAnimationDelegate is my own custom protocol which defines the method for asking the presenting VC for the tapped card's frame.
UIViewController<NOWAnimationDelegate> *fromVC = (UIViewController<NOWAnimationDelegate> *)[transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey];
UIViewController *finalVC = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];
UIView *toView = [transitionContext viewForKey:UITransitionContextToViewKey];
// Ask the presenting view controller for the frame of the tapped card - this method works.
toView.frame = [fromVC rectForSelectedCard];
[transitionContext.containerView addSubview:toView];
CGRect finalRect = [transitionContext finalFrameForViewController:finalVC];
[UIView animateWithDuration:[self transitionDuration:transitionContext] animations:^{
toView.frame = finalRect;
}completion:^(BOOL finished) {
[transitionContext completeTransition:YES];
}];
}
Custom UIPresentationController
-(CGSize)sizeForChildContentContainer:(id<UIContentContainer>)container withParentContainerSize:(CGSize)parentSize {
return CGSizeMake(0.875*parentSize.width, 0.875*parentSize.height);
}
-(CGRect)frameOfPresentedViewInContainerView {
CGRect presentedViewFrame = CGRectZero;
CGRect containerBounds = self.containerView.bounds;
presentedViewFrame.size = [self sizeForChildContentContainer:(UIView<UIContentContainer> *)self.presentedView withParentContainerSize:containerBounds.size];
presentedViewFrame.origin.x = (containerBounds.size.width - presentedViewFrame.size.width)/2;
presentedViewFrame.origin.y = (containerBounds.size.height - presentedViewFrame.size.height)/2 + 10;
return presentedViewFrame;
}
What I'm finding is happening is that the new view is being automatically set to its final size immediately at the start of the animation, and then the animation is just the new view animating upwards. Using breakpoints, I'm noticing that frameOfPresentedViewInContainerView is called during the [transitionContext.containerView addSubview:toView] call, which would probably explain why this is happening - frameOfPresentedViewInContainerView returns "The frame rectangle to assign to the presented view at the end of the animations" according to the UIPresentationController documentation.
However, I'm not sure how to proceed, or if it's even really possible. All the examples of custom view controller transitions I've seen have all had the final size of the presented view controller static and unchanging during the animation. Is there any way to perform a custom view controller transition with a changing size of the presented view during the animation, or do I have to approach this in a different way?
Basically what you need to do is animating your toView.transform using CGAffineTransform in your Transition Delegate. Steps to do:
Before animating set your toView.frame = your frame when it's not showing
Create, let's say, CGAffineTransformMakeScale to scale from hidden frame to your desired final presented frame
On animation block set toView.transform to the transform that you create on step 2
As Aditya mentions CGAffineTransform is the way to go here.
Ive got this working now with it maintaining the width:
CGFloat targetscale=initialHeight/finalHeight;
CGFloat targetyoffset=(finalHeight-(finalHeight*targetscale))/2;
int targety=roundf(initialPosition-targetyoffset);
CGAffineTransform move=CGAffineTransformMakeTranslation(0, targety);
CGAffineTransform scale=CGAffineTransformMakeScale(1,targetscale);
toView.transform=CGAffineTransformConcat(scale,move);
This positions the incoming view taking into account the determined scale and then performs both transforms concurrently so the view scales & moves to the final position and size.
You then just set
toView.transform=CGAffineTransformIdentity;
in the animation block and it'll scale to the final location and size.
Note, this only moves and scales in the vertical dimension but can be adapted to scale in all directions like so:
+(CGAffineTransform)transformView:(UIView*)view toTargetRect:(CGRect)rect{
CGFloat targetscale=rect.size.height/view.frame.size.height;
CGFloat targetxoffset=(view.frame.size.width-(view.frame.size.width*targetscale))/2;
int targetx=roundf(rect.origin.x-view.frame.origin.x-targetxoffset);
CGFloat targetyoffset=(view.frame.size.height-(view.frame.size.height*targetscale))/2;
int targety=roundf(rect.origin.y-view.frame.origin.y-targetyoffset);
CGAffineTransform move=CGAffineTransformMakeTranslation(targetx, targety);
CGAffineTransform scale=CGAffineTransformMakeScale(targetscale,targetscale);
return CGAffineTransformConcat(scale, move);
}
And don't forget to transform the cell's rect the global coordinate space so the start frame is correct for the whole window not just the cells position in the table.
CGRect cellRect=[_tableView rectForRowAtIndexPath:[_tableView indexPathForSelectedRow]];
cellRect=[self.tableView convertRect:cellRect toView:presenting.view];
hope this helps!
Apple provides a wwdc sample app 'LookInside', accompanying talk 228: 'A look inside presentation controllers'. It features 2 custom presentations, of which one animates the size of the presented view controller. A look inside that code should help you out ;)
I'm working on some drawing code. I have that portion working great.
I want to draw over an image, but I want to still be able to see the detail of the image, the black lines, etc.
What I am working on is making a transparent UIImageView that holds the image.
I'm not sure how to get this set up properly though.
Should this be added above the other UIImageView that I color on or below it?
Here's what I have so far:
- (void)viewDidLoad
{
[super viewDidLoad];
topImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 46, 320, 370)];
[topImageView setImage:[UIImage imageNamed:#"imagesmall.png"]];
topImageView.alpha = 1.0;
topImageView.layer.opacity = 1.0;
topImageView.layer.opaque = NO;
[self.view addSubview:topImageView];
[topImageView release];
}
Thoughts anyone?
Yes, you can draw views over other views. They are drawn in the order that they're added as subviews, unless you reorder them after that.
You may need to set the opaque property for some views (this is distinct from and overrides their layer opacity), and set their backgroundColor to nil. UIImageView seems to be transparent by default, as long as its image is; some other UIView subclasses are not.
So, just what is your overlay going to be? If you just need to display one image over another, what you have here seems to work already. If you need to draw some lines programmatically, you'll need to do this:
Create a subclass of UIView.
Implement its drawRect method to display the content you need.
When you add your custom view on top of the background image, make sure it is not opaque and has no backgroundColor.
A common problem here is to find that your foreground is working, but the background isn't being loaded properly. To make sure the background is there, set the alpha of the foreground view to 0.5. You won't want to do that in production, but it will allow you to verify that both views exist.
I have main UIScrollView with lots off buttons which i create like this:
UIButton *myButton = [UIButton buttonWithType:UIButtonTypeCustom]
every button have an image:
UIImage *fileImage = [UIImage imageNamed:#"sun.png"];
[myButton setBackgroundImage:fileImage forState:UIControlStateNormal];
Buttons count could be more than 500. So i need to remove from UIscrollView invisible buttons with images to save memory ?
I believe in this method i need to calculate when UIscrollview is stopped scrolling and for example 20 images are invisible, then i need to remove them and reduce scroller contentOffset.
-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
float bottomEdge = scrollView.contentOffset.y + scrollView.frame.size.height;
}
Maybe some one could give me tips on this. Or even have a good bookmarked tutorial.
I created a similar thing to this using UIViews in a UIScrollView. When the UIScrollView loads, I set the contentView size of the scrollView to be the size of all the views but only loaded the views that can be seen, then when the user scrolls i added the previous/next views and removed the hidden views.
This question helped me: How to implement UIScrollView with 1000+ subviews? especially akosma's answer
I implemented the textfield with a custom keyboard with the "setInputView" function.
But i have a problem: my keyboard frame is not a standard iphone keybord frame.
The question is:
How can i change the size of my custom keyboard?
I know some functions like: UIKeyboardFrameBeginUserInfoKey, ..etc.
Please Note:
The iPhone keyboard frame is = 0,264,320,216
My custom keyboard frame is = 0,0,320,460
Hoping for your kind collaboration,
Best regards...
P
It turns out that the default behaviour of the custom input view that you assign to the UITextField's property is to resize the view to the same frame as the default keyboard. Try setting (I use the name InputViewController for my input view, but you can use whatever you want):
inputViewController = [[InputViewController alloc] initWithNibName:#"InputViewController" bundle:nil];
inputViewController.delegate = self;
inputViewController.view.autoresizingMask = UIViewAutoresizingNone; // This is the code that will make sure the view does not get resized to the keyboards frame.
For more detailed information, you can look at this link, which is provided by Apple.:
If UIKit encounters an input view with an UIViewAutoresizingFlexibleHeight value in its autoresizing mask, it changes the height to match the keyboard.
Hope that Helps!
To set the keyboard inputView with the same size as the native keyboard just do this:
inputView.autoresizingMask = UIViewAutoresizingFlexibleHeight;
To set your own frame do this:
inputView.autoresizingMask = UIViewAutoresizingNone;
From Apple:
You have a lot of flexibility in defining the size and content of an input view or input accessory view. Although the height of these views can be what you’d like, they should be the same width as the system keyboard. If UIKit encounters an input view with a UIViewAutoresizingFlexibleHeight value in its autoresizing mask, it changes the height to match the keyboard. There are no restrictions on the number of subviews (such as controls) that input views and input accessory views may have. For more guidance on input views and input accessory views, see iOS Human Interface Guidelines.
I had the same problem. I solved it by registering for UIKeyboardDidShowNotification (UIKeyboardWillShowNotification did not work, unfortunately) and then changing the view size after the keyboard was shown. However, it still had the white box on top of the keyboard when it was moving up. This worked fine for me because it is coming in over a UITextView with a white background. If you were coming in over any other colored objects, however, it would look a little ugly before the view was properly resized. You can solve that by setting the background color to clearColor.
// Add this while initializing your view
self.backgroundColor = [UIColor clearColor]; // Needed because we can't resize BEFORE showing the view. Otherwise you will see an ugly white box moving up w/ the keyboard
[[NSNotificationCenter defaultCenter] addObserver:self
selector:#selector(keyboardWasShown:)
name:UIKeyboardDidShowNotification object:nil];
// Called when the UIKeyboardDidShowNotification is sent.
- (void)keyboardWasShown:(NSNotification*)aNotification
{
CGRect rect = self.frame;
rect.size.height = 164;
self.frame = rect;
}
Also if you're using a UIViewController to design your inputView, don't use the UIViewController.view... it seems to have a lot of problems getting resized incorrectly on rotate regardless of the AutoresizeMask.
What worked for me was to take my existing UI and use Editor > Embed In > View. Then create a new outlet, and pass that outlet as the inputView. Suddenly the resize on rotate bugs disappeared.
For me msgambel's solution didn't work. But the approach right, I was playing with the inputView's autoresizingMask. Former I had different setting, but the right way to avoid white extra space over the custom keyboard is:
I applied this just for the outermost view.