01、贴图与美化：图片适配、九宫切图
1、图片的适配
1）屏幕分类
从显式的角度:非Retina 和 Retina(视网膜屏 高清屏)
从设备的屏幕尺寸角度:对角线长度为3.5寸 4寸 4.7寸 5.5寸
不同的设备的分辨率不同,为了统一高清屏显示时一个统一的坐标系,所以使用 点 作为坐标系的单位,编写代码设计界面时使用点坐标系即可。
在相同大小区域内,根据不同屏幕的种类,准备多套图即可.图片名称 用 @数字x的方式来区分用于适配哪种屏幕,系统可以自动判断加载哪一张。
如：
sun.png
sun@2x.png
sun@3x.png
当我们选图是只会显示一个sun名称的图片。
2）设置AppIcon
在images.xcassete中设置AppIcon，将不同的尺寸图片直接拖拽到小方格中即可，如果尺寸不匹配会有警告。
3）闪屏Launch Screen
在images.xcassete中设置LaunchImage，将不同的尺寸图片直接拖拽到小方格中即可，如果尺寸不匹配会有警告。
注：在Xcode6中设置闪屏图片在资源库中出现
2、九宫切片
2.1 为什么有九切片?
对于一些形式简单,内容有规律变化的背景图来说,需要根据实际的尺寸动态的改变图片的大小,而不是由人工作图的方式来完成图片尺寸的调整
2.2 九切片的核心理念
保证分割线以外的四个角不变,其余中间部分可以自动根据设置进行复制或拉伸,再拼接上四个角以后,图片的尺寸就会被放大
2.3 如何实现九切片
方式一:使用xcode工具进行切片
在图片资源库中,选中图片,点击 start slicing,后选择 中间按钮,横竖三条线调整位置即可
对于横线来说:
第一条横线以上部分保留
第三条横线以下部分保留
第二条和第一条之间部分复制或拉伸
第二条和第三条之间部分被切掉
竖线同理
方式二:使用代码的方式实现切片
UIImage *image = [[UIImage imageNamed:@"message_i"] resizableImageWithCapInsets:UIEdgeInsetsMake(16, 16, 16, 30) resizingMode:UIImageResizingModeStretch];
2.4 什么时候使用切片技术?
大部分情况都是针对为视图设置背景图时,需要根据视图所占据的实际区域,调整背景图大小.
当美工给的图片较小,内容简单,可重复性叠加时,优先想到切图技术
3、控件的美化
1）按钮
按钮的层次:一共有两层,一层扑在下面做背景图,一层在背景图之上,包含左右两部分,默认左边是图片,右边是文字。
问：如何抉择为按钮添加的图片是背景图还是image?
答：图片上可以叠加文字,那么这个图片就是背景；如果图片和文字没有上下层的关系,只是并列(上下并列 左右并列),那么这个图片就是image。
3.2 按钮的可用状态
Normal:摆在那不动
HighLighted:按住不松手
Selected: 设置按钮的selected属性为YES
Disabled: 设置按钮的enable属性为NO时
这四种状态下,都可以设置各自状态下按钮显示的文本和图片
2）滑块
设置三个属性：
setMaximumTrackImage设置未滑动到的区域的背景图
setMinimumTrackImage设置滑动过的区域的背景图
setThumbImage:设置 滑动中间圆钮的图片
需要通过代码设置：
[self.slider setMaximumTrackImage:[UIImage imageNamed:@"playing_volumn_slide_foreground"] forState:UIControlStateNormal];
[self.slider setMinimumTrackImage:[UIImage imageNamed:@"playing_volumn_slide_bg"] forState:UIControlStateNormal];
[self.slider setThumbImage:[UIImage imageNamed:@"playing_volumn_slide_sound_icon"] forState:UIControlStateNormal];
4、tintColor
4.1 什么是tintColor?
一个可以从父容器传递给自视图的颜色属性.只要在父视图级别上设置一个颜色,那么父视图中包含的所有子视图在没有自己指定颜色的时候,就都会使用父视图设置的tintColor,可以实现批量的颜色设置的效果
4.2 作用
统一风格
4.3 如何使用
只对一个界面做统一颜色设置,那么就选中控制器中自带的视图,修改这个视图的tintColor,则该界面所有控件都会应用这个设置
对整个应用做所有界面的统一颜色设置,那么需要在appDelegate的启动方法中,设置window的tintColor即可
注意:
a.如果某个视图自己设置过tintColor,那么该视图就不再使用父视图中得tintColor
b.有些视图会有自己特定的tintColor属性, 如,导航栏就有 barTintColor特有的颜色设置,那么此时该属性也不受父容器tintColor的影响
也就是说，首先使用自己的tintColor。
5、UIAppearance外观类
1）是什么
一种可以定义外观的特殊的类,可以针对指定的某一类控件做批量的外观设置(字体 颜色 图片 …)实现应用中出现的某种控件实例的统一外观的定制。
如:希望应用中所有按钮都有红色背景,那么使用UIAppearance可以对UIButton这种类型做风格的设置,设置完成后,该应用中得所有按钮就会按照设定的样式 统一改变外观
2） 如何使用
step1 : [类型名 appearance] 获取到该类型的UIAppearance实例
step2: 针对类型的外观做 属性设置
// 对UIButton这种类型做背景色的设置
[[UIButton appearance] setBackgroundImage:[UIImage imageNamed:@"delete_btn"] forState:UIControlStateNormal];
6、导航栏
6.美化导航栏Navigation Bar
a.设置背景色
b.设置背景图
c.设置左右按钮中的文字颜色
d.设置中间标题的文字样式
e.设置返回按钮中图标的样式
f. 设置带有导航时,状态栏中的文字颜色
7.美化标签栏Tab Bar 和 Tab Bar Item
a.TabBar的整体的背景图
b.每一个单独的item被选中时的背景图
c.每一个单独的item的文字的样式及位置
1）美化代码写在哪里
写在AppDelegate的didFinishLaunchingWithOptions方中
用到 UIAppearance,对整个应用中得导航和tabBar做风格设定
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
[self customNavigationBar];
[self customTabBar];
return YES;
}
-(void)customTabBar{
UIEdgeInsets standardEdgeInsets = UIEdgeInsetsMake(10, 10, 10, 10);
// 整个tabBar的背景图
[[UITabBar appearance] setBackgroundImage:[[UIImage imageNamed:@“tabbar_back"
resizableImageWithCapInsets:standardEdgeInsets resizingMode:UIImageResizingModeStretch]];
//设置tab bar上每一个项被选中时的背景图
[[UITabBar appearance] setSelectionIndicatorImage:[UIImage imageNamed:@"tabbar_selected_back"]];
//设置tab bar item上文字的位置 大小 颜色
[[UITabBarItem appearance] setTitlePositionAdjustment:UIOffsetMake(0, -1)];
[[UITabBarItem appearance]setTitleTextAttributes:@{
NSForegroundColorAttributeName:[UIColor lightGrayColor],NSFontAttributeName:[UIFont boldSystemFontOfSize:12]
} forState:UIControlStateNormal];
[[UITabBarItem appearance]setTitleTextAttributes:@{
NSForegroundColorAttributeName:[UIColor whiteColor],NSFontAttributeName:[UIFont boldSystemFontOfSize:12]
} forState:UIControlStateSelected];
}
//美化导航栏
-(void)customNavigationBar{
//设置背景色
[[UINavigationBar appearance] setBarTintColor:[UIColor blackColor]];
//设置有导航条时,状态栏的文字颜色
[[UINavigationBar appearance] setBarStyle:UIBarStyleBlack];
//设置导航条的背景图
//[[UINavigationBar appearance] setBackgroundImage:[UIImage imageNamed:@"NavigationBarDefault"] forBarMetrics:UIBarMetricsDefault];
//设置左右按钮上的文字颜色
[[UINavigationBar appearance] setTintColor:[UIColor whiteColor]];
//设置返回按钮中出现的箭头样式
[[UINavigationBar appearance] setBackIndicatorImage:[UIImage imageNamed:@"back_btn"]];
[[UINavigationBar appearance] setBackIndicatorTransitionMaskImage:[UIImage imageNamed:@"back_btn"]];
//设置中间的title的文字样式
NSShadow *shadow = [[NSShadow alloc]init];
shadow.shadowColor = [UIColor redColor];
shadow.shadowOffset = CGSizeMake(0, 1);
NSDictionary *dictionary = [NSDictionary dictionaryWithObjectsAndKeys:shadow,NSShadowAttributeName,[UIColor whiteColor],NSForegroundColorAttributeName,[UIFont fontWithName:@"HelveticaNeue-CondensedBlack" size:21],NSFontAttributeName,nil];
[[UINavigationBar appearance] setTitleTextAttributes:dictionary];
}