设备、像素和点 、 9切片技术 、 颜色和外观 、 NavigationBar的美化
1 TMessage项目的输入面板界面
1.1 问题
IOS中经常会使用到九切片技术对图片进行处理。本案例使用九切片技术完成Tmessage项目的输入板界面,如图-1所示:
图-1
1.2 方案
首先创建一个SingleViewApplication项目,在Storyboard中根据界面需求拖放控件到场景中,首先拖放一个适当大小的View控件作为输入面板界面,输入面板的各个控件为View的子视图。
其次在View上拖放一个一样大小的ImageView控件作为输入面板的背景图,在View上面拖放三个按钮和一个TextField控件,最后拖放一个ImageView控件,同TextField一样大小作为TextField的背景图片,并且TextField是覆盖在ImageView上面的。
然后分别将作为输入面板背景的ImageView、TextField、以及作为TextField背景的ImageView关联成TRViewController的属性backgroundView、textField以及textFieldBkgView。
最后在TRViewController的viewDidLoad方法中以代码的方式使用九切片技术给backgroundView和textFieldBkgView设置图片。
1.3 步骤
实现此案例需要按照如下步骤进行。
步骤一:在Storyboard中搭建界面
创建一个SingleViewApplication项目,在Storyboard中根据界面需求拖放控件到场景中。
首先拖放一个适当大小的View控件作为输入面板界面,输入面板的各个控件为View的子视图。
其次在View上拖放一个一样大小的ImageView控件作为输入面的背景图,在View上面拖放三个按钮和一个TextField控件,然后拖放一个ImageView控件,同TextField一样大小作为TextField的背景图片,并且TextField是覆盖在ImageView上面的。
最后Stroyboard完成效果如图-2所示:
图-2
步骤二:设置TMessage的背景图片
首先分别将作为输入面板背景的ImageView、TextField、以及作为TextField背景的ImageView关联成TRViewController的属性backgroundView、textField以及textFieldBkgView,代码如下所示:
- @interface TRViewController ()
- @property (weak, nonatomic) IBOutlet UIImageView *backgroundView;
- @property (weak, nonatomic) IBOutlet UITextField *textField;
- @property (weak, nonatomic) IBOutlet UIImageView *textFieldBkgView;
- @end
然后在TRViewController的viewDidLoad方法中使用UIImage提供的方法resizableImageWithCapInsets: resizingMode:,对图片进行九切片处理,分别给backgroundView和textFieldBkgView设置图片,代码如下所示:
- - (void)viewDidLoad
- {
- [super viewDidLoad];
- UIImage *backgroundImage = [UIImage imageNamed:@"ToolViewBkg_Black.png"];
- backgroundImage = [backgroundImage resizableImageWithCapInsets:UIEdgeInsetsMake(2, 3, 2, 3) resizingMode:UIImageResizingModeStretch];
- self.backgroundView.image = backgroundImage;
- UIImage *textFieldImage = [UIImage imageNamed:@"SendTextViewBkg.png"];
- self.textFieldBkgView.image = [textFieldImage resizableImageWithCapInsets:UIEdgeInsetsMake(10, 10, 10, 10) resizingMode:UIImageResizingModeStretch];
- }
1.4 完整代码
本案例中,TRViewController.m文件中的完整代码如下所示:
- #import "TRViewController.h"
- @interface TRViewController ()
- @property (weak, nonatomic) IBOutlet UIImageView *backgroundView;
- @property (weak, nonatomic) IBOutlet UITextField *textField;
- @property (weak, nonatomic) IBOutlet UIImageView *textFieldBkgView;
- @end
- @implementation TRViewController
- - (void)viewDidLoad
- {
- [super viewDidLoad];
- UIImage *backgroundImage = [UIImage imageNamed:@"ToolViewBkg_Black.png"];
- backgroundImage = [backgroundImage resizableImageWithCapInsets:UIEdgeInsetsMake(2, 3, 2, 3) resizingMode:UIImageResizingModeStretch];
- self.backgroundView.image = backgroundImage;
- UIImage *textFieldImage = [UIImage imageNamed:@"SendTextViewBkg.png"];
- self.textFieldBkgView.image = [textFieldImage resizableImageWithCapInsets:UIEdgeInsetsMake(10, 10, 10, 10) resizingMode:UIImageResizingModeStretch];
- }
- @end
2 使用Asset Catalog组件对图片进行9切片处理
2.1 问题
Asset Catalog组件可以用来统一的管理项目中的图片等资源,还提供对图片资源的设备适配,高清,拉伸等支持,也提供9切片技术的支持。本案例将学习如何使用Asset Catalo组件对图片进行9切片处理,如图-3所示:
图-3
2.2 方案
首先在Storyboard中拖放一个Button控件和一个ImageView控件。然后可以在右边栏的检查器中直接设置Button和ImageView 的图片,但是需要先导入图片。
在Xcode的导航栏中选中Images.xcassets,在空白处点击右键,在弹出的窗口中选择New Image Set,可以重新命名为button。将button的不同尺寸的图片到右边的界面中相应的位置,一般图片都有两个尺寸一个是原始大小,一个是扩大两倍的大小,为Retina屏准备的。
然后点击右下角的Show Slicing,通过移动图片的分割线设定九切片上下左右保留的像素,在右边栏的检查器三中设置切片模式,按钮采用的是拉升模式所以选择Stretches,检查器中同样也可以手动设置上下左右保留的像素点。
以同样的方式将ImageView的图片也导入到Images.xcassets中,命名为seperator,切片模式则选择为平铺Tiles。
最后可以直接在Storyboard中设置Button和ImageView的图片了,不需要再写额外的代码了。
2.3 步骤
实现此案例需要按照如下步骤进行。
步骤一:导入图片到Images.xcassets中
首先在Storyboard中拖放一个Button控件和一个ImageView控件。然后可以在右边栏的检查器中直接设置Button和ImageView 的图片,但是需要先导入图片。
在Xcode的导航栏中选中Images.xcassets,在空白处点击右键,在弹出的窗口中选择New Image Set,如图-4所示:
图-4
将新创建的ImageSet重新命名为button,然后将button的不同尺寸的图片到右边的界面中相应的位置,一般图片都有两个尺寸一个是原始大小,一个是扩大两倍的大小,为Retina屏准备的,如图-5所示:
图-5
步骤二:在ImageSet中设置图片
点击右下角的Show Slicing,通过移动图片的分割线设定九切片上下左右保留的像素,两张图片都要设置,如图-6所示:
图-6
然后在右边栏的检查器三中设置切片模式,按钮采用的是拉升模式所以选择Stretches,检查器中同样也可以手动设置上下左右保留的像素点,如图-7所示:
图-7
最后以同样的方式将ImageView的图片也导入到Images.xcassets中,命名为seperator,切片模式则选择为平铺Tiles,如图-8、图-9所示:
图-8
图-9
步骤三:在Storyboard中设置控件的图片
在Storyboard中分别将Button控件和ImageView控件的image设置为button和seperator,如图-10、图-11所示:
图-10
图-11
在Stroyboard的场景中可以看到图片已经按九切片的方式设置完成,如图-12所示:
图-12
3 给各控件美化背景图片
3.1 问题
UIButton 、UITextField 、UISlider、 UISwitch等控件一般有正常、高亮、被选中以及不可用等几种状态,本案例根据控件的不同状态设置图片,如图-13所示:
图-13
3.2 方案
首先根据Button控件的状态设置image,可以在Storyboard里面直接设置也可以通过代码设置。在Storyboard里面拖放一个Button控件,在右边栏的检查器四中选择按钮状态,选择相应的图片。
然后在viewDidLoad方法中创建一个UIButton对象button,使用方法setImage:forState:根据按钮状态设置图片。
最后在Storyboard里面拖放一个Slider控件,将Slider关联成TRViewController的属性slider,在viewDidLoad方法中使用代码设置slider滑块按钮以及进度条的图片。
3.3 步骤
实现此案例需要按照如下步骤进行。
步骤一:根据Button的状态设置图片
首先在Storyboard里面拖放一个Button控件,在右边栏的检查器四中选择按钮的正常状态和高亮状态,选择相应的图片,如图-14、图-15所示:
图-14
图-15
然后在viewDidLoad方法中创建一个UIButton对象button,使用方法setImage:forState:根据按钮状态设置图片,代码如下所示:
- - (void)viewDidLoad
- {
- [super viewDidLoad];
- UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
- button.frame = CGRectMake(200, 160, 35, 35);
- [button setImage:[UIImage imageNamed:@"ToolViewEmotion"] forState:UIControlStateNormal];
- [button setImage:[UIImage imageNamed:@"ToolViewEmotionHL"] forState:UIControlStateHighlighted];
- [self.view addSubview:button];
- }
运行程序,发现通过Storyboard设置图片和代码方式设置图片,点击按钮的效果是一样的。
步骤二:设置滑块控件Slider的图片
在Storyboard里面拖放一个Slider控件,将Slider关联成TRViewController的属性slider,代码如下所示:
- @interface TRViewController ()
- @property (weak, nonatomic) IBOutlet UISlider *slider;
- @end
最后在viewDidLoad方法中使用UIImage的九切片方法创建图片,再将图片设置为slider滑块按钮以及进度条的图片,注意slider的minimumTrackImage和maximumTrackImage必须同时设置才能生效,代码如下所示:
- - (void)viewDidLoad
- {
- [super viewDidLoad];
- UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
- button.frame = CGRectMake(200, 160, 35, 35);
- [button setImage:[UIImage imageNamed:@"ToolViewEmotion"] forState:UIControlStateNormal];
- [button setImage:[UIImage imageNamed:@"ToolViewEmotionHL"] forState:UIControlStateHighlighted];
- [self.view addSubview:button];
- UIImage *image = [UIImage imageNamed:@"playing_volumn_slide_foreground.png"];
- image = [image resizableImageWithCapInsets:UIEdgeInsetsMake(2, 2, 2, 2) resizingMode:UIImageResizingModeStretch];
- [self.slider setMinimumTrackImage:image forState:UIControlStateNormal];
- UIImage *bgImage = [UIImage imageNamed:@"playing_volumn_slide_bg.png"];
- bgImage = [bgImage resizableImageWithCapInsets:UIEdgeInsetsMake(2, 2, 2, 2) resizingMode:UIImageResizingModeStretch];
- [self.slider setMaximumTrackImage:bgImage forState:UIControlStateNormal];
- UIImage *thumbImage = [UIImage imageNamed:@"playing_volumn_slide_sound_icon.png"];
- [self.slider setThumbImage:thumbImage forState:UIControlStateNormal];
- }
3.4 完整代码
本案例中,TRViewController.m文件中的完整代码如下所示:
- #import "TRViewController.h"
- @interface TRViewController ()
- @property (weak, nonatomic) IBOutlet UISlider *slider;
- @end
- @implementation TRViewController
- - (void)viewDidLoad
- {
- [super viewDidLoad];
- UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
- button.frame = CGRectMake(200, 160, 35, 35);
- [button setImage:[UIImage imageNamed:@"ToolViewEmotion"] forState:UIControlStateNormal];
- [button setImage:[UIImage imageNamed:@"ToolViewEmotionHL"] forState:UIControlStateHighlighted];
- [self.view addSubview:button];
- UIImage *image = [UIImage imageNamed:@"playing_volumn_slide_foreground.png"];
- image = [image resizableImageWithCapInsets:UIEdgeInsetsMake(2, 2, 2, 2) resizingMode:UIImageResizingModeStretch];
- [self.slider setMinimumTrackImage:image forState:UIControlStateNormal];
- UIImage *bgImage = [UIImage imageNamed:@"playing_volumn_slide_bg.png"];
- bgImage = [bgImage resizableImageWithCapInsets:UIEdgeInsetsMake(2, 2, 2, 2) resizingMode:UIImageResizingModeStretch];
- [self.slider setMaximumTrackImage:bgImage forState:UIControlStateNormal];
- UIImage *thumbImage = [UIImage imageNamed:@"playing_volumn_slide_sound_icon.png"];
- [self.slider setThumbImage:thumbImage forState:UIControlStateNormal];
- }
- @end
4 给各控件进行颜色美化
4.1 问题
tintColor是视图的一个属性,可以统一的管理一个视图中所有子视图以及子视图的子视图的颜色,还可以批量的修改视图的颜色。本案例使用tintColor属性给控件进行颜色美化,查看父视图和子视图tintColor之间的关系,如图-16所示:
图-16
4.2 方案
首先给Storyboard中的场景嵌套一个NavigationController,然后在场景上面拖放两个Button控件,在右边栏的检查器中将其中一个Button的tintColor进行设置为枚红色,另一个Button的tintColor不做额外设置。
然后在TRAppDelegate里面将window的tintColor颜色设置为紫色,运行程序发现自定义了tintColor的Button颜色不会改变还是自定义的颜色,未设置tintColor的Button颜色发生了改变,变成了window的tintColor颜色。
再在场景中任意拖放几个控件(Slider,Switch,SegmentedControl),分别都设置各自的tintColor,运行程序发现自定义tintColor的控件都会显示自己的tintColor颜色,而不会显示window的tintColor颜色。
其次在Storyboard中新创建一个场景,由第一个场景中的按钮Push过来,给第二个场景的View设置tintColor为绿色,往第二个场景上拖放几个任意的控件(Slider,Switch,Button,SegmentedControl),各个控件的tintColor会自动的变为绿色,这就是tintColor批量设置颜色的功能。
然后将第二个场景中的某个控件的tintColor进行自定义,例如将Slider的tintColor设置为蓝色,运行程序发现其他控件的tintColor和View一样是绿色,Slider控件的tintColor则是自定义的蓝色。
最后在Stroyboard中再创建一个新的场景,由第二个场景的按钮Push出来,在上面拖放几个任意的控件(Slider,Switch,Button,SegmentedControl),第三个场景不做任何tintColor的设置,运行程序发现控件显示的是window的tintColor颜色,由此可以看出如果一个控件没有设置tintColor,那么它会显示父视图的tintColor,如果父视图未设置会显示父视图的父视图的tintColor,以此类推。
4.3 步骤
实现此案例需要按照如下步骤进行。
步骤一:设置windoe的tintColor
首先给Storyboard中的场景嵌套一个NavigationController,然后在场景上面拖放两个Button控件,在右边栏的检查器中将其中一个Button的tintColor进行设置为枚红色,另一个Button的tintColor不做额外设置,如图-17所示:
图-17
然后在TRAppDelegate里面将window的tintColor颜色设置为紫色,代码如下所示:
- -(BOOL)application:(UIApplication *)application
- didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
- {
- self.window.tintColor = [UIColor colorWithRed:115.0/255 green:38.0/255 blue:239.0/255 alpha:0.9];
- return YES;
- }
运行程序发现自定义了tintColor的Button颜色不会改变还是自定义的颜色,未设置tintColor的Button颜色发生了改变,变成了window的tintColor颜色,如图-18所示:
图-18
最后在场景中任意拖放几个控件(Slider,Switch,SegmentedControl),分别都设置各自的tintColor,运行程序发现自定义tintColor的控件都会显示自己的tintColor颜色,而不会显示window的tintColor颜色,如图-19所示:
图-19
步骤二:设置View的tintColor
在Storyboard中新创建一个场景,由第一个场景中的按钮Push过来,给第二个场景的View设置tintColor为绿色,往第二个场景上拖放几个任意的控件(Slider,Switch,Button,SegmentedControl),各个控件的tintColor会自动的变为绿色,这就是tintColor批量设置颜色的功能,如图-20所示:
图-20
然后将第二个场景中的某个控件的tintColor进行自定义,例如将Slider的tintColor设置为蓝色,运行程序发现其他控件的tintColor和View一样是绿色,Slider控件的tintColor则是自定义的蓝色,如图-21所示:
图-21
步骤三:父视图和子视图tintColor之间的关系
在Stroyboard中再创建一个新的场景,由第二个场景的按钮Push出来,在上面拖放几个任意的控件(Slider,Switch,Button,SegmentedControl),第三个场景不做任何tintColor的设置,如图-22所示:
图-22
运行程序发现控件显示的是window的tintColor颜色,如图-23所示:
图-23
由此可以看出如果一个控件没有设置tintColor,那么它会显示父视图的tintColor,如果父视图未设置会显示父视图的父视图的tintColor,以此类推。
4.4 完整代码
本案例中,TRAppDelegate.m文件中的完整代码如下所示:
- #import "TRAppDelegate.h"
- @implementation TRAppDelegate
- -(BOOL)application:(UIApplication *)application
- didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
- {
- self.window.tintColor = [UIColor colorWithRed:115.0/255 green:38.0/255 blue:239.0/255 alpha:0.9];
- return YES;
- }
- @end
5 使用UIAppearance美化控件
5.1 问题
UIAppearance是一个协议,遵守此协议的对象可以批量设置某种控件的外观,例如:颜色、贴图等。本案例使用UIAppearance美化控件,如图-24所示:
图-24
5.2 方案
首先在Storyboard的场景中拖放三个Button控件、一个SegmentedControl控件、一个Slider控件、一个ProgressView。在右边栏的检查器中给三个Button设置不同的字体颜色。
然后在TRAppDelegate的程序入口方法中通过静态方法appearance返回的对象设置UIButton类型控件的背景图片和tintColor,设置其他类型控件的的tintColor。
使用UIAppearance的好处就是可以对同一种类型的控件进行批量设置。
5.3 步骤
实现此案例需要按照如下步骤进行。
步骤一:创建TRBezierPathView类
首先在Storyboard的场景中拖放三个Button控件、一个SegmentedControl控件、一个Slider控件、一个ProgressView。在右边栏的检查器中给三个Button设置不同的字体颜色,如图-25所示:
图-25
步骤二:通过UIAppearance美化控件
在TRAppDelegate的程序入口方法中通过静态方法appearance返回的对象设置UIButton类型控件的背景图片和tintColor,代码如下所示:
- - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
- {
- UIImage *image = [UIImage imageNamed:@"delete_btn"];
- UIImage *image2 = [image resizableImageWithCapInsets:UIEdgeInsetsMake(5, 5, 5, 5) resizingMode:UIImageResizingModeStretch];
- [[UIButton appearance] setBackgroundImage:image2 forState:UIControlStateNormal];
- [[UIButton appearance] setTintColor:[UIColor yellowColor]];
- return YES;
- }
运行程序可以看到三个Button控件的背景图片都被设置了,由于三个Button都设置了各自的文字颜色,所以通过appearance设置的tintColor没有起作用。
然后设置其他控件的tintColor,代码如下所示:
- - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
- {
- UIImage *image = [UIImage imageNamed:@"delete_btn"];
- UIImage *image2 = [image resizableImageWithCapInsets:UIEdgeInsetsMake(5, 5, 5, 5) resizingMode:UIImageResizingModeStretch];
- [[UIButton appearance] setBackgroundImage:image2 forState:UIControlStateNormal];
- [[UIButton appearance] setTintColor:[UIColor yellowColor]];
- [UISlider appearance].tintColor = [UIColor redColor];
- [UISegmentedControl appearance].tintColor = [UIColor greenColor];
- [UIProgressView appearance].tintColor = [UIColor grayColor];
- return YES;
- }
运行程序可以看到其他控件的tintColor都显示出来。
5.4 完整代码
本案例中,TRAppDelegate.m文件中的完整代码如下所示:
- #import "TRAppDelegate.h"
- @implementation TRAppDelegate
- - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
- {
- UIImage *image = [UIImage imageNamed:@"delete_btn"];
- UIImage *image2 = [image resizableImageWithCapInsets:UIEdgeInsetsMake(5, 5, 5, 5) resizingMode:UIImageResizingModeStretch];
- [[UIButton appearance] setBackgroundImage:image2 forState:UIControlStateNormal];
- [[UIButton appearance] setTintColor:[UIColor yellowColor]];
- [UISlider appearance].tintColor = [UIColor redColor];
- [UISegmentedControl appearance].tintColor = [UIColor greenColor];
- [UIProgressView appearance].tintColor = [UIColor grayColor];
- return YES;
- }
- @end
6 美化导航栏NavigationBar
6.1 问题
本案例对导航栏的背景,标题以及状态栏进行设置和美化,如图-26所示:
图-26
6.2 方案
首先在Storyboard中,拖放两个场景分别和TRViewController类和TROtherViewController类绑定。将场景嵌入NavigationController,并在导航栏上面添加一个BarButtonItem,点击按钮Push到第二个场景。
第一步先设置导航栏的tintColor,navigaitonBar有两个属性tintColor和barTintColor,tintColor可以设置导航栏的背景颜色和导航栏子视图的背景颜色,如果只需要设置导航栏的背景颜色,那么设置barTintColor即可。
首先在viewDidLoad里面获取到当前的navigaitionBar对象,设置tintColor属性,并且使用方法setBackgroundImage:forBarMetrics:给navigationBar设置背景图片。
其次设置back按钮的图片,设置navigationBar的backIndicatorImage和backIndicatorTransitionMaskImage属性即可。
然后设置导航栏的标题字体,导航栏标题的文字可以通过setTitleTextAttributes:方法进行设置,atrributes是一个NSDictionary类型的参数,记录标题文字各种属性,包括字体、颜色、字体大小等。
再在Storyboard的场景中拖放一个Button控件,关联成TRViewController的方法hideNavigationBar:,该方法用于实现导航栏的隐藏和显示。
最后设置状态栏,重写方法preferredStatusBarStyle进行状态栏的设置,但是如果存在NavigationBar,那么状态栏的风格由NavigationBar决定,该方法对状态栏的设置则无效。
6.3 步骤
实现此案例需要按照如下步骤进行。
步骤一:设置状态栏的tintColor、图片和back按钮
首先在Storyboard中,拖放两个场景分别和TRViewController类和TROtherViewController类绑定。将场景嵌入NavigationController,并在导航栏上面添加一个BarButtonItem,点击按钮Push到第二个场景。
然后设置导航栏的tintColor和图片,在viewDidLoad里面获取到当前的navigaitionBar对象,设置tintColor属性并且使用方法setBackgroundImage:forBarMetrics:给navigationBar设置背景图片,代码如下所示:
- - (void)viewDidLoad
- {
- [super viewDidLoad];
- UINavigationBar *navigationBar = self.navigationController.navigationBar;
- //设置导航栏的tintColor
- navigationBar.tintColor = [UIColor redColor];
- //是否半透明
- navigationBar.translucent = YES;
- //设置导航栏的barTintColor
- navigationBar.barTintColor = [UIColor lightGrayColor];
- //设置导航栏的背景图片
- [navigationBar setBackgroundImage:[UIImage imageNamed:@"navi1"] forBarMetrics:UIBarMetricsDefault];
- //设置横屏状态下的导航栏的背景图片
- [navigationBar setBackgroundImage:[UIImage imageNamed:@"navi2"] forBarMetrics:UIBarMetricsLandscapePhone];
- }
运行程序可以看到竖屏和横屏的导航栏背静图片不一样,如图-27、图-28所示:
图-27
图-28
最后设置back按钮的图片,设置navigationBar的backIndicatorImage和backIndicatorTransitionMaskImage属性即可,代码如下所示:
- - (void)viewDidLoad
- {
- [super viewDidLoad];
- UINavigationBar *navigationBar = self.navigationController.navigationBar;
- navigationBar.tintColor = [UIColor redColor];
- navigationBar.translucent = YES;
- navigationBar.barTintColor = [UIColor lightGrayColor];
- [navigationBar setBackgroundImage:[UIImage imageNamed:@"navi1"] forBarMetrics:UIBarMetricsDefault];
- [navigationBar setBackgroundImage:[UIImage imageNamed:@"navi2"] forBarMetrics:UIBarMetricsLandscapePhone];
- navigationBar.backIndicatorImage = [UIImage imageNamed:@"back_btn"];
- navigationBar.backIndicatorTransitionMaskImage = [UIImage imageNamed:@"back_btn"];
- }
运行效果如图-29所示:
图-29
步骤二:设置导航栏标题
导航栏标题的文字可以通过setTitleTextAttributes:方法进行设置,atrributes是一个NSDictionary类型的参数,记录标题文字各种属性,包括字体、颜色、字体大小等,代码如下所示:
- - (void)viewDidLoad
- {
- [super viewDidLoad];
- UINavigationBar *navigationBar = self.navigationController.navigationBar;
- navigationBar.tintColor = [UIColor redColor];
- navigationBar.translucent = YES;
- navigationBar.barTintColor = [UIColor lightGrayColor];
- [navigationBar setBackgroundImage:[UIImage imageNamed:@"navi1"] forBarMetrics:UIBarMetricsDefault];
- [navigationBar setBackgroundImage:[UIImage imageNamed:@"navi2"] forBarMetrics:UIBarMetricsLandscapePhone];
- navigationBar.backIndicatorImage = [UIImage imageNamed:@"back_btn"];
- navigationBar.backIndicatorTransitionMaskImage = [UIImage imageNamed:@"back_btn"];
- [navigationBar setTitleTextAttributes:@{
- NSFontAttributeName : [UIFont italicSystemFontOfSize:30],NSForegroundColorAttributeName : [UIColor greenColor]
- }];
- }
运行程序,导航栏的标题如图-30所示:
图-30
然后在Storyboard的场景中拖放一个Button控件,关联成TRViewController的方法hideNavigationBar:,该方法用于实现导航栏的隐藏和显示,点击按钮可以将导航栏隐藏再次点击可以显示,代码如下所示:
- - (IBAction)hideNavigationBar:(id)sender {
- [self.navigationController setNavigationBarHidden:!self.navigationController.navigationBarHidden animated:YES];
- }
步骤三:设置状态栏
状态栏的设置方式是通过在TRViewController类中重写方法preferredStatusBarStyle进行状态栏样式的设置,重写方法prefersStatusBarHidden设置是否隐藏状态栏,但是如果存在NavigationBar,那么状态栏的风格由NavigationBar决定,该方法对状态栏的设置则无效。,代码如下所示:
- //设置状态栏的样式
- - (UIStatusBarStyle)preferredStatusBarStyle
- {
- return UIStatusBarStyleLightContent;
- }
- //是否隐藏状态栏
- - (BOOL)prefersStatusBarHidden
- {
- return NO;
- }
运行程序可以看出,隐藏导航栏和显示导航栏的时候,状态栏的样式是不一样的,如图-31、图-32所示:
图-31
图-32
6.4 完整代码
本案例中,TRViewController.m文件中的完整代码如下所示:
- #import "TRViewController.h"
- @implementation TRViewController
- - (void)viewDidLoad
- {
- [super viewDidLoad];
- UINavigationBar *navigationBar = self.navigationController.navigationBar;
- //设置导航栏的tintColor
- navigationBar.tintColor = [UIColor redColor];
- //是否半透明
- navigationBar.translucent = YES;
- //设置导航栏的barTintColor
- navigationBar.barTintColor = [UIColor lightGrayColor];
- //设置导航栏的背景图片
- [navigationBar setBackgroundImage:[UIImage imageNamed:@"navi1"] forBarMetrics:UIBarMetricsDefault];
- //设置横屏状态下的导航栏的背景图片
- [navigationBar setBackgroundImage:[UIImage imageNamed:@"navi2"] forBarMetrics:UIBarMetricsLandscapePhone];
- navigationBar.backIndicatorImage = [UIImage imageNamed:@"back_btn"];
- navigationBar.backIndicatorTransitionMaskImage = [UIImage imageNamed:@"back_btn"];
- [navigationBar setTitleTextAttributes:@{
- NSFontAttributeName : [UIFont italicSystemFontOfSize:30],NSForegroundColorAttributeName : [UIColor greenColor]
- }];
- }
- //设置状态栏的样式
- - (UIStatusBarStyle)preferredStatusBarStyle
- {
- return UIStatusBarStyleLightContent;
- }
- //是否隐藏状态栏
- - (BOOL)prefersStatusBarHidden
- {
- return NO;
- }
- - (IBAction)hideNavigationBar:(id)sender {
- [self.navigationController setNavigationBarHidden:!self.navigationController.navigationBarHidden animated:YES];
- }
- @end
7 给TableViewCell进行贴图美化
7.1 问题
表视图的单元格的背景也同样可以进行美化,本案例对TableView的单元格不同的状态进行贴图美化,如图-33所示:
图-33
7.2 方案
首先在Storyboard文件创建一个带有导航的表视图控制器,该视图控制器管理的是一个动态表视图,并和TRMyTableViewController类进行绑定。
然后TRMyTableViewController类中实现三问给表视图加载数据,给单元格进行美化的代码主要写在cellForRowAtIndexPath:方法,即创建cell代码之后。
主要是通过设置cell的backgroundView属性和selectedBackgroundView属性进行美化,selectedBackgroundView是单元格被选中之后的样式。
7.3 步骤
实现此案例需要按照如下步骤进行。
步骤一:创建表视图控制器项目
首先在Storyboard文件创建一个带有导航的表视图控制器,该视图控制器管理的是一个动态表视图,并和TRMyTableViewController类进行绑定。
然后TRMyTableViewController类中实现三问给表视图加载数据,代码如下所示:
- -(NSInteger)tableView:(UITableView *)tableView
- numberOfRowsInSection:(NSInteger)section
- {
- return 10;
- }
- -(UITableViewCell *)tableView:(UITableView *)tableView
- cellForRowAtIndexPath:(NSIndexPath *)indexPath
- {
- static NSString *CellIdentifier = @"MyCell";
- UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier forIndexPath:indexPath];
- cell.textLabel.text = @"Hello World.";
- return cell;
- }
步骤二:美化单元格
给单元格进行美化的代码主要写在cellForRowAtIndexPath:方法,即创建cell代码之后,主要是通过设置cell的backgroundView属性和selectedBackgroundView属性进行美化,selectedBackgroundView是单元格被选中之后的样式,代码如下所示:
- - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
- {
- static NSString *CellIdentifier = @"MyCell";
- UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier forIndexPath:indexPath];
- cell.textLabel.text = @"Hello World.";
- cell.backgroundView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"list"]];
- cell.selectedBackgroundView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"listSelected"]];
- return cell;
- }
7.4 完整代码
本案例中,TRMyTableViewController.m文件中的完整代码如下所示:
- #import "TRMyTableViewController.h"
- @implementation TRMyTableViewController
- #pragma mark - Table view data source
- - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
- {
- return 10;
- }
- - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
- {
- static NSString *CellIdentifier = @"MyCell";
- UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier forIndexPath:indexPath];
- cell.textLabel.text = @"Hello World.";
- cell.backgroundView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"list"]];
- cell.selectedBackgroundView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"listSelected"]];
- return cell;
- }
- @end
设备、像素和点 、 9切片技术 、 颜色和外观 、 NavigationBar的美化的更多相关文章
- CSS像素、物理像素、逻辑像素、设备像素比、PPI、Viewport
1.PX(CSS pixels) 1.1 定义 虚拟像素,可以理解为“直觉”像素,CSS和JS使用的抽象单位,浏览器内的一切长度都是以CSS像素为单位的,CSS像素的单位是px. 1.2 注意 在CS ...
- 设备像素比devicePixelRatio简单介绍
本文所说devicePixelRatio其实指的是window.devicePixelRatio, 被所有WebKit浏览器以及Opera所支持,随着显示器的发展,这个属性也慢慢登上了前端技术的舞台. ...
- 响应式设计:理解设备像素,CSS像素和屏幕分辨率
概述 屏幕分辨率.设备像素和CSS像素这些术语,在非常多语境下,是可互换的,但也因此easy在有差异的地方引起混淆,实际上它们是不同的概念. 屏幕分辨率和设备像素是物理概念,而CSS像素是WEB编程的 ...
- HTML-HTML5+CSS3权威指南阅读(五、设备像素和CSS像素的概念)
在这个迷你系列的文章里边我将会解释viewport,以及许多重要元素的宽度是如何工作的,比如<html>元素,也包括窗口和屏幕 这篇文章是关于桌面浏览器的,其唯一目的就是为移动浏览器中相似 ...
- 适配方案(五)适配的基础知识之设备像素比 dpr 与 1px 物理像素
设备像素比 dpr 与 1px 物理像素 物理像素(physical pixel) 手机屏幕上显示的最小单元,该最小单元具有颜色及亮度的属性可供设置,iphone6.7.8 为:750 * 1334, ...
- 理解设备像素、设备独立像素、css像素、viewport
设备像素也叫物理像素. 设备像素指的是显示器上的真实像素,每个像素的大小是屏幕固有的属性,屏幕出厂以后就不会改变了. 设备分辨率描述的就是这个显示器的宽和高分别是多少个设备像素. 设备像素和设备分辨率 ...
- CSS布局基础之一设备像素,设备独立像素,设备像素比,css像素之间的关系
设备像素dp(device pixels) ppi(pixels per inch)表示每英寸所拥有的像素(pixel)数目,数值越高,代表屏幕能以更高的密度显示图像. 计算公式:ppi=像素数量/物 ...
- 设备像素,设备独立像素,CSS像素
之前学了移动端的开发对设备像素.设备独立像素.CSS像素弄得不太清楚,所以趁周末的时间查了一下,稍加整理 一些概念 在进行具体的分析之前,首先得知道下面这些关键性基本概念. CSS像素 CSS像素是W ...
- 设备像素比dpr介绍
首先介绍一下概念 devicePixelRatio其实指的是window.devicePixelRatio window.devicePixelRatio是设备上物理像素和设备独立像素(device- ...
随机推荐
- jupyter
Pip install jupyter To run: jupyter notebook 基本操作 执行当前cell,并自动跳到下一个cell:Shift Enter 执行当前cell,执 ...
- checkbox改成radio效果,单选,取消
$(function () { var allBox = $(":checkbox"); allBox.click(function ( ...
- [转]C#综合揭秘——细说进程、应用程序域与上下文之间的关系
引言 本文主要是介绍进程(Process).应用程序域(AppDomain)..NET上下文(Context)的概念与操作.虽然在一般的开发当中这三者并不常用,但熟悉三者的关系,深入了解其作用,对提高 ...
- ORACLE 一致性读原理记录
什么是一致性读? 一致性读指的是在从查询那一刻起,中间的变化不予理会. 举例说明 比如我有两个帐户A,B. A 有1000块,B有1000快.我查询的时候查询速度比较慢.中间A转500到B账户. 已经 ...
- NetworkComms网络通信框架V3结构图
NetworkComms网络通信框架序言 来自英国的c#网络通信框架,历时五年打造,由英国剑桥的2位工程师倾情开发,最新版本V3.x版本.
- POJ 3687 逆序拓扑
额.题目大意:有N个球.编号和重量都是唯一不重复的.然后.给你m个pair a和b,表示编号为a的点一定比编号为b的点轻.然后捏.输出每个点对应的重量.关键是要求.如果有多种可能性的话,输出让序号小的 ...
- LAMP整理
LAMP第一部分 查看编译了哪些软件:是编译时自动生成的 Cat /usr/local/apache2/build/config.nice 网站根目录存放处: /usr/local/apache2/h ...
- js基础之动画(一)
一.让div动起来 var oBtn = document.getElementById('btn1'); var timer='';//设置定时器 oBtn.onclick=function st ...
- PHP 多线程扩展(正儿八经的线程)pthreads安装
环境CentOS 6.3 64bit,php 5.4.5 pthreads需要线程安全环境, 下载php的安装包,解压: tar zxvf php-5.4.5.tar.gz//名字是不是这个我不确定, ...
- 3.5缺少动态连接库.so--cannot open shared object file: No such file or directory
总结下来主要有3种方法:1. 用ln将需要的so文件链接到/usr/lib或者/lib这两个默认的目录下边 ln -s /where/you/install/lib/*.so /usr/lib sud ...