下雨天，在家敲代碼很爽哦~~~
亦菲女神
閑話不多說，放效果圖：
BeeQuick.gif
正文
一莫杈、準(zhǔn)備
1.第三方庫：本Demo用到的第三方庫有：MJRefresh、Masonry奢入、MJExtension筝闹、SDWebImage ，都是比較常見的俊马，使用也比較多的丁存。
2.分類：UIImage、UIImageView
- 顏色轉(zhuǎn)換為圖片
+(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.資源：數(shù)據(jù)庫及圖片
二、繪制視圖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);
}];
- 二級表（右）:創(chuàng)建一個子控制器扩然，在子控制器中繪制右表
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;
}
三艘儒、左右表二級聯(lián)動
在第一個控制器中，聲明一個代理協(xié)議方法；
@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];
}
}
然后界睁，由第二個控制器來調(diào)用該協(xié)議方法觉增，實現(xiàn)左邊表一點擊列表分區(qū)，右側(cè)表二相應(yīng)的分區(qū)頭視圖調(diào)到列表頭部翻斟。
- (void)didTableView:(UITableView *)tableView clickedAtIndexPath:(NSIndexPath*)indexPath;
{
[self.productsTableView selectRowAtIndexPath:[NSIndexPath indexPathForRow:0 inSection:indexPath.row] animated:YES scrollPosition:UITableViewScrollPositionTop];
}
同樣逾礁，右邊控制左邊，也是通過協(xié)議的方式來實現(xiàn)访惜。當(dāng)表二分區(qū)從上往下滑動時嘹履，即將展示分區(qū)頭視圖時，選中該分區(qū)對應(yīng)的表一分區(qū)债热。當(dāng)表二分區(qū)從下往上滑動時砾嫉，即將結(jié)束分區(qū)頭視圖時，選中該分區(qū)對應(yīng)的下一個表一分區(qū)窒篱；
@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];
}
}
由第一個控制器來實現(xiàn)該方法焕刮。
- (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];
}
四、獲得表數(shù)據(jù)
由于Demo需要墙杯，采用的是本地數(shù)據(jù)庫數(shù)據(jù)配并，通過MJExtension動態(tài)加載屬性。
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的一個類溉旋，通過實現(xiàn)父類的方法，來完成下拉刷新功能避消。
- (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 ，謝謝
注：技術(shù)無罪偷霉，本demo數(shù)據(jù)來自網(wǎng)絡(luò)迄委，如侵權(quán)，請聯(lián)系我下架类少。
