iOS開發-部落格匯出工具開發教程(附帶源碼)

前言:

作為一名學生, 作為一名iOS開發學習者, 我個人瀏覽資訊包括部落格, 更多的選擇移動終端。然而, csdn並沒有現成的用戶端(不過有個web版的)。

之前曾經看到一款開源的匯出工具, 但是它是基於Windows平台的。匯出的也僅僅是PDF格式。而且, 對於文章的匯出, 需要精確URL。無法做到邊瀏覽別匯出。

另外, 我想實現的是, 可以在沒有網路的情況下, 瀏覽自己收藏的文章。並且, 對於自己收藏的文章, 可以分類管理。

最關鍵的是, 對於自己的文章, 可以做一個備份。我曾經遇到過這樣一件事, csdn帳號密碼泄漏, 使得他人登入我帳號發表垃圾博文, 導致我的部落格被封一天。那時候, 我的部落格記錄了170篇自己的學習點滴, 沒有備份, 可以想像那時候我有多慌。可見, 備份自己文章的重要性。

基於以上種種原因, 這款基於iOS平台的部落格匯出工具應運而生。

注:

本文章正在參與2014年csdn部落格大賽。如果您覺得, 對您有所協助, 希望能投上寶貴的一票。

投票連結:http://vote.blog.csdn.net/Article/Details?articleid=31768677

具體功能:

支援線上瀏覽csdn部落格 可導類型包括: 單篇文章, 專欄, 指定作者全部文章 匯出方式包括: (1)匯出單前瀏覽博文/專家/專欄 (2)匯出指定URL博文/專家/專欄 匯出文章分類管理 匯出文章查詢功能 匯出文章自動排版, 圖片自適應, 可放縮

運行效果:

看到這裡, 如果你只是想體驗一下這個應用, 想看看源碼, 那可以從我的Github中下載。另外, 第一版已經上傳到App Store上去了。 正在等待審核。

https://github.com/colin1994/csdnBlog.git

如果你想瞭解下整體開發過程, 歡迎繼續往下看。推薦下載了源碼, 對照著看。

你將學到:

自訂啟動動畫 網路環境判斷(是否是Wi-Fi狀態) IOS與JavaScript的互動 自訂HUD載入效果(非傳統菊花) UITableView列表基本操作 列表關鍵字模糊查詢 圖片基本操作下面逐一進行分析。
(一) 自訂啟動動畫不同與傳統的修改LaunchImage來載入一個靜態圖片作為我們的歡迎介面, 我這裡簡單的實現了圖片縮放, 文字漸漸顯示的效果。相對來說, 更加美觀, 我們能做的操作也更加多。
開啟AppDelegate.h檔案, 聲明一個變數, 用於顯示我們的視圖。

@property (strong, nonatomic) UIImageView *splashView;

開啟AppDelegate.m檔案, 加入具體實現過程。1.添加啟動動畫

    //添加啟動動畫    [self.window makeKeyAndVisible];    splashView = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, 320, Screen_height)];        if ([[UIScreen mainScreen] bounds].size.height == 568)    {        [splashView setImage:[UIImage imageNamed:@"bgBlog-568"]];    }    else    {        [splashView setImage:[UIImage imageNamed:@"bgBlog"]];    }        [self.window addSubview:splashView];    [self.window bringSubviewToFront:splashView];        [self performSelector:@selector(scale) withObject:nil afterDelay:0.0f];    [self performSelector:@selector(showWord) withObject:nil afterDelay:2.5f];

2.動畫具體實現

-(void)scale{    UIImageView *logo_ = [[UIImageView alloc]initWithFrame:CGRectMake(119, 88, 82, 82)];    logo_.image = [UIImage imageNamed:@"csdnLogo"];    [splashView addSubview:logo_];    [self setAnimation:logo_];}-(void)setAnimation:(UIImageView *)nowView{        [UIView animateWithDuration:1.0f delay:0.0f options:UIViewAnimationOptionCurveLinear                     animations:^     {         // 執行的動畫code         [nowView setFrame:CGRectMake(nowView.frame.origin.x- nowView.frame.size.width*0.1, nowView.frame.origin.y-nowView.frame.size.height*0.1, nowView.frame.size.width*1.2, nowView.frame.size.height*1.2)];     }                     completion:^(BOOL finished)     {         // 完成後執行code         [nowView removeFromSuperview];     }     ];    }-(void)showWord{        UIImageView *word_ = [[UIImageView alloc]initWithFrame:CGRectMake(75, Screen_height-100, 170, 29)];    word_.image = [UIImage imageNamed:@"word_"];    [splashView addSubview:word_];        word_.alpha = 0.0;    [UIView animateWithDuration:1.0f delay:0.0f options:UIViewAnimationOptionCurveLinear                     animations:^     {         word_.alpha = 1.0;     }                     completion:^(BOOL finished)     {         // 完成後執行code         [NSThread sleepForTimeInterval:1.0f];         [splashView removeFromSuperview];     }     ];}

(二)網路環境判斷(是否是Wi-Fi狀態)這個需要匯入Wi-Fi檔案夾下的Reachability.h / .m檔案。 這是從蘋果官方下載的。一個用來判斷網路環境的檔案。我們之所以要判斷是否在Wi-Fi環境下, 是因為 匯出文章可能使用的流量較大, 我們需要提示使用者開啟Wi-Fi來下載。
1.匯入Reachability.h / .m檔案2.添加標頭檔

#import "Reachability.h"            //Wi-Fi

3.判斷網路環境

    if ([Reachability reachabilityForInternetConnection].currentReachabilityStatus == ReachableViaWiFi)    {        //添加你想做的事情    }

(三)IOS與JavaScript的互動UIWebView是iOS最常用的SDK之一，它有一個 stringByEvaluatingJavaScriptFromString方法可以將javascript嵌入頁面中，通過這個方法我們可以在iOS中與UIWebView中的網頁元素互動。
常見的幾種使用途徑: 1、擷取當前頁面的url。

- (void)webViewDidFinishLoad:(UIWebView *)webView {    NSString *currentURL = [webView stringByEvaluatingJavaScriptFromString:@"document.location.href"];}

2、擷取頁面title。

- (void)webViewDidFinishLoad:(UIWebView *)webView {     NSString *currentURL = [webView stringByEvaluatingJavaScriptFromString:@"document.location.href"];   NSString *title = [webview stringByEvaluatingJavaScriptFromString:@"document.title"]; }

3、修改介面元素的值。

NSString *js_result = [webView stringByEvaluatingJavaScriptFromString:@"document.getElementsByName('q')[0].value='Colin';"];

4、表單提交：

 NSString *js_result2 = [webView stringByEvaluatingJavaScriptFromString:@"document.forms[0].submit(); "];

當然, 還有更多的功能, 需要你自己去學習。
我們這個工具所要做的是, 擷取到博文的主要內容及其標題。以匯出單篇為例。我們開啟一個博文, 顯示頁面原始碼, 可以看到下面這樣的內容。

其中的" article_content" 就對應著csdn博文的 本文內容. 這是我們匯出過程中需要的。(你肯定也不希望匯出的文章裡面嵌套著廣告吧...)所以, 我們可以通過簡單的兩行代碼擷取我們需要的內容:

//擷取詳細內容NSString *lJs = @"document.getElementById(\"article_content\").innerHTML";NSString *lHtml1 = [webView stringByEvaluatingJavaScriptFromString:lJs];

同理, 文章標題可以這樣獲得:

//擷取標題NSString *lJs2 = @"document.getElementById(\"article_details\").getElementsByClassName(\"article_title\")[0].getElementsByTagName(\"a\")[0].innerText";NSString *lHtml2 = [webView stringByEvaluatingJavaScriptFromString:lJs2];

再深入一點, 我們甚至可以 修改顯示網頁的圖片大小

//修改圖片大小if ([lHtml1 rangeOfString:@"

(四)自訂HUD載入效果(非傳統菊花)iOS內建的載入效果是個轉圈的菊花...想必大家都清楚了。不過說實話, 那玩意確實夠難看的。選擇我們要做的是, 顯示一個不封閉的圈, 並且背景視圖暗一點, 突出載入過程。效果如下:


1.匯入檔案夾SVProgressHUD2.添加標頭檔
#import "SVProgressHUD.h"           //HUD 載入顯示
3.顯示HUD
//顯示HUD[SVProgressHUD showWithMaskType:SVProgressHUDMaskTypeGradient];
4.移除HUD
//移除HUD[SVProgressHUD dismiss];


(五)UITableView列表基本操作這個是基礎內容了, 具體可以看blogExportedList.m這裡. 有詳細講解。這裡著重介紹下左滑刪除操作。1.開啟運行刪除模式2.響應刪除的時候, 需要做到 (1) 從列表中移除 (2)從資料中移除 (3)重新整理列表
//刪除-(UITableViewCellEditingStyle)tableView:(UITableView *)tableView editingStyleForRowAtIndexPath:(NSIndexPath *)indexPath{    return UITableViewCellEditingStyleDelete;}/*改變刪除按鈕的title*/-(NSString *)tableView:(UITableView *)tableView titleForDeleteConfirmationButtonForRowAtIndexPath:(NSIndexPath *)indexPath{    return @"刪除";}/*刪除用到的函數*/-(void)tableView:(UITableView *)tableView commitEditingStyle:(UITableViewCellEditingStyle)editingStyle forRowAtIndexPath:(NSIndexPath *)indexPath{    if (editingStyle == UITableViewCellEditingStyleDelete)    {        //擷取完整路徑 以及字典和數組的初始化        NSArray *paths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES);        NSString *documentsDirectory = [paths objectAtIndex:0];        NSString * namePath = [documentsDirectory stringByAppendingPathComponent:@"csdnInfo.plist"];                [blogArr removeObjectAtIndex:indexPath.row];                [blogArr writeToFile:namePath atomically:YES];                [nameList removeObjectAtIndex:indexPath.row];                [myTableView deleteRowsAtIndexPaths:[NSMutableArray arrayWithObject:indexPath] withRowAnimation:UITableViewRowAnimationAutomatic];  //刪除對應資料的cell    }}


(六)列表關鍵字模糊查詢搜尋的話, 是個很常用的功能。如果簡單的關鍵字搜尋, 想必大家都會. 但是我們需要的是模糊查詢。  比如要查詢  "iOS開發"  當你輸入i, o開, 等等, 都能找到對應的資料。
1.匯入查詢字列表檔案夾2.添加標頭檔
//查詢子列表#import "DDList.h"#import "PassValueDelegate.h"
3.初始化查詢列表
//查詢列表初始化    nameList = [[NSMutableArray alloc]init];    for (int i =0; i<[blogArr count]; i++)    {        [nameList addObject:[[blogArr objectAtIndex:i]objectForKey:@"name"]];    }        //初始化查詢的字串_searchStr = @"";    //初始化提醒視圖_ddList = [[DDList alloc] initWithStyle:UITableViewStylePlain];_ddList._delegate = self;[self.view addSubview:_ddList.view];[_ddList.view setFrame:CGRectMake(30, 108, 200, 0)];    _ddList._totalList = nameList;


4.響應查詢具體可以看代碼, 這裡強調一個。 當查到資料點擊的時候, 我們需要自動跳轉到指定的位置。 不然查詢也沒用了..
//隱藏提醒視圖- (void)setDDListHidden:(BOOL)hidden{NSInteger height = hidden ? 0 : 180;[UIView beginAnimations:nil context:nil];[UIView setAnimationDuration:.2];[_ddList.view setFrame:CGRectMake(30, 108, 200, height)];[UIView commitAnimations];}//單例,傳回選中提醒框中的結果#pragma mark -#pragma mark 傳回資料- (void)passValue:(NSString *)value{    //如果有選中，則修改當前搜尋內容為返回結果,調用結束函數searchBarSearchButtonClickedif (value)    {_searchBar.text = value;[self searchBarSearchButtonClicked:_searchBar];}else {}}//搜尋方塊中的字元改變時候調用#pragma mark -#pragma mark SearchBar Delegate Methods- (void)searchBar:(UISearchBar *)searchBar textDidChange:(NSString *)searchText{    //如果搜尋方塊有內容,更新提示列表if ([searchText length] != 0) {_ddList._searchText = searchText;[_ddList updateData];[self setDDListHidden:NO];}else    {[self setDDListHidden:YES];  //否則隱藏}    }//文字框彈出，開始搜尋- (BOOL)searchBarShouldBeginEditing:(UISearchBar *)searchBar{searchBar.showsCancelButton = YES;for(id cc in [searchBar subviews])    {        if([cc isKindOfClass:[UIButton class]])        {            UIButton *btn = (UIButton *)cc;            [btn setTitle:@"取消"  forState:UIControlStateNormal];        }    }return YES;}//開始搜尋響應。- (void)searchBarTextDidBeginEditing:(UISearchBar *)searchBar{searchBar.text = @"";}//結束文字框輸入- (void)searchBarTextDidEndEditing:(UISearchBar *)searchBar{searchBar.showsCancelButton = NO;searchBar.text = @"";}//當選中了提示列表中的某個,搜尋結束，選中結果，並且高亮- (void)searchBarSearchButtonClicked:(UISearchBar *)searchBar{[self setDDListHidden:YES];  //隱藏提示視圖_searchStr = [searchBar text]; //獲得查詢結果[searchBar resignFirstResponder];  //收回鍵盤        for (int i = 0; i<[blogArr count]; i++)  //從列表中尋找結果，選中    {        if ([[[blogArr objectAtIndex:i]objectForKey:@"name"] isEqualToString:_searchStr])        {            NSIndexPath *indexPath = [NSIndexPath indexPathForRow:i inSection:0];            [myTableView reloadData];            [myTableView scrollToRowAtIndexPath:indexPath     //滾動視圖                              atScrollPosition:UITableViewScrollPositionMiddle                                      animated:YES];            [myTableView selectRowAtIndexPath:indexPath       //選中高亮                                    animated:YES                              scrollPosition:UITableViewScrollPositionMiddle];        }    }        }//取消搜尋響應- (void)searchBarCancelButtonClicked:(UISearchBar *)searchBar{[self setDDListHidden:YES];[searchBar resignFirstResponder];}

(七)圖片基本操作這裡我們需要做的是, 點擊一個圖片, 跳轉到另外一個視圖, 這裡視圖允許對圖片進行常規編輯。包括圖片的縮放...具體可以看MRZoomScrollView.h / .m這兩個檔案。下面解釋下實現方法。
1.添加手勢。
    // Add gesture,double tap zoom imageView.    UITapGestureRecognizer *doubleTapGesture = [[UITapGestureRecognizer alloc] initWithTarget:self                                                                                action:@selector(handleDoubleTap:)];    [doubleTapGesture setNumberOfTapsRequired:2];    [imageView addGestureRecognizer:doubleTapGesture];

我們的放縮都是通過手勢識別來實現的。 比如, 你雙指拖拉, 就是放縮。 雙指點擊是自動放縮, 單指點擊是退出圖片瀏覽。
2.響應手勢操作
#pragma mark - Zoom methods- (void)handleDoubleTap:(UIGestureRecognizer *)gesture{    float newScale = self.zoomScale * 1.5;    CGRect zoomRect = [self zoomRectForScale:newScale withCenter:[gesture locationInView:gesture.view]];    [self zoomToRect:zoomRect animated:YES];}- (CGRect)zoomRectForScale:(float)scale withCenter:(CGPoint)center{    CGRect zoomRect;    zoomRect.size.height = self.frame.size.height / scale;    zoomRect.size.width  = self.frame.size.width  / scale;    zoomRect.origin.x = center.x - (zoomRect.size.width  / 2.0);    zoomRect.origin.y = center.y - (zoomRect.size.height / 2.0);    return zoomRect;}


至此, 這篇簡單的教程就結束了。希望, 能給您帶來一點收穫。
ps:
本文章正在參與2014年csdn部落格大賽。如果您覺得, 對您有所協助, 希望能投上寶貴的一票。
投票連結:http://vote.blog.csdn.net/Article/Details?articleid=31768677

學習的路上, 與君共勉。