系统自带的NavigationBar局限性比较大,往往开发中我们需要制作比较精美的导航栏。常见的导航栏都是由三部分组成的。 如下图所示, 左边的按钮视图, 中间的视图,右侧的按钮视图。本篇文章我们就来模拟Path这个软件的NavigationBar。
AppDelegate.h
2 | #import "MyViewController.h" |
3 | @interface AppDelegate : UIResponder <UIApplicationDelegate> |
5 | @property (strong, nonatomic) UIWindow *window; |
6 | @property (strong, nonatomic) UINavigationController *navController; |
7 | @property (strong, nonatomic) UIViewController *viewController; |
AppDelegate.m
01 | #import "AppDelegate.h" |
03 | @implementation AppDelegate |
05 | @synthesize window = _window; |
06 | @synthesize navController; |
07 | @synthesize viewController; |
15 | - ( BOOL )application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions |
18 | self.window = [[[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]] autorelease]; |
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]; |
25 | [self.window makeKeyAndVisible]; |
MyViewController.m
01 | #import "MyViewController.h" |
03 | @implementation MyViewController |
11 | [self.navigationController.navigationBar setBackgroundImage:[UIImage imageNamed:@ "nav-bar.png" ] forBarMetrics:UIBarMetricsDefault]; |
14 | UIImage * titleImage = [UIImage imageNamed:@ "nav-logo.png" ]; |
15 | UIImageView * titleview = [[UIImageView alloc]initWithImage:titleImage]; |
17 | self.navigationItem.titleView =titleview; |
20 | UIImage *rightButtonImage = [UIImage imageNamed:@ "nav-bar-button.png" ]; |
21 | UIImage *rightbuttonNormal = [rightButtonImage |
22 | stretchableImageWithLeftCapWidth:10 topCapHeight:10]; |
25 | UIButton *rightButton = [UIButton buttonWithType:UIButtonTypeCustom]; |
27 | [rightButton setFrame: CGRectMake(0, 0, 50, 40)]; |
29 | [rightButton setBackgroundImage:rightbuttonNormal forState:UIControlStateNormal]; |
31 | [rightButton setImage:[UIImage imageNamed:@ "nav-friends-icon.png" ] forState:UIControlStateNormal]; |
32 | [rightButton setImage:[UIImage imageNamed:@ "nav-friends-icon.png" ] forState:UIControlStateHighlighted]; |
34 | [rightButton addTarget:self action:@selector(RightDown) forControlEvents:UIControlEventTouchDown]; |
36 | self.navigationItem.rightBarButtonItem = [[UIBarButtonItem alloc]initWithCustomView:rightButton]; |
40 | UIImage *leftButtonImage = [UIImage imageNamed:@ "nav-bar-button.png" ]; |
41 | UIImage *leftbuttonNormal = [leftButtonImage |
42 | stretchableImageWithLeftCapWidth:10 topCapHeight:10]; |
44 | UIButton *leftButton = [UIButton buttonWithType:UIButtonTypeCustom]; |
46 | [leftButton setFrame: CGRectMake(0, 0, 50, 40)]; |
48 | [leftButton setBackgroundImage:leftbuttonNormal forState:UIControlStateNormal]; |
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]; |
最后我仔细说几个重要的方法。
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]; |
05 | UIBarButtonItem *item = [[[UIBarButtonItem alloc]init] autorelease]; |
06 | [item setBackButtonBackgroundImage:leftbuttonNormal forState:UIControlStateNormal barMetrics:UIBarMetricsDefault]; |
08 | [item setTitle:@ "雨松MOMO" ]; |
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
}
本文转载至:http://www.cnblogs.com/wengzilin/archive/2012/03/28/2420933.html