11

Is it possible to animate the frame width of a UISearchBar? I find when I apply uiview animations to widen the bounds of a search bar it pops immediately to the final result as if the object internally is assuming control of how it animates and not allowing me to apply my own animations to it smoothly.

If I animate the position it moves smoothly, but I suspect the fact that the text input adjusts according to the presence of the cancel button might mean we don't have public access to animate the width through UIView animation. The sample snippet below slides the bar from x = 0 to 100 but pops the width to 600 pixels wide.

CGRect searchBarFrame = self.searchViewController.searchBar.frame;
searchBarFrame.origin.x = 100;
searchBarFrame.size.width = 600;
[UIView animateWithDuration:1.0 
                      delay:0.0 
                    options:0 
                 animations:^{
                     self.searchViewController.searchBar.frame = searchBarFrame;
                 }
                 completion:^(BOOL completion){
                 }];
4
  • That seems like a bug, can you provide some test code?
    – fbernardo
    Mar 5, 2012 at 19:24
  • I updated the question to include my findings that it pops when I try to alter the width, but not the position.
    – Joey
    Mar 5, 2012 at 20:27
  • Joey, I'm on a project where I have two different search bars side by side and i'm trying to do the same thing as you, with the same results. Let me know if you end up finding a solution. I'll let you know if I find anything.
    – KevinM
    Mar 21, 2012 at 18:56
  • my issue stackoverflow.com/questions/68571676/…
    – Waseem05
    Jul 29, 2021 at 7:22

3 Answers 3

28

there is an "issue" with UISearchBar due to the inner views forcing the resize to ignore the animation. However, this can be overcome by the use of - layoutSubviews. I have included the expand and contract code in my project below

[UIView animateWithDuration:.3
                 animations:^ {
                     CGRect newBounds = locationSearch.frame;
                     newBounds.size.width += 215; //newBounds.size.width -= 215; to contract
                     locationSearch.frame = newBounds;
                     [locationSearch layoutSubviews];
                 }];

Hope this helps.

1
  • Sorry to reopen this, but I did this in iOS 6.0 and there is a flickering UISegmentedControl appears behind the search bar as it animates. I'm assume it's a control associated with UISearchBar - it is not one that I have enabled, I'm using a vanilla search bar. I managed to get rid of it by enabling Clip Subviews on the UISearchBar in IB, but it makes me wonder if something is broken with this method of animating UISearchBar.
    – Echelon
    Nov 5, 2012 at 15:13
15

FYI, you can use UIViewAnimationOption instead of calling layoutsubviews explicitly, So the code would look something like this..

[UIView animateWithDuration:0.5
                              delay:0
                            options:UIViewAnimationOptionLayoutSubviews
                         animations:^{
                             //Set the frame you want to the search bar
                         }
                         completion:^(BOOL finished) {

                         }];
1
  • +1 This is a cleaner approach than calling layoutSubviews in the animation block, and it works great. Thanks! May 15, 2013 at 22:13
0

This is how to overcome enlargement just to the Left side in swift

(This code will enlarge/shrinks the searchBar 93 pixels over the left side when user start/end editing)


  1. SharedNavigationbBar is the UIView that implements the UISearchBarDelegate
  2. searchBarWidth is an outlet to a constrain holding the width of the UISearchBar

  1. An autolayout constrain must exists on your storyboard or nib file to allow resizing into the left side. In this case, the neighbord left component is an UIButton.

enter image description here enter image description here


  1. Add the following code as an extension or inside your class to perform the animated resizing.

extension SharedNavigationBar: UISearchBarDelegate
{
//amount of pixels to enlarge to the left
 private var offsetSearchBarLeft:CGFloat
    {
    get {
        return 93
    }
 }

///Enlarges search bar
 func searchBarTextDidBeginEditing(searchBar: UISearchBar) {

   self.animateSearchBar(self.searchBar, enlarge: true)
 }

///Shrinks search bar
 func searchBarTextDidEndEditing(searchBar: UISearchBar) {

   self.animateSearchBar(self.searchBar, enlarge: false)
 }

//shrinks or enlarge the searchbar (this will be the function to call inside the animation)
 private func animateSearchBar(searchBar:UISearchBar, enlarge:Bool)
 {
     ///Important here, for this to work, the option and the searchbar size must be handled this way
    UIView.animateWithDuration(0.3, delay: 0.0, options: UIViewAnimationOptions.LayoutSubviews, animations: { [weak self] () -> Void in

    let multiplier: CGFloat = enlarge ? 1 : -1

    let origin = searchBar.frame.origin.x + self!.offsetSearchBarLeft * multiplier
    let width = searchBar.frame.width + self!.offsetSearchBarLeft * multiplier

    //This Block of code, setting the new frame, needs to be inside the animation in order to work
    var newBounds:CGRect  = searchBar.frame;
    newBounds.origin.x = origin
    newBounds.size.width = width

    //Sets the new frame
    self?.searchBarWidth.constant = width
    searchBar.frame = newBounds

   }, completion: nil)
 }

}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.