王艷君

摘 要： 該設(shè)計是在Mac系統(tǒng)上，通過Xcode5開發(fā)工具，使用Objective?C語言進行漫畫閱讀客戶端的開發(fā)。首先，根據(jù)需求分析做出符合用戶使用習慣的交互界面，根據(jù)服務(wù)器接口請求并解析出所有漫畫信息，將獲取到的漫畫信息通過自定義表視圖展示給用戶；然后，給每一個漫畫添加點擊事件，當用戶點擊某一漫畫時，可以跳轉(zhuǎn)到漫畫詳情頁，漫畫詳情頁涵蓋了漫畫的所有信息；在詳情頁中添加評論、閱讀、收藏、評星等UIButton控件，并添加點擊事件，當用戶點擊某一按鈕時，可以跳轉(zhuǎn)到對應(yīng)視圖；最后，待所有功能都完成后，進行數(shù)據(jù)測試、Bug修復(fù)以及界面美化。

關(guān)鍵字： iOS； 客戶端； Objective?C； Xcode5； 漫畫閱讀

中圖分類號： TN919.8?34； TP311 文獻標識碼： A 文章編號： 1004?373X（2014）19?0121?04

Design and implementation of comic reading mobile client based on iOS platform

WANG Yan?jun

（School of Information Engineering， Xian Eurasia University， Xi'an 710065， China）

Abstract： The comic reading client was developed on a Mac system by using Xcode5 development tool and Objective?C language. The interaction interface conforming to user operation habits is made according to the demand analysis， and then information of all the comics is parsed out according the request of server interface and is presented to the user through custom table views. After that， a click event is added for every comic. When a user clicks on a comic， the detail page of the comic will jump to him. The detail page covers all the information of a comic. In the detail page， if the click event and UIButton controls for comments， reading， collection， rating， etc. are added， when the user clicks a button， a corresponding view will jump to him. When all the functions are completed， data testing， Bug fix and interface beautifying are performed.

Keywords： iOS； client； Objective?C； Xcode5； comic reading

0 引 言

手機閱讀作為一種媒體形式，近年來的發(fā)展呈現(xiàn)良好態(tài)勢。從2003年初開始，手機已具備支持漫畫閱讀的條件，但由于當時技術(shù)水平的限制，手機缺乏足夠大的可視彩屏以供用戶進行良好的漫畫閱讀體驗，加之網(wǎng)速過慢、內(nèi)存不足、下載費用過高等，手機用戶逐漸對此失去了興趣。近年來，隨著智能手機的發(fā)展，特別是各大運營商對3G/4G業(yè)務(wù)的大力推廣，使用手機進行漫畫閱讀又受到了廣大用戶的關(guān)注，并且正日益成為人們娛樂消遣的新方式?？梢哉f，手機漫畫閱讀的出現(xiàn)代表了手機技術(shù)的發(fā)展以及移動互聯(lián)網(wǎng)時代的到來。

本文運用iOS客戶端的開發(fā)技術(shù)，通過對服務(wù)器數(shù)據(jù)的請求與解析，實現(xiàn)漫畫推薦、分類、最新入庫漫畫等列表的展示，并且實現(xiàn)對漫畫的搜索、評論、閱讀、收藏等功能。

1 客戶端功能需求分析及定義

對于功能方面，該客戶端軟件在系統(tǒng)功能方面主要包括以下幾點：

（1） 錯誤信息提示，比如進入客戶端時或者在閱讀過程中出現(xiàn)斷網(wǎng)，則在下次加載數(shù)據(jù)時會出現(xiàn)彈出框提示網(wǎng)絡(luò)連接異常，保證軟件在運行過程中不會出現(xiàn)異常。

（2） 服務(wù)器數(shù)據(jù)請求與解析，即服務(wù)器和客戶端之間的通信必須通暢。

（3） 內(nèi)存的優(yōu)化管理是軟件開發(fā)過程中較為重要的一個環(huán)節(jié)，內(nèi)存泄露會導(dǎo)致數(shù)據(jù)丟失，影響用戶體驗。

該客戶端具有的基本功能如下：漫畫列表展示，漫畫搜索，漫畫收藏，漫畫閱讀，書簽功能，用戶評論。

（1） 漫畫列表展示。漫畫列表展示主要包括漫畫推薦、漫畫分類、最新入庫、漫畫分集。視圖窗口主體內(nèi)容構(gòu)成：漫畫推薦頁顯示漫畫圖片、漫畫名、作者名、點擊量、評分、分類、漫畫內(nèi)容概述，詳情頁展示漫畫分集列表以及漫畫基本信息，最新入庫視圖頁展示最新入庫漫畫以及漫畫基本信息。

（2） 漫畫搜索。漫畫搜索頁面的屏幕上方顯示搜索框，可以在搜索框中輸入漢字或拼音，系統(tǒng)自動將輸入內(nèi)容轉(zhuǎn)換為拼音。當用戶輸入漫畫名或作者名時，漫畫列表展示搜索到的漫畫信息；當用戶輸入的內(nèi)容與漫畫信息不匹配時則漫畫列表不顯示。

（3） 漫畫收藏。在漫畫詳情頁中創(chuàng)建漫畫收藏按鈕，用戶可以收藏喜歡自己的漫畫，點擊收藏后漫畫信息將添加入漫畫收藏頁面，并且漫畫收藏按鈕顯示已收藏狀態(tài)，在漫畫收藏頁面展示收藏的漫畫信息。

（4） 漫畫閱讀。在漫畫詳情頁中創(chuàng)建分集按鈕以及開始閱讀按鈕，用戶可以根據(jù)需求選擇需要閱讀的章節(jié)，點擊開始閱讀后，再通過服務(wù)器接口獲取漫畫內(nèi)容，在漫畫閱讀頁展示漫畫內(nèi)容。閱讀到中途退出后，開始閱讀按鈕顯示上次閱讀的章節(jié)。

（5） 書簽功能。在漫畫閱讀頁添加書簽按鈕，當讀到中途用戶想停止閱讀退出視圖窗口時，用戶可以點擊書簽按鈕進行當前位置的存檔，在用戶下次點擊閱讀時，可以跳轉(zhuǎn)到上次存檔的位置繼續(xù)閱讀。

（6） 用戶評論。在漫畫評論頁添加評論按鈕，點擊評論按鈕可以跳轉(zhuǎn)到用戶評論頁面，用戶可以對漫畫進行評論和打分，將評論和打分后的信息上傳至服務(wù)器，進入評論頁面時將顯示該用戶剛評論的信息。

2 系統(tǒng)模塊設(shè)計

程序的整體功能模塊包含從服務(wù)器請求和解析數(shù)據(jù)、功能選擇、提交數(shù)據(jù)到服務(wù)器等。其中，使用同步請求方式進行數(shù)據(jù)請求，XML解析使用的是GDataXML解析，字符串解析使用的是SBJson解析。具體的模塊設(shè)計如圖1所示。

3 界面的繪制

界面繪制較為簡單，只需根據(jù)當前需求分析對每個頁面進行繪制。首先在工程中創(chuàng)建一個視圖控制器，并為其生成nib文件，然后將繪制界面所用到的控件拖入合適位置，形成插座控件，等待網(wǎng)絡(luò)請求完畢時加載數(shù)據(jù)在這些控件上。若沒有生成nib文件，則可以使用代碼手動創(chuàng)建實現(xiàn)控件的生成。繪制流程圖如圖2所示。

4 控件的選擇

UILabel用來顯示文字，可以設(shè)置字體、字號、顏色等。

UIImageView用來顯示圖片，可以設(shè)置圖片大小、位置等。

UITextView用來顯示多行文本內(nèi)容，該控件可以對文本內(nèi)容進行編輯，若文本內(nèi)容超出文本框范圍則可以上下滾動瀏覽。

UIButton在iPhone上主要就是按鈕，可以響應(yīng)用戶操作事件，它可以設(shè)置背景圖片、文字等相關(guān)屬性。

UITableView是一個一維的表視圖，是上下滑動的條目清單，可進行分區(qū)，每個分區(qū)展示不同類型的數(shù)據(jù)，每個表格里的指定行（cell）中的數(shù)據(jù)由他所在分區(qū)（section）和所在分區(qū)的行（row）來決定。

UIScrollView是一個滾動視圖控件，當視圖中無法顯示多于一個屏幕尺寸的內(nèi)容時可以使用該控件， contentsize屬性可以設(shè)置滾軸內(nèi)容的寬高。

5 數(shù)據(jù)的請求

數(shù)據(jù)請求總共有四種，分別是同步請求、異步請求、Get請求、Post請求。其中同步請求一旦發(fā)生，應(yīng)用程序會停止與用戶進行交互，等待數(shù)據(jù)返回完成，才可以進行之后的操作。異步請求解決了同步請求中線程阻塞的問題，當發(fā)生異步請求之后，程序會建立新的線程進行操作，對于用戶交互絲毫不會受到影響，用戶依然可以對所有界面元素進行操作。Get請求雖然操作簡單，但安全性不高，它的請求參數(shù)都顯示在訪問路徑上，外界可以直觀的看到。Post請求操作相對復(fù)雜，不過安全性較高，它是將所有的請求參數(shù)放在一個body里面，從而使外界不容易捕獲到這些信息。

同步Get請求雖然阻塞線程并且安全性不高但操作簡單，可以在列表展示模塊使用同步Get請求，可以大大減少工作量，縮短程序開發(fā)周期。在數(shù)據(jù)下載模塊則需要使用異步Get請求，可以實現(xiàn)多線程下載，不會阻塞線程，在下載的同時可以進行用戶交互。

（1） 同步Get請求的建立需要以下三個步驟：

第一步，創(chuàng)建URL，代碼如下：

NSURL*url=[NSURLURLWithString：@"http：//cmhtech.ecartoon.net/tuijian.php/book_index.php？id=2"]；

第二步，通過URL創(chuàng)建網(wǎng)絡(luò)請求，代碼如下：

NSURLRequest*request=[[NSURLRequestalloc]initWithURL：urlcachePolicy：NSURLRequestUseProtocolCachePolicy timeoutInterval：10]；

第三步，連接服務(wù)器，代碼如下：

NSData*received=[NSURLConnectionsendSynchronousRequest：requestreturningResponse：nil error：nil]；

NSString*str=[[NSStringalloc]initWithData：receivedencoding：NSUTF8StringEncoding]；

（2） 異步Get請求的建立需要以下三個步驟：

第一步，創(chuàng)建URL，代碼如下：

NSURL*url=[NSURLURLWithString：@"http：//cmhtech.ecartoon.net/tuijian.php/book_index.php？id=2"]；

第二步，通過URL創(chuàng)建網(wǎng)絡(luò)請求，代碼如下：

NSURLRequest*request=[[NSURLRequestalloc]initWithURL：urlcachePolicy：NSURLRequestUseProtocolCachePolicy timeoutInterval：10]；

第三步，連接服務(wù)器，代碼如下：

NSURLConnection*connection = [[NSURLConnection alloc]initWithRequest：request delegate：self]；

異步請求需要實現(xiàn)的代理方法如下：

① 接收到服務(wù)器回應(yīng)的時候調(diào)用

-（void）connection： （NSURLConnection*） connectiondidReceiveResponse： （NSURLResponse *） response {}

② 服務(wù)器傳輸數(shù)據(jù)時調(diào)用，此方法執(zhí)行若干次。

-（void）connection： （NSURLConnection *） connection didReceiveData： （NSData*） data {}

③ 數(shù)據(jù)傳完之后調(diào)用此方法

-（void）connectionDidFinishLoading： （NSURLConnection *） connection {}

④ 網(wǎng)絡(luò)請求失敗時會進入此方法

-（void）connection：（NSURLConnection*）connectiondidReceiveResponse： NSURLResponse *） response {}

6 網(wǎng)絡(luò)的判斷

使用網(wǎng)絡(luò)判斷之前需導(dǎo)入第三方類庫Reachability.h和Reachability.m，并引入SystemConfiguration框架。

在Reachability類中有三種枚舉型變量用來判斷網(wǎng)絡(luò)狀態(tài)：

Reachability*reachability = [Reachability reachabilityWithHostName： @"www.baidu.com" ]；

switch（[reachability currentReachabilityStatus]） {

case NotReachable：

//判斷是否有網(wǎng)絡(luò)

isExistenceNetwork = YES；

break；

case ReachableViaWWAN

//判斷是否是2G/3G網(wǎng)絡(luò)

isExistenceNetwork = NO；

break；

case ReachableViaWiFi：

//判斷是否是WiFi連接

isExistenceNetwork = NO；

break；}

7 客戶端界面的實現(xiàn)

漫畫閱讀客戶端界面是應(yīng)用程序與用戶互動交流的平臺。iOS視圖控制器提供的nib文件可以方便地對界面進行繪制，其UI控件都可以直接拖到nib文件中進行創(chuàng)建，開發(fā)人員可以直觀地看到界面繪制的效果。

（1） 漫畫推薦首頁

漫畫推薦首頁使用自定義表視圖（UITableView）進行列表展示，自定義Cell中使用UIImageView控件顯示漫畫圖片，使用UILabel控件顯示漫畫基本信息。繪制效果如圖3所示。

（2） 漫畫列表展示

漫畫列表展示使用自定義表視圖（UITableView）進行展示，自定義Cell中使用UIImageView控件顯示漫畫圖片，使用UILabel控件顯示漫畫基本信息。實現(xiàn)代碼如下：

//判斷點擊的按鈕

if （sender == self.segmentButton1） {

//判斷漫畫列表視圖是否已創(chuàng)建，防止多次創(chuàng)建

if （IOS.comicsListShowViewController == nil） {

[ IOS.comicsListShowViewController=[[HIComicsListShow?] ViewController alloc] init]；

}

//根據(jù)所傳的sub值確定該表視圖顯示的內(nèi)容

IOS.comicsListShowViewController.sub = @"4"；

//設(shè)置導(dǎo)航欄標題

IOS.comicsListShowViewController.navigationItem.title = @"精彩推薦"；

//利用堆棧的方式將該視圖添加到導(dǎo)航器

[self.navigationControllerpushViewController：IOS.comicsListShowViewController

（3） 漫畫詳情頁

漫畫詳情頁中，為解決內(nèi)容過多無法顯示的問題，故采用滾動視圖控件實現(xiàn)界面上下滾動效果，詳情頁中使用UIImageView顯示漫畫圖片，使用UILabel顯示漫畫基本信息，使用UITextView顯示漫畫內(nèi)容概述，使用自定義按鈕實現(xiàn)分集列表展示。具體繪制效果如圖4所示。

（4） 漫畫收藏頁

漫畫收藏頁的繪制使用了多個UIView，在一個視圖的中間添加了另一視圖，并在該視圖上添加了一個UITableView，使用自定義表視圖顯示已收藏的漫畫。實現(xiàn)代碼如下：

//使用標識符，惟一標識每一個Cell

staticNSString *identifier=@"identifier"；

//尋找可重用的Cell

HICustomCollectCell*cell=[tableViewdequeueReusableCellWithIdentifier：identifier]；

//判斷Cell是否為空，若為空則創(chuàng)建

if（cell == nil） {

NSArray*objects = [[NSBundlemainBundle] loadNibNamed： @"HICustomCollectCell" owner：selfopti ons：nil]；

for （id object in objects） {//判斷object對象是不是這個類的一個成員

if（[object isMemberOfClass：[HICustomCollectCellclass]]） {

cell = object；//設(shè)置系統(tǒng)默認顏色為無色

cell.selectionStyle=UITableViewCellSelectionStyleNone；}}}

（5） 漫畫搜索

漫畫搜索界面主要用到UISearchBar控件，在nib文件中拖入一個UISearchBar控件實現(xiàn)搜索界面的繪制。實現(xiàn)代碼如下：

//防止點擊searchBar崩潰

[self.searchDisplayController.searchResultsTableViewregisterNib：nib forCellReuseIdentifier： identifier]；

8 結(jié) 語

本文主要對客戶端功能要求、整體功能、數(shù)據(jù)的測試進行了分析，采用了圖表加文字的方式對關(guān)鍵技術(shù)做了闡述，并對主要代碼做出了解釋與說明。在程序編寫方面，代碼簡潔明了，并且運行效率高。本設(shè)計中所建立的類結(jié)構(gòu)都是可以維護和修改的，并且可以向其中添加新的功能，類的可重用性和可擴展性得到了很好的體現(xiàn)。

參考文獻

[1] CLARK Josh. Tapworthy：設(shè)計偉大的iPhone應(yīng)用[M].南京：東南大學(xué)出版社，2011.

[2] 谷嬋娟，錢曉飛，莊重.手機閱讀的生態(tài)化發(fā)展策略探析[J].圖書館理論與實踐，2011（3）：45?49.

[3] 張龍譯.iPhone SDK編程入門經(jīng)典：使用Objective?C[M].北京：清華大學(xué)出版社，2011.

[4] 潘兆業(yè).手機應(yīng)用程序的交互設(shè)計研究[J].電腦與電信，2011 （6）：55?57.

[5] 徐凱麗.淺談信息時代的產(chǎn)品設(shè)計發(fā)展趨勢：以蘋果設(shè)計為例[J].文藝生活：下旬刊，2012（5）：181?182.

[6] 唐佳希.移動互聯(lián)新媒體的閱讀特點以及編輯應(yīng)關(guān)注的幾個問題[J].中國編輯，2011（2）：42?45.

[7] 劉彥.基于iOS環(huán)境的應(yīng)用軟件交互設(shè)計策略[J].信息化研究，2011（5）：24?26.

[8] 弋榮靜，王振凱.基于iOS平臺的雜志閱讀軟件的設(shè)計與實現(xiàn)[J].軟件，2012（12）：31?37.

if（[object isMemberOfClass：[HICustomCollectCellclass]]） {

cell = object；//設(shè)置系統(tǒng)默認顏色為無色

cell.selectionStyle=UITableViewCellSelectionStyleNone；}}}

（5） 漫畫搜索

漫畫搜索界面主要用到UISearchBar控件，在nib文件中拖入一個UISearchBar控件實現(xiàn)搜索界面的繪制。實現(xiàn)代碼如下：

//防止點擊searchBar崩潰

[self.searchDisplayController.searchResultsTableViewregisterNib：nib forCellReuseIdentifier： identifier]；

8 結(jié) 語

本文主要對客戶端功能要求、整體功能、數(shù)據(jù)的測試進行了分析，采用了圖表加文字的方式對關(guān)鍵技術(shù)做了闡述，并對主要代碼做出了解釋與說明。在程序編寫方面，代碼簡潔明了，并且運行效率高。本設(shè)計中所建立的類結(jié)構(gòu)都是可以維護和修改的，并且可以向其中添加新的功能，類的可重用性和可擴展性得到了很好的體現(xiàn)。

參考文獻

[1] CLARK Josh. Tapworthy：設(shè)計偉大的iPhone應(yīng)用[M].南京：東南大學(xué)出版社，2011.

[2] 谷嬋娟，錢曉飛，莊重.手機閱讀的生態(tài)化發(fā)展策略探析[J].圖書館理論與實踐，2011（3）：45?49.

[3] 張龍譯.iPhone SDK編程入門經(jīng)典：使用Objective?C[M].北京：清華大學(xué)出版社，2011.

[4] 潘兆業(yè).手機應(yīng)用程序的交互設(shè)計研究[J].電腦與電信，2011 （6）：55?57.

[5] 徐凱麗.淺談信息時代的產(chǎn)品設(shè)計發(fā)展趨勢：以蘋果設(shè)計為例[J].文藝生活：下旬刊，2012（5）：181?182.

[6] 唐佳希.移動互聯(lián)新媒體的閱讀特點以及編輯應(yīng)關(guān)注的幾個問題[J].中國編輯，2011（2）：42?45.

[7] 劉彥.基于iOS環(huán)境的應(yīng)用軟件交互設(shè)計策略[J].信息化研究，2011（5）：24?26.

[8] 弋榮靜，王振凱.基于iOS平臺的雜志閱讀軟件的設(shè)計與實現(xiàn)[J].軟件，2012（12）：31?37.

if（[object isMemberOfClass：[HICustomCollectCellclass]]） {

cell = object；//設(shè)置系統(tǒng)默認顏色為無色

cell.selectionStyle=UITableViewCellSelectionStyleNone；}}}

（5） 漫畫搜索

漫畫搜索界面主要用到UISearchBar控件，在nib文件中拖入一個UISearchBar控件實現(xiàn)搜索界面的繪制。實現(xiàn)代碼如下：

//防止點擊searchBar崩潰

[self.searchDisplayController.searchResultsTableViewregisterNib：nib forCellReuseIdentifier： identifier]；

8 結(jié) 語

本文主要對客戶端功能要求、整體功能、數(shù)據(jù)的測試進行了分析，采用了圖表加文字的方式對關(guān)鍵技術(shù)做了闡述，并對主要代碼做出了解釋與說明。在程序編寫方面，代碼簡潔明了，并且運行效率高。本設(shè)計中所建立的類結(jié)構(gòu)都是可以維護和修改的，并且可以向其中添加新的功能，類的可重用性和可擴展性得到了很好的體現(xiàn)。

參考文獻

[1] CLARK Josh. Tapworthy：設(shè)計偉大的iPhone應(yīng)用[M].南京：東南大學(xué)出版社，2011.

[2] 谷嬋娟，錢曉飛，莊重.手機閱讀的生態(tài)化發(fā)展策略探析[J].圖書館理論與實踐，2011（3）：45?49.

[3] 張龍譯.iPhone SDK編程入門經(jīng)典：使用Objective?C[M].北京：清華大學(xué)出版社，2011.

[4] 潘兆業(yè).手機應(yīng)用程序的交互設(shè)計研究[J].電腦與電信，2011 （6）：55?57.

[5] 徐凱麗.淺談信息時代的產(chǎn)品設(shè)計發(fā)展趨勢：以蘋果設(shè)計為例[J].文藝生活：下旬刊，2012（5）：181?182.

[6] 唐佳希.移動互聯(lián)新媒體的閱讀特點以及編輯應(yīng)關(guān)注的幾個問題[J].中國編輯，2011（2）：42?45.

[7] 劉彥.基于iOS環(huán)境的應(yīng)用軟件交互設(shè)計策略[J].信息化研究，2011（5）：24?26.

[8] 弋榮靜，王振凱.基于iOS平臺的雜志閱讀軟件的設(shè)計與實現(xiàn)[J].軟件，2012（12）：31?37.