基于IOS开发的装修家居APP的设计与实现.doc

《基于IOS开发的装修家居APP的设计与实现.doc》由会员分享，可在线阅读，更多相关《基于IOS开发的装修家居APP的设计与实现.doc（28页珍藏版）》请在三一办公上搜索。

1、河南科技学院2015届本科毕业设计基于IOS开发的装修家居APP的设计与实现学生姓名： 所在系别： 信 息 工 程 所学专业： 信 息 工 程 导师姓名： 完成时间： 2015 - 5 10 基于IOS开发的装修家居APP的设计与实现摘要 随着科技的发展，移动智能终端人们的日常生活中扮演着越来越重要的角色。基于iOS系统的iPhone手机因其独特的设计和极佳的体验深受用户欢迎。作为当前最流行的操作平台，自然也存在着大量的应用服务需求。本课题是为一家装修公司设计的一款帮助人们可以随心所欲选择家居装修样式的移动应用。该APP以Object-C语言编写，以Xcode为开发工具实现的。主要有五大界面：

2、首页，分类图片，灵感，关注及设置界面。首页展示了设计师设计的当今流行的一些装修样板；分类界面以空间、风格、局部三种分类方式向用户详细介绍各种各样的装修方法；灵感界面就是用户记录自己的装修方法，以备以后装修时使用的界面；关注界面则是自己关注的设计师的最新动态；设置界面可以清空缓存，意见反馈，及APP介绍。精致优秀的设计风格，有多样化的选择，使用户可以更加赏心悦目地体验本软件的服务。关键词：Objective_c、HTTP、MySQL、家居DESIGN AND IMPLEMENTATION OFINFORMATION MANAGEMENT SYSTEMS GRADUATESAbstract Wit

3、h the development of science and technology, mobile intelligent terminal plays an increasingly important role in daily life.IPhone mobile phone based on the iOS system because of its unique design and excellent experience by users.As the most popular operating platform, there is also a lot of natura

4、l application service needs.This topic is for a decoration company design of a help people can choose home decoration style mobile application.The APP is written in Object-C language, and implemented by Xcode as the development tool.There are five major interfaces: home, classification pictures, ins

5、piration, attention and set the interface.Home page shows the designer of todays popular some decoration model; interface classification to space, style, local three classification to users with the various decoration method; interface inspired is users to record their own decoration method, to prep

6、aration after the renovation of the use of interface; interface is designers concern themselves with the latest developments; setting interface can empty the cache, feedback, and app.Exquisite and excellent design style, a variety of choices, users can experience more be good to hear or see the serv

7、ice of this software. Keywords: Objective_c, HTTP, MySQL, Household目录1. 绪论12. iOS系统、环境以及所用技术介绍22.1 iOS系统简介22.3 开发环境32.4应用程序框架32.5 设计模式42.6第三方库53. 功能模块的设计63.1首页界面的设计63.2分类界面73.3灵感界面73.4关注界面83.5设置界面84. 功能模块的具体实现94.1各个界面之间的切换94.2首页界面的具体实现逻辑及代码104.3 分类界面134.4 灵感界面154.5 关注界面184.6 设置界面205. 系统测试215.1 测试目的2

8、15.2 测试方法21小结23参考文献23致谢241. 绪论随着IOS的在当今社会流行，人们愈发体验到了其所带来的科技魅力，给我们的生活带来了越来越多的帮助，让我们的生活更加的简单。本课题研究的是设计一款APP，人们通过这个手机APP就能找到自己理想的家居装修方法，让自己的居住环境更加的舒适。如今的移动应用开发产业让人眼花缭乱，主要的移动平台有：IOS、Android、Nokia Symbian、blackberry、Java ME、windows phone、mobile web。Android以其开放性，多任务，大功能。画面流畅，硬件设备优良多样等各种优点，占只能机一大部分，然而它也存在着

9、明显的不足，如：兼容性差，各种机型的配置不一样，以至于开发的时候出现各种版本。有些产品华而不实，用户体验差。Symbian主要基于C语言的应用开发，支持多线程运行模式，但是开发代码量过大给开发人员造成很大的不便。就目前而言，三大平台（Android、Symbian、blackberry）的市场占有率也在逐渐下降，IOS呈现平稳上升趋势。(1)APPstore的支付模式成熟。不仅仅是这一模式的创新，更重要的人们用苹果手机只能从苹果商店下载应用，经过长时间的运营，APPstore已经形成完备的支付模式，被大部分用户接受。 (2)IOS是用object-C这门语言开发。从全球的编程语言排行榜来看，虽

10、然object-C只有苹果一家公司使用，但是已经排名已经非常靠前了，可见IOS开发的普及性和欢迎程度，另外，基于C语言，运行效率更高计算机网络通信技术和Internet在最近几年来飞速发展，基于因特网的手机移动应用逐渐开始成为一种全新的功能需求，并且越来越收到人们的关注。由于移动应用具有简单性，随时随地等诸多优点，人们通过一部手机就可以操控一切，它有着传统计算机无法比拟的优点。而人们也在越来越追求更高的物质生活，因此，开发一个关于装修家居的移动应用就有必要了，你只需要通过一部手机，就可以看见多种多样的装修方式，多样化的选择，让你找到自己心怡的装修方法。并且你还可以将方法分享给你的朋友，让更多的

11、人感受到移动应用，这个APP给人们带来的简便。基于IOS平台的装修软件已经有很多，经过分析，用户第一眼往往是一个软件的外观，一个好看的界面才能让用户以一种爱美之心去尝试，才能进一步了解一个软件的好坏，所以吸引眼球的界面是争取用户的第一步。因此，界面设计工作对应用程序来说非常重要，在界面上吸引了用户，才能进一步让用户体验应用程序中的功能，使用这个软件。因此，开发一种界面美观，用起来舒适，并且能给人们带来巨大作用的软件非常有必要。 房屋装修设计是个系统工程，并非想像的那么简单。一般来说，每个人想法都有所不同，对家居的要求不尽相同。但真正能将自己的想法表达到位的，却少之又少。一个专业的房屋设计师，首

12、先会充分了解装修业主的个性化需求，结合自己的专业知识、生活阅历，将装修业主理想中的家居通过设计图纸表现出来。其次，专业的设计师会利用自己对建材材料的了解，在设计时进行合理搭配，施工时推荐最佳材质。说简单些，就是利用设计元素，突出家居中的某几个亮点即可达到装修最佳效果，而不必堆砌过多的装修材料，可以为装修业主节省许多不必要的花费。第三，专业的设计师可以利用自己所累积的社会资源，为装修业主拿到单个消费者所拿不到材料价格，从而为业主节省许多金钱。 随着苹果产品的不断推陈出新，相应的各类应用开发也越来越火爆。目前，IOS在智能手机应用下载量中占比33%，IOS平板电脑应用下载量占比75%，由此可见，I

13、OS相关应用软件有着庞大的消费众群。而产品的升级换代，新产品的开发，都离不开手机软件开发团队强有力的支持。现在各大企业都在积极扩充研发队伍，像是游戏软件开发的岗位缺口就非常大。其8-10万的年薪，让很多年轻人加入到学习IOS开发的队伍中。 据对在读学习人群统计，目前大部分学员来自应届的大学生。众所周知，现在大学生就业难，薪水低。而学习IOS开发，不但可以掌握最新的技术，还可以找到薪水福利不错的工作，未来也有很大的发挥空间。另一部分人群，则是IOS相关从业人员，随着技术的日新月异，希望能通过短时间集中培训，使技能得到提升，更好的应用到实际工作中。而目前关于装修的App少之又少，而人们又迫切需要这

14、样一款软件，所以这样的软件具有很大的前景。2. iOS系统、环境以及所用技术介绍 iOS开发是以xcode为开发工具，OC为编程语言开发的，是开发苹果移动设备应用的简称。2.1 iOS系统简介 iOS是iPad、iPhone、iPodtouch和AppleTV的操作系统。是由苹果公司开发的移动操作系统。苹果公司最早于2007年1月9日的Macworld大会上公布这个系统，最初是设计给iPhone使用的，后来陆续套用到iPodtouch、iPad以及AppleTV等产品上。iOS与苹果的MacOSX操作系统一样，它也是以Darwin为基础的，因此属于类Unix的商业操作系统。原本这个系统名为iP

15、honeOS，因为iPad，iPhone，iPodtouch都使用iPhoneOS，所以2010WWDC大会上宣布改名为iOS。iOS具有简单的界面、令人惊叹的功能，以及超强的稳定性，已经成为iPhone、iPad和iPodtouch的强大基础。尽管其他竞争对手一直努力地追赶，iOS内置的众多技术和功能让设备始终保持着遥遥领先的地位。 Objective-C，通常写作ObjC和较少用的Objective C或Obj-C，是扩充C的面向对象编程语言。Objective-C是非常实际的语言。它是一个用C写成、很小的运行库，只会令应用程序的尺寸增加很小，和大部分OO系统使用极大的VM执行时间会取代了

16、整个系统的运作相反。Objective-C写成的程序通常不会比其原始码大很多。而其函式库(通常没附在软件发行本)亦和Smalltalk系统要使用极大的内存来开启一个窗口的情况相反。因此，Objective-C它完全兼容标准C语言（C+对C语言的兼容仅在于大部分语法上，而在ABI（Applicat ion Binary Interface）上，还需要使用extern C这种显式声明来与C函数进行兼容），而在此基础上增加了面向对象编程语言特性以及Smalltalk消息机制。和C+不同，Objective-C不支持运算子重载(它不支持ad-hoc多型)。亦与C+不同，但和Java相同，Objecti

17、ve-C只容许对象继承一个类别(不设多重继承)。Categories和protocols不但可以提供很多多重继承的好处，而且没有很多缺点，例如额外执行时间过重和二进制不兼容。 2.3 开发环境（1）.Xcode开发工具我们要掌握一门编程语言的话，都必须使用相应的开发工具进行学习和调试，比如用eclipse学习Java。至于Objective-C，我们可以使用苹果公司提供的开发工具-Xcode（2） Mac OS X Xcode没有Windows版本的，只有Mac版本的，也就是只能跑在Mac OS X系统上。 因此，你要先拥有Mac OS X系统才能使用Xcode进行Objective-C的学习

18、和iOS开发 。 Mac OS X是苹果公司为Mac系列产品开发的专属操作系统，目前搭载这款操作系统的设备有：MacBook、iMac、Mac mini。大概有3种途径可以获取Mac OS X系统：虚拟机、黑苹果、购买苹果设备。（3） 调试设备Xcode自带了iOS模拟器功能，因此我们可以将开发好的应用程序，运行到模拟器上进行测试，不一定要买iPhoneiPad进行调试。当然，真机和模拟器肯定是区别的，因此在发布应用程序之前肯定要进行真机测试。（4） 开发者证书 如果你是想把开发好的iOS程序发布到App Store上去卖，或者把程序运行到真机(iPhoneiPad)上，那么就必须有iOS个人

19、开发者证书。这个需要向苹果买，一年99$。如果纯粹是学习，不用买这个证书，一切开发都是免费的。2.4应用程序框架 应用程序主要包括以下几大框架：Foundation、UIKit、Core Data 、 Core Graphics、 Core Animation等几大框架。在你开发程序时，主要使用框架就是Foundation和UIKit，因为它们包你需要的大部分东西，你的应用程序，UIKit和其它的框架都是建立在Foundation框架上 Foundation框架是用Object-C对Core Foundation框架里许多特性的封装。使用Foundation可以: 创建和管理集合，比如数组和字

20、典 访问存储在应用程序里的图片和其它资源 创建和管理字符串 提交和接收通知 创建日期和时间对象 自动发现IP网络上的设备 操作URL流 所有的iOS应用程序都基于UIKit，你不能是应用程序脱离这个框架。UIKit提供了在屏幕上绘制的机制，捕获事件，和创建通用用户界面元素。UIKit也通过管理显示在屏幕上的组件来组织复杂的项目。 使用UIKit可以： 构建和管理你的用户界面 捕获触摸和基于移动的事件 呈现文字和web内容 优化你的多任务程序 创建定制的用户界面元素Core Data , Core Graphics, Core Animation,和OpenGLES框架都是高级的技术。所以这些框

21、架对于你开发应用程序也是很重要的，它们都需要时间去学习和掌握。 Core Data框架管着理应用程序数据模型，提供的内建SQLlite技术可以高效的管理数据。Core Graphics框架帮助你创建图形Core Animation允许你创建高级的动画和虚拟效果OpenGL ES 框架提供2D和3D绘图工具2.5 设计模式（一）代理模式应用场景：当一个类的某些功能需要由别的类来实现，但是又不确定具体会是哪个类实现。优势：解耦合敏捷原则：开放-封闭原则实例：tableview的 数据源delegate，通过和protocol的配合，完成委托诉求。列表row个数delegate自定义的delegat

22、e（二）观察者模式应用场景：一般为model层对，controller和view进行的通知方式，不关心谁去接收，只负责发布信息。优势：解耦合敏捷原则：接口隔离原则，开放-封闭原则实例：Notification通知中心，注册通知中心，任何位置可以发送消息，注册观察者的对象可以接收。kvo，键值对改变通知的观察者，平时基本没用过。（三）MVC模式应用场景：是一中非常古老的设计模式，通过数据模型，控制器逻辑，视图展示将应用程序进行逻辑划分。优势：使系统，层次清晰，职责分明，易于维护敏捷原则：对扩展开放-对修改封闭实例：model-即数据模型，view-视图展示，controller进行UI展现和数据

23、交互的逻辑控制。（四）单例模式应用场景：确保程序运行期某个类，只有一份实例，用于进行资源共享控制。优势：使用简单，延时求值，易于跨模块敏捷原则：单一职责原则实例：UIApplication sharedApplication。注意事项：确保使用者只能通过 getInstance方法才能获得，单例类的唯一实例。java，C+中使其没有公有构造函数，私有化并覆盖其构造函数。object c中，重写allocWithZone方法，保证即使用户用 alloc方法直接创建单例类的实例，返回的也只是此单例类的唯一静态变量。（五）策略模式应用场景：定义算法族，封装起来，使他们之间可以相互替换。优势：使算法的

24、变化独立于使用算法的用户敏捷原则：接口隔离原则；多用组合，少用继承；针对接口编程，而非实现。实例：排序算法，NSArray的sortedArrayUsingSelector；经典的鸭子会叫，会飞案例。注意事项：1，剥离类中易于变化的行为，通过组合的方式嵌入抽象基类2，变化的行为抽象基类为，所有可变变化的父类3，用户类的最终实例，通过注入行为实例的方式，设定易变行为防止了继承行为方式，导致无关行为污染子类。完成了策略封装和可替换性。（六）工厂模式应用场景：工厂方式创建类的实例，多与proxy模式配合，创建可替换代理类。优势：易于替换，面向抽象编程，application只与抽象工厂和易变类的共性

25、抽象类发生调用关系。敏捷原则：DIP依赖倒置原则实例：项目部署环境中依赖多个不同类型的数据库时，需要使用工厂配合proxy完成易用性替换注意事项：项目初期，软件结构和需求都没有稳定下来时，不建议使用此模式，因为其劣势也很明显，增 加了代码的复杂度，增加了调用层次，增加了内存负担。所以要注意防止模式的滥用。2.6第三方库图片异步加载: SDWebImage网络通信库 AFNetworking MKNetworkKit ASIHTTPRequest网络状态检查:ReachabilityJSON: SBJSON JSONKitXML: TouchXMLSQLite: FMDB下拉刷新: MJRefr

26、esh SVPullToRefresh提示框:MBProgressHUD3. 功能模块的设计 这个App由首页，分类图片，灵感，关注，设置，及个人信息六个界面组成，每个界面展示的都有明确的信息，让我们有多样化的选择。3.1首页界面的设计 首页由两部分组成，上方由是一个滚动视图，能够无限滚动，并且能够用手滑动，下方是一个列表，也能够滑动。首页展示的是装修后的家居图片，并且每张图片都有相应的文字作简单的介绍。每张图片都是能点击的，点进去是详情，详细介绍了如何装修，及这样装修的好处，图片也能都标记为喜欢，并收集。设计流程见图3-1：滚动视图编辑操作已登录图片详情首页列表视图登录界面未登录图3-1 首

27、页设计流程3.2分类界面 这个界面通过分类来快速找到你想要的，房间哪个部分的装修图片。分为三大类：空间、局部、风格。每个大类里面又分为许多小类，客厅、衣帽间，餐厅、厨房、卫生间等等。点击不同的分类，我们能够进入到不同的装修图片展示界面。图片展示界面是一个列表，图片能够放大查看，并且也能够进行标记。设计流程见图3-2：分类空间风格局部客厅、餐厅、厨房等现代、中式、日式等吊顶、阳台、楼梯等图片详情编辑操作图3-2 分类界面设计流程3.3灵感界面在这个界面上我们可以创建格子，能给格子命名，并给格子配上自己喜欢的图片，能够进行重命名，删除等一些编辑操作。创建自己喜欢的装修方法，即灵感。在这个界面我们也

28、能看到自己标注过的喜欢的图片，也能显示有多少人喜欢了这种装修方法，图片点进去是装修方法的详情，并且能够编辑，进行一些删除等操作。设计流程见图3-3：灵感灵感喜欢创建格子命名更换图片删除图片取消喜欢查看详情图3-3 灵感界面设计流程3.4关注界面 每一种装修方法作品都有相应的作者，如果我们关注了这个作者，那么我们在这个界面就能看到这个作者所有的作品，作品点进去也是详情界面，每张图片也能够标记为喜欢。并且，在这个界面，也能够看见别人使用这个APP的动态，有哪些人喜欢了哪些作品，看别人的装修习惯是什么样的。设计流程见图3-4：关注热门关注列表试图列表试图图片详情编辑操作图3-4 关注界面设计流程3.

29、5设置界面 这个界面显示自己的头像，昵称。在这个界面我们可以清空缓存，关于这个APP的介绍，以及意见反馈，退出登录。设计流程见图3-5：设置头像昵称清空缓存给我评分意见反馈关于退出登录图3-5 设置界面设计流程4. 功能模块的具体实现 见每个界面的具体实现根据设计图来做，包括各个界面之间的切换和每个界面的具体介绍及代码编写。4.1各个界面之间的切换各个界面之间通过侧边栏来进行切换，点击相应的按钮可以进入到相应的界面，上图即为效果图，侧边栏用到了ZYMenuController这个第三方框架，将ZYMenuController的对象作为window的根视图，代码实现为：ZYFirstViewCo

30、ntroller * firstViewController = ZYFirstViewController alloc initautorelease; UINavigationController * nav = UINavigationController alloc initWithRootViewController:firstViewController autorelease; ZYMenuController * menu = ZYMenuController alloc initWithRootViewController:nav leftViewController:lef

31、tViewController rightViewController:nil; self.window.rootViewController = menu;self.window makeKeyAndVisible;视图使用tableView写的，能够滑动，增强了用户的体验 _tableView = UITableView alloc initWithFrame:CGRectMake(0, 120, self.view.frame.size.width, self.view.frame.size.height - 150); _tableView.delegate = self; _tabl

32、eView.dataSource = self; _tableView.backgroundColor = UIColor clearColor; _tableView.separatorStyle = UITableViewCellSeparatorStyleNone; self.view addSubview:_tableView; _tableView release;实际测试效果图见图4-1： 图4-1 界面切换效果4.2首页界面的具体实现逻辑及代码（1）首页界面首页上方是一个能够无限循环滚动的滚动视图，用的scrollView实现，将button加到scrollView上面，可点击，

33、并也能够用手滑动。下方用tableView实现，是一个列表视图。将上方的scrollView和下方的tableView放到一个大的scrollView上面，实现整个界面都能够滑动。tableView是自定义的，能够满足设计的需求。代码实现为：/创建大scrollView _bigScrollView = UIScrollView allocinitWithFrame:CGRectMake(0,0, 320, self.view.frame.size.height); _bigScrollView.delegate = self; self.view addSubview:_bigScrollV

34、iew; /屏幕上方的小scrollView HttpEngine getAdvertisingRequestWithCompletionBlock:(NSMutableArray *array) self.scrollDataArray = array; _scrollView = UIScrollView alloc initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 160); / _scrollView.backgroundColor = UIColor redColor; _scrollView.delegate =

35、self; _scrollView.pagingEnabled = YES; _scrollView.contentSize = CGSizeMake(self.view.frame.size.width*self.scrollDataArray.count, 170); _bigScrollView addSubview:_scrollView; 实际测试效果图见图4-2-1：图4-2-1 首页效果（2）详情界面 详情界面主要使用自定义tableView实现，第一区显示的是大标题和作者的头像、昵称及时间。第二区显示的 简介，是对这个装修方法的简单介绍，并且这个高度要根据文字的多少自适应高度。

36、第三区显示的是图片，即装修后的效果图。代码实现为：-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath UITableViewCell * cell = tableView dequeueReusableCellWithIdentifier:Cell; if(cell = nil) cell = UITableViewCell alloc initWithStyle:UITableViewCellStyleSubtitle reuseIdenti

37、fier:Cell; UIImageView * imageView = UIImageView alloc init; imageView.tag = 1; cell addSubview:imageView; imageView release; /根据文字多少算高度- (float)stringHeightWithString:(NSString *)string / 计算文字宽高 float height = string boundingRectWithSize:CGSizeMake(270, MAXFLOAT) options:NSStringDrawingUsesLineFrag

38、mentOrigin attributes:NSFontAttributeName:UIFont systemFontOfSize:14 context:nil.size.height; / 向上取整 return ceilf(height);实际测试效果图见图4-2-2： 图4-2-2 详情界面效果4.3 分类界面从这个界面里能通过具体的分类来找到自己需要的装修设计图，并且能将这些装修图片能够标记为喜欢。（1） 分类首页这个页面总共分为三个大区，即空间、局部、风格。自己想看什么样的效果可从分类界面里面详细的选择，每一种都有不同的风格，让你有多样化的选择。通过自定义tableView实现。隐藏

39、了系统自带的分割线，自己实现分割线这个功能。图片和文字放到一个数组里面，作为tableView的数据源数组-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath UITableViewCell * cell = tableView dequeueReusableCellWithIdentifier:Cell; if(cell = nil) cell = UITableViewCell alloc initWithStyle:UITableViewC

40、ellStyleSubtitle reuseIdentifier:Cell autorelease; /自定义imageView与label，否则图片太大 UIImageView * imageView = UIImageView alloc initWithFrame:CGRectMake(10, 8, 30, 30); imageView.tag = 1; cell addSubview:imageView; imageView release; UILabel * label = UILabel alloc initWithFrame:CGRectMake(50, 5, 100, 30)

41、; label.tag = 2; cell addSubview:label; label release; UIImageView * imageView = (UIImageView *)cell viewWithTag:1; UILabel * label = (UILabel *)cell viewWithTag:2; label.text = self.textArrayindexPath.sectionindexPath.row; imageView.image = UIImage imageNamed:self.imageArrayindexPath.sectionindexPa

42、th.row; cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator; return cell;实际测试效果图见图4-3-1： 图4-3-1 分类首页效果（2）分类图片界面通过两竖排的图片更为直观的来展示各种各样的装修样式。从服务器获得数据后，将数据分为两个数组，每一个数组作为每一竖排的数据源数组，自定义tableView实现。HttpEngine getClassImageRequsetWithCategoryId:self.cate TagId:self.tag CompletionBlock:(NSMutable

43、Array *array) self.dataArray = array; / NSLog(%,self.dataArray); /将self.dataArray分到两个数组中，分别为cell上两个button的图片数据网址 for(int i=0;iself.dataArray.count;i+) if(i%2=0) self.button1DataArray addObject:self.dataArrayi; else self.button2DataArray addObject:self.dataArrayi; _tableView =UITableView alloc initWithFrame:CGRectMake(0, 64, self.view.frame.size.width,