我还真不知道该怎么介绍这一节所要给大家写的东西， 就感觉突然想写，就把他写下来了。 好了，先看一下效果图吧。
(这里我主要事项介绍一种思想,模仿苹果的思想.)
可不是介绍美团哦.gif
我主要想介绍的是,双排 tableView 的显示界面.以及关于自定义控件仿 tableView和代码扩展性的介绍.
1.1 闲话少说,要展示双排 tableView,自定义 view,xib 中加入两个 tableView 并添加约束
1.2 拖线,这里我们姑且将 view 称为 leftRightView, 左边的 tableView称为 leftTableView, 右边的 tableView 称为 rightTableView. 将左右两边的 tableView 的 dataSource (数据源)和 delegate(代理)都托给 leftRightView(其实在我看来这里的 leftRightView 就是一个容器 view, 就是为放东西的).现在是关键的时候,理解好的话,也许会对你的 tableView 有更深的印象.
2.1 我们之前说过要封装一个和 tableView 一样的控件,这样的我们就会想到, tableView 的数据和事件都是怎么处理的. 很简单,答案就是他们的数据源和代理提供和执行的.
2.2 那,我们就给自己的 leftRightView 书写数据源方法和代理方法,然后让成为我们数据源和代理的对象,给我提供数据,以及事件的处理.
2.3 大家就会想那内部怎么办呢, leftRightView 内部怎么办呢.
2.3.1 怎么办? 有数据的话,那数据个数不就知道了,有数据的话,展示什么的不就也知道了. 第二排得数据,是根据点击第一排数据的得到了.(想到了点击,就想到了代理方法了. )(给传入点击的行,返回数组数据, 有数据,再进行添加就行了).
3.也许大家还是不太明白, 在这里我讲方法书写一下,也许大家就会懂了.
3.1 数据源方法
// 数据源的方法
@class LXLLeftRightView;
@protocol LXLLeftRightViewDataSource<NSObject>
// 必须实现的方法
@required
/**
* 返回左边的 tableView 的数据个数
*
* @param leftRightView 模仿苹果将对象传入
*
* @return 数据个数.
*/
- (NSInteger)numberForItemsForleftRightView:(LXLLeftRightView *)leftRightView;
/**
* 返回左边每一行的 tableView 的展示文字
*
* @param leftRightView 模仿苹果将对象传入
* @param row 行号
*
* @return 返回字符串(文字)
*/
- (NSString *)leftRightView:(LXLLeftRightView *)leftRightView nameForRow:(NSInteger)row;
// 可选实现的方法
@optional
/**
* 返回左边每一行的 左边图片名字(看你模型中是否有这种属性)
*
* @param leftRightView 模仿苹果将对象传入
* @param row 行号
*
* @return 返回图片名字
*/
- (NSString *)leftRightView:(LXLLeftRightView *)leftRightView imageNameForRow:(NSInteger)row;
/**
* 返回左边每一行的 左边 cell 点击后的高亮图片(看你模型中是否有这一个属性)
*
* @param leftRightView 模仿苹果将对象传入
* @param row 行号
*
* @return 返回图片名字
*/
- (NSString *)leftRightView:(LXLLeftRightView *)leftRightView highLightImageNameForRow:(NSInteger)row;
@end
3.2 代理方法
// 代理方法
@protocol LXLLeftRightViewDelegate <NSObject>
@optional
/**
* 返回点击了左边leftTableView的某一行的 的数组数据,用于放置在右边rightTableView的 cell 种
*
* @param leftRightView 模仿苹果将对象传入
* @param row 行号
*
* @return 返回数组数据
*/
- (NSArray *)leftRightView:(LXLLeftRightView *)leftRightView didSelectRow:(NSInteger)row;
@end
3.3 先看看 leftRightView 内部是怎么给布置数据的
#pragma mark - 数据源方法
// 根据 tableView 的不同 ,来返回不同的行数.
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
if (tableView == self.leftTableView) {
// 这里为什么不实现 [self.dataSoure respondsToSelector:<#(SEL)#>]方法,是因为这个方法是必须实现的,你要作我的数据源,就必须要实现我的方法
// 数据源执行方法,返回数据个数
return [self.dataSoure numberForItemsForleftRightView:self];
}else{
// 点击 左边 tableView 返回的数组数据(这里也是我原本模型中有的数据类型)
return self.subArray.count;
}
}
// 根据tableView 的不同,来展示 cell 的数据
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *ID = @"cell";
UITableViewCell *cell = nil;
// 这里我自定义了 cell, 当然你也可以自定义,或者 注册都可以的
if (tableView == self.leftTableView) {
cell = [LXLLeftRightCell leftRightCellWithtableView:tableView withReusableIdentifier:ID withStyle:UITableViewCellStyleDefault];
// 这里也是必须实现的方法, 用来返回左边 cell 的展示文字
cell.textLabel.text = [self.dataSoure leftRightView:self nameForRow:indexPath.row];
// 这里为可选方法,由于设定左边 cell 的显示图片和选中图片
if ([self.dataSoure respondsToSelector:@selector(leftRightView:imageNameForRow:)]) {
NSString *imageName = [self.dataSoure leftRightView:self imageNameForRow:indexPath.row];
cell.imageView.image = [UIImage imageNamed:imageName];
}
if ([self.dataSoure respondsToSelector:@selector(leftRightView:highLightImageNameForRow:)]) {
NSString *highLightImageName = [self.dataSoure leftRightView:self highLightImageNameForRow:indexPath.row];
cell.imageView.highlightedImage = [UIImage imageNamed:highLightImageName];
}
}else{
cell = [LXLLeftRightCell leftRightCellWithtableView:tableView withReusableIdentifier:ID withStyle:UITableViewCellStyleDefault];
// 根据返回的数组数据,给右边的 tableView 赋值
cell.textLabel.text = self.subArray[indexPath.row];
}
return cell ;
}
3.4 点击左边 cell 的 代理方法的实现
#pragma mark - 代理方法
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
// 点击了左边 tableView 的 cell
if (tableView == self.leftTableView) {
// 如果实现了代理方法
if ([self.delegate respondsToSelector:@selector(leftRightView:didSelectRow:)]) {
// 返回一组数组(用于布置右边 tableView 的 显示)
self.subArray = [self.delegate leftRightView:self didSelectRow:indexPath.row];
// 刷新右边 tableView 的控件(如果不刷新,就不会显示. 因为数据源方法,不会执行,这里的刷新是用来强制执行数据源方法的)
[self.rightTableView reloadData];
}
}
}
4.如果大家看懂了上面几个方法的实现, 就会明白这个 leftRightView 就相当于一个 tableView, 我不需要知道数据具体是什么,只要设定了数据源对象,和代理对象,让他提供就行了. 这样的话,我的控件就独立出来了, 扩展性就加强了.
5.上面都懂了的话,我觉得下面的代码,就可以不用看了,跟废话基本没区别.(但还是写写把,即使是废话,也是很重要的)
5.1 先让能提供数据的控制器作为控件的数据源和代理(记得遵守协议哦)
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
LXLLeftRightView *categoryView = [LXLLeftRightView leftRightView];
categoryView.frame = self.view.bounds;
[self.view addSubview:categoryView];
categoryView.delegate = self;
categoryView.dataSoure = self;
}
5.2 实现对应的方法 (一般数据都是模型数组数据, 这里一般使用懒加载的方式,进行数据加载,主要是想提高启动效率,以为程序启动到显示,肯定要做很多事,如果你让他启动的时候就加载数据的话,是很耗性能,耗时也长的, 对于不好的手机,估计直接就死机了,O(∩_∩)O~).
// 数据加载, 这里我用的是 MJExtension 的框架,说真的很好用.但是前提你会模型转换才行,不要上手就用,而不动其中的运转机制
#pragma mark - 懒加载
- (NSArray *)categories
{
if (_categories == nil) {
_categories = [LXLCategory objectArrayWithFilename:@"categories.plist"];
}
return _categories;
}
#pragma mark - 数据源
// 返回左边 tableView 的行数
- (NSInteger)numberForItemsForleftRightView:(LXLLeftRightView *)leftRightView
{
return self.categories.count;
}
// 根据行号,取出模型,再返回模型中的 name 属性文字
- (NSString *)leftRightView:(LXLLeftRightView *)leftRightView nameForRow:(NSInteger)row
{
LXLCategory *category = self.categories[row];
return category.name;
}
// 根据行号取出模型,返回图片 name
- (NSString *)leftRightView:(LXLLeftRightView *)leftRightView imageNameForRow:(NSInteger)row
{
LXLCategory *category = self.categories[row];
return category.small_icon;
}
// 根据行号取出模型,返回高亮图片 name
- (NSString *)leftRightView:(LXLLeftRightView *)leftRightView highLightImageNameForRow:(NSInteger)row
{
LXLCategory *category = self.categories[row];
return category.small_highlighted_icon;
}
#pragma mark - 代理方法
// 根据选中的行号,返回 数组(模型中有的),用来布置右边的 tableView
- (NSArray *)leftRightView:(LXLLeftRightView *)leftRightView didSelectRow:(NSInteger)row
{
LXLCategory *category = self.categories[row];
return category.subcategories;
}
