storyboard_贴图美化

storyboard_贴图美化——使用

一般美工会把把一张图做成两个版本（例：Welcome1.jpg和Welcome1@2x.jpg），一个是Retina屏显示的，一个非Retina屏显示的，系统会自动根据分辨率来选择图片。

贴图

9切片技术（9 slice）

例：原图： 我们把原图切成9片 ，把中间的部分拉伸或复制（至于是选择拉伸还是复制看实际情况） 【当我们只是左右拉伸或只是上下拉伸的时候我们也可以切成3片】

UIImageResizingModeTile     ->瓦片（相当于复制）

UIImageResizingModeStretch  ->拉伸

先拉成属性（私有），再实现：

- ( void )viewDidLoad {
    [ super viewDidLoad ];
    UIImage * image=[ UIImage imageNamed : @"delete_btn.png" ];
    //UIEdgeInsets-> 上下左右各切多少   UIImageResizingMode-> 模式
    UIImage * resizabledImage=[image resizableImageWithCapInsets : UIEdgeInsetsMake ( 10 , 12 , 10 , 12 ) resizingMode : UIImageResizingModeStretch ];
    self . imageView . image =resizabledImage;

}

也可以设置为按钮的背景

UIButton *button;

[button setBackgroundImage:resizabledImage forState:UIControlStateNormal];

拉成属性，再实现：

- ( void )viewDidLoad {

    [superviewDidLoad];

    UIImage *image2 = [ UIImage imageNamed : @"seperator.png" ];

    //进行切片

    UIImage *resiabledImage2 = [image2 resizableImageWithCapInsets : UIEdgeInsetsMake ( 3 , 3 , 4 , 5 ) resizingMode : UIImageResizingModeTile ];

    self.seperatorImageView.image= resiabledImage2;

}

使用Images.xcassets进行9切片，在View上添加2个imageView,往Images.xcassets中添加图片，可以在Images.xcassets中把图片的名字重命名(eg:button)

在Images.xcassets中切片，选择 显示切片，进入 ，选择要切的图，（ 左右切3片， 上下左右切9片， 上下切片切3片），选择完就切了（可以调整切刀，选择要拉伸或复制的区域 绿色是需要拉伸或复制的， 蓝色的是直接截掉的）

属性中： 设置复制还是拉伸

                上下左右各切多少

storyboard中显示的时小图(大图和小图的 模式必须一致)

按钮： 可设置不同状态下的图片

按钮等控件一般都有以下几种状态:

          1>   Normal            正常

          2>   Highlighted    高亮(被用户按下之后的状态)

          3>   Disabled          .enabled = NO（按钮不可用）

          4>   Selected         .selected = YES （按钮被选中）

用代码也可以创建：

//设置默认状态下和高亮状态下的图片

- ( void )viewDidLoad {
    [ super viewDidLoad ];
    UIButton * button=[ UIButton buttonWithType : UIButtonTypeCustom ];
    button. frame = CGRectMake ( 200 , 40 , 35 , 35 );
    // 因为我们现在使用的统一资源管理 (Images.xcassets) 所以不需文件的扩展名
    [button setImage :[ UIImage imageNamed : @"ToolViewEmotion" ] forState : UIControlStateNormal ];
    [button setImage :[ UIImage imageNamed : @"ToolViewEmotionHL" ] forState : UIControlStateHighlighted ];
    [ self . view addSubview :button];

}

设置被选中状态

默认情况下： 按下后：

设置属性

拉拽实现代码：

- ( IBAction )plusTap:( UIButton *)sender

{

    //更变选中状态

    sender. selected = !sender. selected ;

}

想要 周围效果，属性中设置

- ( void )viewDidLoad
{

    [superviewDidLoad];

    // 设置最大边的图片并且进行切片

    UIImage *image = [ UIImage imageNamed : @"playing_volumn_slide_foreground.png" ];
    image = [image resizableImageWithCapInsets : UIEdgeInsetsMake ( 2 , 2 , 2 , 2 ) resizingMode : UIImageResizingModeStretch ];

    [self.slidersetMinimumTrackImage:imageforState:UIControlStateNormal];

    // 设置最小边的图片并且进行切片

    UIImage *bgImage = [ UIImage imageNamed : @"playing_volumn_slide_bg.png" ];
    bgImage = [bgImage resizableImageWithCapInsets : UIEdgeInsetsMake ( 2 , 2 , 2 , 2 ) resizingMode : UIImageResizingModeStretch ];

    [self.slidersetMaximumTrackImage:bgImageforState:UIControlStateNormal];

    // 设置中间的图片并且进行切片

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

    [self.slidersetThumbImage:thumbImageforState:UIControlStateNormal];

}

UIAppearance

//对所有的button统一设置外观

[[ UIButton appearance ] setImage :[ UIImage imageNamed : @"delete_btn" ] forState : UIControlStateNormal ];

//对所有的slider统一设置颜色

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

//对所有的UISegmentedControl统一设置颜色

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

UINavigationBar美化

美工有时会给颜色0x067AB5

我们可以设置：(红色：06  绿色：7A   蓝色：B5)

[UINavigationBar appearance].barTintColor=[UIColor colorWithRed:6.0/255 green:122.0/255 blue:181.0/255 alpha:1.0];

把view包在navigationBar里面，然后再代码中设置

- ( void )viewDidLoad

{

    [superviewDidLoad];

     //拿到navigationBar类型的对象

     UINavigationBar*navigationBar =self.navigationController.navigationBar;

    //navigationBar.tintColor = [UIColor redColor];<-此方法不行

   //设置是否带透明，YES为半透明

    navigationBar.translucent=YES;

    //navigationBar.barTintColor = [UIColor lightGrayColor];<- navigationBar 颜色设置为亮灰色

    //UIBarMetricsDefault 竖着拿设备   UIBarMetricsLandscapePhone 横着拿设备

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

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

    //设置navigation的返回按钮的图片(下面两个都要设置)

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

    navigationBar.backIndicatorTransitionMaskImage= [UIImageimageNamed:@"back_btn"];

     // 设置navigation的 颜色

    navigationBar. tintColor = [ UIColor redColor ];

    // 设置标题栏的字体

    [navigationBar setTitleTextAttributes : @{
     NSFontAttributeName : [ UIFont italicSystemFontOfSize : 30 ], NSForegroundColorAttributeName : [ UIColor greenColor ]

     } ];

    //自定义中间视图（ 还可以将标题设置成任何视图(如图片) ）

    //self.navigationItem.titleView = ...
}
//自定义状态栏风格
- ( UIStatusBarStyle )preferredStatusBarStyle

{

    return UIStatusBarStyleLightContent ;//设置状态栏的颜色为白色

}

// 隐藏状态栏
- ( BOOL )prefersStatusBarHidden
{
    return YES ;

}

//设置隐藏NavigationBar的执行代码

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

}

TableViewCell的贴图

把ViewController的.h和.m文件删掉，建一个tableViewController来代替

- ( 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;

}

storyboard_贴图美化——方法 Map

1. 了解基本概念

1.1 iOS设备

     Retina                             分辨率              点(坐标)

           iPhone4/4s            640x960             320x480

           iPhone5/5s/5c       640x1136           320x568

           new iPad, iPad4

          iPad Air

          iPad mini2             2048x1536        1024x768

          非Retina

          iPad,iPad2

          iPad mini               1024x768           1024x768

          iPhone3GS            320x480             320x480

     Retina屏上1个点 ＝ 2 x 2 个像素

     非Retina上  1个点 ＝ 1个像素

1.2 iOS系统加载图片时对Retina的处理

     if(Retina){//…….}

     else {//…}

     Welcome1.jpg  ==>  Welcome1@2x.jpg

     [Demo1]

UIImage*image = [UIImageimageNamed:@"Welcome1.jpg"];
//以下工作由iOS自动判断
if(当前设置是Retina){

     if(资源中是否存在一张“Welcome1@2x.jpg”文件){

          加载Welcome1@2x.jpg

     }else{

           加载Welcome1.jpg

     }

}else{

     加载Welcome1.jpg

}

2. 贴图

     给各种控件或视图贴图，以达到美化的效果

2.1   9切片技术(9 slice)

     [Demo2]

     1> 目的

          解决不同尺寸相同设计风格的图片，需要出多张图的问题。

          如果不切，程序就得写代码重绘(iOS6以前就这么干) ， 或者美工出很多图

     2> 用在哪里

          消息框、新闻栏、各种条目如定单、各种框的美化时都可以用

          按钮的背景，Cell的背景，各种控件的背景都可以用

     3> 切片原则

          九片：

           4个角不变

          上下两边横向拉伸或复制

          左右两边纵向拉伸或复制

          中间横向纵向拉伸或复制

     4> 两种模式：

          Tile    瓦片模式(复制)

          Stretch   拉伸模式

          默认是Tile

2.2 Xcode 5中的9Slicing技术

     不写代码完成9Slicing

          1> Xcode 5新增的Asset Catalog项目组件

               在任何项目中，都有一个images.xcassets目录，用来统一的管理项目中的图片等资源，还提供对图片资源的设备适配，高清，拉伸等支持，也提供9slicing的支持。

          2> 使用Asset的好处在于， 提供的资源文件不需要特别遵守文件的命名规范，另外，可以不写代码进行切片。还可以管理和适配各种设备所需要的图片资源

          3> 如何使用

               拖拽图片到images.xcassets中

               选中其中要切片的项

               点击Show Slicing

               进行切片(小图大图都要切)

               在storyboard中可直接查看切好的结果

2.3 练习
T-Message 的输入面板


3. 对各种控制进行贴图美化

     UIButton   UITextField    UISlider     UISwitch

3.1 UIButton

     按钮等控件一般都有以下几种状态:

          1>   Normal            正常

          2>   Highlighted    高亮(被用户按下之后的状态)

          3>   Disabled          .enabled = NO（按钮不可用）

          4>   Selected         .selected = YES （按钮被选中）

可以为一个按钮的不同状态设置不同的图片：

     1> 直接在xib或storyboard中配置

     2> 用代码来设置

美工提供的图片一般会如此命名:

     XxxxYyyy.png

     XxxxYyyy@2x.png          Normal状态下的图片

     XxxxYyyyHL.png

     XxxxYyyyHL@2x.png     Highlighted状态的图片

3.2 UISlider

     setMinimumTrackImage

     setMaximumTrackImage

     setThumbImage

……

4. tintColor属性
4.1 是什么

     是视图的一个属性， 代表自己的颜色

4.2 能干什么

     可以统一的管理一个视图中所有子视图和子视图的子视图的颜色

     可以批量的修改一些视图的颜色

4.3 一般控件的颜色

     受两个颜色因素的影响

          1>    可能会拥有xxxTintColor, 如UISwitch, UIProgress, UINavigationBar等

          2>    如果没有具体的xxxxTintColor， 受从UIView中继承来的tintColor属性的影响

4.4 批量设置主题颜色

     1> 设置父视图的tintColor颜色后，会导致所有子视图的颜色发生变化，除非某一个子视图特别设置了自己的tintColor颜色

     2> 我们甚至可以设置window对象的tintColor颜色，设置后会导致应用中所有的视图对象的tintColor颜色发生变化，除非某一个视图特别设置了自己的tintColor颜色

[Demo7]

eg:需对多个视图子视图改颜色,修改appDlelgate.m文件代码：

- ( 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 ];
    // Override point for customization after application launch.
    return YES ;

}

5. UIAppearance
5.1 是什么

     是一个协议， 遵守此协议的对象可以批量设置某种控件的外观(颜色，贴图等)

5.2 如何获取

     任何视图类都有一个类方法: 

          +(instancetype)appearance;

     此方法返回的对象会遵守UIAppearance协议

5.3 如何使用

     拿到此对象，就像对普通控件对象一样，设置颜色、背景等来批量设置某种控件的外观

[Demo8]

6. UINavigationBar美化

     [Demo9]

6.1 设置NavigationBar和颜色

     拥有.barTintColor属性， 设置颜色

     .translucent设置是否半透明(YES为半透明)

6.2 给NavigationBar贴图

     setBackgroundImage:forBarMetrics:纵向和横向可以贴不同的图

6.3 设置返回按钮的图片

     backIndicatorImage

     backIndicatorTransitionMaskImage

6.4设置标题栏的字体

     navigationBarsetTitleTextAttributes:

6.5还可以将标题设置成任何视图(如图片)

     self.navigationItem.titleView＝…;

6.6 设置状态栏风格

     - (UIStatusBarStyle)preferredStatusBarStyle

6.7是否显示状态栏

     - (BOOL)prefersStatusBarHidden

6.8隐藏NavigationBar

     self.navigationControllersetNavigationBarHidden

TableViewCell 的贴图
cell.backgroundView = [UIImageView alloc]initXx;
注意:
1>可能需要将Cell的分隔设置为None(默认是有线的)
选中TableView, 第4检查器， Separator, None
2> Cell的背景颜色设置为透明才可以看得见背景图片
选中Cell原型， 第4检查器， BackgroundColor设置为Clear Color

cell.selectedBackgroundView = …;