親愛的粉友們我又回來了。
繼上一次高仿美團主界面之后我說我會持續更新的，還說重要的事情說三遍。由于最近項目比較緊就很比較難擠出時間去coding;
不話癆了：上次就想給大家分享一個項目的最初搭建但是，由于太匆忙就沒上，今天補上 哈哈！先分析一下項目的目錄結構吧：
其他的文件夾就不多說了，主要的類都在Class里面按照功能模塊建一個文件夾，最好建一個工具類，和分類這樣業務更加分明。其中工具類把整個項目都用到的功能抽取出來。比如說快速加載XIB,plist,網絡等等。
屏幕快照 2015-08-30 15.55.25.png
接下來在每個功能模塊的文件夾里面放MVC。
屏幕快照 2015-08-30 16.01.12.png
這些都只是個人習慣，個人覺得比較爽比較舒服，沒有好壞之分。
有圖有真相：
主界面－首頁
上門
商家
我的
更多
運行效果
接下來我按一個功能模塊一個模塊講解整個項目
首頁
首先先聲明下本項目中的下啦刷新用的是MJRefresh,還有的第三方框架有MJExtension,AFN,SDWebImage(順便個MJ打個廣告)
#pragma mark - 設置下啦刷新
-(void)setRefreshIntableView{
[self.firstTableView addGifHeaderWithRefreshingTarget:self refreshingAction:@selector(refreshData)];`
//設置普通狀態的動畫圖片
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];
//設置即將刷新狀態的動畫圖片
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];
//設置正在刷新是的動畫圖片
[self.firstTableView.gifHeader setImages:refreshingImages forState:MJRefreshHeaderStateRefreshing];
//馬上進入刷新狀態
[self.firstTableView.gifHeader beginRefreshing];
}
解釋如上代碼注釋，已經非常清楚了，就是給當前的tableView， [self.firstTableView addGifHeaderWithRefreshingTarget:self refreshingAction:@selector(refreshData)];
然后將所需要的動畫圖放在一個數組里面。然后設置三種狀態的刷新。
說白了首頁就是一個tableView。這個tableView分為5個section.
每個section里面的cell進行自定義。就是這么簡單粗暴。
再說下怎么封裝tableViewCell，為什么我們要封裝他呢？為什么要封裝他，原因通俗一點就是，cell是個視圖，視圖怎么創建cell自己最清楚。沒必要讓控制器知道。
送大家我之前說我的一句話：
控制器知道的越少越好，否則你將死的很慘!!!。
舉個例子：
1.創建自定義的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快速創建一個cell
+ (instancetype)cellWithTableView:(UITableView *)tableView;
這個地方再送你一句話：tableView，collectionView,地圖標注等都可以這個干，（舉一返三，這是一個能力）幾百萬個項目，每個項目N種做法，難到我們都要敲一遍？（SB才這個干）起初我們可以模仿，在模仿中總結。一步一個腳印。我去扯的優點遠了.
tableViewcell.m里面的實現
+ (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創建好后將封裝好的輪播器加在上面就完事了
自定義輪播器的視圖
.h文件
@interface JFImageScrollView : UIView
@property (nonatomic, strong)UIScrollView *scrollView;
@property (nonatomic, strong)UIPageControl *pageControl;
@property (nonatomic, strong)NSArray *imgArray;
-(void)setImageArray:(NSArray *)imageArray;
/**
* 創建一個ScrollView
*
* @param frame 供外界提供一個frame
* @param imageArray 供外界提供一個圖片數組
*
* @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;
}
//計時器每一秒的響應方法
-(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;
}
//開始拖動時，就關閉計時器，因為這個時候用戶在交互。
-(void)scrollViewWillBeginDragging:(UIScrollView *)scrollView{
[self removeTimer];
}
//結束拖動的時候就立馬再加上計時器
-(void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate{
[self addTimer];
}
/**
* 移除定時器
*/
-(void)dealloc{
[self removeTimer];
}
接下來：就是創建八個視圖給每個視圖加手勢，之前已經說過了，就不贅述。
八個視圖
商家
分類
這個界面主要講下這個自定義視圖怎么自定義的
如圖所示很明顯就是兩個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那么就提供兩個數據源，兩個下標，用來識別那個tableView被點擊了哪一行。
@interface JFMerchantFilterView ()<UITableViewDataSource, UITableViewDelegate>
{
NSMutableArray *_bigGroupArray;//左邊分組tableview的數據源
NSMutableArray *_smallGroupArray;//右邊分組tableview的數據源
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團購 呈現給大家)
