親愛的粉友們我又回來了。
繼上一次高仿美團主界面之后我說我會持續(xù)更新的，還說重要的事情說三遍瀑晒。由于最近項目比較緊就很比較難擠出時間去coding;
不話癆了：上次就想給大家分享一個項目的最初搭建但是，由于太匆忙就沒上徘意，今天補上 哈哈苔悦！先分析一下項目的目錄結(jié)構(gòu)吧：
其他的文件夾就不多說了，主要的類都在Class里面按照功能模塊建一個文件夾椎咧，最好建一個工具類玖详，和分類這樣業(yè)務(wù)更加分明。其中工具類把整個項目都用到的功能抽取出來勤讽。比如說快速加載XIB,plist,網(wǎng)絡(luò)等等蟋座。
屏幕快照 2015-08-30 15.55.25.png
接下來在每個功能模塊的文件夾里面放MVC。
屏幕快照 2015-08-30 16.01.12.png
這些都只是個人習慣脚牍，個人覺得比較爽比較舒服向臀，沒有好壞之分。
有圖有真相：
主界面－首頁
上門
商家
我的
更多
運行效果
接下來我按一個功能模塊一個模塊講解整個項目
首頁
首先先聲明下本項目中的下啦刷新用的是MJRefresh,還有的第三方框架有MJExtension,AFN,SDWebImage(順便個MJ打個廣告)
#pragma mark - 設(shè)置下啦刷新
-(void)setRefreshIntableView{
[self.firstTableView addGifHeaderWithRefreshingTarget:self refreshingAction:@selector(refreshData)];`
//設(shè)置普通狀態(tài)的動畫圖片
NSMutableArray *idleImages = [NSMutableArray array];
for (NSUInteger i = 1; i<=60; ++i) {
UIImage *image = [UIImage imageNamed:[NSString stringWithFormat:@"dropdown_anim__000%zd",i]];
[idleImages addObject:image];
}
[self.firstTableView.gifHeader setImages:idleImages forState:MJRefreshHeaderStateIdle];
//設(shè)置即將刷新狀態(tài)的動畫圖片
NSMutableArray *refreshingImages = [NSMutableArray array];
for (NSInteger i = 1; i<=3; i++) {
UIImage *image = [UIImage imageNamed:[NSString stringWithFormat:@"dropdown_loading_0%zd",i]];
[refreshingImages addObject:image];
}
[self.firstTableView.gifHeader setImages:refreshingImages forState:MJRefreshHeaderStatePulling];
//設(shè)置正在刷新是的動畫圖片
[self.firstTableView.gifHeader setImages:refreshingImages forState:MJRefreshHeaderStateRefreshing];
//馬上進入刷新狀態(tài)
[self.firstTableView.gifHeader beginRefreshing];
}
解釋如上代碼注釋诸狭，已經(jīng)非常清楚了券膀，就是給當前的tableView君纫， [self.firstTableView addGifHeaderWithRefreshingTarget:self refreshingAction:@selector(refreshData)];
然后將所需要的動畫圖放在一個數(shù)組里面。然后設(shè)置三種狀態(tài)的刷新芹彬。
說白了首頁就是一個tableView蓄髓。這個tableView分為5個section.
每個section里面的cell進行自定義。就是這么簡單粗暴舒帮。
再說下怎么封裝tableViewCell会喝，為什么我們要封裝他呢？為什么要封裝他会前，原因通俗一點就是好乐，cell是個視圖，視圖怎么創(chuàng)建cell自己最清楚瓦宜。沒必要讓控制器知道蔚万。
送大家我之前說我的一句話：
控制器知道的越少越好，否則你將死的很慘!!!临庇。
舉個例子：
1.創(chuàng)建自定義的tableViewCell要不要XIB隨你(我這個例子用XIB)反璃。
#import <UIKit/UIKit.h>
@class JFHotQueueModel;
@interface JFHotQueueCell : UITableViewCell
@property (weak, nonatomic) IBOutlet UIImageView *hotQueueImageView;
@property (weak, nonatomic) IBOutlet UILabel *mianLabel;
@property (weak, nonatomic) IBOutlet UILabel *subtitleLabel;
//提供一個模型的set方法
@property (nonatomic, strong)JFHotQueueModel *hotQueueModel;
//提供一個類方法傳一個tableView快速創(chuàng)建一個cell
+ (instancetype)cellWithTableView:(UITableView *)tableView;
這個地方再送你一句話：tableView，collectionView,地圖標注等都可以這個干假夺，（舉一返三淮蜈，這是一個能力）幾百萬個項目，每個項目N種做法已卷，難到我們都要敲一遍梧田？（SB才這個干）起初我們可以模仿，在模仿中總結(jié)侧蘸。一步一個腳印裁眯。我去扯的優(yōu)點遠了.
tableViewcell.m里面的實現(xiàn)
+ (instancetype)cellWithTableView:(UITableView *)tableView
{
static NSString *ID = @"hotqueue";
JFHotQueueCell *cell = [tableView dequeueReusableCellWithIdentifier:ID];
if (cell == nil) {
// 從xib中加載cell
cell = [[[NSBundle mainBundle] loadNibNamed:@"JFHotQueueCell" owner:nil options:nil] lastObject];
}
return cell;
}
#重寫model的set方法,給XIB里面的控件賦值
-(void)setHotQueueModel:(JFHotQueueModel *)hotQueueModel{
_hotQueueModel = hotQueueModel;
NSURL *urlStr = [NSURL URLWithString:hotQueueModel.imageUrl];
[self.hotQueueImageView sd_setImageWithURL:urlStr placeholderImage:nil];
self.mianLabel.text = hotQueueModel.title;
self.subtitleLabel.text = hotQueueModel.comment;
}
好了第二個界面：
上門
這個界面主要講下，這么封裝圖片輪播器
cell上的輪播器
毫無疑問這個輪播器在cell上面讳癌。
只要將cell創(chuàng)建好后將封裝好的輪播器加在上面就完事了
自定義輪播器的視圖
.h文件
@interface JFImageScrollView : UIView
@property (nonatomic, strong)UIScrollView *scrollView;
@property (nonatomic, strong)UIPageControl *pageControl;
@property (nonatomic, strong)NSArray *imgArray;
-(void)setImageArray:(NSArray *)imageArray;
/**
* 創(chuàng)建一個ScrollView
*
* @param frame 供外界提供一個frame
* @param imageArray 供外界提供一個圖片數(shù)組
*
* @return 返回一個自定義的ScrollView
*/
-(JFImageScrollView * )initWithFrame:(CGRect)frame imageArray:(NSArray *)imageArray;
.m文件
@interface JFImageScrollView ()<UIScrollViewDelegate>{
NSTimer *_timer;
int _pageNumber;
}
@end
@implementation JFImageScrollView
-(JFImageScrollView * )initWithFrame:(CGRect)frame imageArray:(NSArray *)imageArray{
self = [super initWithFrame:frame];
if (self) {
self.scrollView = [[UIScrollView alloc]initWithFrame:frame];
self.scrollView.contentSize = CGSizeMake(4 * SCREENWIDTH, frame.size.height);
self.scrollView.pagingEnabled = YES;
self.scrollView.delegate = self;
self.scrollView.showsHorizontalScrollIndicator = NO;
//添加圖片
for(int i = 0 ; i < 10; i++){
UIImageView *imageView = [[UIImageView alloc] init];
imageView.frame = CGRectMake(i*SCREENWIDTH, 0, SCREENWIDTH, frame.size.height);
imageView.tag = i+10;
// UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(OnTapImage:)];
//[imageView addGestureRecognizer:tap];
imageView.userInteractionEnabled = YES;
[self.scrollView addSubview:imageView];
}
[self addSubview:self.scrollView];
//
self.pageControl = [[UIPageControl alloc] initWithFrame:CGRectMake(SCREENWIDTH/2-40, frame.size.height-40, 80, 30)];
self.pageControl.currentPage = 0;
self.pageControl.numberOfPages = 6;
[self addSubview:self.pageControl];
[self addTimer];
}
return self;
}
-(void)setImageArray:(NSArray *)imageArray{
_pageNumber = (int)imageArray.count;
self.scrollView.contentSize = CGSizeMake(imageArray.count * SCREENWIDTH, self.frame.size.height);
self.pageControl.numberOfPages = imageArray.count;
//添加圖片
for(int i = 0 ; i < imageArray.count; i++){
UIImageView *imageView = (UIImageView *)[self.scrollView viewWithTag:i+10];
imageView.backgroundColor = [UIColor redColor];
NSString *imageName =[NSString stringWithFormat:@"%@",imageArray[i]];
NSLog(@"%@",imageName);
[imageView sd_setImageWithURL:[NSURL URLWithString:imageName] placeholderImage:[UIImage imageNamed:@"bg_customReview_image_default"]];
}
}
//添加計時器
-(void)addTimer{
_timer = [NSTimer scheduledTimerWithTimeInterval:3 target:self selector:@selector(netxPage) userInfo:nil repeats:YES];
[[NSRunLoop currentRunLoop] addTimer:_timer forMode:NSRunLoopCommonModes];
}
//移除計時器
-(void)removeTimer{
[_timer invalidate];
_timer = nil;
}
//計時器每一秒的響應(yīng)方法
-(void)netxPage{
int page = (int)self.pageControl.currentPage;
if (page == _pageNumber-1) {
page = 0;
}else{
page++;
}
//滾動scrollview
CGFloat x = page * self.scrollView.frame.size.width;
self.scrollView.contentOffset = CGPointMake(x, 0);
}
#pragma mark - UIScrollViewDelegate
//滑動時scrollView代理方法穿稳，計算出當前滑動到哪里。加上視圖寬度的一半晌坤，再整除滾動視圖寬度逢艘，算出第幾頁。
-(void)scrollViewDidScroll:(UIScrollView *)scrollView{
CGFloat scrollViewW = scrollView.frame.size.width;
CGFloat x = scrollView.contentOffset.x;
int page = (x + scrollViewW/2)/scrollViewW;
self.pageControl.currentPage = page;
}
//開始拖動時骤菠，就關(guān)閉計時器它改，因為這個時候用戶在交互。
-(void)scrollViewWillBeginDragging:(UIScrollView *)scrollView{
[self removeTimer];
}
//結(jié)束拖動的時候就立馬再加上計時器
-(void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate{
[self addTimer];
}
/**
* 移除定時器
*/
-(void)dealloc{
[self removeTimer];
}
接下來：就是創(chuàng)建八個視圖給每個視圖加手勢商乎，之前已經(jīng)說過了搔课，就不贅述。
八個視圖
商家
分類
這個界面主要講下這個自定義視圖怎么自定義的
如圖所示很明顯就是兩個tableVew.
上代碼：
.h
@protocol JFMerchantFilterViewDelegate <NSObject>
@optional
-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath withId:(NSNumber *)ID ;
@end
@interface JFMerchantFilterView : UIView
/**
* 全部分類的tableView
*/
@property(nonatomic, strong) UITableView *tableViewOfGroup;
/**
* 每組詳情的tableView
*/
@property(nonatomic, strong) UITableView *tableViewOfDetail;
@property (nonatomic, weak) id <JFMerchantFilterViewDelegate> delegate;
.m
既然是兩個tableView那么就提供兩個數(shù)據(jù)源，兩個下標爬泥，用來識別那個tableView被點擊了哪一行柬讨。
@interface JFMerchantFilterView ()<UITableViewDataSource, UITableViewDelegate>
{
NSMutableArray *_bigGroupArray;//左邊分組tableview的數(shù)據(jù)源
NSMutableArray *_smallGroupArray;//右邊分組tableview的數(shù)據(jù)源
NSInteger _bigSelectedIndex;
NSInteger _smallSelectedIndex;
}
@end
@implementation JFMerchantFilterView
/*
// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect {
// Drawing code
}
*/
-(instancetype)initWithFrame:(CGRect)frame{
self =[super initWithFrame:frame];
if (self) {
_bigGroupArray = [[NSMutableArray alloc] init];
_smallGroupArray = [[NSMutableArray alloc] init];
[self initViews];
dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{
[self getCateListData];
});
}
return self;
}
-(void)initViews{
for (int i = 0 ; i < 2; i ++) {
UITableView *tableView = [[UITableView alloc] initWithFrame:CGRectMake(i *TableViewW/2, 0, TableViewW/2, TableViewH) style:UITableViewStylePlain];
tableView.tag = 10 + i ;
tableView.delegate = self;
tableView.dataSource = self;
if (i == 0 ) {
self.tableViewOfGroup =tableView;
self.tableViewOfGroup.backgroundColor = [UIColor whiteColor];
}else{
self.tableViewOfDetail =tableView;
self.tableViewOfDetail.backgroundColor = RGB(242, 242, 242);
}
tableView.separatorStyle = UITableViewCellSeparatorStyleNone;
[self addSubview:tableView];
}
}
-(void)getCateListData{
NSString *urlStr = [[GetUrlString sharedManager]urlWithCateListStr];
[NetWork sendGetUrl:urlStr withParams:nil success:^(id responseBody) {
JFLog(@"%@", responseBody);
NSMutableArray *dataArray = [responseBody objectForKey:@"data"];
for (int i = 0; i < dataArray.count; i++) {
JFMerchantCataGroupModel *cateModel = [JFMerchantCataGroupModel objectWithKeyValues:dataArray[i]];
[_bigGroupArray addObject:cateModel];
}
[self.tableViewOfGroup reloadData];
} failure:^(NSError *error) {
}];
}
#pragma mark - UITableViewDataSource
-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
if (tableView.tag == 10) {
return _bigGroupArray.count;
}else{
if (_bigGroupArray.count == 0) {
return 0;
}
JFMerchantCataGroupModel *subclassCateM = (JFMerchantCataGroupModel *)_bigGroupArray[_bigSelectedIndex];
if (subclassCateM.list == nil) {
return 0;
}else{
return subclassCateM.list.count;
}
}
}
-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
return 42;
}
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
if (tableView.tag == 10) {
JFKindFilterCell *cell = [JFKindFilterCell cellWithTableView:tableView];
cell.merchantCataGroupModel = _bigGroupArray[indexPath.row];
return cell;
}else{
JFMerchantCataGroupModel *cateModel = (JFMerchantCataGroupModel *)_bigGroupArray[_bigSelectedIndex];
JFKindSubclassFilterCell *cell = [JFKindSubclassFilterCell cellWithTableView:tableView indexPath:indexPath model:cateModel];
return cell;
}
}
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{
if (tableView.tag == 10) {
_bigSelectedIndex = indexPath.row;
JFMerchantCataGroupModel *cataModel = _bigGroupArray[_bigSelectedIndex];
[self.tableViewOfDetail reloadData];
if (cataModel.list == nil) {
[self.tableViewOfDetail reloadData];
[self.delegate tableView:tableView didSelectRowAtIndexPath:indexPath withId:cataModel.id];
}else{
[self.tableViewOfDetail reloadData];
}
}else{
_smallSelectedIndex = indexPath.row;
JFMerchantCataGroupModel *cataModel = _bigGroupArray[_bigSelectedIndex];
NSDictionary *dict = cataModel.list[_smallSelectedIndex];
NSNumber *ID = [dict objectForKey:@"id"];
// NSString *name = [dic objectForKey:@"name"];
[self.delegate tableView:tableView didSelectRowAtIndexPath:indexPath withId:ID ];
}
}
我的和更多
最后兩個界面都是比較簡單的就不多說了。
如果不懂的話可以直接簡信袍啡，或者直接評論踩官，我會一一解答。
有好的建議我會非常感謝境输。
完整的項目源碼會在 會下一次放在github上蔗牡。(這次就不放了哦，下一次會是一個比較完整的JF團購 呈現(xiàn)給大家)
