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;
  

  • 方式三：给UIImage类添加分类，引用上两种代码实现
  • 方式四：直接在AppIcon选中图片在属性栏中的slicing(切片)属性进行调整