IOS 在IOS5中使用NavigationBar导航栏

系统自带的NavigationBar局限性比较大，往往开发中我们需要制作比较精美的导航栏。常见的导航栏都是由三部分组成的。 如下图所示， 左边的按钮视图， 中间的视图，右侧的按钮视图。本篇文章我们就来模拟Path这个软件的NavigationBar。






 


AppDelegate.h


1 #import <UIKit/UIKit.h>
2 #import "MyViewController.h"
3 @interface AppDelegate : UIResponder <UIApplicationDelegate>
4
5 @property (strong, nonatomic) UIWindow *window;
6 @property (strong, nonatomic) UINavigationController *navController;
7 @property (strong, nonatomic) UIViewController *viewController;
8
9 @end
 


AppDelegate.m


01 #import "AppDelegate.h"
02
03 @implementation AppDelegate
04
05 @synthesize window = _window;
06 @synthesize navController;
07 @synthesize viewController;
08
09 - (void)dealloc
10 {
11    [_window release];
12    [super dealloc];
13 }
14
15 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
16 {
17
18    self.window = [[[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]] autorelease];
19
20    self.window.backgroundColor = [UIColor whiteColor];
21    self.viewController =  [[[MyViewController alloc]init]autorelease];
22    self.navController = [[UINavigationController alloc] initWithRootViewController:self.viewController];
23    [self.window addSubview:navController.view];
24
25    [self.window makeKeyAndVisible];
26
27    return YES;
28 }
29
30 @end
 


MyViewController.m


01 #import "MyViewController.h"
02
03 @implementation MyViewController
04
05 - (void)viewDidLoad
06 {
07
08    [super viewDidLoad];
09
10    //设置导航栏背景图片
11    [self.navigationController.navigationBar setBackgroundImage:[UIImage imageNamed:@"nav-bar.png"] forBarMetrics:UIBarMetricsDefault];
12
13    //导航栏正中央图片
14    UIImage * titleImage = [UIImage imageNamed:@"nav-logo.png"];
15    UIImageView * titleview = [[UIImageView alloc]initWithImage:titleImage];
16    //加在导航栏中
17    self.navigationItem.titleView =titleview;
18
19    //绘制导航栏右侧的图片按钮
20    UIImage *rightButtonImage = [UIImage imageNamed:@"nav-bar-button.png"];
21    UIImage *rightbuttonNormal = [rightButtonImage
22                                             stretchableImageWithLeftCapWidth:10 topCapHeight:10];
23
24    //设置按钮类型为自定义
25    UIButton *rightButton = [UIButton buttonWithType:UIButtonTypeCustom];
26    //设置按钮的显示区域
27    [rightButton setFrame: CGRectMake(0, 0, 50, 40)];
28    //设置按钮的背景显示图
29    [rightButton setBackgroundImage:rightbuttonNormal forState:UIControlStateNormal];
30    //设置按钮的前景显示图
31    [rightButton setImage:[UIImage imageNamed:@"nav-friends-icon.png"] forState:UIControlStateNormal];
32    [rightButton setImage:[UIImage imageNamed:@"nav-friends-icon.png"] forState:UIControlStateHighlighted];
33    //监听点击事件
34    [rightButton addTarget:self action:@selector(RightDown) forControlEvents:UIControlEventTouchDown];
35    //加载导航栏中
36    self.navigationItem.rightBarButtonItem = [[UIBarButtonItem alloc]initWithCustomView:rightButton];
37
38    //含义和上面类似就不详解了
39    //绘制导航栏左侧的图片按钮
40    UIImage *leftButtonImage = [UIImage imageNamed:@"nav-bar-button.png"];
41    UIImage *leftbuttonNormal = [leftButtonImage
42                                  stretchableImageWithLeftCapWidth:10 topCapHeight:10];
43
44    UIButton *leftButton = [UIButton buttonWithType:UIButtonTypeCustom];
45
46    [leftButton setFrame: CGRectMake(0, 0, 50, 40)];
47
48    [leftButton setBackgroundImage:leftbuttonNormal forState:UIControlStateNormal];
49
50    [leftButton setImage:[UIImage imageNamed:@"nav-menu-icon.png"] forState:UIControlStateNormal];
51    [leftButton setImage:[UIImage imageNamed:@"nav-menu-icon.png"] forState:UIControlStateHighlighted];
52    [leftButton addTarget:self action:@selector(leftDown) forControlEvents:UIControlEventTouchDown];
53    self.navigationItem.leftBarButtonItem = [[UIBarButtonItem alloc]initWithCustomView:leftButton];
54
55 }
56
57 -(void) leftDown
58 {
59    NSLog(@"按下左边按钮");
60 }
61
62 -(void) RightDown
63 {
64    NSLog(@"按下右边按钮");
65 }
66
67 @end
 


最后我仔细说几个重要的方法。


self.navigationItem.titleView   //导航栏中间显示内容


 self.navigationItem.leftBarButtonItem  //导航栏左侧显示内容


self.navigationItem.rightBarButtonItem //导航栏右侧显示内容


 


 


这个是IOS5独有的方法，可以直接设置导航栏背景图片。


1 [self.navigationController.navigationBar setBackgroundImage:[UIImage imageNamed:@"nav-bar.png"] forBarMetrics:UIBarMetricsDefault];
 


最后再说一下拉伸图片的方法 默认在UIImageView中设置Rect属性后中间的图片将会被拉伸，矩形图片被拉伸还好，可是圆角图片被拉伸就会非常不好看。如下图所示，按钮的圆角被拉伸了好多，非常难看。


 






 


如下图所示，它就是项目中我们使用到的导航栏按钮的背景图，做过Android的朋友应该会想到9path吧。蛤蛤。其实它们的原理都是一样的，无论是怎么样的圆角图片我们只需要让程序去拉伸图片中央最重要的矩形，而四周的圆角部分不会被拉伸。这样圆角图片无论怎么拉伸都不会出现变形的情况。






在代码中我们通过这样的方法来重新得到UIImage对象，参数1表示从左边开始数多少个像素的图片区域不会拉伸，参数2表示从上面开始数多少个像素的图片区域不会被拉伸。


  UIImage *rightbuttonNormal = [rightButtonImage   stretchableImageWithLeftCapWidth:10 topCapHeight:10];


 


细心的朋友可能会想 切图的话 左边 上面参数都给出了为什么没有右边下边呢？其实上面的这个方法会镜像的对应在右侧与下侧，它们都是等比对应的。


 


最后的这个简单DEMO的源代码，希望大家喜欢，雨松MOMO祝大家学习愉快。


源码下载地址：http://vdisk.weibo.com/s/acehY


 


8月13号补充


导航栏中其实还有个比较重要的按钮，就是返回按钮。比如A界面-》B界面，此时B界面左上角应当有一个返回A界面的按钮，然而默认的按钮比较单调，那么我们学习如何自定义这个返回按钮。


如果A界面-》B界面，请把添加返回按钮的代码添加在A界面的ViewController中，因为只有这样当A界面切换至B界面时，B界面就可以看到左上角返回的按钮了。


 


01 UIImage *leftButtonImage = [UIImage imageNamed:@"nav-bar-back-button.png"];
02 UIImage *leftbuttonNormal = [leftButtonImage
03                             stretchableImageWithLeftCapWidth:15 topCapHeight:15];
04
05 UIBarButtonItem *item = [[[UIBarButtonItem alloc]init] autorelease];
06 [item setBackButtonBackgroundImage:leftbuttonNormal forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
07
08 [item setTitle:@"雨松MOMO"];
09
10 self.navigationItem.backBarButtonItem = item;
 


效果如下所示






 


 


 


 


 


本文转载至：http://www.verydemo.com/demo_c134_i16182.html


 


 


1.UIBbarButtonItem有如下几种初始化的方法：


-initWithTitle


-initWithImage


-initWithBarButtonSystemItem


-initWithCustomView


第4种方法就是我们添加各种作料的接口，所以今天的主角其它也是它。


2.在UIToolBar上面添加Title


UIToolbar *myToolBar = [[UIToolbar alloc] initWithFrame:
CGRectMake(0.0f, 0.0f, 320.0f, 44.0f)];
NSMutableArray *myToolBarItems = [NSMutableArray array];
[myToolBarItems addObject:[[[UIBarButtonItem alloc]
initWithTitle:@"myTile"
style:UIBarButtonItemStylePlain
target:self
action:@selector(action)] autorelease]];
[myToolBar setItems:myToolBarItems animated:YES];
[myToolBar release];
[myToolBarItems];
setItems传入值或者说items是一个对象数组。


3.在UIToolBar上面添加image


[myToolBarItems addObject:[[[UIBarButtonItem alloc]
initWithImage:[UIImage imageNamed:@"myImage.png"]
style:UIBarButtonItemStylePlain
target:self
action:@selector(action)]];
4.在UIToolBar上面添加SystemItem


[myToolBarItems addObject:[[[UIBarButtonItem alloc]
initWithBarButtonSystemItem:UIBarButtonSystemItemPlay
target:self
action:@selector(action)] autorelease]];
Note:


initWithBarButtonSystemItem初始化：


- (id)initWithBarButtonSystemItem:(UIBarButtonSystemItem)systemItem target:(id)target action:(SEL)action


Defines system defaults for commonly used items.


typedef enum {
UIBarButtonSystemItemDone,
UIBarButtonSystemItemCancel,
UIBarButtonSystemItemEdit,
UIBarButtonSystemItemSave,
UIBarButtonSystemItemAdd,
UIBarButtonSystemItemFlexibleSpace,
UIBarButtonSystemItemFixedSpace,
UIBarButtonSystemItemCompose,
UIBarButtonSystemItemReply,
UIBarButtonSystemItemAction,
UIBarButtonSystemItemOrganize,
UIBarButtonSystemItemBookmarks,
UIBarButtonSystemItemSearch,
UIBarButtonSystemItemRefresh,
UIBarButtonSystemItemStop,
UIBarButtonSystemItemCamera,
UIBarButtonSystemItemTrash,
UIBarButtonSystemItemPlay,
UIBarButtonSystemItemPause,
UIBarButtonSystemItemRewind,
UIBarButtonSystemItemFastForward,
UIBarButtonSystemItemUndo, // iPhoneOS 3.0
UIBarButtonSystemItemRedo, // iPhoneOS 3.0
} UIBarButtonSystemItem;
5.在UIToolBar上面添加其它各种控件,使用initWithCustomView来完成.


这里需要看一下initWithCustomView的定义：


- (id)initWithCustomView:(UIView *)customView


可以看出，它的参数是一个view


A>加一个开关switch：


[myToolBarItems addObject:[[[UIBarButtonItem alloc]
initWithCustomView:[[[UISwitch alloc] init] autorelease]]
autorelease]];
B>加一个按钮UIBarButtonItem


UIBarButtonItem *myButton = [[[UIBarButtonItem alloc]
initWithTitle:@"myButton"
style:UIBarButtonItemStyleBordered
target:self
action:@selector(action)]autorelease];
get1Button.width = 50;
[myToolBarItems addObject:myButton];
C>加一个文本Label


UILabel *myLabel = [[UILabel alloc] initWithFrame:CGRectMake(40.0f, 20.0f, 45.0f, 10.0f)];
myLabel.font=[UIFont systemFontOfSize:10];
//myLabel.backgroundColor = [UIColor clearColor];
//myLabel.textAlignment=UITextAlignmentCenter;
UIBarButtonItem *myButtonItem = [[UIBarButtonItem alloc]initWithCustomView:myLabel];
[myToolBarItems addObject: myButtonItem];
[mylabel release];
[myButtonItem release];
D>加一个进度条UIProgressView


UIProgressView *myProgress = [[UIProgressView alloc] initWithFrame:CGRectMake(65.0f, 20.0f, 90.0f, 10.0f)];
UIBarButtonItem *myButtonItem = [[UIBarButtonItem alloc]initWithCustomView:myProgress];
[myToolBarItems addObject: myButtonItem];
[myProgress release];
[myButtonItem release];
6,代码示例


4.17UIToolBar


- (void)viewDidLoad


{


    [super viewDidLoad];


   


    UIToolbar * tbar = [[[UIToolbar alloc]initWithFrame:CGRectMake(0,self.view.frame.size.height - 44, 320, 44)]autorelease];


    //创建UIToolbar对象


    tbar.tintColor = [UIColor greenColor];


#if 0


    NSMutableArray * array = [[NSMutableArray alloc] initWithCapacity:0];


    for (int i = 0; i < 3; i++) {


        UIBarButtonItem * item = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemAdd target:selfaction:nil];


        [array addObject:item];


        [item release];


    }


    UIButton * btn = [UIButton buttonWithType:UIButtonTypeRoundedRect];


    btn.frame = CGRectMake(0, 0, 100, 30);


    UIBarButtonItem * item = [[UIBarButtonItem alloc] initWithCustomView:btn];


    //要用initWithCustonView:


    [array addObject:item];


    [item release];


    tbar.items = array;


    [array release];


#else


//UIToolbar中加入的按钮都是UIBarButtonItem类型


    UIBarButtonItem * item0 = [[[UIBarButtonItemalloc] initWithTitle:@"上一页"style:UIBarButtonItemStyleDone target:selfaction:nil] autorelease];


    UIBarButtonItem * item1 = [[[UIBarButtonItemalloc] initWithTitle:@"首页"style:UIBarButtonItemStyleDone target:selfaction:nil] autorelease];


    UIBarButtonItem * item2 = [[[UIBarButtonItemalloc] initWithTitle:@"下一页"style:UIBarButtonItemStyleDone target:selfaction:nil] autorelease];


    UIBarButtonItem * spaceItem = [[[UIBarButtonItem alloc]initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpacetarget:self action:nil] autorelease];


    //spaceItem是一个弹簧按钮(UIBarButtonSystemItemFlexibleSpace)，


    tbar.items = [NSArray arrayWithObjects:item0, spaceItem, item1, spaceItem, item2, nil];


     //要达到相同的效果，也可以插入一个button，button的类型为Custom，enabled设置为NO。


    [self.view addSubview: tbar];


#endif


}