zoukankan      html  css  js  c++  java

  • 设备、像素和点 、 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
  • 相关阅读:
    Qt学习之路，part1
    1.获取状态栏的高度
    如何在Android Studio中上传代码到Gitee上
    关于类图
    外观模式
    关于类的实例
    SharedPreference中关于editor.apply()和editor.commit()
    活动的4种启动模式
    unittest中case批量管理
    unittest使用
  • 原文地址：https://www.cnblogs.com/52190112cn/p/5049428.html
Copyright © 2011-2022 走看看