5iOS第五天—自定义View以及KVC&KVO

xib的基本使用

xib的基本使用.png

什么是xib？
- xib就是缩小版的storyboard。
Xib和storyboard对比
- 共同点：
  - 都用来描述软件界面
  - 都用Interface Builder工具来编辑
  - 本质都是转换成代码去创建控件
- 不同点
  - Xib是轻量级的，用来描述局部的UI界面
  - Storyboard是重量级的，用来描述整个软件的多个界面，并且能展示多个界面之间的跳转关系
Xib的加载
- 方法1
NSArray *views = [[NSBundle mainBundle] loadNibNamed:@"xib文件名" owner:nil options:nil]
```
- 方法2
UINib *nib = [UINib nibWithNibName:@"xib文件名" bundle:nil];
NSArray *views = [nib instantiateWithOwner:nil options:nil];
```
使用xib自定义view的步骤
- 新建自定义控件类
- 新建xib文件（文件名建议和view的类名一致）

这时就可以在xib空文件中画自己想要的控件
- 修改xib中view的类名
- 封装xib的加载过程
- 增加模型属性，在模型属性set方法中设置数据到子控件上

使用xib的注意点
- 一个控件有2种创建方式
  - 通过代码创建
    - 初始化时一定会调用initWithFrame:方法
  - 通过xib\storyboard创建
    - 初始化时不会调用initWithFrame:方法，只会调用initWithCoder:方法
    - 初始化完毕后会调用awakeFromNib方法
- 有时候希望在控件初始化时做一些初始化操作，比如添加子控件、设置基本属性，这时需要根据控件的创建方式，来选择在initWithFrame:、initWithCoder:、awakeFromNib的哪个方法中操作

简单的渐变动画代码实现

一般为了避免控件位置尺寸变化的太突然以及添加一些特殊效果，我们要给变化过程加以控制，使其平缓过渡，一般只有frame和alpha这两个属性可以进行渐变动画。
- 方式1: 首尾式
[UIView beginAnimations:nil context:nil];

//执行动画
CGRect tempFrame = self.redView.frame;
tempFrame.origin.y += 50;
self.redView.frame = tempFrame;

[UIView commitAnimations];
```
- 方式2: 回调式
[UIView animateWithDuration:0.5 animations:^{
//执行动画
CGRect tempFrame = self.redView.frame;
tempFrame.origin.y += 50;
self.redView.frame = tempFrame;
}];
//动画完成之后还有操作
[UIView animateWithDuration:0.5 animations:^{
//执行动画
CGRect tempFrame = self.redView.frame;
tempFrame.origin.y += 50;
self.redView.frame = tempFrame;
} completion:^(BOOL finished) {
self.redView.backgroundColor = [UIColor blueColor];
}];
```
渐变动画的几种常用形式
- UIViewAnimationOptionCurveEaseInOut 开始和结束比较慢,中间比较快
- UIViewAnimationOptionCurveEaseIn 开场比较慢,后面比较快
- UIViewAnimationOptionCurveEaseOut 开场正常,结尾比较慢
- UIViewAnimationOptionCurveLinear 线性----> 匀速

UIButton补充——内边距调整

可在属性栏里调整

内边距.png

可通过代码调整

//调整整体内容
self.button.contentEdgeInsets = UIEdgeInsetsMake(10, 5, 0, 0);
//调整Button内部图片的
self.button.imageEdgeInsets = UIEdgeInsetsMake(5, 16, 0, 0);
//调整button标题的
self.button.titleEdgeInsets = UIEdgeInsetsMake(10, 5, 0, 0);

图片拉伸问题的解决方法

当小图片被拉伸到很大尺寸的时候，这时候像素会变的很低，图片变得模糊，实际上往往会遇到图片适配不上imageView范围，因此会自动填充放大，导致图片边角变模糊问题。为了解决这个问题，我们让图片在拉伸的时候，设置中心附近1X1像素的区域随着拉伸而拉伸，其他区域不被拉伸，这样就保证了边缘的清晰度，图片看起来更美观。那么中心附近的1X1的区域是怎么计算出来的呢？我们规定一张图片（上半部分）和（下半部分-1）不被拉伸，规定（左半部分）和（右半部分-1）不被拉伸，那么就有1X1区域没有被包含在内，因此这个区域会被拉伸

代码实现

// 方式1:
UIImage *image = [UIImage imageNamed:@"chat_send_nor"];
// 作用: 根据传入需要保护的区域返回一张受保护的图片
UIEdgeInsets edgeInsets = UIEdgeInsetsMake(image.size.height * 0.5, image.size.width * 0.5, image.size.height * 0.5 -1, image.size.width * 0.5 -1);
/*
 UIImageResizingModeTile,  以平铺的方式进行拉伸
 UIImageResizingModeStretch, 直接拉伸平铺
 */
UIImage *protectImage = [image resizableImageWithCapInsets:edgeInsets resizingMode:UIImageResizingModeTile];
self.imageView.image = protectImage;

//方式二
UIImage *image = [UIImage imageNamed:@"chat_send_nor"];
// rightCapWidth = width - leftCapWidth - 1
// bottomCapWidth = height - topCapWidth - 1
UIImage *protectImage = [image stretchableImageWithLeftCapWidth:image.size.width * 0.5 topCapHeight:image.size.height *0.5];
self.imageView.image = protectImage;