• iOS回顾笔记(03) -- 自定义View的封装和xib文件的使用详解


    iOS回顾笔记(03) -- 自定义View的封装和xib文件的使用详解

    iOS开发中,我们常常将一块View封装起来,以便于统一管理内部的子控件。如iOS回顾笔记(02)中的"书"这一自定义View。

    下面就来说说自定义View的封装以及它的多种实现方式

    自定义UIView(控件)的封装

    什么是View的封装

    • 如果一个View的内部子控件比较多,一般会考虑自定义一个View,把它内部子控件的创建屏蔽起来,不让外部关心。
    • 外界传入对应的数据模型给view。view拿到数据模型之后给内部的子控件设置对应的数据。

    封装自定义控件的基本步骤

    • 重写 - (instancetype)initWithFrame方法,在此方法中创建并添加子控件。
    • 提供一个便利的构造方法,通常为 类方法,快速创建一个实例对象
    • 重写 - (void)layoutSubviews方法,在此方法中设置子控件的frame,一定要调用[super layoutSubviews]
    • 设置模型属性,在set方法中,给对应的子控件赋值。

    看代码

    XYBookView.h 头文件
    
    #import <UIKit/UIKit.h>
    @class XYBook;
    
    @interface XYBookView : UIView
    
    // 只放一个数据属性用来赋值,内部布局,放到.m 中自己管,不暴露给外界
    @property (nonatomic, strong) XYBook *book;
    
    @end
    
    
    实现文件 .m文件
    #import "XYBookView.h"
    #include "XYBook.h"
    
    @interface XYBookView ()
    
    // 两个内部子控件在内部包装起来,不给外界看到
    @property (nonatomic, weak) UIImageView *icon;
    
    @property (nonatomic, weak) UILabel *label;
    
    @end
    
    @implementation XYBookView
    
    // 1.重写initWithFrame:方法,创建子控件并添加到自己上面
    - (instancetype)initWithFrame:(CGRect)frame
    {
        if (self = [super initWithFrame:frame]) {
    
            // 1. 创建书图标
            UIImageView *icon = [UIImageView new];
            self.icon = icon;
            [self addSubview:self.icon];
    
            // 2.书名
            UILabel *bookName = [UILabel new];
            bookName.textAlignment = NSTextAlignmentCenter;
            self.label = bookName;
            [self addSubview:self.label];
    
        }
        return self;
    }
    
    // 2.重写layoutSubviews,给自己内部子控件设置frame
    - (void)layoutSubviews
    {
        [super layoutSubviews];
        CGSize size = self.frame.size;
        self.icon.frame = CGRectMake(0, 0, size.width , size.height * 0.7);
        self.label.frame = CGRectMake(0, size.height * 0.7, size.width, size.height *(1 - 0.7));
    
    }
    
    // 3.调用模型的set方法,给书的子控件赋值,
    - (void)setBook:(XYBook *)book
    {
        _book = book;
        self.icon.image = [UIImage imageNamed:book.icon];
        self.label.text = book.name;
    }
    @end
    

    以上是纯代码实现的View的封装,写起来有些麻烦。

    开发中另一种常用的封装方式是Xib,下面介绍Xib的相关知识。

    XIB和Storyboard的比较

    共同点

    • 都是用来描述软件界面
    • 最后都是 Interface Builder工具来编译
    • 本质上都是转化成代码去创建控件

    不同点

    • Xib是轻量级的,用来描述局部的UI界面
    • Storyboard是重量级的,不仅可以用来描述整个应用的多个页面,而且可以展示页面间的跳转关系。

    Xib的创建

    2017-03-03 23.43.06.gif

    Xib的使用

    Xib的加载方式

    Xib作为局部UI的描述文件,它也是一种项目内的资源文件,在项目中查找路劲也是在[UIBundle mainBundle]中,它的加载方式有两种

    方式1

    在对应的mainBundle中加载XYBookView类型的nib文件,返回是数组,取数组中对应的view即可

    NSArray *views = [[NSBundle mainBundle] loadNibNamed:@"XYBookView" owner:nil options:nil];
    XYBookView *bookView = views.firstObject;
    

    方式2

    Xib/Storyboard文件编译之后生成的都是 Nib文件,加载XYBookView.xib对应的.nib文件,通过.nib文件实例化的数组中取到对应的XYBookView实例对象。

    UINib *nib = [UINib nibWithNibName:@"XYBookView" bundle:nil];
    XYBookView *bookView = [[nib instantiateWithOwner:nil options:nil] firstObject];
    

    使用注意

    • 进行类绑定,告诉Xib它是什么类型,用来描述那个文件
    • 通常Xib文件名和要描述的文件同名,易于辨认和管理

    Snip20170304_1.png

    Xib的使用细节完善

    • Xib用来描述控件,是把原来代码创建的内容直接用图形化来展示了
    • Xib里面的子控件需要拖线到对应文件中,以便文件内赋值和其他使用

    Snip20170304_2.png

    封装Xib的加载过程

    
    #import "XYBookView.h"
    @interface XYBookView ()
    // 封装一个快速返回实例对象的类方法
    + (instancetype)bookView;
    
    @end
    
    @implementation XYBookView
    
    + (instancetype)bookView
    {
        // 封装Xib的加载过程
        return [[NSBundle mainBundle] loadNibNamed:@"XYBookView" owner:nil options:nil].firstObject;
        
    }
    

    小结

    一个控件有两种创建方式

    • 通过代码创建
      • 初始化一定会调用 -(instancetype)initWithFrame:方法
    • 通过XibStoryBoard创建
      • 初始化不会调用 -(instancetype)initWithFrame:方法,只会调用-(instancetype)initWithCoder:方法
      • 初始化完成之后,回调用awakeFromNib方法

    通过两种加载方式,可以发现:有时候我们希望在控件初始化时做一些初始化的操作,如添加子控件,设置属性等,这时候需要根据控件的加载方式来选择-(instancetype)initWithFrame:-(instancetype)initWithCoder:awakeFromNib三个方法中的哪个方法进行初始化。

  • 相关阅读:
    STM32 HAL库学习笔记
    嵌入式Linux学习笔记
    AVR_Interrupt
    shutdown命令用法
    ULINK2 USB电脑无法识别(连接电脑后,设备管理器显示未知设备)
    MDK中编译程序后Program Size详解
    Keil(MDK-ARM)系列教程(三)_工程目标选项配置(Ⅰ)
    第48章 MDK的编译过程及文件类型全解
    Do not access Object.prototype method ‘hasOwnProperty’ from target object no-prototype-builtins
    让vscode按照eslint进行格式化
  • 原文地址:https://www.cnblogs.com/xiaoyouPrince/p/6499133.html
Copyright © 2020-2023  润新知