设备、像素和点 、 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，代码如下所示：

 
  1. @interface TRViewController ()
  2. @property (weak, nonatomic) IBOutlet UIImageView *backgroundView;
  3. @property (weak, nonatomic) IBOutlet UITextField *textField;
  4. @property (weak, nonatomic) IBOutlet UIImageView *textFieldBkgView;
  5. @end

然后在TRViewController的viewDidLoad方法中使用UIImage提供的方法resizableImageWithCapInsets: resizingMode:，对图片进行九切片处理，分别给backgroundView和textFieldBkgView设置图片，代码如下所示：

 
  1. - (void)viewDidLoad
  2. {
  3. [super viewDidLoad];
  4.     UIImage *backgroundImage = [UIImage imageNamed:@"ToolViewBkg_Black.png"];
  5. backgroundImage = [backgroundImage resizableImageWithCapInsets:UIEdgeInsetsMake(2, 3, 2, 3) resizingMode:UIImageResizingModeStretch];
  6. self.backgroundView.image = backgroundImage;
  8. UIImage *textFieldImage = [UIImage imageNamed:@"SendTextViewBkg.png"];
  9. self.textFieldBkgView.image = [textFieldImage resizableImageWithCapInsets:UIEdgeInsetsMake(10, 10, 10, 10) resizingMode:UIImageResizingModeStretch];
  10. }

1.4 完整代码

本案例中，TRViewController.m文件中的完整代码如下所示：

 
  1. #import "TRViewController.h"
  3. @interface TRViewController ()
  4. @property (weak, nonatomic) IBOutlet UIImageView *backgroundView;
  5. @property (weak, nonatomic) IBOutlet UITextField *textField;
  6. @property (weak, nonatomic) IBOutlet UIImageView *textFieldBkgView;
  7. @end
  9. @implementation TRViewController
  10. - (void)viewDidLoad
  11. {
  12. [super viewDidLoad];
  13.     UIImage *backgroundImage = [UIImage imageNamed:@"ToolViewBkg_Black.png"];
  14. backgroundImage = [backgroundImage resizableImageWithCapInsets:UIEdgeInsetsMake(2, 3, 2, 3) resizingMode:UIImageResizingModeStretch];
  15. self.backgroundView.image = backgroundImage;
  16. UIImage *textFieldImage = [UIImage imageNamed:@"SendTextViewBkg.png"];
  17. self.textFieldBkgView.image = [textFieldImage resizableImageWithCapInsets:UIEdgeInsetsMake(10, 10, 10, 10) resizingMode:UIImageResizingModeStretch];
  18. }
  19. @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:根据按钮状态设置图片，代码如下所示：

 
  1. - (void)viewDidLoad
  2. {
  3. [super viewDidLoad];
  4.     UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
  5. button.frame = CGRectMake(200, 160, 35, 35);
  6. [button setImage:[UIImage imageNamed:@"ToolViewEmotion"] forState:UIControlStateNormal];
  7. [button setImage:[UIImage imageNamed:@"ToolViewEmotionHL"] forState:UIControlStateHighlighted];
  8. [self.view addSubview:button];
  9. }

运行程序，发现通过Storyboard设置图片和代码方式设置图片，点击按钮的效果是一样的。

步骤二：设置滑块控件Slider的图片

在Storyboard里面拖放一个Slider控件，将Slider关联成TRViewController的属性slider，代码如下所示：

  1. @interface TRViewController ()
  2. @property (weak, nonatomic) IBOutlet UISlider *slider;
  3. @end

最后在viewDidLoad方法中使用UIImage的九切片方法创建图片，再将图片设置为slider滑块按钮以及进度条的图片，注意slider的minimumTrackImage和maximumTrackImage必须同时设置才能生效，代码如下所示：

 
  1. - (void)viewDidLoad
  2. {
  3. [super viewDidLoad];
  4.     UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
  5. button.frame = CGRectMake(200, 160, 35, 35);
  6. [button setImage:[UIImage imageNamed:@"ToolViewEmotion"] forState:UIControlStateNormal];
  7. [button setImage:[UIImage imageNamed:@"ToolViewEmotionHL"] forState:UIControlStateHighlighted];
  8. [self.view addSubview:button];
  9. UIImage *image = [UIImage imageNamed:@"playing_volumn_slide_foreground.png"];
  10. image = [image resizableImageWithCapInsets:UIEdgeInsetsMake(2, 2, 2, 2) resizingMode:UIImageResizingModeStretch];
  11. [self.slider setMinimumTrackImage:image forState:UIControlStateNormal];
  12. UIImage *bgImage = [UIImage imageNamed:@"playing_volumn_slide_bg.png"];
  13. bgImage = [bgImage resizableImageWithCapInsets:UIEdgeInsetsMake(2, 2, 2, 2) resizingMode:UIImageResizingModeStretch];
  14. [self.slider setMaximumTrackImage:bgImage forState:UIControlStateNormal];
  15. UIImage *thumbImage = [UIImage imageNamed:@"playing_volumn_slide_sound_icon.png"];
  16. [self.slider setThumbImage:thumbImage forState:UIControlStateNormal];
  17. }

3.4 完整代码

本案例中，TRViewController.m文件中的完整代码如下所示：

 
  1. #import "TRViewController.h"
  3. @interface TRViewController ()
  4. @property (weak, nonatomic) IBOutlet UISlider *slider;
  5. @end
  7. @implementation TRViewController
  8. - (void)viewDidLoad
  9. {
  10. [super viewDidLoad];
  11.     UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
  12. button.frame = CGRectMake(200, 160, 35, 35);
  13. [button setImage:[UIImage imageNamed:@"ToolViewEmotion"] forState:UIControlStateNormal];
  14. [button setImage:[UIImage imageNamed:@"ToolViewEmotionHL"] forState:UIControlStateHighlighted];
  15. [self.view addSubview:button];
  18. UIImage *image = [UIImage imageNamed:@"playing_volumn_slide_foreground.png"];
  19. image = [image resizableImageWithCapInsets:UIEdgeInsetsMake(2, 2, 2, 2) resizingMode:UIImageResizingModeStretch];
  20. [self.slider setMinimumTrackImage:image forState:UIControlStateNormal];
  21. UIImage *bgImage = [UIImage imageNamed:@"playing_volumn_slide_bg.png"];
  22. bgImage = [bgImage resizableImageWithCapInsets:UIEdgeInsetsMake(2, 2, 2, 2) resizingMode:UIImageResizingModeStretch];
  23. [self.slider setMaximumTrackImage:bgImage forState:UIControlStateNormal];
  24. UIImage *thumbImage = [UIImage imageNamed:@"playing_volumn_slide_sound_icon.png"];
  25. [self.slider setThumbImage:thumbImage forState:UIControlStateNormal];
  27. }
  28. @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颜色设置为紫色，代码如下所示：

 
  1. -(BOOL)application:(UIApplication *)application
  2. didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
  3. {
  4. self.window.tintColor = [UIColor colorWithRed:115.0/255 green:38.0/255 blue:239.0/255 alpha:0.9];
  5. return YES;
  6. }

运行程序发现自定义了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文件中的完整代码如下所示：

 
  1. #import "TRAppDelegate.h"
  3. @implementation TRAppDelegate
  5. -(BOOL)application:(UIApplication *)application
  6. didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
  7. {
  8. self.window.tintColor = [UIColor colorWithRed:115.0/255 green:38.0/255 blue:239.0/255 alpha:0.9];
  9. return YES;
  10. }
  11. @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，代码如下所示：

 
  1. - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
  2. {
  3. UIImage *image = [UIImage imageNamed:@"delete_btn"];
  4. UIImage *image2 = [image resizableImageWithCapInsets:UIEdgeInsetsMake(5, 5, 5, 5) resizingMode:UIImageResizingModeStretch];
  5. [[UIButton appearance] setBackgroundImage:image2 forState:UIControlStateNormal]；
  6. [[UIButton appearance] setTintColor:[UIColor yellowColor]];
  7. return YES;
  8. }

运行程序可以看到三个Button控件的背景图片都被设置了，由于三个Button都设置了各自的文字颜色，所以通过appearance设置的tintColor没有起作用。

然后设置其他控件的tintColor，代码如下所示：

 
  1. - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
  2. {
  3. UIImage *image = [UIImage imageNamed:@"delete_btn"];
  4. UIImage *image2 = [image resizableImageWithCapInsets:UIEdgeInsetsMake(5, 5, 5, 5) resizingMode:UIImageResizingModeStretch];
  5. [[UIButton appearance] setBackgroundImage:image2 forState:UIControlStateNormal];
  6. [[UIButton appearance] setTintColor:[UIColor yellowColor]];
  7. [UISlider appearance].tintColor = [UIColor redColor];
  8. [UISegmentedControl appearance].tintColor = [UIColor greenColor];
  9. [UIProgressView appearance].tintColor = [UIColor grayColor];
  10. return YES;
  11. }

运行程序可以看到其他控件的tintColor都显示出来。

5.4 完整代码

本案例中，TRAppDelegate.m文件中的完整代码如下所示：

 
  1. #import "TRAppDelegate.h"
  3. @implementation TRAppDelegate
  5. - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
  6. {
  7. UIImage *image = [UIImage imageNamed:@"delete_btn"];
  8. UIImage *image2 = [image resizableImageWithCapInsets:UIEdgeInsetsMake(5, 5, 5, 5) resizingMode:UIImageResizingModeStretch];
  9. [[UIButton appearance] setBackgroundImage:image2 forState:UIControlStateNormal];
  11. [[UIButton appearance] setTintColor:[UIColor yellowColor]];
  12. [UISlider appearance].tintColor = [UIColor redColor];
  13. [UISegmentedControl appearance].tintColor = [UIColor greenColor];
  14. [UIProgressView appearance].tintColor = [UIColor grayColor];
  16. return YES;
  17. }
  18. @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设置背景图片，代码如下所示：

 
  1. - (void)viewDidLoad
  2. {
  3. [super viewDidLoad];
  4.     UINavigationBar *navigationBar = self.navigationController.navigationBar;
  5. //设置导航栏的tintColor
  6. navigationBar.tintColor = [UIColor redColor];
  7. //是否半透明
  8. navigationBar.translucent = YES;
  9. //设置导航栏的barTintColor
  10. navigationBar.barTintColor = [UIColor lightGrayColor];
  11. //设置导航栏的背景图片
  12. [navigationBar setBackgroundImage:[UIImage imageNamed:@"navi1"] forBarMetrics:UIBarMetricsDefault];
  13. //设置横屏状态下的导航栏的背景图片
  14. [navigationBar setBackgroundImage:[UIImage imageNamed:@"navi2"] forBarMetrics:UIBarMetricsLandscapePhone];
  15. }

运行程序可以看到竖屏和横屏的导航栏背静图片不一样，如图-27、图-28所示：

图-27

图-28

最后设置back按钮的图片，设置navigationBar的backIndicatorImage和backIndicatorTransitionMaskImage属性即可，代码如下所示：

 
  1. - (void)viewDidLoad
  2. {
  3. [super viewDidLoad];
  4. UINavigationBar *navigationBar = self.navigationController.navigationBar;
  5. navigationBar.tintColor = [UIColor redColor];
  6. navigationBar.translucent = YES;
  7. navigationBar.barTintColor = [UIColor lightGrayColor];
  8. [navigationBar setBackgroundImage:[UIImage imageNamed:@"navi1"] forBarMetrics:UIBarMetricsDefault];
  9. [navigationBar setBackgroundImage:[UIImage imageNamed:@"navi2"] forBarMetrics:UIBarMetricsLandscapePhone];
  10. navigationBar.backIndicatorImage = [UIImage imageNamed:@"back_btn"];
  11. navigationBar.backIndicatorTransitionMaskImage = [UIImage imageNamed:@"back_btn"];
  12. }

运行效果如图-29所示：

图-29

步骤二：设置导航栏标题

导航栏标题的文字可以通过setTitleTextAttributes:方法进行设置，atrributes是一个NSDictionary类型的参数，记录标题文字各种属性，包括字体、颜色、字体大小等，代码如下所示：

 
  1. - (void)viewDidLoad
  2. {
  3. [super viewDidLoad];
  4.     UINavigationBar *navigationBar = self.navigationController.navigationBar;
  5. navigationBar.tintColor = [UIColor redColor];
  6. navigationBar.translucent = YES;
  7. navigationBar.barTintColor = [UIColor lightGrayColor];
  8. [navigationBar setBackgroundImage:[UIImage imageNamed:@"navi1"] forBarMetrics:UIBarMetricsDefault];
  9. [navigationBar setBackgroundImage:[UIImage imageNamed:@"navi2"] forBarMetrics:UIBarMetricsLandscapePhone];
  10. navigationBar.backIndicatorImage = [UIImage imageNamed:@"back_btn"];
  11. navigationBar.backIndicatorTransitionMaskImage = [UIImage imageNamed:@"back_btn"];
  12. [navigationBar setTitleTextAttributes:@{
  13. NSFontAttributeName : [UIFont italicSystemFontOfSize:30],NSForegroundColorAttributeName : [UIColor greenColor]
  14. }];
  15. }

运行程序，导航栏的标题如图-30所示：

图-30

然后在Storyboard的场景中拖放一个Button控件，关联成TRViewController的方法hideNavigationBar:，该方法用于实现导航栏的隐藏和显示，点击按钮可以将导航栏隐藏再次点击可以显示，代码如下所示：

 
  1. - (IBAction)hideNavigationBar:(id)sender {
  2. [self.navigationController setNavigationBarHidden:!self.navigationController.navigationBarHidden animated:YES];
  3. }

步骤三：设置状态栏

状态栏的设置方式是通过在TRViewController类中重写方法preferredStatusBarStyle进行状态栏样式的设置，重写方法prefersStatusBarHidden设置是否隐藏状态栏，但是如果存在NavigationBar，那么状态栏的风格由NavigationBar决定，该方法对状态栏的设置则无效。，代码如下所示：

 
  1. //设置状态栏的样式
  2. - (UIStatusBarStyle)preferredStatusBarStyle
  3. {
  4. return UIStatusBarStyleLightContent;
  5. }
  6. //是否隐藏状态栏
  7. - (BOOL)prefersStatusBarHidden
  8. {
  9. return NO;
  10. }

运行程序可以看出，隐藏导航栏和显示导航栏的时候，状态栏的样式是不一样的，如图-31、图-32所示：

图-31

图-32

6.4 完整代码

本案例中，TRViewController.m文件中的完整代码如下所示：

 
  1. #import "TRViewController.h"
  3. @implementation TRViewController
  5. - (void)viewDidLoad
  6. {
  7. [super viewDidLoad];
  8.     UINavigationBar *navigationBar = self.navigationController.navigationBar;
  9. //设置导航栏的tintColor
  10. navigationBar.tintColor = [UIColor redColor];
  11. //是否半透明
  12. navigationBar.translucent = YES;
  13. //设置导航栏的barTintColor
  14. navigationBar.barTintColor = [UIColor lightGrayColor];
  15. //设置导航栏的背景图片
  16. [navigationBar setBackgroundImage:[UIImage imageNamed:@"navi1"] forBarMetrics:UIBarMetricsDefault];
  17. //设置横屏状态下的导航栏的背景图片
  18. [navigationBar setBackgroundImage:[UIImage imageNamed:@"navi2"] forBarMetrics:UIBarMetricsLandscapePhone];
  21. navigationBar.backIndicatorImage = [UIImage imageNamed:@"back_btn"];
  22. navigationBar.backIndicatorTransitionMaskImage = [UIImage imageNamed:@"back_btn"];
  24. [navigationBar setTitleTextAttributes:@{
  25. NSFontAttributeName : [UIFont italicSystemFontOfSize:30],NSForegroundColorAttributeName : [UIColor greenColor]
  26. }];
  27. }
  28. //设置状态栏的样式
  29. - (UIStatusBarStyle)preferredStatusBarStyle
  30. {
  31. return UIStatusBarStyleLightContent;
  32. }
  33. //是否隐藏状态栏
  34. - (BOOL)prefersStatusBarHidden
  35. {
  36. return NO;
  37. }
  38. - (IBAction)hideNavigationBar:(id)sender {
  39. [self.navigationController setNavigationBarHidden:!self.navigationController.navigationBarHidden animated:YES];
  40. }
  41. @end
隐藏

7 给TableViewCell进行贴图美化

7.1 问题

表视图的单元格的背景也同样可以进行美化，本案例对TableView的单元格不同的状态进行贴图美化，如图-33所示：

图-33

7.2 方案

首先在Storyboard文件创建一个带有导航的表视图控制器，该视图控制器管理的是一个动态表视图，并和TRMyTableViewController类进行绑定。

然后TRMyTableViewController类中实现三问给表视图加载数据，给单元格进行美化的代码主要写在cellForRowAtIndexPath:方法，即创建cell代码之后。

主要是通过设置cell的backgroundView属性和selectedBackgroundView属性进行美化，selectedBackgroundView是单元格被选中之后的样式。

7.3 步骤

实现此案例需要按照如下步骤进行。

步骤一：创建表视图控制器项目

首先在Storyboard文件创建一个带有导航的表视图控制器，该视图控制器管理的是一个动态表视图，并和TRMyTableViewController类进行绑定。

然后TRMyTableViewController类中实现三问给表视图加载数据，代码如下所示：

 
  1. -(NSInteger)tableView:(UITableView *)tableView
  2. numberOfRowsInSection:(NSInteger)section
  3. {
  4. return 10;
  5. }
  7. -(UITableViewCell *)tableView:(UITableView *)tableView
  8. cellForRowAtIndexPath:(NSIndexPath *)indexPath
  9. {
  10. static NSString *CellIdentifier = @"MyCell";
  11. UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier forIndexPath:indexPath];
  12. cell.textLabel.text = @"Hello World.";
  13. return cell;
  14. }

步骤二：美化单元格

给单元格进行美化的代码主要写在cellForRowAtIndexPath:方法，即创建cell代码之后，主要是通过设置cell的backgroundView属性和selectedBackgroundView属性进行美化，selectedBackgroundView是单元格被选中之后的样式，代码如下所示：

 
  1. - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
  2. {
  3. static NSString *CellIdentifier = @"MyCell";
  4. UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier forIndexPath:indexPath];
  5. cell.textLabel.text = @"Hello World.";
  6. cell.backgroundView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"list"]];
  7. cell.selectedBackgroundView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"listSelected"]];
  8. return cell;
  9. }

7.4 完整代码

本案例中，TRMyTableViewController.m文件中的完整代码如下所示：

 
  1. #import "TRMyTableViewController.h"
  3. @implementation TRMyTableViewController
  5. #pragma mark - Table view data source
  6. - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
  7. {
  8. return 10;
  9. }
  11. - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
  12. {
  13. static NSString *CellIdentifier = @"MyCell";
  14. UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier forIndexPath:indexPath];
  15. cell.textLabel.text = @"Hello World.";
  16. cell.backgroundView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"list"]];
  17. cell.selectedBackgroundView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"listSelected"]];
  18. return cell;
  19. }
  20. @end
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/52190112cn/p/5049428.html