下雨天，在家敲代碼很爽哦~~~
亦菲女神
閑話不多說，放效果圖：
BeeQuick.gif
正文
一、準備
1.第三方庫：本Demo用到的第三方庫有：MJRefresh、Masonry、MJExtension、SDWebImage ，都是比較常見的，使用也比較多的。
2.分類：UIImage、UIImageView
- 顏色轉換為圖片
+(UIImage *)createImageWithColor:(UIColor *)color {
CGRect rect = CGRectMake(0.0f, 0.0f, 1.0f, 1.0f);
UIGraphicsBeginImageContext(rect.size);
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetFillColorWithColor(context, [color CGColor]);
CGContextFillRect(context, rect);
UIImage *theImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return theImage;
}
- 由于上次被SDWebImage更新所坑過，所以對其簡單的封裝了一下
- (void)setImageWithURLStr:(NSString *)url placeholderImage:(UIImage *)placeholderImage
{
[self sd_setImageWithURL:[NSURL URLWithString:url] placeholderImage:placeholderImage];
}
3.資源：數據庫及圖片
二、繪制視圖View
- 一級表（左）
self.categoriesTableView = ({
UITableView *tabView = [[UITableView alloc]initWithFrame:CGRectZero style:UITableViewStylePlain];
tabView.delegate = self;
tabView.dataSource = self;
tabView.separatorStyle = UITableViewCellSeparatorStyleNone;
tabView.backgroundColor = COLOR_BG;
tabView.showsVerticalScrollIndicator = NO;
tabView;
});
[self.view addSubview:self.categoriesTableView];
[self.categoriesTableView mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(self.view).offset(64);
make.leading.equalTo(self.view);
make.bottom.equalTo(self.view);
make.width.mas_equalTo(self.view).multipliedBy(0.25);
}];
- 二級表（右）:創建一個子控制器，在子控制器中繪制右表
self.productsController = [[ProductsController alloc]init];
[self addChildViewController:self.productsController];
[self.view addSubview:self.productsController.view];
- 繪制tableViewCell
+ (instancetype)cellWithTable:(UITableView *)tableView {
static NSString *cellId = @"ProductsCellID";
ProductsCell *cell = [tableView dequeueReusableCellWithIdentifier:cellId];
if (cell == nil) {
cell = [[ProductsCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:cellId];
}
cell.selectionStyle = UITableViewCellSelectionStyleNone;
return cell;
}
三、左右表二級聯動
在第一個控制器中，聲明一個代理協議方法；
@protocol CategoryTableViewDelagate <NSObject>
- (void)didTableView:(UITableView *)tableView clickedAtIndexPath:(NSIndexPath*)indexPath;
@end
@property (nonatomic,weak) id<CategoryTableViewDelagate>delegate;
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
if ([self.delegate respondsToSelector:@selector(didTableView:clickedAtIndexPath:)]) {
[self.delegate didTableView:self.categoriesTableView clickedAtIndexPath:indexPath];
}
}
然后，由第二個控制器來調用該協議方法，實現左邊表一點擊列表分區，右側表二相應的分區頭視圖調到列表頭部。
- (void)didTableView:(UITableView *)tableView clickedAtIndexPath:(NSIndexPath*)indexPath;
{
[self.productsTableView selectRowAtIndexPath:[NSIndexPath indexPathForRow:0 inSection:indexPath.row] animated:YES scrollPosition:UITableViewScrollPositionTop];
}
同樣，右邊控制左邊，也是通過協議的方式來實現。當表二分區從上往下滑動時，即將展示分區頭視圖時，選中該分區對應的表一分區。當表二分區從下往上滑動時，即將結束分區頭視圖時，選中該分區對應的下一個表一分區；
@protocol ProductsDelegate<NSObject>
- (void)willDislayHeaderView:(NSInteger)section;
- (void)didEndDislayHeaderView:(NSInteger)section;
@end
@property (nonatomic,weak) id<ProductsDelegate>delegate;
-(void)tableView:(UITableView *)tableView willDisplayHeaderView:(UIView *)view forSection:(NSInteger)section
{
if (!self.isScrollDown && [self.delegate respondsToSelector:@selector(willDislayHeaderView:)])
{
[self.delegate willDislayHeaderView:section];
}
}
-(void)tableView:(UITableView *)tableView didEndDisplayingHeaderView:(UIView *)view forSection:(NSInteger)section
{
if (self.isScrollDown && [self.delegate respondsToSelector:@selector(didEndDislayHeaderView:)])
{
[self.delegate didEndDislayHeaderView:section];
}
}
由第一個控制器來實現該方法。
- (void)willDislayHeaderView:(NSInteger)section
{
[self.categoriesTableView selectRowAtIndexPath:[NSIndexPath indexPathForRow:section inSection:0] animated:YES scrollPosition:UITableViewScrollPositionMiddle];
}
- (void)didEndDislayHeaderView:(NSInteger)section
{
[self.categoriesTableView selectRowAtIndexPath:[NSIndexPath indexPathForRow:section+1 inSection:0] animated:YES scrollPosition:UITableViewScrollPositionMiddle];
}
四、獲得表數據
由于Demo需要，采用的是本地數據庫數據，通過MJExtension動態加載屬性。
NSString *path = [[NSBundle mainBundle] pathForResource:@"supermarket" ofType:nil];
NSData *data = [NSData dataWithContentsOfFile:path];
NSDictionary *json = [NSJSONSerialization JSONObjectWithData:data options:NSJSONReadingAllowFragments error:nil];
SuperMarketSource *source = [SuperMarketSource mj_objectWithKeyValues:json];
SuperMarketData *superMarketData = source.data;
for (NSInteger i = 0; i < superMarketData.categories.count; i++) {
ProductCategory *catgeory = superMarketData.categories[i];
NSArray *productsArr = superMarketData.products[catgeory.id];
catgeory.products = [Goods mj_objectArrayWithKeyValuesArray:productsArr];
}
complete(superMarketData,nil);
五、刷新表
自定義繼承自MJRefreshGifHeader的一個類，通過實現父類的方法，來完成下拉刷新功能。
- (void)prepare {
[super prepare];
[self setImages:@[[UIImage imageNamed:@"v2_pullRefresh1"]] forState:MJRefreshStateIdle];
[self setImages:@[[UIImage imageNamed:@"v2_pullRefresh2"]] forState:MJRefreshStatePulling];
[self setImages:@[[UIImage imageNamed:@"v2_pullRefresh1"],[UIImage imageNamed:@"v2_pullRefresh2"]] forState:MJRefreshStateRefreshing];
[self setTitle:@"下拉刷新" forState:MJRefreshStateIdle];
[self setTitle:@"松開刷新" forState:MJRefreshStatePulling];
[self setTitle:@"正在刷新" forState:MJRefreshStateRefreshing];
}
就這樣，是不是很簡單就完成了~~~
由于程序員文采不好，文中有不理解的或者有錯誤的地方，歡迎提問和指教。
最重要的來了，本Demo下載鏈接，【GitHub】 如果您覺得本Demo對您有用，歡迎點star ，謝謝
注：技術無罪，本demo數據來自網絡，如侵權，請聯系我下架。
