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(切片)屬性進行調整