How can I get a full-sized UINavigationBar titleView

Question

I am trying to add a custom control as the titleView in a UINavigationBar. When I do so, despite setting the frame and the properties that would normally assume full width, I get this:

The bright blue can be ignored as it is where I am hiding my custom control. The issue is the narrow strips of navbar at the ends of the bar. How can I get rid of these so my customview will stretch 100%?

CGRect frame = CGRectMake(self.view.bounds.origin.x, self.view.bounds.origin.y, self.view.width, kDefaultBarHeight);
UANavBarControlView *control = [[[UANavBarControlView alloc] initWithFrame:frame] autorelease];
control.autoresizingMask = UIViewAutoresizingFlexibleWidth; 
self.navigationItem.titleView = control;

PS - I know I can add the view by itself instead of being attached to a navigation bar and it would be very easy to position it myself. I have my reasons for needing it to be "on" the navigation bar, and those reasons are here

Answer 1

Setting the titleView of your view's navigationItem will never do the trick. Instead, you can add a subView to the navigation controller's navigationBar :

UIView* ctrl = [[UIView alloc] initWithFrame:navController.navigationBar.bounds];
ctrl.backgroundColor = [UIColor yellowColor];
ctrl.autoresizingMask = UIViewAutoresizingFlexibleWidth;
[navController.navigationBar addSubview:ctrl];

Answer 2

Just ran into the same problem and after a bit of thinking solved it. titleView's frame gets set by the navigationBar every time it appears.

All you have to do is subclass UIView and override setFrame.

Like this:

    - (void)setFrame:(CGRect)frame {
        [super setFrame:CGRectMake(0.0, 0.0, 320.0, 50.0)];
    }

Now set your sneaky new UIView as the navigationItem.titleView and enjoy its newfound resistance to resizing by the superview.

You don't have to set super's frame every time your frame gets set. You can just set it once and be done. If you want to support orientation changes you could probably hack that together too.

Answer 3

The following code worded on iOS8/iOS9/iOS10/iOS11.

Code in swift 3

class TitleView: UIView {

    override var frame: CGRect {
        get {
            return super.frame
        }
        set {
            super.frame = newValue.insetBy(dx: -newValue.minX, dy: 0)
        }
    }

    override func didMoveToSuperview() {
        if let superview = superview {
            frame = superview.bounds
            translatesAutoresizingMaskIntoConstraints = true
            autoresizingMask = [.flexibleWidth, .flexibleHeight]
        }
    }

    override func updateConstraints() {
        super.updateConstraints()
        /// remove autolayout warning in iOS11
        superview?.constraints.forEach { constraint in
            if fabs(constraint.constant) == 8 {
                constraint.isActive = false
            }
        }
    }
}

Answer 4

Swift version of ksm's answer

let leftOffset: CGFloat = 60
let rightOffset: CGFloat = 60

@objc override var frame: CGRect {
     didSet {
                let width: CGFloat = UIScreen.main.bounds.width - leftOffset - rightOffset
                let height: CGFloat = 44

                super.frame = CGRect(
                    x: leftOffset,
                    y: 20,
                    width: width,
                    height: height
                )
       }
}

Answer 5

thanks @VdesmedT for the answers , I have been using this answer to achieve a full screen size titleView in navigationbar .

But, I have just upgraded to iOS11 recently and I found that this solution did not work. And so I figured it out by another way(may seem weird). The core of the idea is not to change the titleView's size, but to change the subViews of the bar to achive the fullscreen bar affects

1. make a barView (make sure the barView width is screenSize - 12*2, 12 is the system padding set to to titleView, you can use manual layout or autolayout's constraint to achive this). and then set it as navigation bar's titleView
2. add your components into this barView. you can align the components from -12 to the barView's width + 12

3. overload your barView's pointInside , to make it respondable even when the click happed outside the barView.

   - (BOOL)pointInside:(CGPoint)point withEvent:(UIEvent *)event
    {
     BOOL ret = [super pointInside:point withEvent:event];
     if (ret == NO)
     {
       CGRect expandRect = UIEdgeInsetsInsetRect(self.bounds, UIEdgeInsetsMake(0, -12, 0, -12));
       ret = CGRectContainsPoint(expandRect, point);
   }
   return ret;
   }
   

Answer 6

CGRect frame = CGRectMake(0, 0, 320, 44);

UILabel *titlelabel = [[UILabel alloc]initWithFrame:frame];

titlelabel.textAlignment = UITextAlignmentCenter;

titlelabel.backgroundColor = [UIColor clearColor];

titlelabel.textColor = [UIColor whiteColor];

titlelabel.font = [UIFont systemFontOfSize:20];

titlelabel.text =@"Available Reports";

self.navigationItem.titleView = titlelabel;

if you want to set image then take uiimage view instead on uilable you can create any view of fully navigation bar just tell me how ur navigation look like i will send you code for that if you want i can put 6 button on navigation also