如何修改UINavigationBar的大小,添加背景图像并移动标题标签位置

时间:2014-03-07 08:38:47

标签: ios iphone objective-c uinavigationcontroller uinavigationbar

我有几个即将推出的设计要实施。这些设计有一些重叠,我想为我的项目做一般。该应用应该是基于导航的,并且在导航栏中都有公司品牌形象,但导航栏应该比原来大,标题位于主图像下方。

Custom UINavigationBar with company brand

顶部蓝色部分在整个项目中是相同的品牌形象,下面的灰色部分是标题标签所在的位置,这意味着应该调整标题标签。我希望能够将setTitle用于我的视图控制器。后退按钮应位于蓝色部分的中心,因此稍微调整到屏幕顶部,而不是在导航栏中居中。

我从以下问题中获得了一些灵感,一个类别将是一个很好的方式,或者我在这里错了?你有什么建议吗?

Objective-C: Background image and title in Navigation Bar

UINavigationBar custom title position

Changing the UINavigationBar background image

4 个答案:

答案 0 :(得分:2)

您可以在viewDidLoad方法中执行此操作

UIView *navbar = self.navigationBar;
navbar.translatesAutoresizingMaskIntoConstraints = NO;
[navbar addConstraints:[NSLayoutConstraint
                        constraintsWithVisualFormat:@"V:[navbar(80)]" // custom height
                        options:0
                        metrics:nil
                        views:NSDictionaryOfVariableBindings(navbar)]];

[navbar addConstraints:[NSLayoutConstraint
                        constraintsWithVisualFormat:@"[navbar(320)]"
                        options:0
                        metrics:nil
                        views:NSDictionaryOfVariableBindings(navbar)]];

self.widthConstraint = navbar.constraints[1]; // width is the 2nd constraint

要调整后退按钮,请使用自定义后退按钮图像,并根据需要在图像中定位图标。使用[UINavigationBar外观]设置自定义后退按钮。

[[UINavigationBar appearance] setBackIndicatorImage:[UIImage imageNamed:@"IconBack"]];
[[UINavigationBar appearance] setBackIndicatorTransitionMaskImage:[UIImage new]];

为了调整标题,请使用UINavigationBar和UIBarButtonItem外观的相应方法。

[[UINavigationBar appearance] setTitleVerticalPositionAdjustment:10 forBarMetrics:UIBarMetricsDefault];
[[UIBarButtonItem appearance] setBackButtonTitlePositionAdjustment:UIOffsetMake(0, -10) forBarMetrics:UIBarMetricsDefault];

答案 1 :(得分:1)

根据此链接:https://stackoverflow.com/a/7688626/667586

使用自定义sizeThatFits创建UINavigationBar类别。

@implementation UINavigationBar (customNav)
- (CGSize)sizeThatFits:(CGSize)size {
CGSize newSize = CGSizeMake(self.frame.size.width,70);
return newSize;
}
@end

对于Title,请使用

- (NSInteger)tableView:(UITableView *)tableView sectionForSectionIndexTitle:(NSString *)title atIndex:(NSInteger)index;  // tell table which section corresponds to section title/index (e.g. "B",1))

答案 2 :(得分:1)

在一个项目上,我做了类似的事情:

self.navigationItem.titleView = [MyClass getTitleView:parameter];
self.navigationController.navigationBar.frame = CGRectMake(0.0, 0.0, 320.0, self.navigationItem.titleView.frame.size.height);

UIButton *backButton = [UIButton buttonWithType:UIButtonTypeCustom];
.
.
.

// 44 is the default height of a nav bar
if (self.navigationItem.titleView.frame.size.height > 44) {
    [backButton setImageEdgeInsets:UIEdgeInsetsMake(-self.navigationItem.titleView.frame.size.height/4, 0, self.navigationItem.titleView.frame.size.height/4, 0)];
}
self.navigationItem.leftBarButtonItem = [[UIBarButtonItem alloc] initWithCustomView:backButton];

方法[MyClass getTitleView:parameter]为您提供所需的视图和所需的标签和图像,然后重新调整导航栏和按钮,按钮插图上的硬编码常量只是将按钮垂直居中,因为我们的导航酒吧底部还有一个额外的标签,你也可能想要修复酒吧的宽度,我们只支持肖像。

我们在viewWillAppear:方法上有这个代码,因为只有一个类使用它,但是如果你没有基类ViewController来进行子类化,那么一个类别听起来是合理的。

答案 3 :(得分:0)

不确定它是否适用于所有情况,但这是一个起点。

我注意到UINavigationBar高度可以通过自动布局限制进行更改。默认情况下,bar的自动调整掩码被转换为约束。我将其关闭并手动添加 width height 约束。宽度约束取决于方向,应在方向转换发生时更改。所有更改都在UINavigationController子类中执行。

@interface NavigationController ()
@property (strong, nonatomic) NSLayoutConstraint *widthConstraint;
@end

@implementation NavigationController

- (void)viewDidLoad
{
    [super viewDidLoad];

    UIView *navbar = self.navigationBar;
    navbar.translatesAutoresizingMaskIntoConstraints = NO;

    [navbar addConstraints:[NSLayoutConstraint
                            constraintsWithVisualFormat:@"V:[navbar(80)]" // custom height
                            options:0
                            metrics:nil
                            views:NSDictionaryOfVariableBindings(navbar)]];

    [navbar addConstraints:[NSLayoutConstraint
                            constraintsWithVisualFormat:@"[navbar(320)]"
                            options:0
                            metrics:nil
                            views:NSDictionaryOfVariableBindings(navbar)]];

    self.widthConstraint = navbar.constraints[1]; // width is the 2nd constraint
}

- (void)willRotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation duration:(NSTimeInterval)duration
{
    CGSize size = [UIScreen mainScreen].bounds.size;

    self.widthConstraint.constant =
        UIInterfaceOrientationIsLandscape(toInterfaceOrientation)
            ? size.height
            : size.width;

    [UIView animateWithDuration:duration animations:^{
        [self.navigationBar layoutIfNeeded];
    }];
}

@end

要调整后退按钮,请使用自定义后退按钮图像,并根据需要在图像中定位图标。使用[UINavigationBar appearance]设置自定义后退按钮。

[[UINavigationBar appearance] setBackIndicatorImage:[UIImage imageNamed:@"IconBack"]];
[[UINavigationBar appearance] setBackIndicatorTransitionMaskImage:[UIImage new]];

要调整标题,请使用UINavigationBarUIBarButtonItem出现的相应方法。

[[UINavigationBar appearance] setTitleVerticalPositionAdjustment:10 forBarMetrics:UIBarMetricsDefault];
[[UIBarButtonItem appearance] setBackButtonTitlePositionAdjustment:UIOffsetMake(0, -10) forBarMetrics:UIBarMetricsDefault];