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;
[ 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];
[ 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 ];
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 ];
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 ]
NSFontAttributeName : [ UIFont italicSystemFontOfSize : 30 ], NSForegroundColorAttributeName : [ UIColor greenColor ]
}
];
//自定义中间视图(
还可以将标题设置成任何视图(如图片)
)
//self.navigationItem.titleView = ...
}
//自定义状态栏风格
- ( UIStatusBarStyle )preferredStatusBarStyle
}
//自定义状态栏风格
- ( UIStatusBarStyle )preferredStatusBarStyle
{
return
UIStatusBarStyleLightContent
;//设置状态栏的颜色为白色
}
// 隐藏状态栏
- ( BOOL )prefersStatusBarHidden
{
return YES ;
// 隐藏状态栏
- ( BOOL )prefersStatusBarHidden
{
return YES ;
}
//设置隐藏NavigationBar的执行代码
- (
IBAction
)hideNavigationBar:(
id
)sender {
[ self . navigationController setNavigationBarHidden :! self . navigationController . navigationBarHidden animated : YES ];
[ 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;
{
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. 贴图
给各种控件或视图贴图,以达到美化的效果
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 ;
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.1 是什么
是一个协议, 遵守此协议的对象可以批量设置某种控件的外观(颜色,贴图等)
5.2 如何获取
任何视图类都有一个类方法:
+(instancetype)appearance;
此方法返回的对象会遵守UIAppearance协议
5.3 如何使用
拿到此对象,就像对普通控件对象一样,设置颜色、背景等来批量设置某种控件的外观
[Demo8]
6. UINavigationBar美化
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.backgroundView = [UIImageView alloc]initXx;
注意:
1>可能需要将Cell的分隔设置为None(默认是有线的)
选中TableView, 第4检查器, Separator, None
2> Cell的背景颜色设置为透明才可以看得见背景图片
选中Cell原型, 第4检查器, BackgroundColor设置为Clear Color
cell.selectedBackgroundView = …;