UISegmentedControl在iOS 7的UINavigationbar下面

如何使UISegmentedControl成为UINavigationBar的一部分? 它是连接到UINavigationBar还是一个完整的独立视图,只是作为子视图添加到UINavigationController的视图控制器。 看起来像是UINavigationBar一部分,因为在栏下有一个影子。

在这里输入图像描述

这是一个简单的效果来完成。

首先,在工具栏中放置一个片段。 将此工具栏放置在导航栏的正下方。 将工具栏的委托设置为您的视图控制器,并返回positionForBar: UIBarPositionTopAttached 。 您可以在商店应用程序中看到,如果执行交互式stream行手势,则分段栏不会像导航栏一样移动。 那是因为他们不是一样的吧。

在这里输入图像描述

现在删除发际线。 “发际线”是UIImageView ,是导航栏的子视图。 你可以find它,并将其设置为隐藏。 这就是苹果在其本地日历应用程序,例如,以及商店应用程序。 记得在当前视图消失时显示它。 如果你用苹果应用程序玩一点,你会发现发际线设置为隐藏在viewWillAppear:并设置为viewDidDisappear:

要实现search栏的样式,只需将栏的searchBarStyle设置为UISearchBarStyleMinimal

现在删除发际线。 “发际线”是UIImageView,是导航栏的子视图。 你可以find它,并将其设置为隐藏。 这就是苹果在其本地日历应用程序,例如,以及商店应用程序。 记得在当前视图消失时显示它。 如果你玩苹果应用程序的一点点,你会发现发际线设置为隐藏在viewWillAppear:并设置为显示viewDidDisappear :.

另一种方法是查找发际线并将其移动到添加的工具栏下方。 这是我想出来的。

 @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 

我还发现Apple NavBar代码示例(Customizing UINavigationBar)对解决此问题非常有帮助。

另外一定要处理UIToolbar的顶部边框 ,它可能会出现,你可以将其与NavBar的发际线混淆。 我也想UIToolbar看起来像NavBar,你可能想调整工具栏barTintColor然后。

您可以在Apple示例代码中find带有UISegmentedControl的导航栏: https : //developer.apple.com/library/ios/samplecode/NavBar/Introduction/Intro.html

或者你可以通过编程的方式来创build它,这里是我在其他线程的答案中的代码添加分段控制到导航栏,并保持与button的标题

我想做同样的事情,并得到这个:


1 – UINavigationBar子类

 //------------------------- // 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 – 设置您的NavigationController与子类

设置您的NavigationController与子类


3 – 在navigationBar中添加你的UISegmentedControl

在这里输入图像描述


4 – 奔跑和乐趣 – >不要忘记把两个相同的颜色

在这里输入图像描述


search来源:

黑客UINavigationBar

所以问题

以下是针对这一特定问题的面向协议的Swift方法,并根据所接受的答案:

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 } } 

苹果有专门的示例应用程序。 它描述了为导航栏设置透明阴影图像和彩色背景图像以及如何在导航栏下面configuration视图。 它也有其他导航栏自定义的示例。

请参阅https://developer.apple.com/library/ios/samplecode/NavBar/Introduction/Intro.html

我试图用@西蒙的方法删除发际线,但没有奏效。 我可能做错了,因为我是超级noob。 但是,不要删除该行,而只需使用hidden属性来隐藏它。 代码如下:

 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 } 

希望这有助于某人!

UISegmentedControl在UINavigationbar下面swift 3

细节

xCode 8.3,swift 3.1

完整的示例

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="12118" systemVersion="16E195" 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="12086"/> <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_43310806" 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="64" 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_43310806" 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="8" y="11" width="149" height="21"/> <constraints> <constraint firstAttribute="width" constant="149" id="nsB-g9-hgd"/> </constraints> <fontDescription key="fontDescription" type="system" pointSize="17"/> <nil key="textColor"/> <nil key="highlightedColor"/> </label> </subviews> <constraints> <constraint firstItem="QW3-Hg-hU9" firstAttribute="leading" secondItem="Xga-fr-00H" secondAttribute="leadingMargin" id="Z6C-DI-2Zy"/> <constraint firstItem="QW3-Hg-hU9" firstAttribute="centerY" secondItem="Xga-fr-00H" secondAttribute="centerY" id="a1s-as-kF2"/> </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="1074.4000000000001" y="791.15442278860576"/> </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="64" 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="1864.8" y="790.25487256371821"/> </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="0.0" 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> 

在这里输入图像描述

结果

在这里输入图像描述 在这里输入图像描述 在这里输入图像描述

有很多方法可以做你所问的。 当然最简单的就是在界面生成器中创build它,但我认为这不是你想到的。 我创build了上面张贴的图片的示例。 这不完全相同,但你可以玩大量的属性,以获得你正在寻找什么的外观和感觉。

在ViewController.h中

 #import <UIKit/UIKit.h> @interface ViewController : UIViewController <UITableViewDataSource, UITableViewDelegate, UISearchBarDelegate> @end 

在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 

displaysSearchBarInNavigationBar是在导航栏中显示search栏及其范围栏的方式。

只要显示自定义标题,就需要隐藏search栏