IOS xib和代码自定义UIView

https://www.jianshu.com/p/1bcc29653085 总结的比较好

iOS开发中,我们常常将一块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:方法
  • 通过Xib\StoryBoard创建
    • 初始化不会调用 -(instancetype)initWithFrame:方法,只会调用-(instancetype)initWithCoder:方法
    • 初始化完成之后,回调用awakeFromNib方法

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
iOS 开发中,TableView 是一个非常重要的视图控件,用于展示大量数据。而 TableView 中的 HeaderView 和 FooterView 也是非常重要的组件,可以用于展示一些额外的信息或者操作按钮。在 TableView 中,我们可以通过注册重用标识符来复用 Cell,但是对于 HeaderView 和 FooterView 却没有提供类似的注册方法。本文将介绍如何在 TableView 中循环利用 HeaderView,并且还会介绍如何自定义 HeaderView。 ## 循环利用 TableView 中的 HeaderView 在 TableView 中,我们可以通过以下方法来设置 HeaderView: ``` - (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section { UIView *headerView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, tableView.bounds.size.width, 44)]; headerView.backgroundColor = [UIColor grayColor]; return headerView; } - (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section { return 44; } ``` 上面的代码中,我们通过实现 `tableView:viewForHeaderInSection:` 方法来设置 HeaderView 的内容和样式,通过实现 `tableView:heightForHeaderInSection:` 方法来设置 HeaderView 的高度。但是如果我们在 TableView 中有很多组数据,每次都创建一个新的 HeaderView 会非常消耗性能,因此我们需要对 HeaderView 进行循环利用。 循环利用 HeaderView 的实现方法非常简单,我们只需要在 TableView 的代理方法中通过 `dequeueReusableHeaderFooterViewWithIdentifier:` 方法来获取 HeaderView,如果获取到的 HeaderView 为 nil,就创建一个新的 HeaderView,否则就返回重用的 HeaderView。 ``` - (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section { static NSString *headerIdentifier = @"headerIdentifier"; UITableViewHeaderFooterView *headerView = [tableView dequeueReusableHeaderFooterViewWithIdentifier:headerIdentifier]; if (!headerView) { headerView = [[UITableViewHeaderFooterView alloc] initWithReuseIdentifier:headerIdentifier]; headerView.contentView.backgroundColor = [UIColor grayColor]; } return headerView; } ``` 上面的代码中,我们首先定义一个静态的重用标识符 `headerIdentifier`,然后通过 `dequeueReusableHeaderFooterViewWithIdentifier:` 方法获取重用的 HeaderView。如果获取到的 HeaderView 为 nil,我们就创建一个新的 HeaderView,并且设置它的重用标识符为 `headerIdentifier`。最后,我们设置 HeaderView 的背景颜色,并且返回 HeaderView。 ## 自定义 TableView 中的 HeaderView 除了循环利用 HeaderView,我们还可以自定义 HeaderView。自定义 HeaderView 的方法与自定义 Cell 的方法类似,我们需要在 XIB 或者代码中创建一个自定义的 HeaderView,然后在 TableView 的代理方法中返回它。 ### 在 XIB 中创建自定义 HeaderView 在 XIB 中创建自定义 HeaderView 的方法非常简单,我们只需要创建一个新的 XIB 文件,然后在 XIB 中添加一个 UIView,将它的 Class 设置为 UITableViewHeaderFooterView,接着就可以在 XIB自定义 HeaderView 的内容和样式了。 创建完成后,我们需要在代码中注册这个 XIB 文件,并且设置它的重用标识符。在 TableView 的初始化方法中,我们可以通过以下方法来注册 XIB 文件: ``` UINib *headerNib = [UINib nibWithNibName:@"HeaderView" bundle:nil]; [tableView registerNib:headerNib forHeaderFooterViewReuseIdentifier:@"headerIdentifier"]; ``` 上面的代码中,我们首先通过 `nibWithNibName:bundle:` 方法加载 XIB 文件,然后通过 `registerNib:forHeaderFooterViewReuseIdentifier:` 方法注册 XIB 文件,并且设置它的重用标识符为 `headerIdentifier`。 最后,在 TableView 的代理方法中,我们可以通过以下方法来获取自定义的 HeaderView: ``` - (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section { static NSString *headerIdentifier = @"headerIdentifier"; UITableViewHeaderFooterView *headerView = [tableView dequeueReusableHeaderFooterViewWithIdentifier:headerIdentifier]; return headerView; } ``` ### 在代码中创建自定义 HeaderView 在代码中创建自定义 HeaderView 的方法也非常简单,我们只需要创建一个继承自 UITableViewHeaderFooterView 的类,然后在这个类中实现自定义 HeaderView 的内容和样式。 ``` @interface CustomHeaderView : UITableViewHeaderFooterView @property (nonatomic, strong) UILabel *titleLabel; @end @implementation CustomHeaderView - (instancetype)initWithReuseIdentifier:(NSString *)reuseIdentifier { if (self = [super initWithReuseIdentifier:reuseIdentifier]) { self.contentView.backgroundColor = [UIColor grayColor]; self.titleLabel = [[UILabel alloc] initWithFrame:CGRectMake(10, 0, self.contentView.bounds.size.width - 20, self.contentView.bounds.size.height)]; self.titleLabel.font = [UIFont systemFontOfSize:16]; self.titleLabel.textColor = [UIColor whiteColor]; [self.contentView addSubview:self.titleLabel]; } return self; } @end ``` 上面的代码中,我们创建了一个名为 `CustomHeaderView` 的类,继承自 UITableViewHeaderFooterView。在这个类的初始化方法中,我们设置了 HeaderView 的背景颜色,并且创建了一个 UILabel 来显示标题,最后将它添加到 HeaderView 的 contentView 上。 创建完成后,我们需要在代码中注册这个自定义 HeaderView,并且设置它的重用标识符。在 TableView 的初始化方法中,我们可以通过以下方法来注册自定义 HeaderView: ``` [tableView registerClass:[CustomHeaderView class] forHeaderFooterViewReuseIdentifier:@"headerIdentifier"]; ``` 上面的代码中,我们通过 `registerClass:forHeaderFooterViewReuseIdentifier:` 方法注册自定义 HeaderView,并且设置它的重用标识符为 `headerIdentifier`。 最后,在 TableView 的代理方法中,我们可以通过以下方法来获取自定义的 HeaderView: ``` - (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section { static NSString *headerIdentifier = @"headerIdentifier"; CustomHeaderView *headerView = [tableView dequeueReusableHeaderFooterViewWithIdentifier:headerIdentifier]; headerView.titleLabel.text = [NSString stringWithFormat:@"Header %ld", section]; return headerView; } ``` 上面的代码中,我们首先定义一个静态的重用标识符 `headerIdentifier`,然后通过 `dequeueReusableHeaderFooterViewWithIdentifier:` 方法获取自定义的 HeaderView,并且设置它的标题为 `Header section`。最后,我们返回自定义的 HeaderView。 总结 在本文中,我们介绍了如何在 TableView 中循环利用 HeaderView,并且还介绍了如何自定义 HeaderView。循环利用 HeaderView 可以提高 TableView 的性能,自定义 HeaderView 可以让我们更加灵活地控制 HeaderView 的样式和内容。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值