我正在抓住Dribble并找到了附件设计。我想知道如何做这样的自定义导航栏。我的意思是如何创建一次导航栏并为每个视图控制器隐式重用它。
我正在考虑使用一种根视图控制器并继承其他视图控制器,但我不知道如何做到这一点。
任何想法或链接将不胜感激!
干杯。
西里尔
感谢iOS5,您现在可以自定义UINavigationBar的外观,而无需子类化或创建类别。
以下代码块(将其放在applicationDidFinishLoading:方法中)将整个应用程序的UINavigationBar更改为您提供的任何图像。
请注意,这仅适用于iOS5
[[UINavigationBar appearance] setBackgroundImage:[UIImage imageNamed:@"nav bar.png"] forBarMetrics:UIBarMetricsDefault];
但是,您还可以使用viewDidLoad中的以下代码,根据您所在的视图控制器更改单个UINavigationBar的外观。
[self.navigationController.navigationBar setBackgroundImage:[UIImage imageNamed:@"nav bar.png"] forBarMetrics:UIBarMetricsDefault];
由于iOS5,上面的代码仅讨论了自定义UINavigationBar外观的新方法。但是,它没有讨论按钮的实现方式。
但是,添加按钮完全是一个不同的游戏。为此,我建议继承UINavigationBar
,然后在需要的地方添加按钮。你甚至可能只使用一个标准的UINavigationBar
,但定制的UIBarButtonItem
s,特定的视图。
例如:
UIView *rightButton = [[[UIView alloc] initWithFrame:CGRectMake(0.0f, 0.0f, 30.0f, 30.0f)] autorelease];
[rightButton addSubview:[UIImage imageNamed:@"rightButtonImage.png"]];
UIBarButtonItem *rightButtonItem = [[[UIBarButtonItem alloc] initWithCustomView:rightButton] autorelease];
[rightButtonItem setAction:@selector(rightButtonAction:)];
我没有测试过该代码,因此它不是一个复制/粘贴解决方案,但它让您了解需要做些什么来完成“自定义”外观UIBarButtonItems。
祝好运!
在较旧的iOS版本中,您必须继承UINavigationBar,即:
@interface CustomNavigationBar : UINavigationBar
@end
@implementation CustomNavigationBar
- (id)initWithCoder:(NSCoder *)aDecoder {
self = [super initWithCoder:aDecoder];
if (self) {
self.opaque = YES;
self.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"CustomBackground"]];
}
return self;
}
- (void)drawRect:(CGRect)rect {
// Skip standard bar drawing
}
@end
要在视图控制器中使用自定义导航栏,您应该在XIB中将标准类名更改为CustomNavigationBar
。
此外,您可以以编程方式设置自定义导航栏:
UIViewController *tempController = [[[UIViewController alloc] init] autorelease];
UINavigationController *navigationController = [[[UINavigationController alloc] initWithRootViewController:tempController] autorelease];
NSData *archive = [NSKeyedArchiver archivedDataWithRootObject:navigationController];
NSKeyedUnarchiver *unarchiver = [[[NSKeyedUnarchiver alloc] initForReadingWithData:archive] autorelease];
[unarchiver setClass:[CustomNavigationBar class] forClassName:@"UINavigationBar"];
UINavigationController *customNavigationController = [unarchiver decodeObjectForKey:@"root"];
UIViewController *contentController = [[[ContentViewController alloc] init] autorelease];
customNavigationController.viewControllers = [NSArray arrayWithObject:contentController];
现在customNavigationController
有自定义导航栏。
为NavigationBar设置自定义背景
UIImage *navBackground =[[UIImage imageNamed:@"navbarBackground"]
resizableImageWithCapInsets:UIEdgeInsetsMake(0, 0, 0, 0)];
[[UINavigationBar appearance] setBackgroundImage:navBackground forBarMetrics:UIBarMetricsDefault];
然后在View Controller中为left,rightBarButtons和title设置自定义视图。
self.navigationItem.titleView = customTitleView;
self.navigationItem.leftBarButtonItem = customBarButton;
self.navigationItem.rightBarButtonItem = customBarButton2;
您需要制作自己的UINavigationBar
子类,并在需要navigationController的地方使用。
在这个自定义类中,您将绘制背景,按钮,文本等。
实际上,仔细看看这个例子,它似乎是一个UIToolBar
。您可以为popViewController:
等按钮指定导航方法。对于“确认信息”和进度指示器,您可以使用标签和图像。对于右键,它只是一个图形。
当然,您提供的示例只是一个概念,而不是一个真正的应用程序。但是通过一些创造力,几个小时的编码和几个小时的图形设计,您可以实现同样的界面。
您可以使用库存UINavigationController并隐藏UINavigationBar。
然后,创建自己的UIViewController子类,其中包含所有导航元素,然后是内容所在的弹性大小视图。使所有类子类化此元素并绘制到视图中。按钮只需要调用[self.navigationController popViewControllerAnimated:YES]
和UILabel在视图只需要将其文本设置为self.title
。
使用Category
,在您的委托文件中添加以下代码(.m)
@implementation UINavigationBar (UINavigationBarCategory)
- (void)drawRect:(CGRect)rect
{
UIImage *navBg = [UIImage imageNamed:@"NavBar.png"];
[navBg drawInRect:CGRectMake(0, 0, 320, 44)];
}
@end
编辑:
使用Category
不是一个好方法,我写了一个没有使用Category
的演示,点击here。
经过对IOS最近一个项目的大量研究。我决定使用子类来自定义导航栏而不使用UINavigationController。
import UIKit
class CustomNavigationBar: UINavigationBar {
override func awakeFromNib() {
super.awakeFromNib()
self.setBackgroundImageOfNavBar(imagenName: "navbar.jpg")
self.setShadowImageOfNavBar(imagenName: "")
self.setTitleAttribute()
self.setBarAsTranslucent()
}
func setBackgroundImageOfNavBar(imagenName:String){
//pass the image name and set the image here
self.setBackgroundImage(UIImage(named: imagenName), for: .default)
//if you want white backgroung just remove the image
// self.setBackgroundImage(UIImage(), for: .default)
//if you want to set backgroung color
self.backgroundColor = UIColor.clear
}
func setShadowImageOfNavBar(imagenName:String){
//pass the image name and set the image here
// self.shadowImage = UIImage(named: imagenName)
//if you want white backgroung just remove the image
self.shadowImage = UIImage()
}
func setTitleAttribute(){
//add NSAttributedStringKey as you want to customize title Color and font provide your app font family name open below commented code
// let textAttributes = [NSAttributedStringKey.foregroundColor:UIColor.black,NSAttributedStringKey.font: UIFont(name: "Enter Your App Font Name", size: 18)!]
//set only title color of navigation bar by below code
let textAttributes = [NSAttributedStringKey.foregroundColor:#colorLiteral(red: 0.8784313725, green: 0.1882352941, blue: 0.3254901961, alpha: 1)]
self.titleTextAttributes = textAttributes
}
func setBarAsTranslucent(){
self.isTranslucent = false
}
}
我分享了a link which does a lot of custom stuff,包括添加背景图片,文字阴影等。