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

时间:2013-09-15 14:36:48

标签: ios uinavigationbar uisegmentedcontrol

我想将分段控件添加到导航栏,但也保留标题和按钮,例如iOS 7 Appstore购买部分(example

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

8 个答案:

答案 0 :(得分:14)

我找到了两个解决方案:

1)正如neur5torm所建议的那样,您可以将分段控件添加到导航栏背景颜色相同的UIView中

您可以通过以下方式删除UINavigationBar的发际线:

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

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



如果您想要半透明导航栏:
2)通过覆盖sizeThatFits来创建更高的条形UINavigationBar

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


要使用自定义导航栏:

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


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

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

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

查看UIBarButtonItem类引用,还有setTitlePositionAdjustment和其他后退按钮的方法


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

[self.navigationController.navigationBar addSubview:segmentedControl];


分段控件将位于顶部。通过覆盖自定义导航栏中的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;
    }
}

答案 1 :(得分:12)

我尝试使用其他方法来解决您的问题,因为使用导航栏似乎没有成功(也许是因为AppStore应用程序使用的是私有api但我知道不足以说明问题。 。) 无论如何,我只是在导航栏下方放置了一个工具栏,我在其中添加了一个分段控件,所有这些都位于常规的UIViewController中。

这就是Storyboard中的样子: Storyboard

这是模拟器中的结果:

Simulator

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

答案 2 :(得分:10)

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

以下是我对此代码的解释(以编程方式创建):

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

答案 3 :(得分:6)

您可以使用导航项提示属性。只需在故事板中设置属性,导航栏就会自动淡入淡出。唯一的缺点是文字有点小。

enter image description here

答案 4 :(得分:2)

我试图在Xamarin.iOS中进行,从iOS 6开始,你可以继承UINavigationBar并在你想要的地方添加控件,按钮。

答案 5 :(得分:2)

尝试创建UINavigationBar子类并使其符合UIToolbarDelegate协议。然后在-init方法中创建段控件,将其添加到UIToolBar并将其委托设置为自定义UINavigationBar类。然后写下这个魔法:

- (UIBarPosition)positionForBar:(id <UIBarPositioning>)bar {
    return UIBarPositionTopAttached;
}
祝你好运!

答案 6 :(得分:1)

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

enter image description here

然后,将其放在viewDidLoad方法中:

- (void)viewDidLoad
{
    [super viewDidLoad];

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

    self.navigationItem.rightBarButtonItem = item;
}

enter image description here

答案 7 :(得分:0)

我还没有完全实现它,但以下是我打算做的事情。 (ios7)这将是并排在同一个导航栏上的标题和按钮。

在情节提要中,将空白视图添加到导航栏。然后向该视图添加标签和分段控件。这允许您将所需的任何控件添加到导航栏。到目前为止,用户界面工作,只是没有连线。只想分享我到目前为止所发现的内容。