UISegmentedControl below UINavigationbar in iOS 7
IosUinavigationbarUisegmentedcontrolIos Problem Overview
How do I make a UISegmentedControl as a part of an UINavigationBar below it? Is it connected to the UINavigationBar or is it a complete separate view just added as a subview to the UINavigationController's view controller. Looks like it is part of the UINavigationBar since there is a shadow below the bar.
Ios Solutions
Solution 1 - Ios
It's a simple effect to accomplish.
First, place a segment in a toolbar. Place this toolbar right below the navigation bar. Set the delegate of the toolbar to your view controller, and return UIBarPositionTopAttached in positionForBar:. You can see in the store app, if you perform an interactive pop gesture, that the segment bar does not move the same as the navigation bar. That's because they are not the same bar.
Now to remove the hairline. The "hairline" is an UIImageView that is a subview of the navigation bar. You can find it and set it as hidden. This is what Apple does in their native calendar app, for example, as well as the store app. Remember to show it when the current view disappears. If you play a little with the Apple apps, you will see that the hairline is set to hidden on viewWillAppear: and set to shown in viewDidDisappear:.
To achieve the style of the search bar, just set the bar's searchBarStyle to UISearchBarStyleMinimal.
Solution 2 - Ios
> Now to remove the hairline. The "hairline" is an UIImageView that is a subview of the navigation bar. You can find it and set it as hidden. This is what Apple does in their native calendar app, for example, as well as the store app. Remember to show it when the current view disappears. If you play a little with the Apple apps, you will see that the hairline is set to hidden on viewWillAppear: and set to shown in viewDidDisappear:.
Another approach would be to look for the hairline and move it below the added toolbar. Here is what I came up with.
@interface ViewController ()
@property (weak, nonatomic) IBOutlet UIToolbar *segmentbar;
@property (weak, nonatomic) UIImageView *navHairline;
@end
@implementation ViewController
#pragma mark - View Lifecycle
- (void)viewDidLoad
{
[super viewDidLoad];
// find the hairline below the navigationBar
for (UIView *aView in self.navigationController.navigationBar.subviews) {
for (UIView *bView in aView.subviews) {
if ([bView isKindOfClass:[UIImageView class]] &&
bView.bounds.size.width == self.navigationController.navigationBar.frame.size.width &&
bView.bounds.size.height < 2) {
self.navHairline = (UIImageView *)bView;
}
}
}
}
- (void)viewWillAppear:(BOOL)animated
{
[super viewWillAppear:animated];
[self _moveHairline:YES];
}
- (void)viewWillDisappear:(BOOL)animated
{
[super viewWillDisappear:animated];
[self _moveHairline:NO];
}
- (void)_moveHairline:(BOOL)appearing
{
// move the hairline below the segmentbar
CGRect hairlineFrame = self.navHairline.frame;
if (appearing) {
hairlineFrame.origin.y += self.segmentbar.bounds.size.height;
} else {
hairlineFrame.origin.y -= self.segmentbar.bounds.size.height;
}
self.navHairline.frame = hairlineFrame;
}
@end
I also found the Apple NavBar Code Sample (Customizing UINavigationBar) very helpful to resolve this issue.
Also be sure to handle the top border of the UIToolbar, it might show up and you could confuse it with the hairline of the NavBar. I also wanted the UIToolbar to look exactly like the NavBar, you probably want to adjust the Toolbars barTintColor then.
Solution 3 - Ios
Here's a Protocol Oriented Swift approach to this particular problem, taking basis on the accepted answer:
HideableHairlineViewController.swift
protocol HideableHairlineViewController {
func hideHairline()
func showHairline()
}
extension HideableHairlineViewController where Self: UIViewController {
func hideHairline() {
findHairline()?.hidden = true
}
func showHairline() {
findHairline()?.hidden = false
}
private func findHairline() -> UIImageView? {
return navigationController?.navigationBar.subviews
.flatMap { $0.subviews }
.flatMap { $0 as? UIImageView }
.filter { $0.bounds.size.width == self.navigationController?.navigationBar.bounds.size.width }
.filter { $0.bounds.size.height <= 2 }
.first
}
}
SampleViewController.swift
import UIKit
class SampleViewController: UIViewController, HideableHairlineViewController {
@IBOutlet private weak var toolbar: UIToolbar!
@IBOutlet private weak var segmentedControl: UISegmentedControl!
override func viewWillAppear(animated: Bool) {
super.viewWillAppear(animated)
hideHairline()
}
override func viewDidDisappear(animated: Bool) {
super.viewDidDisappear(animated)
showHairline()
}
}
// MARK: UIToolbarDelegate
extension SampleViewController: UIToolbarDelegate {
func positionForBar(bar: UIBarPositioning) -> UIBarPosition {
return .TopAttached
}
}
Solution 4 - Ios
You can find navigation bar with UISegmentedControl in Apple Sample Code: https://developer.apple.com/library/ios/samplecode/NavBar/Introduction/Intro.html
Or you can create it programmatically, here is the code in my answer in the other thread https://stackoverflow.com/questions/18813563/add-segmented-control-to-navigation-bar-and-keep-title-with-buttons/26325194#26325194
Solution 5 - Ios
I wanted to do the same thing.. And got this:
1 - UINavigationBar subclass
//-------------------------
// UINavigationBarCustom.h
//-------------------------
#import <UIKit/UIKit.h>
@interface UINavigationBarCustom : UINavigationBar
@end
//-------------------------
// UINavigationBarCustom.m
//-------------------------
#import "UINavigationBarCustom.h"
const CGFloat MyNavigationBarHeightIncrease = 38.f;
@implementation UINavigationBarCustom
- (id)initWithCoder:(NSCoder *)aDecoder {
self = [super initWithCoder:aDecoder];
if (self) {
[self initialize];
}
return self;
}
- (id)initWithFrame:(CGRect)frame {
self = [super initWithFrame:frame];
if (self) {
[self initialize];
}
return self;
}
- (void)initialize {
// Set tittle position for top
[self setTitleVerticalPositionAdjustment:-(MyNavigationBarHeightIncrease) forBarMetrics:UIBarMetricsDefault];
}
- (CGSize)sizeThatFits:(CGSize)size {
// Increase NavBar size
CGSize amendedSize = [super sizeThatFits:size];
amendedSize.height += MyNavigationBarHeightIncrease;
return amendedSize;
}
- (void)layoutSubviews {
// Set buttons position for top
[super layoutSubviews];
NSArray *classNamesToReposition = @[@"UINavigationButton"];
for (UIView *view in [self subviews]) {
if ([classNamesToReposition containsObject:NSStringFromClass([view class])]) {
CGRect frame = [view frame];
frame.origin.y -= MyNavigationBarHeightIncrease;
[view setFrame:frame];
}
}
}
- (void)didAddSubview:(UIView *)subview
{
// Set segmented position
[super didAddSubview:subview];
if ([subview isKindOfClass:[UISegmentedControl class]])
{
CGRect frame = subview.frame;
frame.origin.y += MyNavigationBarHeightIncrease;
subview.frame = frame;
}
}
@end
2 - Set your NavigationController with subclass
3 - Add your UISegmentedControl in navigationBar
4 - Run and Fun ->do not forget to put the same color on both
searching source:
Solution 6 - Ios
Apple has sample app specifically for this. It describes setting a transparent shadow image and colored background image for the navigation bar and how to configure a view below the navigation bar. It also has examples of other navigation bar customizations.
See https://developer.apple.com/library/ios/samplecode/NavBar/Introduction/Intro.html
Solution 7 - Ios
I tried removing the hairline using @Simon's method but it did not work. I'm probably doing something wrong because I am super noob. However, instead of removing the line, you can simply hide it using the hidden attribute. Here's the code:
var hairLine: UIView = UIView()
override func viewDidLoad() {
super.viewDidLoad()
doneButton.enabled = false
for parent in self.navigationController!.navigationBar.subviews {
for childView in parent.subviews {
if childView is UIImageView && childView.bounds.size.width == self.navigationController!.navigationBar.frame.size.width {
hairLine = childView
}
}
}
}
override func viewWillAppear(animated: Bool) {
hairLine.hidden = true
}
override func viewWillDisappear(animated: Bool) {
hairLine.hidden = false
}
Hope this helps somebody!
Solution 8 - Ios
UISegmentedControl below UINavigationbar in swift 3/4
Details
Xcode 9.2, swift 4
Full Sample
> ViewController.swift
import UIKit
class ViewController: UIViewController {
@IBOutlet weak var tableView: UITableView!
@IBOutlet weak var navigationBarWithSegmentedControl: UINavigationBar!
fileprivate let barBackgroundColor = UIColor(red: 248/255, green: 248/255, blue: 248/255, alpha: 1.0)
override func viewDidLoad() {
super.viewDidLoad()
navigationBarWithSegmentedControl.barTintColor = barBackgroundColor
tableView.dataSource = self
tableView.delegate = self
}
override func viewWillAppear(_ animated: Bool) {
super.viewWillAppear(animated)
navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
navigationController?.navigationBar.shadowImage = UIImage()
navigationController?.navigationBar.barTintColor = barBackgroundColor
}
override func viewWillDisappear(_ animated: Bool) {
super.viewWillDisappear(animated)
navigationController?.navigationBar.setBackgroundImage(nil, for: .default)
navigationController?.navigationBar.shadowImage = nil
}
}
extension ViewController: UITableViewDataSource {
func numberOfSections(in tableView: UITableView) -> Int {
return 1
}
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return 100
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "TableViewCell") as! TableViewCell
cell.label.text = "\(indexPath)"
return cell
}
}
extension ViewController: UITableViewDelegate {
func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
if let cell = tableView.cellForRow(at: indexPath) {
cell.isSelected = false
}
}
}
> TableViewCell.swift
import UIKit
class TableViewCell: UITableViewCell {
@IBOutlet weak var label: UILabel!
}
> Main.storyboard
<?xml version="1.0" encoding="UTF-8"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="13771" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" colorMatched="YES" initialViewController="5TT-dT-dEr">
<device id="retina4_7" orientation="portrait">
<adaptation id="fullscreen"/>
</device>
<dependencies>
<deployment identifier="iOS"/>
<plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="13772"/>
<capability name="Constraints to layout margins" minToolsVersion="6.0"/>
<capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
</dependencies>
<scenes>
<!--Text-->
<scene sceneID="tne-QT-ifu">
<objects>
<viewController id="BYZ-38-t0r" customClass="ViewController" customModule="stackoverflow_21887252" customModuleProvider="target" sceneMemberID="viewController">
<layoutGuides>
<viewControllerLayoutGuide type="top" id="y3c-jy-aDJ"/>
<viewControllerLayoutGuide type="bottom" id="wfy-db-euE"/>
</layoutGuides>
<view key="view" contentMode="scaleToFill" id="8bC-Xf-vdC">
<rect key="frame" x="0.0" y="0.0" width="375" height="603"/>
<autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
<subviews>
<tableView clipsSubviews="YES" contentMode="scaleToFill" alwaysBounceVertical="YES" dataMode="prototypes" style="plain" separatorStyle="default" rowHeight="44" sectionHeaderHeight="28" sectionFooterHeight="28" translatesAutoresizingMaskIntoConstraints="NO" id="HLl-W2-Moq">
<rect key="frame" x="0.0" y="44" width="375" height="559"/>
<color key="backgroundColor" white="1" alpha="1" colorSpace="calibratedWhite"/>
<prototypes>
<tableViewCell clipsSubviews="YES" contentMode="scaleToFill" selectionStyle="default" indentationWidth="10" reuseIdentifier="TableViewCell" id="FKA-c2-G0Q" customClass="TableViewCell" customModule="stackoverflow_21887252" customModuleProvider="target">
<rect key="frame" x="0.0" y="28" width="375" height="44"/>
<autoresizingMask key="autoresizingMask"/>
<tableViewCellContentView key="contentView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" tableViewCell="FKA-c2-G0Q" id="Xga-fr-00H">
<rect key="frame" x="0.0" y="0.0" width="375" height="43.5"/>
<autoresizingMask key="autoresizingMask"/>
<subviews>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Label" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="QW3-Hg-hU9">
<rect key="frame" x="15" y="11" width="345" height="21"/>
<fontDescription key="fontDescription" type="system" pointSize="17"/>
<nil key="textColor"/>
<nil key="highlightedColor"/>
</label>
</subviews>
<constraints>
<constraint firstAttribute="trailingMargin" secondItem="QW3-Hg-hU9" secondAttribute="trailing" id="Grx-nu-2Tu"/>
<constraint firstItem="QW3-Hg-hU9" firstAttribute="centerY" secondItem="Xga-fr-00H" secondAttribute="centerY" id="MIn-R2-wYE"/>
<constraint firstItem="QW3-Hg-hU9" firstAttribute="leading" secondItem="Xga-fr-00H" secondAttribute="leadingMargin" id="h6T-gt-4xk"/>
</constraints>
</tableViewCellContentView>
<color key="backgroundColor" red="0.0" green="0.0" blue="0.0" alpha="0.050000000000000003" colorSpace="custom" customColorSpace="sRGB"/>
<connections>
<outlet property="label" destination="QW3-Hg-hU9" id="QjK-i2-Ckd"/>
<segue destination="hcx-2g-4ts" kind="show" id="IGa-oI-gtf"/>
</connections>
</tableViewCell>
</prototypes>
</tableView>
<navigationBar contentMode="scaleToFill" translucent="NO" translatesAutoresizingMaskIntoConstraints="NO" id="8jj-w6-ZtU">
<rect key="frame" x="0.0" y="0.0" width="375" height="44"/>
<items>
<navigationItem id="q8e-Yy-ceD">
<nil key="title"/>
<segmentedControl key="titleView" opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="left" contentVerticalAlignment="top" segmentControlStyle="bar" selectedSegmentIndex="0" id="cHD-bv-2w7">
<rect key="frame" x="96.5" y="7" width="182" height="30"/>
<autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
<segments>
<segment title="First"/>
<segment title="Second"/>
<segment title="Third"/>
</segments>
</segmentedControl>
</navigationItem>
</items>
</navigationBar>
</subviews>
<color key="backgroundColor" red="1" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
<constraints>
<constraint firstItem="8jj-w6-ZtU" firstAttribute="trailing" secondItem="HLl-W2-Moq" secondAttribute="trailing" id="1vT-ta-AuP"/>
<constraint firstItem="8jj-w6-ZtU" firstAttribute="leading" secondItem="8bC-Xf-vdC" secondAttribute="leading" id="BJE-BC-XcB"/>
<constraint firstItem="8jj-w6-ZtU" firstAttribute="top" secondItem="y3c-jy-aDJ" secondAttribute="bottom" id="Boi-dN-awt"/>
<constraint firstItem="HLl-W2-Moq" firstAttribute="bottom" secondItem="wfy-db-euE" secondAttribute="top" id="W1n-m1-EOH"/>
<constraint firstAttribute="trailing" secondItem="8jj-w6-ZtU" secondAttribute="trailing" id="ihc-9p-71l"/>
<constraint firstItem="HLl-W2-Moq" firstAttribute="top" secondItem="8jj-w6-ZtU" secondAttribute="bottom" id="pFk-pU-y7j"/>
<constraint firstItem="8jj-w6-ZtU" firstAttribute="leading" secondItem="HLl-W2-Moq" secondAttribute="leading" id="yjf-7o-t2m"/>
</constraints>
</view>
<navigationItem key="navigationItem" title="Text" id="yrt-M7-PAX">
<barButtonItem key="leftBarButtonItem" systemItem="search" id="wrz-DS-FdJ"/>
<barButtonItem key="rightBarButtonItem" systemItem="add" id="LnB-Ci-YnO"/>
</navigationItem>
<connections>
<outlet property="navigationBarWithSegmentedControl" destination="8jj-w6-ZtU" id="Ggl-xb-fmj"/>
<outlet property="tableView" destination="HLl-W2-Moq" id="hEO-2U-I9k"/>
</connections>
</viewController>
<placeholder placeholderIdentifier="IBFirstResponder" id="dkx-z0-nzr" sceneMemberID="firstResponder"/>
</objects>
<point key="canvasLocation" x="894" y="791"/>
</scene>
<!--View Controller-->
<scene sceneID="Bi7-4l-uRN">
<objects>
<viewController id="hcx-2g-4ts" sceneMemberID="viewController">
<layoutGuides>
<viewControllerLayoutGuide type="top" id="NSV-kw-fuz"/>
<viewControllerLayoutGuide type="bottom" id="aze-le-h11"/>
</layoutGuides>
<view key="view" contentMode="scaleToFill" id="1nd-qq-kDT">
<rect key="frame" x="0.0" y="0.0" width="375" height="603"/>
<autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
<subviews>
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="k7W-CB-tpA">
<rect key="frame" x="0.0" y="0.0" width="375" height="603"/>
<color key="backgroundColor" white="1" alpha="1" colorSpace="calibratedWhite"/>
</view>
</subviews>
<color key="backgroundColor" white="0.66666666666666663" alpha="0.5" colorSpace="calibratedWhite"/>
<constraints>
<constraint firstAttribute="trailing" secondItem="k7W-CB-tpA" secondAttribute="trailing" id="1t2-Bi-dR7"/>
<constraint firstItem="k7W-CB-tpA" firstAttribute="bottom" secondItem="aze-le-h11" secondAttribute="top" id="Fnm-UL-geX"/>
<constraint firstItem="k7W-CB-tpA" firstAttribute="leading" secondItem="1nd-qq-kDT" secondAttribute="leading" id="bKV-7A-hz0"/>
<constraint firstItem="k7W-CB-tpA" firstAttribute="top" secondItem="NSV-kw-fuz" secondAttribute="bottom" id="cFH-7i-vAm"/>
</constraints>
</view>
</viewController>
<placeholder placeholderIdentifier="IBFirstResponder" id="jPK-Z9-yvJ" userLabel="First Responder" sceneMemberID="firstResponder"/>
</objects>
<point key="canvasLocation" x="1566" y="791"/>
</scene>
<!--Navigation Controller-->
<scene sceneID="1Pc-qt-rnW">
<objects>
<navigationController automaticallyAdjustsScrollViewInsets="NO" id="5TT-dT-dEr" sceneMemberID="viewController">
<toolbarItems/>
<navigationBar key="navigationBar" contentMode="scaleToFill" translucent="NO" id="lPt-hx-iar">
<rect key="frame" x="0.0" y="20" width="375" height="44"/>
<autoresizingMask key="autoresizingMask"/>
</navigationBar>
<nil name="viewControllers"/>
<connections>
<segue destination="BYZ-38-t0r" kind="relationship" relationship="rootViewController" id="6b8-br-zSy"/>
</connections>
</navigationController>
<placeholder placeholderIdentifier="IBFirstResponder" id="u7U-GH-NHe" userLabel="First Responder" sceneMemberID="firstResponder"/>
</objects>
<point key="canvasLocation" x="140" y="791.15442278860576"/>
</scene>
</scenes>
</document>
Results
Solution 9 - Ios
There are many ways to do what you asked. The easiest one being of course to just create it in the interface builder but I assume this is not what you had in mind. I created an example of the image you posted above. It's not exactly the same but you can play with the numerous properties to get the look and feel of what it is you are looking for.
In the ViewController.h
#import <UIKit/UIKit.h>
@interface ViewController : UIViewController <UITableViewDataSource, UITableViewDelegate, UISearchBarDelegate>
@end
In the ViewController.m
#import "ViewController.h"
@interface ViewController ()
@property (strong, nonatomic) UISegmentedControl *mySegmentControl;
@property (strong, nonatomic) UISearchBar *mySearchBar;
@property (strong, nonatomic) UITableView *myTableView;
@property (strong, nonatomic) NSMutableArray *tableDataArray;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
// create a custom UIView
UIView *myView = [[UIView alloc] initWithFrame:CGRectMake(0, 64, 320, 84)];
myView.tintColor = [UIColor lightGrayColor]; // change tiny color or delete this line to default
// create a UISegmentControl
self.mySegmentControl = [[UISegmentedControl alloc] initWithItems:[NSArray arrayWithObjects:@"All", @"Not on this iPhone", nil]];
self.mySegmentControl.selectedSegmentIndex = 0;
[self.mySegmentControl addTarget:self action:@selector(segmentAction:) forControlEvents:UIControlEventValueChanged];
self.mySegmentControl.frame = CGRectMake(20, 10, 280, 30);
[myView addSubview:self.mySegmentControl]; // add segment control to custom view
// create UISearchBar
self.mySearchBar = [[UISearchBar alloc] initWithFrame:CGRectMake(0, 40, 320, 44)];
[self.mySearchBar setDelegate:self];
self.mySearchBar.searchBarStyle = UISearchBarStyleMinimal;
[myView addSubview:self.mySearchBar]; // add search bar to custom view
[self.view addSubview:myView]; // add custom view to main view
// create table data array
self.tableDataArray = [[NSMutableArray alloc] initWithObjects:
@"Line 1",
@"Line 2",
@"Line 3",
@"Line 4",
@"Line 5",
@"Line 6",
@"Line 7",
@"Line 8",
@"Line 9",
@"Line 10",
@"Line 11",
@"Line 12", nil];
self.myTableView = [[UITableView alloc] initWithFrame:CGRectMake(0, 160, 320, 320)];
[self.myTableView setDataSource:self];
[self.myTableView setDelegate:self];
[self.view addSubview:self.myTableView]; // add table to main view
}
-(void)searchBarSearchButtonClicked:(UISearchBar *)searchBar {
[searchBar resignFirstResponder];
NSLog(@"search text = %@",searchBar.text);
// code for searching...
}
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
return 1;
}
-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
return [self.tableDataArray count];
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
static NSString *CellIdentifier = @"Cell";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil)
{
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:CellIdentifier];
}
cell.textLabel.text = [self.tableDataArray objectAtIndex:indexPath.row];
return cell;
}
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
NSLog(@"Selected table item: %@",[self.tableDataArray objectAtIndex:indexPath.row]);
// do something once user has selected a table cell...
}
-(void)segmentAction:(id)sender {
NSLog(@"Segment control changed to: %@",[self.mySegmentControl titleForSegmentAtIndex:[self.mySegmentControl selectedSegmentIndex]]);
// do something based on segment control selection...
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
@end
Solution 10 - Ios
displaysSearchBarInNavigationBar is the way to display a search bar as well as its scope bar in the navigation bar.
you need to just hide the search bar whenever you show custom title