September | 2012

Today, I was trying to animate a menu-like view so that it slides out of a bar of buttons at the bottom of my application.

Easy enough, I read some documentation about animations here. And I end up with code similar to this in the controller responsible for the sliding view:

CGRect frame = self.view.frame;
// make sure the view initially sits outside the screen
frame.origin.y = 480;
self.view.frame = frame;

[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:1];
frame.origin.y = referenceFrame.origin.y - frame.size.height;
self.view.frame = frame;
[UIView commitAnimations];

CGRect frame = self.view.frame;

// make sure the view initially sits outside the screen

frame.origin.y = 480;

self.view.frame = frame;

[UIView beginAnimations:nil context:NULL];

[UIView setAnimationDuration:1];

frame.origin.y = referenceFrame.origin.y - frame.size.height;

self.view.frame = frame;

[UIView commitAnimations];

Nothing spectacular. I make sure the initial view in outside the visible part of the screen and I animate the view into its final position.

Now my view slides up but in my case the final position is on top of another view. So there is content below its final position. My sliding menu ends up sliding up in front of the button bar and all. Not so nice but the solution is simple right ? just animate the height of the view as well. It will appear to slide out of the whichever view you selected as a reference view.

CGRect final = self.view.frame;

// before animating, set the view height to 0
CGRect initial = final;
initial.origin.y = self.referenceFrame.origin.y;
initial.size.height = 0;
self.view.frame = initial;

[UIView beginAnimations:@"showShareMenu" context:NULL];
[UIView setAnimationDuration:1];
final.origin.y = self.referenceFrame.origin.y - final.size.height;
final.size.height = final.size.height;
self.view.frame = final;
[UIView commitAnimations];

CGRect final = self.view.frame;

// before animating, set the view height to 0

CGRect initial = final;

initial.origin.y = self.referenceFrame.origin.y;

initial.size.height = 0;

self.view.frame = initial;

[UIView beginAnimations:@"showShareMenu" context:NULL];

[UIView setAnimationDuration:1];

final.origin.y = self.referenceFrame.origin.y - final.size.height;

final.size.height = final.size.height;

self.view.frame = final;

[UIView commitAnimations];

Well not so fast !! my view has kept its initial size. I had to search for a while. My view was not resizing because of its content. In the end, I had to change my views property so that it ‘Clips Subviews’

TiMoch on edge

While I was working on a small iPhone application I was required to put a search box but with a transparent background. The original design looks like this:

I could not get the basic search control to not display its background. I tried using a standard text box, however the look and feel was not the same (the standard text view has round corners but here the whole side needs to a single half-circle).

I found a solution on stackoverflow.com : http://stackoverflow.com/questions/2913475/uisearchbar-transparent-background-view

However, the solutions I found there were not optimal because they required custom code for each usage of a search box with transparent background.

I really wanted a more reusable solution. I adapted one of the solutions but subclassed UISearchBar as follow:

in UITransparentBackgroundSearchBar.h:

and in UITransparentBackgroundSearchBar.m:

In your storyboard, set the search bar class to be UITransparentBackgroundSearchBar and voilà.

I am not that experienced with iOS development so there might be a gotcha I have not identified yet. I seems quite clean so I pretty confident.

Have fun,
TiMoch on edge

Monthly Archives: September 2012

Animate a UIView out of thin air

Transparent background UISearchView

Share this:

Share this: