ios 向导航栏添加分段控件并使用按钮保留标题

Add segmented control to navigation bar and keep title with buttons

提问by sangi93

I want to add segmented control to the navigation bar but also keep the title and buttons, like in iOS 7 Appstore purchased section (example)

我想向导航栏添加分段控件，但也要保留标题和按钮，例如在 iOS 7 Appstore 购买部分（示例）

I have tried adding segmented control as title view and then using prompt as the title, but then the buttons are on the same level as segmented control.

我尝试将分段控件添加为标题视图，然后使用提示作为标题，但是按钮与分段控件处于同一级别。

采纳答案by neural5torm

I have tried solving your problem using another approach since using a navigation bar only didn't seem to work out (maybe it's because the AppStore app is using a private api but I'm not knowledgeable enough to tell for sure...) Anyway I simply used a toolbar placed just underneath the navigation bar on which I added a segmented control, all inside a regular UIViewController.

我已经尝试使用另一种方法解决您的问题，因为仅使用导航栏似乎没有奏效（也许是因为 AppStore 应用程序使用的是私有 api，但我的知识不足，无法确定......）无论如何我只是使用了一个位于导航栏下方的工具栏，我在上面添加了一个分段控件，所有这些都在一个常规的 UIViewController 中。

This is what it looks like in Storyboard:

这是它在 Storyboard 中的样子：

And this is the result in Simulator:

这是模拟器中的结果：

Just be careful to offset the table view down to account for the vertical space used up by the toolbar. Hope this helps!

请注意向下偏移表格视图以考虑工具栏使用的垂直空间。希望这可以帮助！

回答by user370773

I found two solutions:

我找到了两个解决方案：

1) As suggested by neural5torm, you can add the segmented control to an UIView with the same background color of the navigation bar

1）根据neural5torm的建议，你可以将分段控件添加到导航栏背景颜色相同的UIView中

You can remove UINavigationBar's hairline in this way:

您可以通过这种方式删除 UINavigationBar 的发际线：

for (UIView *view in self.navigationController.navigationBar.subviews)
{
    for (UIView *view2 in view.subviews)
    {
        if ([view2 isKindOfClass:[UIImageView class]])
        {
            [view2 removeFromSuperview];
        }
    }
}

This is ok for not translucentnavigation bar.

这对于不透明的导航栏是可以的。

If you want a translucentnavigation bar:
2) Subclass UINavigationBar to create a taller bar by overriding sizeThatFits

如果你想要一个半透明的导航栏：
2) 子类 UINavigationBar 通过覆盖来创建一个更高的栏sizeThatFits

- (CGSize)sizeThatFits:(CGSize)size
{
    size.width = self.frame.size.width;
    size.height = your height (probably 88.0f);
    return size;
}

To use your custom navigation bar:

要使用您的自定义导航栏：

UINavigationController *navController = [[UINavigationController alloc] initWithNavigationBarClass:[YouNavigationBar class] toolbarClass:nil];
[navController setViewControllers:@[viewController]];

Title and button items will be at the bottom. Adjust their vertical positions (in the init of your custom navigation bar or via appearance proxy)

标题和按钮项目将在底部。调整它们的垂直位置（在自定义导航栏的初始化中或通过外观代理）

// Title view
[self setTitleVerticalPositionAdjustment:-dy forBarMetrics:UIBarMetricsDefault];

// Button item as icon/image 
[[UIBarButtonItem appearanceWhenContainedIn:[YourCustomNavigationBar class], nil] setBackgroundVerticalPositionAdjustment:-dy forBarMetrics:UIBarMetricsDefault];

Look at the UIBarButtonItem class reference, there are also setTitlePositionAdjustmentand other methods for back button

看 UIBarButtonItem 类参考，也有setTitlePositionAdjustment和其他方法用于后退按钮

When you create your segmented control, add it to the navigation bar

创建分段控件时，将其添加到导航栏

[self.navigationController.navigationBar addSubview:segmentedControl];

The segmented control will be at the top. Adjust its vertical position by overriding didAddSubviewin your custom navigation bar

分段控件将位于顶部。通过覆盖didAddSubview自定义导航栏来调整其垂直位置

- (void)didAddSubview:(UIView *)subview
{
    [super didAddSubview:subview];

    if ([subview isKindOfClass:[UISegmentedControl class]])
    {
        CGRect frame = subview.frame;
        frame.origin.y += your extra height (probably 44.0f);
        subview.frame = frame;
    }
}

回答by pigmasha

You can find navigation bar with UISegmentedControl in Apple Sample Code: https://developer.apple.com/library/ios/samplecode/NavBar/Introduction/Intro.html

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

Here is my interpretation of this code (create programmatically):

这是我对此代码的解释（以编程方式创建）：

// File MySegmController.h
@interface MySegmController : UIViewController
@end

// File MySegmController.m
#import "MySegmController.h"

@interface MyNavBarView : UIView
@end

@interface MySegmController ()<UITableViewDataSource, UITableViewDelegate>
{
    UISegmentedControl* _segm;
    UITableView* _table;
}
@end

#define SEGM_WIDTH 250

@implementation MySegmController

- (void)loadView
{
    [super loadView];
    self.view.backgroundColor = [UIColor whiteColor];
    self.title = @"Title";

    float w = self.view.bounds.size.width;

    NSArray* items = [[NSArray alloc] initWithObjects: @"One", @"Two", @"Three", nil];
    _segm = [[UISegmentedControl alloc] initWithItems: items];
    [items release];
    [_segm sizeToFit];
    _segm.frame = CGRectMake((w - SEGM_WIDTH) / 2, 0, SEGM_WIDTH, _segm.bounds.size.height);
    _segm.autoresizingMask = UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleRightMargin;
    _segm.selectedSegmentIndex = 0;

    MyNavBarView* topView = [[MyNavBarView alloc] initWithFrame: CGRectMake(0, 0, w, _segm.bounds.size.height + 10)];
    topView.backgroundColor = [UIColor whiteColor];
    topView.autoresizingMask = UIViewAutoresizingFlexibleWidth;
    [topView addSubview: _segm];
    [_segm release];

    _table = [[UITableView alloc] initWithFrame: CGRectMake(0, topView.bounds.size.height, w, self.view.bounds.size.height - topView.bounds.size.height) style: UITableViewStylePlain];
    _table.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
    _table.dataSource = self;
    _table.delegate = self;
    [self.view addSubview: _table];
    [_table release];

    // add topView AFTER _table because topView have a shadow
    [self.view addSubview: topView];
    [topView release];
}

- (void)viewDidLoad
{
    [super viewDidLoad];

    self.navigationController.navigationBar.translucent = NO;
    // pixel_transp.png - 1x1 image with transparent background
    self.navigationController.navigationBar.shadowImage = [UIImage imageNamed: @"pixel_transp"];
    // pixel.png - 1x1 image with white background
    [self.navigationController.navigationBar setBackgroundImage: [UIImage imageNamed: @"pixel"] forBarMetrics: UIBarMetricsDefault];

    UIBarButtonItem* bt = [[UIBarButtonItem alloc] initWithBarButtonSystemItem: UIBarButtonSystemItemCancel target: self action: @selector(onCancel)];
    self.navigationItem.rightBarButtonItem = bt;
    [bt release];
}

- (void)onCancel
{
    [self.presentingViewController dismissViewControllerAnimated: YES completion: NULL];
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return 2;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    UITableViewCell* cell = [tableView dequeueReusableCellWithIdentifier: @"MyId"];
    if (!cell) cell = [[[UITableViewCell alloc] initWithStyle: UITableViewCellStyleDefault reuseIdentifier: @"MyId"] autorelease];
    cell.textLabel.text = @"text";
    return cell;
}

@end

@implementation MyNavBarView

- (void)willMoveToWindow: (UIWindow *)newWindow
{
    self.layer.shadowOffset = CGSizeMake(0, 1.0f / UIScreen.mainScreen.scale);
    self.layer.shadowRadius = 0;
    self.layer.shadowColor = [UIColor blackColor].CGColor;
    self.layer.shadowOpacity = 0.25f;
}

@end

回答by Zeezer

You could use navigation item Prompt property for this. Just set the property in storyboard like this and the navigation bar will automatically fade up and down nicely. Only downside is the text is kinda small.

您可以为此使用导航项 Prompt 属性。只需像这样在故事板中设置属性，导航栏就会自动上下很好地淡入淡出。唯一的缺点是文字有点小。

回答by Michal Dobrodenka

I tried to do it in Xamarin.iOS, from iOS 6, you can inherit UINavigationBar and add controls, button where you want.

我尝试在 Xamarin.iOS 中做到这一点，从 iOS 6 开始，您可以继承 UINavigationBar 并在您想要的位置添加控件、按钮。

回答by user1403629

Try to create UINavigationBar subclass and let it conform to UIToolbarDelegate protocol. Then in -init method create your segment control, add it on UIToolBar and set its delegate to your custom UINavigationBar class. Then write this magic:

尝试创建 UINavigationBar 子类并让它符合 UIToolbarDelegate 协议。然后在 -init 方法中创建您的段控件，将其添加到 UIToolBar 并将其委托设置为您的自定义 UINavigationBar 类。然后写这个魔术：

- (UIBarPosition)positionForBar:(id <UIBarPositioning>)bar {
    return UIBarPositionTopAttached;
}

Good luck!

祝你好运！

回答by Nikolay Shubenkov

My solution was this:
Add Toolbar and Segmented control to your xibfile. Customize it as you need and connect it to an outlet of your view controller:

我的解决方案是：
将工具栏和分段控件添加到您的xib文件中。根据需要自定义它并将其连接到视图控制器的插座：

Then, put this in the viewDidLoadmethod:

然后，把它放在viewDidLoad方法中：

- (void)viewDidLoad
{
    [super viewDidLoad];

    // add after your setup code
    UIBarButtonItem *item = [[UIBarButtonItem alloc] initWithCustomView:self.segmentedControl];

    self.navigationItem.rightBarButtonItem = item;
}

回答by Kalel Wade

I haven't fully implemented it but the following is what I plan to do. (ios7) This would be for having title and the buttons on the same nav bar side by side.

我还没有完全实施它，但以下是我计划做的。(ios7) 这将是为了让标题和按钮并排位于同一个导航栏上。

In storyboard, add a blank view to the navigation bar. Then add a label and a segmented control to that view. This allows you to add any control you want to the nav bar. So far the UI works, just haven't wired it up. Just wanted to share what I have found so far.

在故事板中，向导航栏添加一个空白视图。然后向该视图添加标签和分段控件。这允许您向导航栏添加任何您想要的控件。到目前为止，UI 工作正常，只是还没有连接起来。只是想分享我迄今为止发现的东西。