按照慣例, 先上效果圖 做這個項目是因為剛好在逛博客園的時候看到一篇文章 博客園第三方客戶端-i博客園正式發佈App Store, 這裡就幫忙貼下鏈接, 和那篇文章的作者一樣, 我也是剛畢業要找實習的人了(/(ㄒoㄒ)/~~), 開發容易找工不易, 哎, 做個項目練練手吧. 然後, 整個項目做
按照慣例, 先上效果圖
前言
做這個項目是因為剛好在逛博客園的時候看到一篇文章 博客園第三方客戶端-i博客園正式發佈App Store, 這裡就幫忙貼下鏈接, 和那篇文章的作者一樣, 我也是剛畢業要找實習的人了(/(ㄒoㄒ)/~~), 開發容易找工不易, 哎, 做個項目練練手吧.
然後, 整個項目做下來大概做了半個月吧, 今天算是做出1.0版本啦, 已經貼上github(https://github.com/samAroundGitHub/CNBlog), 歡迎各路人士指導交流啦.
項目介紹
1. 工具和資料
博客園官方open web api網址:(再次感謝桑果, 因為我不會找api...(╮(╯▽╰)╭))
第三方框架 (這次主要想說不要用太多第三方, 所以為了開發效率只用了幾個)
- SDWebImage
- MJRefresh
- SVProgressHUD
2. UI設計
這裡就貼下我的一些UI傑作好了(^^)
項目中用到的UI, 像appIcon, LaunchImage, 還有一些占點陣圖標我是自己做的(Sketch), 然後有一部分是http://www.easyicon.net上的, 還有一部分是以前項目的圖標, 我也有從ituns下載app, 打開它的包想拿它的圖片, 竟然沒找到想要的那幾個, 應該是髮網絡請求獲取的吧.
不知道怎麼獲取app圖片資源的, 這裡推薦一個網址:iOS,如何模仿一個App
開發難點
1. 博客園api數據解析
博客園返回的數據是xml, 所以我選擇用蘋果官方自帶的NSXMLParser進行解析, 為此我特地寫了一個工具類(SMXMLParserTool), 這裡介紹一下用法, 有需要的可以拖到你的項目自己就使用.
.h文件
+ (instancetype)sm_toolWithURLString:(NSString *)urlString nodeName:(NSString *)nodeName completeHandler:(void (^)(NSArray *contentArray, NSError *error))completerHandler; - (instancetype)sm_initWithURLString:(NSString *)urlString nodeName:(NSString *)nodeName completeHandler:(void (^)(NSArray *contentArray, NSError *error))completerHandler; @property (nonatomic, readonly, strong) NSArray *contentArray; @property (nonatomic, strong) NSString *nodeName;
使用的時候只需要調用類方法, [SMXMLParserTool sm_toolWithURLString:...], 需要傳入一個xml節點的名稱, 比如博客園的xml節點結構如下的話,
<doc> <feed> <title>博客園_48小時閱讀排行</title> <id>d2e2f719-12cd-414e-ac2c-9d376c950c8a;id=...</id> // 刷新時間 <updated></updated> <entry> </entry> <entry> </entry> <entry> </entry> </feed> </doc> // 博客信息 <entry> // 文章id <id></id> // 博客題目 <title></title> // 文章概述 <summary></summary> // 發佈時間 <published></published> // 獲取時間 <updated></updated> // 發佈人信息 <author> // 姓名 <name></name> // 博客首頁 <uri></uri> <avatar> // 頭像 <http/> </avatar> </author> <link></link> // 推薦人數 <diggs></diggs> // 閱讀過的人數 <views></views> // 評論數 <comments></comments> </entry>
你只要傳入@"entry", 然後就會得到節點entry下以各子節點為key值為value的dictionary然後存入到contentArray, 在回調函數completeHandler中可以直接使用獲得的數據contentArray. 如果解析過程發生錯誤, error信息會被列印到控制台.
2. 第二個難點還是博客園api的數據解析
因為博客園返回博客的文章格式是html格式的. 所以需要解析html語句. 這裡我採用的方法是[UIWebView LoadHtmlString:..];
然後會發現解析完的頁面圖片會超出顯示範圍, 這是需要用到 [webView stringByEvaluatingJavaScriptFromString:..] 用javaScript改變圖片大小
// 設置圖片的寬高適應屏幕 [webView stringByEvaluatingJavaScriptFromString:[NSString stringWithFormat: @"var script = document.createElement('script');" "script.type = 'text/javascript';" "script.text = \"function ResizeImages() { " "var myImg,oldWidth,oldHeight;" "var maxWidth=%f;"// 圖片寬度 "for(i=0;i <document.images.length;i++){" "myImg = document.images[i];" "oldWidth = myImg.width;oldHeight = myImg.height;" "var scale = oldWidth/oldHeight;" "if(myImg.width > maxWidth){" "myImg.width = maxWidth;myImg.height = maxWidth/scale;" "}" "}" "}\";" "document.getElementsByTagName('head')[0].appendChild(script);", kScreenW-20]]; [webView stringByEvaluatingJavaScriptFromString:@"ResizeImages();"];
這樣就可以把超過的圖片顯示到你要的範圍內了.
3. 第三個難點還是博客園api數據解析
這次是為什麼這樣說呢? 因為如果你要點擊webView下的圖片有響應, 還得再次用到剛剛的方法 [UIWebView LoadHtmlString:..];
預設的情況下點擊是不會觸發事件的, 所以要用javaScript讓圖片有onclick()方法, 然後改變document.loaction的值, 實現頁面跳轉, 在UIWebView代理方法 - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType; 下捕捉事件進行處理
// 添加圖片的onclick方法 NSString *setImageOnclickString = [NSString stringWithFormat: @"function setImageOnclick() {\ var imgs = document.getElementsByTagName('img');\ for(var i=0; i<imgs.length; i++) {\ imgs[i].onclick = function(){\ document.location = this.src;}}}"]; [webView stringByEvaluatingJavaScriptFromString:setImageOnclickString]; [webView stringByEvaluatingJavaScriptFromString:@"setImageOnclick()"];
我處理的方法是用蘋果新的內嵌SFSafariViewController實現跳轉, 這樣的好處是直接可以在app內享有safari自帶的功能, 比如保存圖片, 進入閱讀模式等等, 而且還是在app內沒有離開你的app. 使用SFSafariViewController前需要 #import <SafariServices/SafariServices.h>
4. 第四個難點依然是博客園api數據解析
醉了, 是不是. 哈哈. 不過這次我說的難點是在邏輯上不是在技術上的. 獲取數據的數目上下拉的獲取多少數據, 總共有多少數據, 不一次性獲取數據的情況下每次獲取多少數據可以避免流量浪費, 反正是一系列邏輯上要解決的問題, 由於情況很多, 我就不貼代碼了, 有遇到問題再交流交流.
5. tarBarHideWhenPush
終於第五個難點不是api數據解析了, 但是其實tarBarHideWhenPush也不算難點, 只是會經常走彎路, 當UITabBarViewController嵌套UINavgationController附加有UIViewController, 反正關係一複雜起來, 就會發現很多人問hidesBottomBarWhenPushed = YES為什麼不管用, 我也百度過試過很多方法, 比如
self.hidesBottomBarWhenPushed = YES; [self.navigationController pushViewController:.. animated:YES]; self.hidesBottomBarWhenPushed = NO;
再比如, 在viewDidappear中才加入 self.hidesBottomBarWhenPushed = YES. 反正就是很多說法, 但是都不怎麼有效..
我獨門的解決方法是在你要隱藏tarBar的VC中調用
// push後隱藏tabBar - (BOOL)hidesBottomBarWhenPushed { return YES; }
先寫到這裡吧, 已經3點25了,, 項目一些功能下次再介紹吧.