iOS開發(fā)之級聯(lián)界面(推薦界面)搭建原理
先看看效果圖：
一.整體布局
1.項目需求
點(diǎn)擊左邊cell,右邊的cell數(shù)據(jù)更新
2.界面搭建
2.1交給兩個控制器管理比較麻煩,點(diǎn)擊一個控制器需要通知另外一個控制器
2. 2因此交給一個控制器管理比較好
2.3用xib搭建,左右各放一個tableView就可以了
3.開發(fā)順序
先做左邊的tableView,再做右邊的,因為右邊的數(shù)據(jù)是根據(jù)左邊變化的
二.左邊tableView界面搭建
1.自定義cell
左邊一個指示器歐一個view 中間位置用label
2.設(shè)置數(shù)據(jù)源
兩個tableView設(shè)置同一個控制器為數(shù)據(jù)源和代理,實(shí)現(xiàn)方法的時候要先判斷tableView的類型
3.請求數(shù)據(jù),查看接口文檔
4.字典轉(zhuǎn)模型
5.顯示數(shù)據(jù)
6.運(yùn)行發(fā)現(xiàn)一個tableView頂部被擋住,另一個沒被擋住,為什么?
蘋果默認(rèn)只給界面上一個scrollView設(shè)置額外滾動區(qū)域，只需要取消自動設(shè)置的額外滾動區(qū)域,自己手動設(shè)置就可以了
7.選中cell,讓cell的指示器顯示
7.1 怎么實(shí)現(xiàn)?
監(jiān)聽cell選中,選中就讓指示器顯示
7.2 但是還要監(jiān)聽取消選中,把指示器隱藏
7.3 怎么同時監(jiān)聽一個cell被選中,另一個cell取消選中?
cell自己有一個方法可以同時監(jiān)聽
// 調(diào)用時刻:當(dāng)一個cell選中的時候就會調(diào)用,并且一個cell取消選中的時候也會調(diào)用 - (void)setSelected:(BOOL)selected animated:(BOOL)animated
7.4 cell不需要選中狀態(tài)
self.selectionStyle = UITableViewCellSelectionStyleNone;
8.點(diǎn)擊左邊cell的時候,請求右邊tableView的數(shù)據(jù)
監(jiān)聽左邊cell的點(diǎn)擊,然后發(fā)送網(wǎng)絡(luò)請求,請求右邊的數(shù)據(jù)
三.右邊tableView界面搭建
1.xib復(fù)用
xib也能復(fù)用,當(dāng)兩個界面的xib一樣時,可以用同一個xib,只要給xib傳遞不同的模型即可
2.右邊tableView業(yè)務(wù)邏輯
3.點(diǎn)擊左邊的cell,發(fā)送網(wǎng)絡(luò)請求,請求右邊的數(shù)據(jù)
4.請求數(shù)據(jù),查看接口文檔
4.1發(fā)現(xiàn)有一個參數(shù)category_id 需要根據(jù)左邊服務(wù)器返回的id 來加載右邊的數(shù)據(jù),所以,我們在左邊tableView的模型中要再加一個id屬性
4.2復(fù)用模型,模型也能復(fù)用,只需要在原來模型中添加需要數(shù)據(jù)的屬性即可
5.展示數(shù)據(jù),點(diǎn)擊左邊cell,右邊就顯示對應(yīng)的數(shù)據(jù)
四.整體數(shù)據(jù)優(yōu)化
1.默認(rèn)選中左邊的第0個cell
2.默認(rèn)選中第0個cell.寫在哪里?
2.1寫在viewDidLoad里面?
不可以,這個時候還沒有數(shù)據(jù)
2.2要寫在數(shù)據(jù)加載成功,而且刷新表格之后
刷新代碼:
[self.categoryTableView reloadData]; // 默認(rèn)選中第0個cell NSIndexPath *indexPath = [NSIndexPath indexPathForRow:0 inSection:0]; [self.categoryTableView selectRowAtIndexPath:indexPath animated:YES scrollPosition:UITableViewScrollPositionNone];
3.手動選中左邊第0個cell,發(fā)現(xiàn)右邊數(shù)據(jù)沒刷新
3.1為什么?
因為 - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath方法必須用戶手動點(diǎn)擊cell才會觸發(fā)
3.2怎么解決?
自己去調(diào)用這個方法,寫在默認(rèn)選中第0個cell后邊就可以了
[self tableView:self.categoryTableView didSelectRowAtIndexPath:indexPath];
4.數(shù)據(jù)優(yōu)化
4.1每次點(diǎn)擊左邊cell,右邊cell都需要發(fā)送請求獲得數(shù)據(jù),消耗性能
4.2如果加載過一次,就保存起來,下次就不用再加載了。
4.3保存到哪里?
保存到對應(yīng)的分類模型的用戶數(shù)組里面，在分類tableView的模型中定義一個用戶數(shù)組,保存左邊cell對應(yīng)的右邊的tableView的數(shù)據(jù)
4.4 怎么拿到左邊cell對應(yīng)的一組模型?
請求右邊數(shù)據(jù)的時候,左邊對應(yīng)的cell一定是被選中的,通過記錄選中cell對應(yīng)的模型,就能拿到這個模型
4.5 在選中左側(cè)cell的方法中,先判斷模型中user數(shù)組(右邊對應(yīng)的數(shù)據(jù)數(shù)組)是否有值
如果有值,直接刷新表格,然后return,就不在發(fā)送網(wǎng)絡(luò)請求
如果沒有,就發(fā)送網(wǎng)絡(luò)請求,請求成功后,保存數(shù)據(jù),刷新表格,展示數(shù)據(jù)
五.上下拉刷新
1.項目需求： 右邊的tableView需要上下拉刷新功能
2.怎么實(shí)現(xiàn)上下拉刷新?
使用 MJRefresh框架
3.下拉刷新,直接加載最新數(shù)據(jù),覆蓋掉原來的就可以了
我們原本就是直接用模型中的數(shù)組,覆蓋掉原來的數(shù)據(jù),所以就不用做移除原來數(shù)據(jù)的處理了
4.上拉刷新業(yè)務(wù)邏輯
4.1上拉刷新,需要加載更多的數(shù)據(jù),怎么加載更多的數(shù)據(jù)?
需要一個參數(shù)(page 或 ID),來獲得更多的數(shù)據(jù)
4.2這個參數(shù)(page)服務(wù)器會返回,我們需要記錄一下,記錄到哪里?
應(yīng)該記錄到左邊tableView的模型中,請求更多數(shù)據(jù)的時候,從模型中取出這個參數(shù)發(fā)送請求
4.3 下拉刷新的時候,要對page參數(shù)還原
把page重置為1,否則下拉刷新,會加載其它頁碼的數(shù)據(jù),到值數(shù)據(jù)錯亂
4.4 加載更多數(shù)據(jù)成功的時候,我們就要對page +1,因為記錄的page 會作為下次請求參數(shù)傳遞
注意:只要請求數(shù)據(jù),請求成功的時候,就要對page + 1
4.5 上拉刷新,對數(shù)據(jù)的處理
上拉刷新,需要把原來的數(shù)據(jù)和新加載的數(shù)據(jù)一起顯示
4.6 怎么一起顯示?
用數(shù)組保存加載的更多數(shù)據(jù),把這個數(shù)組中的元素添加到原來數(shù)據(jù)數(shù)組中
4.7,怎么把一個數(shù)組中的元素,添加到另一個數(shù)組中?
通過- (void)addObject:(ObjectType)anObject;方法?
不可以,這個方法會把整個數(shù)組作為一個元素,添加到另一個數(shù)組中[_selectCategoryItem.users addObject:users];
4.8.那用哪個方法?
- (void)addObjectsFromArray:(NSArray<ObjectType> *)otherArray;
這個方法會把數(shù)組中的每一個元素取出來,添加到另一個數(shù)組中
5.上拉刷新細(xì)節(jié)處理
5.1 當(dāng)沒有更多數(shù)據(jù)的時候,需要隱藏上拉刷新控件
5.2 怎么隱藏?
拿到控件設(shè)置hidden屬性 self.userTableView.mj_footer.hidden
5.3隱藏的條件是什么?
需要判斷當(dāng)前用戶組,有沒有更多用戶
5.4 怎么判斷?
服務(wù)器返回的數(shù)據(jù)有一個 total_page屬性,如果當(dāng)前頁>= total_page就沒有更多數(shù)據(jù)
5.5需要保存 total_page屬性,保存到哪里?
保存到左邊tableView的模型中,每次請求成功,就把 total_page屬性保存到對應(yīng)的用戶組中
5.6 在刷新表格的時候,當(dāng)前的page屬性是 當(dāng)前頁數(shù)+ 1 的值
所以設(shè)置上拉刷新隱藏的條件應(yīng)該是 : page > total_page
5.7 隱藏代碼寫在哪里?
寫在刷新表格之后,MJ刷新框架每次刷新完數(shù)據(jù),會自動判斷是否隱藏,一定要在刷新方法后設(shè)置才有用
5.8 每次點(diǎn)擊左邊cell的時候,也要判斷是否隱藏上拉刷新控件,為什么?
有可能數(shù)據(jù)只有一頁,不判斷的話,就會顯示上拉刷新控件,去刷新的時候,拿不到更多數(shù)據(jù)
源代碼
- (void)viewDidLoad {
[super viewDidLoad];
self.title = @"推薦關(guān)注";
self.automaticallyAdjustsScrollViewInsets = NO;
_categoryTableView.contentInset = UIEdgeInsetsMake(64, 0, 0, 0);
_userTableView.contentInset = UIEdgeInsetsMake(64, 0, 0, 0);
// 分類tableView注冊cell
[_categoryTableView registerNib:[UINib nibWithNibName:@"XMGCategoryCell" bundle:nil] forCellReuseIdentifier:categoryID];
// 用戶tableView注冊cell
[_userTableView registerNib:[UINib nibWithNibName:@"XMGSubTagCell" bundle:nil] forCellReuseIdentifier:userID];
// 請求分類數(shù)據(jù)
[self loadCategoryData];
// 添加上下拉刷新
[self setupRefreshView];
}
- (void)setupRefreshView
{
// 下拉刷新
// 當(dāng)松手,并且下拉刷新完全顯示的時候,就會觸發(fā)下拉刷新
MJRefreshNormalHeader *header = [MJRefreshNormalHeader headerWithRefreshingTarget:self refreshingAction:@selector(loadNewUserData)];
header.automaticallyChangeAlpha = YES;
self.userTableView.mj_header = header;
// 上拉刷新
MJRefreshAutoNormalFooter *footer = [MJRefreshAutoNormalFooter footerWithRefreshingTarget:self refreshingAction:@selector(loadMoreUserData)];
footer.automaticallyHidden = YES;
self.userTableView.mj_footer = footer;
}
- (void)loadCategoryData
{
AFHTTPSessionManager *mgr = [AFHTTPSessionManager xmg_manager];
NSMutableDictionary *parameters = [NSMutableDictionary dictionary];
parameters[@"a"] = @"category";
parameters[@"c"] = @"subscribe";
[mgr GET:XMGBaseUrl parameters:parameters progress:nil success:^(NSURLSessionDataTask * _Nonnull task, NSDictionary * _Nullable responseObject) {
NSArray *dictArr = responseObject[@"list"];
_categorys = [XMGCategoryItem mj_objectArrayWithKeyValuesArray:dictArr];
[self.categoryTableView reloadData];
// 默認(rèn)選中第0個cell
NSIndexPath *indexPath = [NSIndexPath indexPathForRow:0 inSection:0];
[self.categoryTableView selectRowAtIndexPath:indexPath animated:YES scrollPosition:UITableViewScrollPositionNone];
[self tableView:self.categoryTableView didSelectRowAtIndexPath:indexPath];
} failure:^(NSURLSessionDataTask * _Nullable task, NSError * _Nonnull error) {
}];
}
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
if (tableView == _categoryTableView) { // 顯示分類TableView
return _categorys.count;
}
return _selectCategoryItem.users.count;
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
if (tableView == _categoryTableView) { // 顯示分類TableView
XMGCategoryCell *cell = [tableView dequeueReusableCellWithIdentifier:categoryID];
cell.item = _categorys[indexPath.row];
return cell;
}
XMGSubTagCell *cell = [tableView dequeueReusableCellWithIdentifier:userID];
cell.user = _selectCategoryItem.users[indexPath.row];
return cell;
}
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
if (tableView == _categoryTableView) {
return 44;
}
return 60 + 1;
}
// 點(diǎn)擊cell就會調(diào)用
// 必須用戶手動點(diǎn)擊cell才會觸發(fā)
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
if (tableView == _categoryTableView) {
// 記錄選中分類模型
_selectCategoryItem = _categorys[indexPath.row];
// 點(diǎn)擊分類cell
// 判斷之前有沒有數(shù)據(jù)
if (_selectCategoryItem.users.count) {
[self.userTableView reloadData];
self.userTableView.mj_footer.hidden = _selectCategoryItem.page > _selectCategoryItem.total_page;
return;
}
// 請求右邊用戶數(shù)據(jù)
[self loadNewUserData];
}
}
// 沒有更多數(shù)據(jù)的時候,隱藏上拉刷新控件
// 判斷當(dāng)前分類用戶組 有沒有更多用戶組
// 加載更多用戶數(shù)據(jù)
- (void)loadMoreUserData
{
[self.mgr.tasks makeObjectsPerformSelector:@selector(cancel)];
NSMutableDictionary *parameters = [NSMutableDictionary dictionary];
parameters[@"a"] = @"list";
parameters[@"c"] = @"subscribe";
parameters[@"category_id"] = _selectCategoryItem.id;
parameters[@"page"] = @(_selectCategoryItem.page);
[self.mgr GET:XMGBaseUrl parameters:parameters progress:nil success:^(NSURLSessionDataTask * _Nonnull task, NSDictionary * _Nullable responseObject) {
[self.userTableView.mj_footer endRefreshing];
_selectCategoryItem.page++;
NSArray *dictArr = responseObject[@"list"];
NSArray *users = [XMGUserItem mj_objectArrayWithKeyValuesArray:dictArr];
// 取出數(shù)組中所有元素,添加到新數(shù)組
// [_selectCategoryItem.users addObject:users];
[_selectCategoryItem.users addObjectsFromArray:users];
[self.userTableView reloadData];
// 控制上拉控件是否顯示,一定要在reloadData之后
self.userTableView.mj_footer.hidden = _selectCategoryItem.page > _selectCategoryItem.total_page;
} failure:^(NSURLSessionDataTask * _Nullable task, NSError * _Nonnull error) {
}];
}
// 加載更新用戶數(shù)據(jù)
- (void)loadNewUserData
{
_selectCategoryItem.page = 1;
[self.mgr.tasks makeObjectsPerformSelector:@selector(cancel)];
NSMutableDictionary *parameters = [NSMutableDictionary dictionary];
parameters[@"a"] = @"list";
parameters[@"c"] = @"subscribe";
parameters[@"category_id"] = _selectCategoryItem.id;
[self.mgr GET:XMGBaseUrl parameters:parameters progress:nil success:^(NSURLSessionDataTask * _Nonnull task, NSDictionary * _Nullable responseObject) {
_selectCategoryItem.page++;
// 記錄當(dāng)前分類總頁碼數(shù)
_selectCategoryItem.total_page = [responseObject[@"total_page"] integerValue];
// 結(jié)束刷新
[self.userTableView.mj_header endRefreshing];
NSArray *dictArr = responseObject[@"list"];
_selectCategoryItem.users = [XMGUserItem mj_objectArrayWithKeyValuesArray:dictArr];
[self.userTableView reloadData];
self.userTableView.mj_footer.hidden = _selectCategoryItem.page > _selectCategoryItem.total_page;
} failure:^(NSURLSessionDataTask * _Nullable task, NSError * _Nonnull error) {
}];
}
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
UICollectionView 實(shí)現(xiàn)圖片瀏覽效果
這篇文章主要為大家介紹了UICollectionView 實(shí)現(xiàn)圖片瀏覽效果示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
解析Objective-C?中?`+load`?方法的執(zhí)行順序
在?Objective-C?中,+load?方法是在類或分類被加載到內(nèi)存時調(diào)用的,它在程序啟動過程中非常早的階段執(zhí)行,用于在類或分類被加載時進(jìn)行一些初始化工作,這篇文章主要介紹了?Objective-C?中?`+load`?方法的執(zhí)行順序,需要的朋友可以參考下2024-07-07
這篇文章主要介紹了仿IOS效果，帶彈簧動畫的ListView，感興趣的小伙伴們可以參考一下2016-01-01
iOS動畫-定時對UIView進(jìn)行翻轉(zhuǎn)和抖動的方法
下面小編就為大家?guī)硪黄猧OS動畫-定時對UIView進(jìn)行翻轉(zhuǎn)和抖動的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
本篇文章主要介紹了iOS 圖片加載框架SDWebImage解讀，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
這篇文章主要介紹了iOS屏幕旋轉(zhuǎn)與鎖屏的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
iOS應(yīng)用進(jìn)入后臺后計時器和位置更新停止問題的解決辦法
這篇文章主要介紹了iOS應(yīng)用進(jìn)入后臺后計時器和位置更新停止問題的解決辦法,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-03-03
iOS應(yīng)用開發(fā)中視圖控件UIWindow的基本使用教程
這篇文章主要介紹了iOS應(yīng)用開發(fā)中視圖控件UIWindow的基本使用教程,代碼基于傳統(tǒng)的Objective-C,需要的朋友可以參考下2016-02-02
這篇文章主要為大家詳細(xì)介紹了iOS微信支付開發(fā)案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-08-08
這篇文章主要為大家詳細(xì)介紹了iOS仿Uber篩選欄的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01