級聯界面(推薦界面)搭建原理

 

 

一.總體佈局

1.項目需求

     點擊左邊cell,右邊的cell數據更新

 

2.界面搭建

     2.1交給兩個控制器管理比較麻煩,點擊一個控制器須要通知另一個控制器

     2. 2所以交給一個控制器管理比較好

     2.3用xib搭建,左右各放一個tableView就能夠了

 

3.開發順序

     先作左邊的tableView,再作右邊的,由於右邊的數據是根據左邊變化的

 

二.左邊tableView界面搭建

1.自定義cell

     左邊一個指示器歐一個view   中間位置用label

 

2.設置數據源

     兩個tableView設置同一個控制器爲數據源和代理,實現方法的時候要先判斷tableView的類型

 

3.請求數據,查看接口文檔

 

4.字典轉模型

 

5.顯示數據

 

6.運行發現一個tableView頂部被擋住,另外一個沒被擋住,爲何?

     蘋果默認只給界面上一個scrollView設置額外滾動區域

     只須要取消自動設置的額外滾動區域,本身手動設置就能夠了

 

7.選中cell,讓cell的指示器顯示

     7.1 怎麼實現?

          監聽cell選中,選中就讓指示器顯示

 

     7.2 可是還要監聽取消選中,把指示器隱藏

 

     7.3 怎麼同時監聽一個cell被選中,另外一個cell取消選中?

          cell本身有一個方法能夠同時監聽

1 // 調用時刻:當一個cell選中的時候就會調用,而且一個cell取消選中的時候也會調用
2 - (void)setSelected:(BOOL)selected animated:(BOOL)animated 

 

     7.4 cell不須要選中狀態

1     self.selectionStyle = UITableViewCellSelectionStyleNone;

 

8.點擊左邊cell的時候,請求右邊tableView的數據

     監聽左邊cell的點擊,而後發送網絡請求,請求右邊的數據

 

三.右邊tableView界面搭建

1.xib複用

     xib也能複用,當兩個界面的xib同樣時,能夠用同一個xib,只要給xib傳遞不一樣的模型便可

 

2.右邊tableView業務邏輯

 

3.點擊左邊的cell,發送網絡請求,請求右邊的數據

 

4.請求數據,查看接口文檔

     4.1發現有一個參數category_id 須要根據左邊服務器返回的id 來加載右邊的數據,因此,咱們在左邊tableView的模型中要再加一個id屬性

     4.2複用模型,模型也能複用,只須要在原來模型中添加須要數據的屬性便可

 

5.展現數據,點擊左邊cell,右邊就顯示對應的數據

 

四.總體數據優化

1.默認選中左邊的第0個cell

1 - (void)selectRowAtIndexPath:(nullable NSIndexPath *)indexPath animated:(BOOL)animated scrollPosition:(UITableViewScrollPosition)scrollPosition;

 

2.默認選中第0個cell.寫在哪裏?

     2.1寫在viewDidLoad裏面?

          不能夠,這個時候尚未數據

 

     2.2要寫在數據加載成功,並且刷新表格以後

刷新代碼:

1 　　[self.categoryTableView reloadData]; 
2     // 默認選中第0個cell
3    NSIndexPath *indexPath = [NSIndexPath indexPathForRow:0 inSection:0];
4    [self.categoryTableView selectRowAtIndexPath:indexPath animated:YES scrollPosition:UITableViewScrollPositionNone];

 

3.手動選中左邊第0個cell,發現右邊數據沒刷新

     3.1爲何?

          由於 - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath方法必須用戶手動點擊cell纔會觸發

 

     3.2怎麼解決?

          本身去調用這個方法,寫在默認選中第0個cell後邊就能夠了

1  [self tableView:self.categoryTableView didSelectRowAtIndexPath:indexPath];

 

4.數據優化

     4.1每次點擊左邊cell,右邊cell都須要發送請求得到數據,消耗性能

 

     4.2若是加載過一次,就保存起來,下次就不用再加載了。

     

     4.3保存到哪裏?

          保存到對應的分類模型的用戶數組裏面

          在分類tableView的模型中定義一個用戶數組,保存左邊cell對應的右邊的tableView的數據

 

     4.4 怎麼拿到左邊cell對應的一組模型?

          請求右邊數據的時候,左邊對應的cell必定是被選中的,經過記錄選中cell對應的模型,就能拿到這個模型

 

     4.5 在選中左側cell的方法中,先判斷模型中user數組(右邊對應的數據數組)是否有值

          若是有值,直接刷新表格,而後return,就不在發送網絡請求

          若是沒有,就發送網絡請求,請求成功後,保存數據,刷新表格,展現數據

 

五.上下拉刷新

 

1.項目需求

     右邊的tableView須要上下拉刷新功能

 

2.怎麼實現上下拉刷新?

     使用 MJRefresh框架

 

3.下拉刷新,直接加載最新數據,覆蓋掉原來的就能夠了

     咱們本來就是直接用模型中的數組,覆蓋掉原來的數據,因此就不用作移除原來數據的處理了

 

4.上拉刷新業務邏輯

     4.1上拉刷新,須要加載更多的數據,怎麼加載更多的數據?

          須要一個參數(page 或 ID),來得到更多的數據

     

     4.2這個參數(page)服務器會返回,咱們須要記錄一下,記錄到哪裏?

          應該記錄到左邊tableView的模型中,請求更多數據的時候,從模型中取出這個參數發送請求

 

     4.3 下拉刷新的時候,要對page參數還原

          把page重置爲1,不然下拉刷新,會加載其它頁碼的數據,到值數據錯亂

     

     4.4 加載更多數據成功的時候,咱們就要對page +1,由於記錄的page  會做爲下次請求參數傳遞

          注意:只要請求數據,請求成功的時候,就要對page + 1

 

     4.5 上拉刷新,對數據的處理

          上拉刷新,須要把原來的數據和新加載的數據一塊兒顯示

 

     4.6 怎麼一塊兒顯示?

          用數組保存加載的更多數據,把這個數組中的元素添加到原來數據數組中

 

     4.7,怎麼把一個數組中的元素,添加到另外一個數組中?

          經過- (void)addObject:(ObjectType)anObject;方法?

          不能夠,這個方法會把整個數組做爲一個元素,添加到另外一個數組中

      [_selectCategoryItem.users addObject:users];

 

     4.8.那用哪一個方法?

1    - (void)addObjectsFromArray:(NSArray<ObjectType> *)otherArray;

     這個方法會把數組中的每個元素取出來,添加到另外一個數組中

 

5.上拉刷新細節處理

     5.1 當沒有更多數據的時候,須要隱藏上拉刷新控件

     

     5.2 怎麼隱藏?

          拿到控件設置hidden屬性  self.userTableView.mj_footer.hidden

 

     5.3隱藏的條件是什麼?

          須要判斷當前用戶組,有沒有更多用戶

 

     5.4 怎麼判斷?

          服務器返回的數據有一個 total_page屬性,若是當前頁>= total_page就沒有更多數據

 

     5.5須要保存 total_page屬性,保存到哪裏?

          保存到左邊tableView的模型中,每次請求成功,就把 total_page屬性保存到對應的用戶組中

 

     5.6 在刷新表格的時候,當前的page屬性是  當前頁數+ 1 的值

          因此設置上拉刷新隱藏的條件應該是 : page > total_page

 

     5.7 隱藏代碼寫在哪裏?

          寫在刷新表格以後,MJ刷新框架每次刷新完數據,會自動判斷是否隱藏,必定要在刷新方法後設置纔有用

 

     5.8 每次點擊左邊cell的時候,也要判斷是否隱藏上拉刷新控件,爲何?

          有可能數據只有一頁,不判斷的話,就會顯示上拉刷新控件,去刷新的時候,拿不到更多數據

 

源代碼

  1 - (void)viewDidLoad {
  2     [super viewDidLoad];
  3  
  4     self.title = @"推薦關注";
  5     self.automaticallyAdjustsScrollViewInsets = NO;
  6     _categoryTableView.contentInset = UIEdgeInsetsMake(64, 0, 0, 0);
  7     _userTableView.contentInset = UIEdgeInsetsMake(64, 0, 0, 0);
  8     // 分類tableView註冊cell
  9     [_categoryTableView registerNib:[UINib nibWithNibName:@"XMGCategoryCell" bundle:nil] forCellReuseIdentifier:categoryID];
 10     // 用戶tableView註冊cell
 11     [_userTableView registerNib:[UINib nibWithNibName:@"XMGSubTagCell" bundle:nil] forCellReuseIdentifier:userID];
 12     // 請求分類數據
 13     [self loadCategoryData];
 14     // 添加上下拉刷新
 15     [self setupRefreshView];  
 16 }
 17 - (void)setupRefreshView
 18 {
 19     // 下拉刷新
 20     // 當鬆手,而且下拉刷新徹底顯示的時候,就會觸發下拉刷新
 21     MJRefreshNormalHeader *header = [MJRefreshNormalHeader headerWithRefreshingTarget:self refreshingAction:@selector(loadNewUserData)];
 22     header.automaticallyChangeAlpha = YES;
 23     self.userTableView.mj_header = header;
 24    
 25     // 上拉刷新
 26     MJRefreshAutoNormalFooter *footer = [MJRefreshAutoNormalFooter footerWithRefreshingTarget:self refreshingAction:@selector(loadMoreUserData)];
 27     footer.automaticallyHidden = YES;
 28     self.userTableView.mj_footer = footer;
 29 }
 30  
 31 - (void)loadCategoryData
 32 {
 33     AFHTTPSessionManager *mgr = [AFHTTPSessionManager xmg_manager];
 34   
 35     NSMutableDictionary *parameters = [NSMutableDictionary dictionary];
 36     parameters[@"a"] = @"category";
 37     parameters[@"c"] = @"subscribe";
 38    
 39     [mgr GET:XMGBaseUrl parameters:parameters progress:nil success:^(NSURLSessionDataTask * _Nonnull task, NSDictionary * _Nullable responseObject) {
 40         NSArray *dictArr = responseObject[@"list"];
 41        
 42         _categorys = [XMGCategoryItem mj_objectArrayWithKeyValuesArray:dictArr];
 43        
 44         [self.categoryTableView reloadData];
 45        
 46         // 默認選中第0個cell
 47         NSIndexPath *indexPath = [NSIndexPath indexPathForRow:0 inSection:0];
 48         [self.categoryTableView selectRowAtIndexPath:indexPath animated:YES scrollPosition:UITableViewScrollPositionNone];
 49        
 50         [self tableView:self.categoryTableView didSelectRowAtIndexPath:indexPath];
 51        
 52     } failure:^(NSURLSessionDataTask * _Nullable task, NSError * _Nonnull error) {  
 53     }];
 54 }
 55 
 56 - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
 57 {
 58     if (tableView == _categoryTableView) { // 顯示分類TableView
 59         return _categorys.count;
 60     }
 61     return _selectCategoryItem.users.count;
 62 }
 63 
 64 - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
 65 {
 66     if (tableView == _categoryTableView) { // 顯示分類TableView
 67         XMGCategoryCell *cell = [tableView dequeueReusableCellWithIdentifier:categoryID];
 68         cell.item = _categorys[indexPath.row];
 69         return cell;
 70     } 
 71      XMGSubTagCell *cell = [tableView dequeueReusableCellWithIdentifier:userID];
 72      cell.user =  _selectCategoryItem.users[indexPath.row];
 73     return cell;
 74 }
 75  
 76 - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
 77 {
 78     if (tableView == _categoryTableView) {
 79         return 44;
 80     }
 81     return 60 + 1;
 82 }
 83 // 點擊cell就會調用
 84 // 必須用戶手動點擊cell纔會觸發
 85 - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
 86 {
 87     if (tableView == _categoryTableView) {
 88         // 記錄選中分類模型
 89         _selectCategoryItem = _categorys[indexPath.row];
 90         // 點擊分類cell
 91         // 判斷以前有沒有數據
 92         if (_selectCategoryItem.users.count) {
 93             [self.userTableView reloadData];
 94             self.userTableView.mj_footer.hidden = _selectCategoryItem.page > _selectCategoryItem.total_page;    
 95             return;
 96         }
 97         // 請求右邊用戶數據
 98         [self loadNewUserData];     
 99     }   
100 }
101 
102 // 沒有更多數據的時候,隱藏上拉刷新控件
103 // 判斷當前分類用戶組 有沒有更多用戶組
104 // 加載更多用戶數據
105 - (void)loadMoreUserData
106 {
107     [self.mgr.tasks makeObjectsPerformSelector:@selector(cancel)];
108    
109     NSMutableDictionary *parameters = [NSMutableDictionary dictionary];
110     parameters[@"a"] = @"list";
111     parameters[@"c"] = @"subscribe";
112     parameters[@"category_id"] = _selectCategoryItem.id;
113     parameters[@"page"] = @(_selectCategoryItem.page);
114    
115     [self.mgr GET:XMGBaseUrl parameters:parameters progress:nil success:^(NSURLSessionDataTask * _Nonnull task, NSDictionary * _Nullable responseObject) {
116        
117         [self.userTableView.mj_footer endRefreshing];
118        
119         _selectCategoryItem.page++;
120         NSArray *dictArr = responseObject[@"list"];
121        
122         NSArray *users = [XMGUserItem mj_objectArrayWithKeyValuesArray:dictArr];
123        
124         // 取出數組中全部元素,添加到新數組
125 //        [_selectCategoryItem.users addObject:users];
126         [_selectCategoryItem.users addObjectsFromArray:users];
127        
128         [self.userTableView reloadData];
129        
130         // 控制上拉控件是否顯示,必定要在reloadData以後
131         self.userTableView.mj_footer.hidden = _selectCategoryItem.page > _selectCategoryItem.total_page;
132     } failure:^(NSURLSessionDataTask * _Nullable task, NSError * _Nonnull error) {    
133     }];
134 }
135 
136 // 加載更新用戶數據
137 - (void)loadNewUserData
138 {
139     _selectCategoryItem.page = 1;
140     [self.mgr.tasks makeObjectsPerformSelector:@selector(cancel)];
141    
142     NSMutableDictionary *parameters = [NSMutableDictionary dictionary];
143     parameters[@"a"] = @"list";
144     parameters[@"c"] = @"subscribe";
145     parameters[@"category_id"] = _selectCategoryItem.id;
146    
147     [self.mgr GET:XMGBaseUrl parameters:parameters progress:nil success:^(NSURLSessionDataTask * _Nonnull task, NSDictionary * _Nullable responseObject) {
148        
149         _selectCategoryItem.page++;
150        
151         // 記錄當前分類總頁碼數
152         _selectCategoryItem.total_page = [responseObject[@"total_page"] integerValue];
153        
154         // 結束刷新
155         [self.userTableView.mj_header endRefreshing];
156        
157         NSArray *dictArr = responseObject[@"list"];
158        
159         _selectCategoryItem.users = [XMGUserItem mj_objectArrayWithKeyValuesArray:dictArr];
160        
161         [self.userTableView reloadData];
162        
163         self.userTableView.mj_footer.hidden = _selectCategoryItem.page > _selectCategoryItem.total_page;
164   
165     } failure:^(NSURLSessionDataTask * _Nullable task, NSError * _Nonnull error) {      
166     }];
167 }

 喜歡就推薦下吧,哈哈