一.搭建界面
1.分析界面 需要使用什么控制器來管理
我們根據(jù)需求 ? 可以用一個UITableViewController來管理
2.分析需求,我們發(fā)現(xiàn)cell的樣式是固定的 ?系統(tǒng)的cell不能滿足我們的需求
我們需要自定義cell ? ?創(chuàng)建cell類,同時創(chuàng)建xib
3.如何加載xib文件
3.1 可以提供一個類方法快速創(chuàng)建
+ (instancetype)cell
{return[[[NSBundlemainBundle]loadNibNamed:@"XMGSubTagCell"owner:niloptions:nil]firstObject]; ?}
通過NSBundle加載xib描述cell,一定要記得綁定標示符, 而且在創(chuàng)建cell的時候 ?還要判斷是否為空
XTSubTagCell*cell = [tableViewdequeueReusableCellWithIdentifier:ID];
if(cell ==nil) {
cell = [XTSubTagCellcell];
}
3.2 可以通過注冊的方式 ? ? ?可以不用綁定標識符,也可以不做判斷是否為空
二.加載數(shù)據(jù)
1.查看接口文檔(基本url,請求參數(shù),請求方式)
2.驗證接口能否請求成功,查看服務器返回的數(shù)據(jù) ? 為什么?
(接口文檔有可能描述錯誤,要自己去驗證一下)
3.發(fā)送AFN請求
3.1 創(chuàng)建管理者對象
3.2 設置請求參數(shù)
3.3 發(fā)送請求
4.解析數(shù)據(jù)(寫成pilst文件 ?分析數(shù)據(jù))
5.設計模型,字典轉(zhuǎn)模型
6.把模型展示到界面
怎么做?
6.1 在cell里面定義模型屬性來接收模型數(shù)據(jù)
6.2 在cell里面定義要接收數(shù)據(jù)的屬性
6.3 重寫模型屬性的set方法
6.4 給需要接收數(shù)據(jù)的參數(shù)賦值
7.設置完成 ?運行項目,發(fā)現(xiàn)tableView還是沒有數(shù)據(jù)? 為什么
因為tableView只在啟動的時候調(diào)用了一次數(shù)據(jù)源方法,這個時候還沒有數(shù)據(jù) ? ? ? 設置完數(shù)據(jù)沒有調(diào)用數(shù)據(jù)源方法
什么時候會重新調(diào)用數(shù)據(jù)源方法?
1 tableView第一次被加載的時候
2?刷新tableView表格
解決: 加載完數(shù)據(jù)之后(發(fā)送網(wǎng)絡成功),刷新tableView表格 ?就會重新調(diào)用數(shù)據(jù)源方法
[self.tableViewreloadData];
三.cell內(nèi)部結構處理
1.訂閱數(shù)字處理
1.1 為什么要處理訂閱數(shù)字?
訂閱數(shù)非常大的時候,1萬以上,我們希望顯示為:XX萬人訂閱
2.2 在哪里處理?
我們在cell里面賦值的時候可以拿到訂閱數(shù) ?可以在cell內(nèi)部做處理
2.3?怎么處理?
拿到訂閱數(shù)(String類型),轉(zhuǎn)換成CGFloat類型 ? ? ? ?顯示為XX人訂閱
CGFloatnumF = item.sub_number.floatValue;
判斷一下不超過1萬 直接顯示, ? 超過一萬 ? 訂閱數(shù) /1萬 ? 保留一位小數(shù) ? 顯示為XX萬人訂閱
2.4 如果正好是1萬的整數(shù)倍 ? 那么處理后的數(shù)據(jù)為XX.0萬人 ??我們希望 .0 不要顯示 ? ? ?怎么處理?
可以利用字符串替換
// 以后字符串不想要,就替換為空
numStr = [numStrstringByReplacingOccurrencesOfString:@".0"withString:@""];
2.頭像圓角處理
2.1 怎么處理?
有三種處理方式設置圓角半徑 ? 圖片裁剪 ?運行時
2.11 圖片裁剪 ? ?怎么做? ? 在哪里寫代碼?
0.在cell里面賦值的時候可以拿到圖片 ?可以在cell內(nèi)部做處理
1.開啟圖形上下文
// UIGraphicsBeginImageContextWithOptions:繪制圖片不清晰
// scale:比例因子 像素與點比例 0:自動識別
UIGraphicsBeginImageContextWithOptions(image.size,NO,0);
2.設置圓形裁剪區(qū)域
UIBezierPath*path = [UIBezierPathbezierPathWithOvalInRect:CGRectMake(0,0, image.size.width, image.size.height)];
3.超出裁剪區(qū)域剪切掉
[pathaddClip];
4.繪圖
[imagedrawAtPoint:CGPointZero];
5. 獲取圖片
image =UIGraphicsGetImageFromCurrentImageContext();
6.關閉圖形上下文
UIGraphicsEndImageContext();
2.12 設置圓角半徑 ?在哪里寫代碼?
因為cell從xib加載,一定會調(diào)用awakeFromNib
// 當對象從xib加載完成就會調(diào)用
// 只會調(diào)用一次
- (void)awakeFromNib
{
//??? self.iconView.layer.cornerRadius = self.iconView.frame.size.width * 0.5;
//??? // 超出主層邊框,就會裁剪掉
//??? self.iconView.layer.masksToBounds = YES;不設置的話, 看到的圖片還是原來的形狀(正方形)
}
2.13 運行時
在xib里面 ?選中要設置圓角的圖片的imageView
3.分割線處理
3.1 為什么要處理分割線
系統(tǒng)的分割線沒有占據(jù)整個cell ? ?離cell得左邊有一段距離 ? ?我們希望分割線占據(jù)整個cell
3.2 怎么處理?
1.自定義分割線
2.設置系統(tǒng)屬性,讓分割線占據(jù)全屏(iOS6和iOS7,iOS7和iOS8)
首先 ?我們要知道 ? ?分割線屬于tableView的內(nèi)容
在tableView里面搜IOS7 ? 可以查看到IOS7版本新出來的API
我們找到一個內(nèi)邊距 ? 嘗試設置一下
// 取消分割線內(nèi)邊距
self.tableView.separatorInset=UIEdgeInsetsZero;
設置完之后我們發(fā)現(xiàn)分割線確實往左邊移了一點,但還是沒占據(jù)整個cell(ios8或以上的用戶會有這個問題 ? ios7或一下的沒有)
我們知道IOS8之后 ?出了一個layOut的內(nèi)邊距,整個屬性屬于UIView
我們?nèi)IView里面去搜索IOS8新出的API ? 搜索到layoutMargins
// 取消約束邊緣
self.tableView.layoutMargins=UIEdgeInsetsZero;
設置完之后我們發(fā)現(xiàn)沒有效果 ,為什么?
可能是我們設置的對象搞錯了,我們嘗試一下給cell設置一下
cell.layoutMargins=UIEdgeInsetsZero;
設置完之后,我們發(fā)現(xiàn)就可以了 ?問題解決了
layoutMargins是IOS8de內(nèi)容 ?我們項目設置的支持的最低版本為ios7,那么ios7用戶使用ios8的api會報錯
怎么解決?
判斷一下 ? ?ios8以上的就不執(zhí)行這個方法
怎么拿到當前手機版本
#define XTSystemVersion ([UIDevice currentDevice].systemVersion.floatValue)
if(XTSystemVersion>=8.0) {// 8.0以上才需要調(diào)用方法
cell.layoutMargins=UIEdgeInsetsZero;
}
3.setFrame重寫cell的setFrame 1.取消系統(tǒng)分割線 2.設置tableView背景色為分割線顏色
優(yōu)點:不用做屏幕適配 ? 任何地方都能使用
設置cell的分割線,那么應該是設置cell的frame ? 在cell類里面寫代碼
怎么寫?
0 取消系統(tǒng)的分割線
1 先設置tableView的背景顏色 ? ?想讓分割線為什么顏色就設置背景色為什么顏色
2 只需要設置frame的高度比cell的高度小一點就可以了
- (void)setFrame:(CGRect)frame
{讓cell的y值從10 的位置開始顯示
frame.origin.y+=10;
讓cell左右距離父控件左右間距為10
frame.origin.x+=10;
frame.size.width-=20;
設置分割線的高度
frame.size.height-=10;
// 還原系統(tǒng)實現(xiàn)
// 真正設置cell的frame
[supersetFrame:frame];
}
3 ? 如果分割線高度太大 ?,那么cel的內(nèi)容可能顯示不完全, ? 應為cell的高度減小了
怎么解決?
我們只要把cell的高度設置大一點就可以了 ? ?分割線高度設置多少 ?我們就在原來的基礎上給cell的高度再加多少
四.發(fā)送網(wǎng)絡請求,提示正在加載的HUD
1.為什么要使用HUD?
給用戶良好的體驗
2.怎么使用HUD?
用cocoapods導入SVProgressHUD框架
// 提示用戶當前正在加載數(shù)據(jù)
[SVProgressHUDshowWithStatus:@"正在加載數(shù)據(jù)ing...."];
3.什么時候顯示HUD
發(fā)送網(wǎng)絡請求的時候(之前), ?進入推薦標簽界面就發(fā)送網(wǎng)絡請求,所以可以在viewDidLoad方法里面顯示
4.什么時候隱藏
數(shù)據(jù)加載完成或者是用戶退出界面的時候
// 隱藏指示器
[SVProgressHUDdismiss];
5.注意點:
當網(wǎng)絡非常慢的時候,用戶可能不等網(wǎng)絡請求完畢就退出當前界面,這個時候就要隱藏HUD而且關閉網(wǎng)絡請求
那么,我們應該把代碼寫在哪里??
界面消失的時候回調(diào)用下面的方法,我們可以把代碼寫在這里面
- (void)viewWillDisappear:(BOOL)animated
{
[superviewWillDisappear:animated];
// 隱藏指示器
[SVProgressHUDdismiss];
// 干掉請求
// 讓管理者中所有任務全部執(zhí)行cancel
[_mgr.tasksmakeObjectsPerformSelector:@selector(cancel)];
}
