I have two views on top of one another like so. When I press button, I want to hide the grey view and have the pink view move up into its space. When I press button again, I want the grey view to re-appear and move the pink view back into its original position.
I can accomplish this by doing something like
- (IBAction)toggle:(id)sender {
if (self.top.hidden) {
self.top.hidden = NO;
self.top.layer.frame = CGRectMake(0, 0, 320, 50);
self.bottom.layer.frame = CGRectMake(0, 50, 320, 50);
} else {
self.top.layer.frame = CGRectMake(0, 0, 0, 0);
self.bottom.layer.frame = CGRectMake(0, 0, 320, 50);
self.top.hidden = TRUE;
}
}
However, the general wisdom, from what I understand, regarding autolayout is to not set the frame sizes programmatically in the code. So my question is, how can achieve the same result using autolayout?
It's basically the iPhone version of this question: OS X Cocoa Auto Layout hidden elements
Found the answer courtesy of this question: Animating an image view to slide upwards
In short:
- (IBAction)toggle:(id)sender {
if (self.top.hidden) {
self.top.hidden = NO;
[UIView animateWithDuration:0
animations:^{
self.verticalSpace.constant += 50.0;
[self.view layoutIfNeeded];
}];
} else {
[UIView animateWithDuration:0
animations:^{
self.verticalSpace.constant -= 50.0;
[self.view layoutIfNeeded];
}];
self.top.hidden = TRUE;
}
}
where self.verticalSpace is the constraint set between the bottom view to the top view.
Related
I have a container view with 4 buttons ( see drawing )
I want to animate the button 3 and 4 ( both have 90 hight )
And make the container view change accordingly
So I make both buttons height to be 0, by changing its frame.
And change container hight constraint constant change from 200 to 100
and then call layoutIfNeeded.
I made a button for testing that dose that code.
the problem is that only one of the changes happen !
- (IBAction)testButton:(UITapGestureRecognizer *)sender {
CGRect frame = button3.frame;
frame.size.height = 0;
button3.frame = frame;
CGRect frame1 = button4.frame;
frame1.size.height = 0;
button4.frame = frame1;
buttonContainerHeightConstraint.constant = 100;
[UIView animateWithDuration:0.2 animations:^{
[self.view layoutIfNeeded];
}];
when I click the test button only the container changes it size ! button 3 and 4 are still in the same place but because the container is 100 in height now they are "outside" of it.
only if I click the testButton again only then button 3 and 4 disappears as well
I suppurated it so it will look the way I probably would use it.
- (void)showButton3:(Boolean)show {
CGRect frame = button3.frame;
frame.size.height = show ? 90 : 0;
button3.frame = frame;
[UIView animateWithDuration:0.2 animations:^{
[self.view layoutIfNeeded];
}];
}
- (void)showButton4:(Boolean)show {
CGRect frame1 = button4.frame;
frame1.size.height = show ? 90 : 0;
button4.frame = frame1;
[UIView animateWithDuration:0.2 animations:^{
[self.view layoutIfNeeded];
}];
}
- (void)shrinkBtnContainer:(Boolean)shrink {
buttonContainerHeightConstraint.constant = shrink ? 100 : 200;
[UIView animateWithDuration:0.2 animations:^{
[self.view layoutIfNeeded];
}];
}
- (IBAction)testButton:(UITapGestureRecognizer *)sender {
[self showButton3:false];
[self showButton4:false];
[self shrinkBtnContainer:true];
}
and same thing happens after I click the button it first hides the container, and If I click again it hides the buttons.
So what I am doing wrong here ?
Side notes:
*I work on ios7 so no stackViews and no anchors :(
*I tried to do it without the animation block and I get the same effect.
EDIT*
in the end I deleted buttonContainer hight constraint, made both bottom buttons to have constraint to the buttonContainer and when the 2 button height become 0 ( via height constraint, not frame change ) the container automatically shrinks with them to maintain bottom constraint.
I still want to know why it didn't work at the first place tho
I would like to generate a shockwave effect when I tap on a circular UIView. The effect I'm looking for is very similar to 'Circadia' on the App Store.
(source: mzstatic.com)
Note the circular line that is expanding from the centre view. I couldn't find any kind of tutorial, so I tried the effect using a cheat:
-(void)startShockwave:(UIView *)target
{
// Replace the view tapped with one that will expand
UIView *wave = [[UIView alloc]initWithFrame:target.frame];
wave.backgroundColor = target.backgroundColor;
wave.alpha = 0.5;
wave.layer.masksToBounds = YES;
wave.layer.cornerRadius = wave.frame.size.width / 2;
// Hide it below the original view
[self.view insertSubview:wave belowSubview:target];
CGRect frame = wave.frame;
// Create a view that is the same colour as self.view to make it look like a hole
UIView *center = [[UIView alloc]initWithFrame:CGRectMake(frame.origin.x + 10, frame.origin.y + 10, frame.size.width - 20, frame.size.height - 20)];
center.backgroundColor = self.view.backgroundColor;
center.layer.masksToBounds = YES;
center.layer.cornerRadius = center.frame.size.width / 2;
[self.view insertSubview:center aboveSubview:wave];
// Hide the original view
target.alpha = 0;
// IMPORTANT: I send these views behind the others so that center does not overlap them
[self.view sendSubviewToBack:center];
[self.view sendSubviewToBack:wave];
[UIView animateWithDuration:0.4 delay:0 options:UIViewAnimationOptionCurveLinear animations:^{
CGAffineTransform waveTransform = wave.transform;
CGAffineTransform centerTransform = center.transform;
// Expand the views to look like a shockwave
wave.transform = CGAffineTransformScale(waveTransform, 4, 4);
center.transform = CGAffineTransformScale(centerTransform, 5.75, 5.75);
// Fade the wave out to nothing
wave.alpha = 0;
} completion:^(BOOL finished) {
// Remove the shockwave
[wave removeFromSuperview];
[center removeFromSuperview];
}];
}
This works quite well...
...With only one shockwave. However, when they intersect, one center overlaps the other due to the most recent shockwave being sent to the back.
I would prefer intersecting shockwaves to be more like this:
I'm not sure how to create this type of effect, however, so any help is much appreciated!
Use [UIColor clearColor] to make the center of your circle transparent (so you can see interface elements residing beneath it).
center.backgroundColor = [UIColor clearColor];
It's a quick fix! You already did most of it. Just change this line:
center.backgroundColor = self.view.backgroundColor;
to
center.backgroundColor = [UIColor clearColor];
I am sliding up a UIView which has a UIDatePicker as a subview. This is added above my UITableView, but unfortunately some of the tableView rows are still under my UIView.
UITableView is pushed up with keyboard:
UITableView is NOT pushed up with my view, covers up last few fields:
Is it possible to resize the UITableView dynamically when I slide up my view, just like when the keyboard is shown when in a tableView and all the rows are still able to be seen?
EDIT:
Just found a great Apple example: http://developer.apple.com/library/ios/#samplecode/DateCell/Introduction/Intro.html
Yes, it is possible. You could just go ahead and change the size of the UITableView dynamically as part of the animation that slides up the view. If you want to do what the UITableView actually does in response to the keyboard, leave its size alone and instead change its content inset and scroll indicator insets. See my answer here and the examples linked to:
uitableview not resizing with keyboard
Ok, it was easier than I thought. In my case, when I touch a row, I want the picker to show and the tableView to change its height, so I use:
[UIView animateWithDuration:0.4 delay:0.0 options: UIViewAnimationCurveEaseOut animations:^{
self.pickerView.frame = CGRectMake(0, self.view.bounds.size.height-200, self.view.bounds.size.width, self.pickerView.frame.size.height);
// shrink the table vertical size to make room for the date picker
CGRect newFrame = self.tableView.frame;
newFrame.size.height -= self.pickerView.frame.size.height;
self.tableView.frame = newFrame;
} completion:nil];
Then when I click the done button, and want to return the tableView back to the full height and hide my datePicker, I use:
- (void)doneWithPicker:(BOOL)remove {
CGRect newFrame = self.tableView.frame;
newFrame.size.height += self.pickerView.frame.size.height;
self.tableView.frame = newFrame;
[UIView animateWithDuration:0.4 delay:0.0 options: UIViewAnimationCurveEaseOut animations:^{
self.pickerView.frame = CGRectMake(0, self.view.bounds.size.height+300, self.view.bounds.size.width, self.pickerView.frame.size.height);
} completion:^(BOOL finished){
if (remove) {
[self.pickerView removeFromSuperview];
self.pickerView = nil;
}
}];
}
Also, when adding the pickerView as a subview, make sure to add it to the window:
[self.view.window addSubview:self.pickerView];
In my app I have a scrollview and when I press a button it is hidden when I press again it shows up.
I use scrollview.hidden = YES (or NO) to do it.
But I want to do it with an animation. For example, it may disappear from the bottom of the screen by moving and shows up with the same way. How can I do that?
edit:
[UIView beginAnimations:#"myAnimation" context:nil];
CGRect Frame = bottomScroller.frame;
if(Frame.origin.y == 380){
Frame.origin.y = 460;
}else{
Frame.origin.y = 380;
}
bottomScroller.frame = Frame;
[UIView commitAnimations];
This solved my problem...
You may check UIView animations. It's pretty easy. For example to animate translation you may use something like:
[UIView beginAnimations:#"myAnimation" context:nil];
CGRect Frame = yourView.frame;
Frame.origin.y = 0;
yourView.frame = Frame;
[UIView commitAnimations];
Then to move it back:
[UIView beginAnimations:#"myAnimation" context:nil];
CGRect Frame = yourView.frame;
Frame.origin.y = 100;
yourView.frame = Frame;
[UIView commitAnimations];
Changes in frame, alpha and some other parameters will be automatically animated.
You can use animations like so:-
[UIView animateWithDuration:2.0 animations:^{
[scrollview setframe:CGRectMake(xpos, ypos, width, height)];
}];
If you want to slide the scrollview on or off the screen set its y position - the bottom of the view is you want to hide it, the normal y position if you want to show it.
The 2.0 is an animation length, this can be changed to whatever you need it to be!
You can do this by using simple view animations. Here's an example of how you might do this:
// myScrollView is your scroll view
-(void)toggleShow{
CGFloat targetAlpha = myScrollView.alpha == 1 ? 0 : 1;
CGFloat yPosition = targetAlpha == 1 ? 0 : self.view.frame.size.height;
[UIView animateWithDuration:1.0 animations:^{
myScrollView.frame = CGRectMake(myScrollView.frame.origin.x, yPosition, myScrollView.frame.size.width, myScrollView.frame.size.height);
myScrollView.alpha = targetAlpha;
}];
}
targetAlpha will always be the opposite of the current state (1 or 0), and if it's 0 then the y position will be set to the bottom of the parent view. Using the new-school UIView animations API with blocks we can execute these changes to the scroll view over 1 second (in my example).
ScrollView appers from down side of screen with animation. I think this up-animation is what you want.
// ScrollView appearing animation
- (void)ScrollViewUpAnimation
{
// put the scroll view out of screen
CGRect frame = ScrollView.frame;
[self.view addSubview:ScrollView];
ScrollView.frame = CGRectMake(0, 460, frame.size.width, frame.size.height);
// setting for animation
CGPoint fromPt = ScrollView.layer.position;
CGPoint toPt = CGPointMake(fromPt.x, fromPt.y - frame.size.height - 44);
CABasicAnimation* anime =
[CABasicAnimation animationWithKeyPath:#"position"];
anime.duration = 0.2;
anime.fromValue = [NSValue valueWithCGPoint:fromPt];
anime.toValue = [NSValue valueWithCGPoint:toPt];
// change the position of Scroll View when animation start
[ScrollView.layer addAnimation:anime forKey:#"animatePosition"];
ScrollView.layer.position = toPt;
}
I am using a UIScrollView with Paging enabled and the following code to add subviews (core plot charts) to it.
The horizontal scrolling between the views works properly.
However, when showing the second view and then rotating from landscape to portrait mode, the second view is shifted partly to the right and a portion of the first view's right hand side is shown on the left side, hence "destroying" the paging mode.
Could you help me with these issue please? I tried many alternatives, but can't find my bug. Thank you so much!
This is how my iPad screen looks after rotating to portrait mode with the second view:
:
This is my viewDidLoad method:
- (void)viewDidLoad {
self.scrollView.contentSize = CGSizeMake(768 * 2, 400);
chart1 = [[CPTGraphHostingView alloc]initWithFrame:CGRectMake(0, 0, 768, 400)];
chart2 = [[CPTGraphHostingView alloc]initWithFrame:CGRectMake(768, 0, 768, 400)];
self.scrollView.autoresizesSubviews = NO;
chart1.autoresizesSubviews = YES;
chart2.autoresizesSubviews = YES;
self.scrollView.contentOffset = CGPointZero;
self.scrollView.autoresizingMask = UIViewAutoresizingFlexibleBottomMargin | UIViewAutoresizingFlexibleWidth ;
chart1.autoresizingMask = UIViewAutoresizingFlexibleBottomMargin | UIViewAutoresizingFlexibleWidth ;
chart2.autoresizingMask = UIViewAutoresizingFlexibleBottomMargin | UIViewAutoresizingFlexibleWidth ;
[self.scrollView addSubview:chart1];
[self.scrollView addSubview:chart2];
}
This is how I have implemented rotation:
- (void)didRotateFromInterfaceOrientation:(UIInterfaceOrientation)fromInterfaceOrientation
{
if (UIDeviceOrientationIsPortrait(fromInterfaceOrientation)) {
self.scrollView.contentSize = CGSizeMake(704 * 2, 400);
chart1.frame = CGRectMake(0, 0, 704, 400);
chart2.frame = CGRectMake(704, 0, 704, 400);
}
else {
self.scrollView.contentSize = CGSizeMake(768 * 2, 400);
chart1.frame = CGRectMake(0, 0, 768, 400);
chart2.frame = CGRectMake(768, 0, 768, 400);
}
}
I think you should change the contentOffset of the scrollview when rotation is taking place.
You should have a way to know which page is currently displayed before rotation (maybe put this information in a variable). Then in your didRotate.. method set the contentOffset of the scrollview after resizing it, like this:
CGFloat offset = self.scrollView.frame.size.width * currentPageIndex;
[self.scrollView setContentOffset: offset];
As an alternative to laying out your subviews in your view controller, have you considered subclassing your UIScrollView and overriding it's layoutSubviews method? You might also consider defining your dimensions as percentages rather than fixed points - because the point values will shift according to rotation and presence of other UI elements such as navigation and toolbars. You may run into trouble as you're manually resizing UI elements in your rotation method, at the same time that the UI is going to be attempting to automatically resize elements according to your resizing masks. Just my thought...