UITabBar selection indicator image is not taking whole size of tabBar height in ObjectiveC

Question

I am changing setSelectionIndicatorImage and when I run app on iOS 8, I get spacing between image and regular width of tabBar. Is there a way that I can match height of tab bar with setSelectionIndicatorImage? Also I get margin of few pixels on left side of first tab and right side of last tab, and I need to cover that with image too when tab is selected.

Also check this tutorial. It may be helpful. http://blog.erikvdwal.nl/customizing-the-uitabbar-in-ios-5-and-ios-6/ — Rajesh Maurya, Jun 25 '15 at 11:40
Please refer the correct Image size for selected/Deselected Tabbar images. https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/IconMatrix.html — Meet, Jul 01 '15 at 11:45
Were you able to remove the few pixels margin on left side of first tab and right side of last tab? — LoveMeSomeFood, Jul 25 '15 at 01:24

score 2 · Answer 1 · answered Jul 20 '15 at 13:55

on didFinishLaunchingWithOptions put this code:

UITabBarController *tabBarContr = (UITabBarController *)self.window.rootViewController;

CGFloat tabBarItemWidth = self.window.rootViewController.view.bounds.size.width / tabBarContr.tabBar.items.count;
CGFloat tabBarItemHeight = CGRectGetHeight(tabBarContr.tabBar.frame);

UIView *selectedBottomView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, tabBarItemWidth, tabBarItemHeight)];

 CAGradientLayer *gradient = [CAGradientLayer layer];

gradient.colors = [NSArray arrayWithObjects:
                   (id)[UIColor blueButton].CGColor,
                   (id)[UIColor colorWithRed:0.08 green:0.54 blue:1 alpha:1].CGColor,
                   nil];

gradient.frame = selectedBottomView.bounds;

[selectedBottomView.layer insertSublayer:gradient atIndex:0];

UIGraphicsBeginImageContext(selectedBottomView.bounds.size);
[selectedBottomView.layer renderInContext:UIGraphicsGetCurrentContext()];

UIImage *image = UIGraphicsGetImageFromCurrentImageContext();

UIGraphicsEndImageContext();

tabBarContr.tabBar.selectionIndicatorImage = image;
tabBarContr.tabBar.translucent = YES;
tabBarContr.tabBar.tintColor = [UIColor whiteColor];

Note:take imageview instead of gradient

Dannie P · Accepted Answer · 2015-09-24T13:53:29.153

This should help you customise the indicator image however you need. You just set class of Tab Bar to this class in the interface builder

class MyCustomTabBar: UITabBar
{
    var didInit = false
    override func layoutSubviews()
    {
        super.layoutSubviews()

        if didInit == false
        {
            didInit = true
            for subview in subviews {
                // can't hookup to subviews, so do layer.sublayers
                subview.layer.addObserver(self, forKeyPath: "sublayers", options: .New, context: nil)
            }
        }
    }

    deinit
    {
        for subview in subviews
        {
            subview.layer.removeObserver(self, forKeyPath: "sublayers")
        }
    }

    override func observeValueForKeyPath(keyPath: String?, ofObject object: AnyObject?, change: [String : AnyObject]?, context: UnsafeMutablePointer<Void>)
    {
        // layer.delegate is usually the parent view
        if let l = object as? CALayer, tbButton = l.delegate as? UIView where tbButton.window != nil
        {
            for v in tbButton.subviews
            {
                if String(v.dynamicType) == "UITabBarSelectionIndicatorView" {
                    // do whatever needed with v, this is your indicator view
                }
            }
        }
    }
}

UITabBar selection indicator image is not taking whole size of tabBar height in ObjectiveC

2 Answers2