当前位置:首页 » 背景图片 » navigationbar背景图片
扩展阅读
鹿晗高清漫画图片 2025-08-25 05:42:51

navigationbar背景图片

发布时间: 2025-08-25 03:01:08

㈠ 如何在iOS 5中定制用户界面

事实上,App Store中很多流行应用都以一种非标准的形式来呈现标准的iOS 用户界面元素:
1.Twitter使用了定制的UITabBar
2.Instagram使用了定制的UITabBar和UINavigationBar
3.Epicurious(iPad版)使用了标准split-view的定制元素
在iOS5推出之前,要实现标准界面的定制化设计,对开发者来说可没那么简单。尽管创建drawRect的子类或覆盖drawRect类是个不错的办法,但开发者会被这么事情搞得头昏脑胀。
现在有了iOS5,开发者终于看到了黎明的曙光!iOS5中包含了众多的新API,可以轻松定制不同UIKit界面控制元素的外观。
为了展示这些功能,本文会使用一个名为“
Surf’s Up”的示例项目,让界面显得更具备“沙滩风格”。
当然,在学习本教程之前,需要你了解iOS开发的基础知识。
开始前的准备
首先请下载这个初始项目(http://www.raywenderlich.com/downloads/SurfsUpStarter.zip)
我已经创建好了一个简单的应用,这样大家就可以把重点放在学习如何定制UIKit界面元素上。
当你打开项目之后,先看看其中的代码和XIB文件。你会发现主视图呈现了一个冲浪之旅的列表,而细节视图则匀速我们获取每个冲浪之旅的详细信息。
看完基本代码和XIB文件后,让我们编译运行项目,会看到以下的两个视图。
现在这个应用勉强可用,但从界面上一点感觉不到海滩冲浪的氛围。
让我们从detail(细节)页面上开始改造吧。现在它看起来相当的标准。
首先是顶部UINavigationBar(导航栏)上的平淡无奇的UIBarButtonItem,然后是底部的几个UITabBar元素,接着就是几个标准的数据输入元素:
1.使用了系统Helvetica字体的UILabel(标签)
2.UITextField(文本输入框)
3.UISlider(滑动条)
4.UISwitch(切换开关)
5.UISegmentedControl(分段控制)
我们要做的事情是,把这些完全“标准”的界面改造成具有独特风格的定制界面。
添加背景图片
事实上,我们已经把所需要的资源图片都放在Resources里面了,所以要做的只是添加代码而已。
在images文件夹中有一个bg_sand.png图片。我们打算用它当做细节视图的背景图片。
打开DetailViewController.m,创建一个viewDidLoad方法如下:
-(void)viewDidLoad{
[superviewDidLoad];
[[selfview]setBackgroundColor:[UIColorcolorWithPatternImage:[UIImageimageNamed:@"bg_sand"]]];
}
无疑,这是设置背景图片的最佳方式,虽然没有backgroundImage这样的属性,但是使用backgroundColor属性我们同样可以实现这个目的!
编译运行项目,可以看到以下界面:
定制UINavigationBar
在images文件夹中,我们将使用以下两个图片来定制导航栏:surf_gradient_textured_32.png和surf_gradident_textured_44.png。
我们希望在导航栏中从左到右重复铺设这些图片。之所有用了两个不同的高度,是因为当导航栏切换到横屏模式时会缩小。
要实现以上效果,iOS提供了两个新的API:
1.UINavigationbar现在可以设置backgroundImage属性
2.UIImage提供了新的resizableImageWithCapInsets方法,方便创建可调整大小的图片。
当然,我们可以进入细节视图,并使用以上API来直接设置导航栏的背景图片。但如果这样做,那就得在列表视图或应用的其它视图中手动修改。
幸运的是,iOS5允许我们一次性定制用户界面元素,从而让“处于同一级别的”界面元素使用类似的定制。
在SurfsUpAppDelegate.m文件中,在application:didFinishLaunchingWithOptions:方法的上面添加一个新的方法如下:
-(void)customizeAppearance{
//create resizable images创建可调整大小的图像
UIImage *gradientImage44 = [[UIImageimageNamed:@"surf_gradient_textured_44"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 0, 0, 0)];
UIImage *gradientImage32 = [[UIImageimageNamed:@"surf_gradient_textured_32"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 0, 0, 0)];
//set the background image for *all* UINavigationBars为所有导航栏设置背景图片
[[UINavigationBarappearance]setBackgroundImage:gradientImage44forBarMetrics:UIBarMetricsDefault];
[[UINavigationBarappearance]setBackgroundImage:gradientImage32forBarMetrics:UIBarMetricsLandscapePhone];
//customize the title text for *all* UINavigationBars为所有导航栏设置标题文本
[[UINavigationBarappearance]setTitleTextAttributes:
[:
[UIColorcolorWithRed:255.0/255.0green:255.0/255.0blue:255.0/255.0alpha:1.0],
UITextAttributeTextColor,
[UIColorcolorWithRed:0.0green:0.0blue:0.0alpha:0.8],
,
[NSValuevalueWithUIOffset:UIOffsetMake(0, -1)],
,
[UIFontfontWithName:@"Arial-Bold"size:0.0],
UITextAttributeFont,
nil]];
}
在以上的代码中,头两行的作用是使用resizableImageWithCapInsets方法创建了可伸缩的图像。需要注意的是,该方法取代了之前版本中使用的:topCapHeight:方法(已被删除)。
关于cap insets,我们只需简单的设置指定图像在顶部,左端,右端和下部的固定区域。在这里,我们希望整个图片都伸缩,所以为每个端都设置了0。
接下来的两行代码使用appearance(外观)代理将可伸缩图片设置为背景图片,并指定了导航栏的测量方式。
最后几行代码指定了细节视图中的标题样式。我们传入了标题文本属性词典,相关的可用键值包括:
UITextAttributeFont
UITextAttributeTextColor


Ok,差不多搞定了,只需要在application:didFinishLaunchingWithOptions:方法的顶部添加一行代码:
[selfcustomizeAppearance];
编译运行应用,并切换设备的朝向,可以看到以下画面:
定制UIBarButtonItem
打开images,找到button_textured_24.png和button_textured_30.png两个文件,我们将用它们来设置导航栏中的按钮外观。
注意我们需要将按钮图像设置为可调整大小的,因为按钮的宽度取决于其中的文本。
对于这些按钮,我们不需要最左和最右的5个像素也伸缩,所以需要将left和right cap insets设置为5。
在customizeAppearance方法的最后添加以下代码:
//customize the apperance for UIBarButtonItems
UIImage *button30 = [[UIImageimageNamed:@"button_textured_30"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 5, 0, 5)];
UIImage *button24 = [[UIImageimageNamed:@"button_textured_24"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 5, 0, 5)];
[[UIBarButtonItemappearance] setBackgroundImage:button30forState::UIBarMetricsDefault];
[[UIBarButtonItemappearance] setBackgroundImage:button24forState::UIBarMetricsLandscapePhone];
[[UIBarButtonItemappearance]setTitleTextAttributes:
[:
[UIColorcolorWithRed:220.0/255.0green:104.0/255.0blue:1.0/255.0alpha:1.0],
UITextAttributeTextColor,
[UIColorcolorWithRed:1.0green:1.0blue:1.0alpha:1.0],
,
[NSValuevalueWithUIOffset:UIOffsetMake(0, 1)],
,
[UIFontfontWithName:@"AmericanTypewriter"size:0.0],
UITextAttributeFont,
nil]
forState:UIControlStateNormal];
以上代码其实和定制导航栏的差不多。首先我们还是为按钮创建了可伸缩的图像,并设置为背景图片。然后我们指定了文本的格式。
其中的”back”按钮需要特殊定制,因为它需要看起来与众不同。
让我们在customizeApperance方法的最后添加以下代码来特殊对待back按钮:
//customize the appeance for "back" on UIBarButtonItems
UIImage *buttonBack30 = [[UIImageimageNamed:@"button_back_textured_30"]resizableImageWithCapInsets:UIEdgeInsetsMake(0, 13, 0, 5)];
UIImage *buttonBack24 = [[UIImageimageNamed:@"button_back_textured_24"]resizableImageWithCapInsets:UIEdgeInsetsMake(0, 12, 0, 5)];
[[UIBarButtonItemappearance]setBackButtonBackgroundImage:buttonBack30forState::UIBarMetricsDefault];
[[UIBarButtonItemappearance]setBackButtonBackgroundImage:buttonBack24forState::UIBarMetricsLandscapePhone];
需要注意的是,我们为back按钮设置了不同的cap inset值。同时,UIBarButtonItem还有一个专门的backButtonBackgroundImage属性可以使用。
编译运行,可以看到下图:
定制UITabBar
在iOS5中提供了一个API来设置UITabBar的背景图片,以及表示选中的图片。
在customizeAppearance方法的底部添加以下代码:
//customize the apperance for UITabBar
UIImage *tabBackground = [[UIImageimageNamed:@"tab_bg"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 0, 0, 0)];
[[UITabBarappearance]setBackgroundImage:tabBackground];
[[UITabBarappearance]setSelectionIndicatorImage:[UIImageimageNamed:@"tab_select_indicator"]];
我想这三行代码基本不需要再解释了。

㈡ ios 自定义颜色 橘红色怎么调

更改导航栏的背景和文字Color
方法一:

[objc] view plain
//set NavigationBar 背景颜色&title 颜色
[self.navigationController.navigationBar setBarTintColor:[UIColor colorWithRed:20/255.0 green:155/255.0 blue:213/255.0 alpha:1.0]];
[self.navigationController.navigationBar setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys:[UIColor whiteColor],UITextAttributeTextColor,nil]];
效果如下:

我们把背景改成了蓝色,title文字改成了白色,是不是很简单呢?NavigationBar极其push过去的子页面也会是你修改后的背景颜色
方法二:

[objc] view plain
//设置NavigationBar背景颜色
[[UINavigationBar appearance] setBarTintColor:[UIColor redColor]];
//@{}代表Dictionary
[[UINavigationBar appearance] setTitleTextAttributes:@{:[UIColor whiteColor]}];
效果如下:

在导航栏使用背景图片:
如果您的应用程序使用了自定义图像作为栏的背景,你需要提供一个“更大”的图片,使其延伸了状态栏的后面。导航栏的高度现在是从44点(88像素)更改为64点(128像素)。
仍然可以使用了setBackgroundImage:方法来指定自定义图像的导航栏。下面是代码行设置背景图片:

[objc] view plain
[[UINavigationBar appearance] setBackgroundImage:[UIImage imageNamed:@"nav_bg.png"] forBarMetrics:UIBarMetricsDefault];
效果图和上面的一样,我就不贴出来了。

改变导航栏标题的字体

就像iOS 6,我们可以通过使用导航栏的“titleTextAttributes”属性来自定义的文本样式。可以指定字体,文字颜色,文字阴影颜色,文字阴影在文本标题偏移属性字典,使用下面的文本属性键:

UITextAttributeFont - 字体
UITextAttributeTextColor - 文字颜色
- 文字阴影颜色
- 偏移用于文本阴影

[objc] view plain
NSShadow *shadow = [[NSShadow alloc] init];
shadow.shadowColor = [UIColor colorWithRed:0.0 green:0.0 blue:0.0 alpha:0.8];
shadow.shadowOffset = CGSizeMake(0, 1);
[[UINavigationBar appearance] setTitleTextAttributes: [NSDictionary dictionaryWithObjectsAndKeys:
[UIColor colorWithRed:245.0/255.0 green:245.0/255.0 blue:245.0/255.0 alpha:1.0], ,
shadow, NSShadowAttributeName,
[UIFont fontWithName:@"HelveticaNeue-CondensedBlack" size:21.0], NSFontAttributeName, nil nil]];

使用图片作为导航栏标题

不想标题栏是光秃秃的文字?可以通过使用代码行中的图像或标志取代它:简单地改变titleview用来自定义,(适用于较低版本)

[objc] view plain
self.navigationItem.titleView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"appcoda-logo.png"]];

效果如下,我随便用了个图片,别介意:

添加多个栏按钮项目
您希望添加导航栏的一侧不止一个栏按钮项目,无论是leftBarButtonItems和rightBarButtonItems 您在导航栏左侧/右侧指定自定义栏按钮项目。比如你想添加一个摄像头和一个共享按钮右侧的吧。您可以使用下面的代码:

[objc] view plain
UIBarButtonItem *shareItem = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemAction target:self action: nil nil];
UIBarButtonItem *cameraItem = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemCamera target:self action: nil nil];
NSArray *itemsArr = @[shareItem,cameraItem];
self.navigationItem.rightBarButtonItems = itemsArr;

自定义后退按钮的文字和颜色
通常情况下,我们使用UINavigationController时,push到的子页面,左上角会是系统自动取值上一层父页面的title名称,默认情况是这样,那么我们该如何修改它呢?

左侧显示了父页面的title:用户登录,可是我们想修改成返回,方式有很多,举些例子
方法一:
通过设置navigationItem的backBarButtonItem可以直接更换文字,【注意,要在父视图的Controller中设置】如下:

[objc] view plain
UIBarButtonItem *item = [[UIBarButtonItem alloc] initWithTitle:@"返回" style:UIBarButtonItemStylePlain target:nil action:nil];
self.navigationItem.backBarButtonItem = item;
效果如下:

所有的子界面返回时都变成了我们定义的文字,如果不想显示文字,直接"",就会单独显示一个系统的返回箭头图标,也是很清晰的感觉。

做到这里发现文字颜色和背景有重复,那么如何自定义其颜色呢?在iOS7,可以改变tintColor属性,它提供了一个快速和简单的方式,下面是一个示例代码片段:

[objc] view plain
[[UINavigationBar appearance] setTintColor:[UIColor whiteColor]];
效果如下:

全是系统的图标和文字,这回看着舒服了,有木有?【除了后退按钮,请注意,tintColor属性影响所有按钮标题和按钮图像】

最后举个例子,另外一种实现自定义导航控制器返回按钮,代码如下:

[objc] view plain
[self.navigationController.navigationBar setTitleTextAttributes:@{: [UIColor redColor],NSFontAttributeName:[UIFont systemFontOfSize:19.0]}];

self.title=[NSString stringWithFormat:@"第%lu页",(unsigned long)self.navigationController.viewControllers.count];

//自定义返回按钮
UIImage *backButtonImage = [[UIImage imageNamed:@"fanhui.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 30, 0, 0)];
[[UIBarButtonItem appearance] setBackButtonBackgroundImage:backButtonImage forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
//将返回按钮的文字position设置不在屏幕上显示
[[UIBarButtonItem appearance] :UIOffsetMake(NSIntegerMin, NSIntegerMin) forBarMetrics:UIBarMetricsDefault];

效果如下:

最后说一下使用pushViewController切换到下一个视图时,navigation controller按照以下3条顺序更改导航栏的左侧按钮(本段摘自网络):
1、如果B视图有一个自定义的左侧按钮(leftBarButtonItem),则会显示这个自定义按钮;
2、如果B没有自定义按钮,但是A视图的backBarButtonItem属性有自定义项,则显示这个自定义项;
3、如果前2条都没有,则默认显示一个后退按钮,后退按钮的标题是A视图的标题;