设备、像素和点 、 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;
  7. UIImage *textFieldImage = [UIImage imageNamed:@"SendTextViewBkg.png"];
  8. self.textFieldBkgView.image = [textFieldImage resizableImageWithCapInsets:UIEdgeInsetsMake(10, 10, 10, 10) resizingMode:UIImageResizingModeStretch];
  9. }

1.4 完整代码

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

  1. #import "TRViewController.h"
  2. @interface TRViewController ()
  3. @property (weak, nonatomic) IBOutlet UIImageView *backgroundView;
  4. @property (weak, nonatomic) IBOutlet UITextField *textField;
  5. @property (weak, nonatomic) IBOutlet UIImageView *textFieldBkgView;
  6. @end
  7. @implementation TRViewController
  8. - (void)viewDidLoad
  9. {
  10. [super viewDidLoad];
  11. UIImage *backgroundImage = [UIImage imageNamed:@"ToolViewBkg_Black.png"];
  12. backgroundImage = [backgroundImage resizableImageWithCapInsets:UIEdgeInsetsMake(2, 3, 2, 3) resizingMode:UIImageResizingModeStretch];
  13. self.backgroundView.image = backgroundImage;
  14. UIImage *textFieldImage = [UIImage imageNamed:@"SendTextViewBkg.png"];
  15. self.textFieldBkgView.image = [textFieldImage resizableImageWithCapInsets:UIEdgeInsetsMake(10, 10, 10, 10) resizingMode:UIImageResizingModeStretch];
  16. }
  17. @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. 

  2. {
    3. 

  3. [super viewDidLoad];
    4. 

  4. UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
    5. 

  5. button.frame = CGRectMake(200, 160, 35, 35);
    6. 

  6. [button setImage:[UIImage imageNamed:@"ToolViewEmotion"] forState:UIControlStateNormal];
    7. 

  7. [button setImage:[UIImage imageNamed:@"ToolViewEmotionHL"] forState:UIControlStateHighlighted];
    8. 

  8. [self.view addSubview:button];
    9. 

  9. }
    10. 



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


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


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


    

  1. @interface TRViewController ()
    2. 

  2. @property (weak, nonatomic) IBOutlet UISlider *slider;
    3. 

  3. @end
    4. 



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



    

  1. - (void)viewDidLoad
    2. 

  2. {
    3. 

  3. [super viewDidLoad];
    4. 

  4. UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
    5. 

  5. button.frame = CGRectMake(200, 160, 35, 35);
    6. 

  6. [button setImage:[UIImage imageNamed:@"ToolViewEmotion"] forState:UIControlStateNormal];
    7. 

  7. [button setImage:[UIImage imageNamed:@"ToolViewEmotionHL"] forState:UIControlStateHighlighted];
    8. 

  8. [self.view addSubview:button];
    9. 

  9. UIImage *image = [UIImage imageNamed:@"playing_volumn_slide_foreground.png"];
    10. 

  10. image = [image resizableImageWithCapInsets:UIEdgeInsetsMake(2, 2, 2, 2) resizingMode:UIImageResizingModeStretch];
    11. 

  11. [self.slider setMinimumTrackImage:image forState:UIControlStateNormal];
    12. 

  12. UIImage *bgImage = [UIImage imageNamed:@"playing_volumn_slide_bg.png"];
    13. 

  13. bgImage = [bgImage resizableImageWithCapInsets:UIEdgeInsetsMake(2, 2, 2, 2) resizingMode:UIImageResizingModeStretch];
    14. 

  14. [self.slider setMaximumTrackImage:bgImage forState:UIControlStateNormal];
    15. 

  15. UIImage *thumbImage = [UIImage imageNamed:@"playing_volumn_slide_sound_icon.png"];
    16. 

  16. [self.slider setThumbImage:thumbImage forState:UIControlStateNormal];
    17. 

  17. }
    18. 



3.4 完整代码


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



    

  1. #import "TRViewController.h"
    2. 

  2. @interface TRViewController ()
    3. 

  3. @property (weak, nonatomic) IBOutlet UISlider *slider;
    4. 

  4. @end
    5. 

  5. @implementation TRViewController
    6. 

  6. - (void)viewDidLoad
    7. 

  7. {
    8. 

  8. [super viewDidLoad];
    9. 

  9. UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
    10. 

  10. button.frame = CGRectMake(200, 160, 35, 35);
    11. 

  11. [button setImage:[UIImage imageNamed:@"ToolViewEmotion"] forState:UIControlStateNormal];
    12. 

  12. [button setImage:[UIImage imageNamed:@"ToolViewEmotionHL"] forState:UIControlStateHighlighted];
    13. 

  13. [self.view addSubview:button];
    14. 

  14. UIImage *image = [UIImage imageNamed:@"playing_volumn_slide_foreground.png"];
    15. 

  15. image = [image resizableImageWithCapInsets:UIEdgeInsetsMake(2, 2, 2, 2) resizingMode:UIImageResizingModeStretch];
    16. 

  16. [self.slider setMinimumTrackImage:image forState:UIControlStateNormal];
    17. 

  17. UIImage *bgImage = [UIImage imageNamed:@"playing_volumn_slide_bg.png"];
    18. 

  18. bgImage = [bgImage resizableImageWithCapInsets:UIEdgeInsetsMake(2, 2, 2, 2) resizingMode:UIImageResizingModeStretch];
    19. 

  19. [self.slider setMaximumTrackImage:bgImage forState:UIControlStateNormal];
    20. 

  20. UIImage *thumbImage = [UIImage imageNamed:@"playing_volumn_slide_sound_icon.png"];
    21. 

  21. [self.slider setThumbImage:thumbImage forState:UIControlStateNormal];
    22. 

  22. }
    23. 

  23. @end
    24. 






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. 

  2. didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
    3. 

  3. {
    4. 

  4. self.window.tintColor = [UIColor colorWithRed:115.0/255 green:38.0/255 blue:239.0/255 alpha:0.9];
    5. 

  5. return YES;
    6. 

  6. }
    7. 



运行程序发现自定义了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"
    2. 

  2. @implementation TRAppDelegate
    3. 

  3. -(BOOL)application:(UIApplication *)application
    4. 

  4. didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
    5. 

  5. {
    6. 

  6. self.window.tintColor = [UIColor colorWithRed:115.0/255 green:38.0/255 blue:239.0/255 alpha:0.9];
    7. 

  7. return YES;
    8. 

  8. }
    9. 

  9. @end
    10. 






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. 

  2. {
    3. 

  3. UIImage *image = [UIImage imageNamed:@"delete_btn"];
    4. 

  4. UIImage *image2 = [image resizableImageWithCapInsets:UIEdgeInsetsMake(5, 5, 5, 5) resizingMode:UIImageResizingModeStretch];
    5. 

  5. [[UIButton appearance] setBackgroundImage:image2 forState:UIControlStateNormal]；
    6. 

  6. [[UIButton appearance] setTintColor:[UIColor yellowColor]];
    7. 

  7. return YES;
    8. 

  8. }
    9. 



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


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



    

  1. - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
    2. 

  2. {
    3. 

  3. UIImage *image = [UIImage imageNamed:@"delete_btn"];
    4. 

  4. UIImage *image2 = [image resizableImageWithCapInsets:UIEdgeInsetsMake(5, 5, 5, 5) resizingMode:UIImageResizingModeStretch];
    5. 

  5. [[UIButton appearance] setBackgroundImage:image2 forState:UIControlStateNormal];
    6. 

  6. [[UIButton appearance] setTintColor:[UIColor yellowColor]];
    7. 

  7. [UISlider appearance].tintColor = [UIColor redColor];
    8. 

  8. [UISegmentedControl appearance].tintColor = [UIColor greenColor];
    9. 

  9. [UIProgressView appearance].tintColor = [UIColor grayColor];
    10. 

  10. return YES;
    11. 

  11. }
    12. 



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


5.4 完整代码


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



    

  1. #import "TRAppDelegate.h"
    2. 

  2. @implementation TRAppDelegate
    3. 

  3. - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
    4. 

  4. {
    5. 

  5. UIImage *image = [UIImage imageNamed:@"delete_btn"];
    6. 

  6. UIImage *image2 = [image resizableImageWithCapInsets:UIEdgeInsetsMake(5, 5, 5, 5) resizingMode:UIImageResizingModeStretch];
    7. 

  7. [[UIButton appearance] setBackgroundImage:image2 forState:UIControlStateNormal];
    8. 

  8. [[UIButton appearance] setTintColor:[UIColor yellowColor]];
    9. 

  9. [UISlider appearance].tintColor = [UIColor redColor];
    10. 

  10. [UISegmentedControl appearance].tintColor = [UIColor greenColor];
    11. 

  11. [UIProgressView appearance].tintColor = [UIColor grayColor];
    12. 

  12. return YES;
    13. 

  13. }
    14. 

  14. @end
    15. 






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. 

  2. {
    3. 

  3. [super viewDidLoad];
    4. 

  4. UINavigationBar *navigationBar = self.navigationController.navigationBar;
    5. 

  5. //设置导航栏的tintColor
    6. 

  6. navigationBar.tintColor = [UIColor redColor];
    7. 

  7. //是否半透明
    8. 

  8. navigationBar.translucent = YES;
    9. 

  9. //设置导航栏的barTintColor
    10. 

  10. navigationBar.barTintColor = [UIColor lightGrayColor];
    11. 

  11. //设置导航栏的背景图片
    12. 

  12. [navigationBar setBackgroundImage:[UIImage imageNamed:@"navi1"] forBarMetrics:UIBarMetricsDefault];
    13. 

  13. //设置横屏状态下的导航栏的背景图片
    14. 

  14. [navigationBar setBackgroundImage:[UIImage imageNamed:@"navi2"] forBarMetrics:UIBarMetricsLandscapePhone];
    15. 

  15. }
    16. 



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




图-27




图-28


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



    

  1. - (void)viewDidLoad
    2. 

  2. {
    3. 

  3. [super viewDidLoad];
    4. 

  4. UINavigationBar *navigationBar = self.navigationController.navigationBar;
    5. 

  5. navigationBar.tintColor = [UIColor redColor];
    6. 

  6. navigationBar.translucent = YES;
    7. 

  7. navigationBar.barTintColor = [UIColor lightGrayColor];
    8. 

  8. [navigationBar setBackgroundImage:[UIImage imageNamed:@"navi1"] forBarMetrics:UIBarMetricsDefault];
    9. 

  9. [navigationBar setBackgroundImage:[UIImage imageNamed:@"navi2"] forBarMetrics:UIBarMetricsLandscapePhone];
    10. 

  10. navigationBar.backIndicatorImage = [UIImage imageNamed:@"back_btn"];
    11. 

  11. navigationBar.backIndicatorTransitionMaskImage = [UIImage imageNamed:@"back_btn"];
    12. 

  12. }
    13. 



运行效果如图-29所示：




图-29


步骤二：设置导航栏标题


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



    

  1. - (void)viewDidLoad
    2. 

  2. {
    3. 

  3. [super viewDidLoad];
    4. 

  4. UINavigationBar *navigationBar = self.navigationController.navigationBar;
    5. 

  5. navigationBar.tintColor = [UIColor redColor];
    6. 

  6. navigationBar.translucent = YES;
    7. 

  7. navigationBar.barTintColor = [UIColor lightGrayColor];
    8. 

  8. [navigationBar setBackgroundImage:[UIImage imageNamed:@"navi1"] forBarMetrics:UIBarMetricsDefault];
    9. 

  9. [navigationBar setBackgroundImage:[UIImage imageNamed:@"navi2"] forBarMetrics:UIBarMetricsLandscapePhone];
    10. 

  10. navigationBar.backIndicatorImage = [UIImage imageNamed:@"back_btn"];
    11. 

  11. navigationBar.backIndicatorTransitionMaskImage = [UIImage imageNamed:@"back_btn"];
    12. 

  12. [navigationBar setTitleTextAttributes:@{
    13. 

  13. NSFontAttributeName : [UIFont italicSystemFontOfSize:30],NSForegroundColorAttributeName : [UIColor greenColor]
    14. 

  14. }];
    15. 

  15. }
    16. 



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




图-30


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



    

  1. - (IBAction)hideNavigationBar:(id)sender {
    2. 

  2. [self.navigationController setNavigationBarHidden:!self.navigationController.navigationBarHidden animated:YES];
    3. 

  3. }
    4. 



步骤三：设置状态栏


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



    

  1. //设置状态栏的样式
    2. 

  2. - (UIStatusBarStyle)preferredStatusBarStyle
    3. 

  3. {
    4. 

  4. return UIStatusBarStyleLightContent;
    5. 

  5. }
    6. 

  6. //是否隐藏状态栏
    7. 

  7. - (BOOL)prefersStatusBarHidden
    8. 

  8. {
    9. 

  9. return NO;
    10. 

  10. }
    11. 



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




图-31




图-32


6.4 完整代码


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



    

  1. #import "TRViewController.h"
    2. 

  2. @implementation TRViewController
    3. 

  3. - (void)viewDidLoad
    4. 

  4. {
    5. 

  5. [super viewDidLoad];
    6. 

  6. UINavigationBar *navigationBar = self.navigationController.navigationBar;
    7. 

  7. //设置导航栏的tintColor
    8. 

  8. navigationBar.tintColor = [UIColor redColor];
    9. 

  9. //是否半透明
    10. 

  10. navigationBar.translucent = YES;
    11. 

  11. //设置导航栏的barTintColor
    12. 

  12. navigationBar.barTintColor = [UIColor lightGrayColor];
    13. 

  13. //设置导航栏的背景图片
    14. 

  14. [navigationBar setBackgroundImage:[UIImage imageNamed:@"navi1"] forBarMetrics:UIBarMetricsDefault];
    15. 

  15. //设置横屏状态下的导航栏的背景图片
    16. 

  16. [navigationBar setBackgroundImage:[UIImage imageNamed:@"navi2"] forBarMetrics:UIBarMetricsLandscapePhone];
    17. 

  17. navigationBar.backIndicatorImage = [UIImage imageNamed:@"back_btn"];
    18. 

  18. navigationBar.backIndicatorTransitionMaskImage = [UIImage imageNamed:@"back_btn"];
    19. 

  19. [navigationBar setTitleTextAttributes:@{
    20. 

  20. NSFontAttributeName : [UIFont italicSystemFontOfSize:30],NSForegroundColorAttributeName : [UIColor greenColor]
    21. 

  21. }];
    22. 

  22. }
    23. 

  23. //设置状态栏的样式
    24. 

  24. - (UIStatusBarStyle)preferredStatusBarStyle
    25. 

  25. {
    26. 

  26. return UIStatusBarStyleLightContent;
    27. 

  27. }
    28. 

  28. //是否隐藏状态栏
    29. 

  29. - (BOOL)prefersStatusBarHidden
    30. 

  30. {
    31. 

  31. return NO;
    32. 

  32. }
    33. 

  33. - (IBAction)hideNavigationBar:(id)sender {
    34. 

  34. [self.navigationController setNavigationBarHidden:!self.navigationController.navigationBarHidden animated:YES];
    35. 

  35. }
    36. 

  36. @end
    37. 




隐藏


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. 

  2. numberOfRowsInSection:(NSInteger)section
    3. 

  3. {
    4. 

  4. return 10;
    5. 

  5. }
    6. 

  6. -(UITableViewCell *)tableView:(UITableView *)tableView
    7. 

  7. cellForRowAtIndexPath:(NSIndexPath *)indexPath
    8. 

  8. {
    9. 

  9. static NSString *CellIdentifier = @"MyCell";
    10. 

  10. UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier forIndexPath:indexPath];
    11. 

  11. cell.textLabel.text = @"Hello World.";
    12. 

  12. return cell;
    13. 

  13. }
    14. 



步骤二：美化单元格


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



    

  1. - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
    2. 

  2. {
    3. 

  3. static NSString *CellIdentifier = @"MyCell";
    4. 

  4. UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier forIndexPath:indexPath];
    5. 

  5. cell.textLabel.text = @"Hello World.";
    6. 

  6. cell.backgroundView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"list"]];
    7. 

  7. cell.selectedBackgroundView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"listSelected"]];
    8. 

  8. return cell;
    9. 

  9. }
    10. 



7.4 完整代码


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



    

  1. #import "TRMyTableViewController.h"
    2. 

  2. @implementation TRMyTableViewController
    3. 

  3. #pragma mark - Table view data source
    4. 

  4. - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
    5. 

  5. {
    6. 

  6. return 10;
    7. 

  7. }
    8. 

  8. - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
    9. 

  9. {
    10. 

  10. static NSString *CellIdentifier = @"MyCell";
    11. 

  11. UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier forIndexPath:indexPath];
    12. 

  12. cell.textLabel.text = @"Hello World.";
    13. 

  13. cell.backgroundView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"list"]];
    14. 

  14. cell.selectedBackgroundView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"listSelected"]];
    15. 

  15. return cell;
    16. 

  16. }
    17. 

  17. @end
    18. 

				


				
时间： 2024-10-13 00:53:58 

		


		


	

	
	

		


		
设备、像素和点 、 9切片技术 、 颜色和外观 、 NavigationBar的美化的相关文章


								

		

			

                设备像素比devicePixelRatio简单介绍
			

		

		

									

				本文所说devicePixelRatio其实指的是window.devicePixelRatio, 被所有WebKit浏览器以及Opera所支持,随着显示器的发展,这个属性也慢慢登上了前端技术的舞台. 本文内容大部分属于翻译性质内容,因此,会不那么通俗易懂.不过,你是做手机开发的,或是有意向的,本文的内容如果细细读来,还是有些收获的. 一.定义 定义如下: window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips			

		

	

				

		

			

                响应式设计：理解设备像素，CSS像素和屏幕分辨率
			

		

		

									

				概述 屏幕分辨率.设备像素和CSS像素这些术语,在非常多语境下,是可互换的,但也因此easy在有差异的地方引起混淆,实际上它们是不同的概念. 屏幕分辨率和设备像素是物理概念,而CSS像素是WEB编程的概念:屏幕分辨率和设备像素的区别在于设备像素显示密度. 当设备屏幕ZOOM=100%的时候,浏览器CSS像素尺寸和设备像素相等,而当像素密度(pixel density)为1的时候,屏幕分辨率和设备像素相等. 响应式设计 在响应式设计中,使用了viewport,device-width,media			

		

	

				

		

			

                HTML-HTML5+CSS3权威指南阅读（五、设备像素和CSS像素的概念）
			

		

		

									

				在这个迷你系列的文章里边我将会解释viewport,以及许多重要元素的宽度是如何工作的,比如<html>元素,也包括窗口和屏幕 这篇文章是关于桌面浏览器的,其唯一目的就是为移动浏览器中相似的讨论做个铺垫.大部分开发者凭直觉已经明白了大部分桌面浏览器中的概念.在移动端我们将会接触到相同的概念,但是会更加复杂,所以对大家已经知道的术语做个提前的讨论将会对你理解移动浏览器产生巨大的帮助. 概念:设备像素和CSS像素 你需要明白的第一个概念是CSS像素,以及它和设备像素的区别. 设备像素是我们直觉上觉			

		

	

				

		

			

                设备像素比dpr介绍
			

		

		

									

				首先介绍一下概念 devicePixelRatio其实指的是window.devicePixelRatio window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例. 公式表示就是:window.devicePixelRatio = 物理像素 / dips 好了,到了这里有出来了两个概念,物理像素 和  dips 物理像素,比较好理解,一个物理像素是显示器(手机屏幕)上最小的物理显示单元,在操作系统的调			

		

	

				

		

			

                0520日重点: CSS像素,设备像素以及dpr
			

		

		

									

				1.设备像素(device independent pixels): 设备屏幕的物理像素,任何设备的物理像素的数量都是固定的 2.CSS像素(CSS pixels): 又称为逻辑像素,是为web开发者创造的,在CSS和javascript中使用的一个抽象的层 3.设备像素比DPR(devicePixelRatio)是默认缩放为100%的情况下,设备像素和CSS像素的比值 实际上,此时的CSS像素对应着以后要提到的理想视口,其对应的javascript属性是screen.width/screen.			

		

	

				

		

			

                ViewPort，逻辑像素/设备独立像素，物理像素/设备独立像素，分辨率，CSS像素，设备像素比DPR，像素密度PPI。
			

		

		

									

				一.相关基础知识 小米note参数查看:http://www.mi.com/minote/specs/ 以下都以小米note这个设备为例. 1.一般说手机的几寸是指:手机显示屏对角线的长度.1英寸2.54厘米.小米note为5.7英寸,约为14.478厘米. 2.物理像素/设备像素/像素:以一个很不严谨的方式去通俗的解释:这个屏幕是5英寸的,先把竖着等距画1919条线,这样横着看会有1920列,同理再横着画1079条线,竖着看会有1080行,这个过程中横线和竖线会相交,于是产生了一个个格子,这个			

		

	

				

		

			

                Linux Shell编程实战---Shell中的文本切片技术
			

		

		

									

				Shell中的文本切片技术 在shell中竟然也是有字符串切片这个东西存在的,一直在python中运用切片,下面记录一下shell中切片的用法. (1).替换变量内容中的部分文本 $var="This is a line of text" $ echo${var/line/REPLACED} This is aREPLACED of text" line被替换成REPLACED. (2).指定字符串的起始位置和长度来生成子串 语法如下: ${variable_name:sta			

		

	

				

		

			

                响应式布局—设备像素密度测试 (-webkit-min-device-pixel-ratio)
			

		

		

									

				以下是我摘抄并翻译的,想了解更多原文在尾部有链接哈~ -webkit-min-device-pixel-ratio的常见值对比(是设备上物理像素和设备独立像素,设备像素比率) 设备 分辨率 设备像素比率Android LDPI 320×240 0.75 Iphone 3 & Android MDPI 320×480 1 Android HDPI 480×800 1.5 Iphone 4 960×640 2.0 设备像素为:1.0    (-webkit-min-device-pixel-rati			

		

	

				

		

			

                设备像素比（devicePixelRatio）（转）
			

		

		

									

				设备像素比(devicePixelRatio)(转) 原文地址:http://www.web-tinker.com/article/20590.html 设备像素比是物理像素与设备无关像素的比值,单位可以用dppx.它用于描述整个渲染环境在硬件设备上的缩放程度.在程序中可以通过window对象上的devicePixelRatio属性来得到这个值.它是只读的,但不是常量,对浏览器的一些特殊操作会改变这个值. 首先是对几个概念的解释 物理像素(physical pixel):设备能控制显示的最小单位