Iphone界面设计中的小知识点整理
2011-09-05 22:13
225 查看
一、NavigationBar(导航栏)
1、修改导航栏文字颜色。
默认的文字颜色为白色,可以通过方法修改为自己想要的颜色://设置一个label UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0,0,100,30)]; //设置label属性 label.font = [UIFont systemFontOfSize:20.0]; label.textColor = [UIColor blueColor];//设置为蓝色 label.backgroundColor = [UIColor clearColor]; label.textAlignment = UITextAlignmentCenter; label.text = @"Mytest"; self.navigationItem.titleView = label; [label release];
效果如图一所示:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/18/76351ed83b88d991f254abdf5cbec15f.gif)
图一
2、修改导航栏背景颜色。
默认的导航栏颜色如上图所示,这里的修改颜色包含修改为目标颜色及设置自己的背景图。1)、设置为目标颜色,可以通过如下方法实现:
self.navigationController.navigationBar.tintColor = [UIColor greenColor];//设置为绿色
效果如图二所示:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/18/05b7465994c64b023d75a580082da8f2.gif)
图二
2)、设置目标图片作为背景,可以通过如下方法:
一种方法是通过重载UINavigationBar的drawRect方法,具体如下:
@implementation UINavigationBar (CustomImage) - (void )drawRect:(CGRect)rect { UIImage *image = [UIImage imageNamed: @"background.png" ]; [image drawInRect:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height)]; } @end
不过这样会导致后面所有的页面都是一个风格。
在实际中,假如应用程序前面有些页面是图三的导航栏,后面的页面是图四的导航栏,则我们可以为UINavigationBar添加新的方法,实现如下:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/18/681b6dfab6e079ff13e0a40c576a5d19.gif)
图三
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/18/d9eeb2ec70cc0d3c176de64f39f4ed95.gif)
图四
新建两个文件,分别为CustomNav.h和CustomNav.m,对应的内容分别为
#define kSCNavBarImageTag 6183746 //CustomNavigationBar.h @interface UINavigationBar (UINavigationBarCategory) - (void)setBackgroundImage:(UIImage*)image; @end
//////////////////////////////////////////////////////////////////////////////////////////////////////////
#import "CustomNav.h" @implementation UINavigationBar (UINavigationBarCategory) -(void)setBackgroundImage:(UIImage*)image { UIImageView *bgView = (UIImageView *)[self viewWithTag:kSCNavBarImageTag]; if (bgView != nil) { [bgView removeFromSuperview]; } if (image != nil) { bgView = [[UIImageView alloc] initWithImage:image]; [bgView setTag:kSCNavBarImageTag]; bgView.frame = CGRectMake(0.f, 0.f, self.frame.size.width, self.frame.size.height); bgView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight; [self insertSubview:bgView atIndex:0]; [self sendSubviewToBack:bgView]; [bgView release]; } } @end
在对应的页面添加头文件,使用方法为:
[self.navigationController.navigationBar setBackgroundImage:[UIImage imageNamed: @"background.png" ]] ;
则显示结果如下:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/18/e55380280742241ba38701c9d203955d.gif)
图五
页面显示了该导航栏效果,如果想取消该效果,显示另外的导航栏,则在viewWillAppear添加如下代码:
[self.navigationController.navigationBar setBackgroundImage:nil];
二、TabBar(标签页)
1、修改标签页背景颜色。
默认的标签页颜色为黑色,如图六所示:![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/18/fba460c1ef7e38fb2ac6a1240e27fcf9.gif)
图六
则可以通过以下方法修改颜色,假如修改为蓝色,如图七所示:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/18/0ef7155dc895cc60b015212475cbb30a.gif)
图七
新建两个文件,分别为CustomUITabBarController.h和CustomUITabBarController.m,对应的内容分别为
#import <Foundation/Foundation.h> @interface CustomUITabBarController:UITabBarController{ } @end
//////////////////////////////////////////////////////////////////////////////////////////////////////////////
#import "CustomUITabBarController.h" @interface UITabBarController (customTabBar) -(UITabBar *) tabBar; @end; @implementation CustomUITabBarController -(void) viewDidLoad{ [super viewDidLoad]; CGRect frame=CGRectMake(0.0,0.0,self.view.bounds.size.width,48); UIView *view=[[UIView alloc] initWithFrame:frame]; [view setBackgroundColor:kMainColor]; [view setAlpha:0.5]; [[self tabBar] insertSubView:viewatIndex:0]; [view release]; } @end
使用方法,首先添加该头文件,方法与UITabBarController一致。
三、StatusBar(状态栏)
1、修改状态栏颜色。
状态栏默认的颜色如图八,为Gray style(default)![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/18/fe828b113d098fb75bf26779a40c0b20.gif)
可以通过修改工程中的Info.plist,该文件主要是用于应用程序的图标、状态栏(缺省样式、黑色、隐藏)、应用的方向要求、是否需要WIFI网络等。在里面选择“Status bar style”为“Opaque black style”;或者通过代码
[application setStatusBarStyle:UIStatusBarStyleBlackOpaque];
通过设置,则显示如图九效果:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/18/3160eeee1b38d620b1787f69feccf5ff.gif)
2、隐藏状态栏。
状态栏的默认状态是显示的,可以通过修改Info.plist,在里面添加一行设置“Status bar is initially hidden”,里面选择“YES”,则可以隐藏状态栏;同样也可以在viewLoad中,添加代码:[[UIApplication sharedApplication] setStatusBarHidden:YES];
如图十效果:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/18/f26859c070f7b0ac636a89e6c7e25111.gif)
相关文章推荐
- WPF界面设计知识点整理
- OTA 知识点整理从添加分区到界面设计
- iPad、iPhone 界面设计标准
- iPad、iPhone界面元素设计标准(简洁版)
- ios iphone app界面设计尺寸规范
- iPad和iPhone App界面设计的30个案例【转】
- 45套精美的 ( Android, iPhone, iPad ) 手机界面设计素材和线框图设计工具
- 26款能够吸引用户的 iPhone App 界面设计
- 吸墨网iPhone手机客户端界面设计
- Android与iPhone应用程序界面设计的差异性
- iphone UI界面人性化设计体验
- 45套精美的 ( Android, iPhone, iPad ) 手机界面设计素材和线框图设计工具
- iPhone、iPad、iPadMini界面设计标准
- iPad、iPhone 界面设计标准
- 30个iPhone和iPad应用程序界面设计实例
- 对WEB前端的几段思考(一)——界面设计和性能优化(整理中)
- iPhone、iPad等iOS系统界面设计字体规范
- [设计理论] 开发iPhone软件界面流程
- 功能和界面测试用例设计方法整理
- iPhone X 界面设计尺寸和适配【完整版】