Instagram-like refresh button

Question

I'm really tried to do a button (rightBarButtonItem) like the instagram's button, I think is not possible to set background-image & image to the button in the same time.

See this in

**

AppDelegate.m

**

NSDictionary *faTextAttributes = @{ UITextAttributeFont : [UIFont fontWithName:@"Arial" size: 12],
                                        UITextAttributeTextColor : [UIColor whiteColor],
                                        UITextAttributeTextShadowColor: [UIColor blackColor],
                                        UITextAttributeTextShadowOffset: [NSValue valueWithCGSize: CGSizeMake(0,0)] };


    [[UIBarButtonItem appearanceWhenContainedIn:[UINavigationBar class], nil]
     setTitleTextAttributes:faTextAttributes forState:UIControlStateNormal];
    [[UIBarButtonItem appearanceWhenContainedIn:[UINavigationBar class], nil]
     setTitleTextAttributes:faTextAttributes forState:UIControlStateHighlighted];


    [[UIBarButtonItem appearanceWhenContainedIn:[UINavigationBar class], nil]
     setBackgroundImage:[UIImage imageNamed:@"bar"] forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
    [[UIBarButtonItem appearanceWhenContainedIn:[UINavigationBar class], nil]
     setBackgroundImage:[UIImage imageNamed:@"bar"] forState:UIControlStateHighlighted barMetrics:UIBarMetricsDefault];

FirstViewController.m

UIBarButtonItem *rightButton = [[UIBarButtonItem alloc] initWithTitle:@"" style:UIBarButtonItemStyleDone target:nil action:nil];

self.navigationItem.rightBarButtonItem = rightButton;

Here the images:

Background image (2x) http://d.pr/i/BYS9

Refresh image (2x) http://d.pr/i/Hg5u

---

What im looking for to do the same button of instagram application, set the refresh image inside the background image.

Hope you help me about this.

Answer 1

Unfortunately UIBarButtonItem is not a subclass of UIButton and therefore does not have the complex properties and customizability that UIButton has. The way Instagram is accomplishing this button is to have only one image that is the Refresh image superimposed over the background image. When the button is pressed, they hide the item and replace it with pinwheel.

alternatively you could create a custom button, add your desired attributes to that button and then use that button to create the bar items:

UIBarButton* button initWithCustomView:customButton;