基于iOS平台的漫画阅读手机客户端的设计与实现

王艳君

摘 要： 该设计是在Mac系统上，通过Xcode5开发工具，使用Objective?C语言进行漫画阅读客户端的开发。首先，根据需求分析做出符合用户使用习惯的交互界面，根据服务器接口请求并解析出所有漫画信息，将获取到的漫画信息通过自定义表视图展示给用户；然后，给每一个漫画添加点击事件，当用户点击某一漫画时，可以跳转到漫画详情页，漫画详情页涵盖了漫画的所有信息；在详情页中添加评论、阅读、收藏、评星等UIButton控件，并添加点击事件，当用户点击某一按钮时，可以跳转到对应视图；最后，待所有功能都完成后，进行数据测试、Bug修复以及界面美化。

关键字： 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 引 言

手机阅读作为一种媒体形式，近年来的发展呈现良好态势。从2003年初开始，手机已具备支持漫画阅读的条件，但由于当时技术水平的限制，手机缺乏足够大的可视彩屏以供用户进行良好的漫画阅读体验，加之网速过慢、内存不足、下载费用过高等，手机用户逐渐对此失去了兴趣。近年来，随着智能手机的发展，特别是各大运营商对3G/4G业务的大力推广，使用手机进行漫画阅读又受到了广大用户的关注，并且正日益成为人们娱乐消遣的新方式。可以说，手机漫画阅读的出现代表了手机技术的发展以及移动互联网时代的到来。

本文运用iOS客户端的开发技术，通过对服务器数据的请求与解析，实现漫画推荐、分类、最新入库漫画等列表的展示，并且实现对漫画的搜索、评论、阅读、收藏等功能。

1 客户端功能需求分析及定义

对于功能方面，该客户端软件在系统功能方面主要包括以下几点：

（1） 错误信息提示，比如进入客户端时或者在阅读过程中出现断网，则在下次加载数据时会出现弹出框提示网络连接异常，保证软件在运行过程中不会出现异常。

（2） 服务器数据请求与解析，即服务器和客户端之间的通信必须通畅。

（3） 内存的优化管理是软件开发过程中较为重要的一个环节，内存泄露会导致数据丢失，影响用户体验。

该客户端具有的基本功能如下：漫画列表展示，漫画搜索，漫画收藏，漫画阅读，书签功能，用户评论。

（1） 漫画列表展示。漫画列表展示主要包括漫画推荐、漫画分类、最新入库、漫画分集。视图窗口主体内容构成：漫画推荐页显示漫画图片、漫画名、作者名、点击量、评分、分类、漫画内容概述，详情页展示漫画分集列表以及漫画基本信息，最新入库视图页展示最新入库漫画以及漫画基本信息。

（2） 漫画搜索。漫画搜索页面的屏幕上方显示搜索框，可以在搜索框中输入汉字或拼音，系统自动将输入内容转换为拼音。当用户输入漫画名或作者名时，漫画列表展示搜索到的漫画信息；当用户输入的内容与漫画信息不匹配时则漫画列表不显示。

（3） 漫画收藏。在漫画详情页中创建漫画收藏按钮，用户可以收藏喜欢自己的漫画，点击收藏后漫画信息将添加入漫画收藏页面，并且漫画收藏按钮显示已收藏状态，在漫画收藏页面展示收藏的漫画信息。

（4） 漫画阅读。在漫画详情页中创建分集按钮以及开始阅读按钮，用户可以根据需求选择需要阅读的章节，点击开始阅读后，再通过服务器接口获取漫画内容，在漫画阅读页展示漫画内容。阅读到中途退出后，开始阅读按钮显示上次阅读的章节。

（5） 书签功能。在漫画阅读页添加书签按钮，当读到中途用户想停止阅读退出视图窗口时，用户可以点击书签按钮进行当前位置的存档，在用户下次点击阅读时，可以跳转到上次存档的位置继续阅读。

（6） 用户评论。在漫画评论页添加评论按钮，点击评论按钮可以跳转到用户评论页面，用户可以对漫画进行评论和打分，将评论和打分后的信息上传至服务器，进入评论页面时将显示该用户刚评论的信息。

2 系统模块设计

程序的整体功能模块包含从服务器请求和解析数据、功能选择、提交数据到服务器等。其中，使用同步请求方式进行数据请求，XML解析使用的是GDataXML解析，字符串解析使用的是SBJson解析。具体的模块设计如图1所示。

3 界面的绘制

界面绘制较为简单，只需根据当前需求分析对每个页面进行绘制。首先在工程中创建一个视图控制器，并为其生成nib文件，然后将绘制界面所用到的控件拖入合适位置，形成插座控件，等待网络请求完毕时加载数据在这些控件上。若没有生成nib文件，则可以使用代码手动创建实现控件的生成。绘制流程图如图2所示。

4 控件的选择

UILabel用来显示文字，可以设置字体、字号、颜色等。

UIImageView用来显示图片，可以设置图片大小、位置等。

UITextView用来显示多行文本内容，该控件可以对文本内容进行编辑，若文本内容超出文本框范围则可以上下滚动浏览。

UIButton在iPhone上主要就是按钮，可以响应用户操作事件，它可以设置背景图片、文字等相关属性。

UITableView是一个一维的表视图，是上下滑动的条目清单，可进行分区，每个分区展示不同类型的数据，每个表格里的指定行（cell）中的数据由他所在分区（section）和所在分区的行（row）来决定。

UIScrollView是一个滚动视图控件，当视图中无法显示多于一个屏幕尺寸的内容时可以使用该控件， contentsize属性可以设置滚轴内容的宽高。

5 数据的请求

数据请求总共有四种，分别是同步请求、异步请求、Get请求、Post请求。其中同步请求一旦发生，应用程序会停止与用户进行交互，等待数据返回完成，才可以进行之后的操作。异步请求解决了同步请求中线程阻塞的问题，当发生异步请求之后，程序会建立新的线程进行操作，对于用户交互丝毫不会受到影响，用户依然可以对所有界面元素进行操作。Get请求虽然操作简单，但安全性不高，它的请求参数都显示在访问路径上，外界可以直观的看到。Post请求操作相对复杂，不过安全性较高，它是将所有的请求参数放在一个body里面，从而使外界不容易捕获到这些信息。

同步Get请求虽然阻塞线程并且安全性不高但操作简单，可以在列表展示模块使用同步Get请求，可以大大减少工作量，缩短程序开发周期。在数据下载模块则需要使用异步Get请求，可以实现多线程下载，不会阻塞线程，在下载的同时可以进行用户交互。

（1） 同步Get请求的建立需要以下三个步骤：

第一步，创建URL，代码如下：

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

第二步，通过URL创建网络请求，代码如下：

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

第三步，连接服务器，代码如下：

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

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

（2） 异步Get请求的建立需要以下三个步骤：

第一步，创建URL，代码如下：

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

第二步，通过URL创建网络请求，代码如下：

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

第三步，连接服务器，代码如下：

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

异步请求需要实现的代理方法如下：

① 接收到服务器回应的时候调用

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

② 服务器传输数据时调用，此方法执行若干次。

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

③ 数据传完之后调用此方法

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

④ 网络请求失败时会进入此方法

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

6 网络的判断

使用网络判断之前需导入第三方类库Reachability.h和Reachability.m，并引入SystemConfiguration框架。

在Reachability类中有三种枚举型变量用来判断网络状态：

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

switch（[reachability currentReachabilityStatus]） {

case NotReachable：

//判断是否有网络

isExistenceNetwork = YES；

break；

case ReachableViaWWAN

//判断是否是2G/3G网络

isExistenceNetwork = NO；

break；

case ReachableViaWiFi：

//判断是否是WiFi连接

isExistenceNetwork = NO；

break；}

7 客户端界面的实现

漫画阅读客户端界面是应用程序与用户互动交流的平台。iOS视图控制器提供的nib文件可以方便地对界面进行绘制，其UI控件都可以直接拖到nib文件中进行创建，开发人员可以直观地看到界面绘制的效果。

（1） 漫画推荐首页

漫画推荐首页使用自定义表视图（UITableView）进行列表展示，自定义Cell中使用UIImageView控件显示漫画图片，使用UILabel控件显示漫画基本信息。绘制效果如图3所示。

（2） 漫画列表展示

漫画列表展示使用自定义表视图（UITableView）进行展示，自定义Cell中使用UIImageView控件显示漫画图片，使用UILabel控件显示漫画基本信息。实现代码如下：

//判断点击的按钮

if （sender == self.segmentButton1） {

//判断漫画列表视图是否已创建，防止多次创建

if （IOS.comicsListShowViewController == nil） {

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

}

//根据所传的sub值确定该表视图显示的内容

IOS.comicsListShowViewController.sub = @"4"；

//设置导航栏标题

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

//利用堆栈的方式将该视图添加到导航器

[self.navigationControllerpushViewController：IOS.comicsListShowViewController

（3） 漫画详情页

漫画详情页中，为解决内容过多无法显示的问题，故采用滚动视图控件实现界面上下滚动效果，详情页中使用UIImageView显示漫画图片，使用UILabel显示漫画基本信息，使用UITextView显示漫画内容概述，使用自定义按钮实现分集列表展示。具体绘制效果如图4所示。

（4） 漫画收藏页

漫画收藏页的绘制使用了多个UIView，在一个视图的中间添加了另一视图，并在该视图上添加了一个UITableView，使用自定义表视图显示已收藏的漫画。实现代码如下：

//使用标识符，惟一标识每一个Cell

staticNSString *identifier=@"identifier"；

//寻找可重用的Cell

HICustomCollectCell*cell=[tableViewdequeueReusableCellWithIdentifier：identifier]；

//判断Cell是否为空，若为空则创建

if（cell == nil） {

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

for （id object in objects） {//判断object对象是不是这个类的一个成员

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

cell = object；//设置系统默认颜色为无色

cell.selectionStyle=UITableViewCellSelectionStyleNone；}}}

（5） 漫画搜索

漫画搜索界面主要用到UISearchBar控件，在nib文件中拖入一个UISearchBar控件实现搜索界面的绘制。实现代码如下：

//防止点击searchBar崩溃

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

8 结 语

本文主要对客户端功能要求、整体功能、数据的测试进行了分析，采用了图表加文字的方式对关键技术做了阐述，并对主要代码做出了解释与说明。在程序编写方面，代码简洁明了，并且运行效率高。本设计中所建立的类结构都是可以维护和修改的，并且可以向其中添加新的功能，类的可重用性和可扩展性得到了很好的体现。

参考文献

[1] CLARK Josh. Tapworthy：设计伟大的iPhone应用[M].南京：东南大学出版社，2011.

[2] 谷婵娟，钱晓飞，庄重.手机阅读的生态化发展策略探析[J].图书馆理论与实践，2011（3）：45?49.

[3] 张龙译.iPhone SDK编程入门经典：使用Objective?C[M].北京：清华大学出版社，2011.

[4] 潘兆业.手机应用程序的交互设计研究[J].电脑与电信，2011 （6）：55?57.

[5] 徐凯丽.浅谈信息时代的产品设计发展趋势：以苹果设计为例[J].文艺生活：下旬刊，2012（5）：181?182.

[6] 唐佳希.移动互联新媒体的阅读特点以及编辑应关注的几个问题[J].中国编辑，2011（2）：42?45.

[7] 刘彦.基于iOS环境的应用软件交互设计策略[J].信息化研究，2011（5）：24?26.

[8] 弋荣静，王振凯.基于iOS平台的杂志阅读软件的设计与实现[J].软件，2012（12）：31?37.

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

cell = object；//设置系统默认颜色为无色

cell.selectionStyle=UITableViewCellSelectionStyleNone；}}}

（5） 漫画搜索

漫画搜索界面主要用到UISearchBar控件，在nib文件中拖入一个UISearchBar控件实现搜索界面的绘制。实现代码如下：

//防止点击searchBar崩溃

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

8 结 语

本文主要对客户端功能要求、整体功能、数据的测试进行了分析，采用了图表加文字的方式对关键技术做了阐述，并对主要代码做出了解释与说明。在程序编写方面，代码简洁明了，并且运行效率高。本设计中所建立的类结构都是可以维护和修改的，并且可以向其中添加新的功能，类的可重用性和可扩展性得到了很好的体现。

参考文献

[1] CLARK Josh. Tapworthy：设计伟大的iPhone应用[M].南京：东南大学出版社，2011.

[2] 谷婵娟，钱晓飞，庄重.手机阅读的生态化发展策略探析[J].图书馆理论与实践，2011（3）：45?49.

[3] 张龙译.iPhone SDK编程入门经典：使用Objective?C[M].北京：清华大学出版社，2011.

[4] 潘兆业.手机应用程序的交互设计研究[J].电脑与电信，2011 （6）：55?57.

[5] 徐凯丽.浅谈信息时代的产品设计发展趋势：以苹果设计为例[J].文艺生活：下旬刊，2012（5）：181?182.

[6] 唐佳希.移动互联新媒体的阅读特点以及编辑应关注的几个问题[J].中国编辑，2011（2）：42?45.

[7] 刘彦.基于iOS环境的应用软件交互设计策略[J].信息化研究，2011（5）：24?26.

[8] 弋荣静，王振凯.基于iOS平台的杂志阅读软件的设计与实现[J].软件，2012（12）：31?37.

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

cell = object；//设置系统默认颜色为无色

cell.selectionStyle=UITableViewCellSelectionStyleNone；}}}

（5） 漫画搜索

漫画搜索界面主要用到UISearchBar控件，在nib文件中拖入一个UISearchBar控件实现搜索界面的绘制。实现代码如下：

//防止点击searchBar崩溃

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

8 结 语

本文主要对客户端功能要求、整体功能、数据的测试进行了分析，采用了图表加文字的方式对关键技术做了阐述，并对主要代码做出了解释与说明。在程序编写方面，代码简洁明了，并且运行效率高。本设计中所建立的类结构都是可以维护和修改的，并且可以向其中添加新的功能，类的可重用性和可扩展性得到了很好的体现。

参考文献

[1] CLARK Josh. Tapworthy：设计伟大的iPhone应用[M].南京：东南大学出版社，2011.

[2] 谷婵娟，钱晓飞，庄重.手机阅读的生态化发展策略探析[J].图书馆理论与实践，2011（3）：45?49.

[3] 张龙译.iPhone SDK编程入门经典：使用Objective?C[M].北京：清华大学出版社，2011.

[4] 潘兆业.手机应用程序的交互设计研究[J].电脑与电信，2011 （6）：55?57.

[5] 徐凯丽.浅谈信息时代的产品设计发展趋势：以苹果设计为例[J].文艺生活：下旬刊，2012（5）：181?182.

[6] 唐佳希.移动互联新媒体的阅读特点以及编辑应关注的几个问题[J].中国编辑，2011（2）：42?45.

[7] 刘彦.基于iOS环境的应用软件交互设计策略[J].信息化研究，2011（5）：24?26.

[8] 弋荣静，王振凯.基于iOS平台的杂志阅读软件的设计与实现[J].软件，2012（12）：31?37.