毕业设计（论文）-基于iOS的爱家装App的设计与实现.doc

毕 业 论 文（设 计） 2015 届 计算机科学与技术 专业班级题 目 基于iOS的爱家装App的设计与实现姓 名 学 号 指导教师职 称 助教、教授二一 五 年 五 月 十八 日摘 要本设计是基于Objective-C面向对象语言、Mac OS系统设计，在Xcode 6.2开发的，爱家装是一款家居装修、装饰的手机客户端App。根据后台提供的数据，使用iOS SDK、第三方类库实现网络请求、异步加载图片图像。爱家装手机客户端主要包括浏览、灵感、社区、设计师和我五个设计模块，采用轮播图、动画、瀑布流、图文混排、分页、抽屉等页面展示控件，向apple手机用户展示各式各样的精选家居装修风格。该App主要以图片和图文混排展示信息。本设计还使用了友盟社会化组件，用户可以分享到一些微博社交平台。该APP已在苹果官方商店上线。全套设计加扣3012250582关键词Objective-C；Xcode； 第三方类库； 友盟创新点实现cocoapods管理第三方类库，实现抽屉和动画等特效；实现友盟第三方登录和分享。AbstractThe design is based on Objective-C oriented object language, Mac OS system design, development tools is the Xcode 6.2，LoveHome is a home decoration, the decoration of the mobile client app. According to the background data provided by the use of iOS, SDK,the third party library to implement network requests, asynchronous load images.Love- Home mobile client including browsing, inspiration, community, designers and I five design module, the carousel graph, animation, waterfalls flow, graphic mix row, paging, drawers and other page display control, display all kinds of selection of home decoration style to the apple mobile phone users. The software is mainly through the graphics and text mixed display information. This design also uses the alliance social component, users can share some micro-blog social platform. The App has been online at Apples official store Store APP.Key wordsObjective-C; Xcode; Third partylibraryalliance; UmengInnovationCocoapods management third party library, realize the drawer and animation and other special effects; third party login and sharing of the friends of the league.目 录第1章 绪论- 1 -1.1 开发背景- 1 -1.2 应用的开发意义- 2 -第2章 应用的开发工具和相关介绍- 3 -2.1 应用的开发工具和运行环境- 3 -2.2 应用开发相关介绍- 3 -2.2.1 iOS开发介绍- 3 -2.2.2 iOS系统架构- 4 -2.2.3 OC语言简介- 5 -2.2.4 Xcode简介- 6 -2.2.5 App真机测试和应用上线- 6 -2.2.6 App Store简介- 7 -第3章 应用需求分析- 8 -第4章 总体设计- 10 -4.1 总体架构设计- 10 -4.2 原型设计- 11 -第5章 详细的设计与实现- 12 -5.1 技术开发准备- 12 -5.2 模块的UI实现- 13 -5.2.1 “浏览”模块- 13 -5.2.2 “灵感”模块- 15 -5.2.3 “社区”模块- 16 -5.2.4 “设计师”模块- 17 -5.2.5 “我”模块- 19 -5.3模块功能实现- 21 -5.3.1 登录- 21 -5.3.2 分享- 22 -5.3.3 收藏- 22 -5.3.4 缓存清理- 23 -第6章 应用测试- 25 -第7章 总结与体会- 27 -致谢- 28 -参考文献- 29 -附录- 30 -V第1章 绪论1.1 开发背景人们在新房到手后，就会装修，有些房主是找一些装修工人随便设计一下，有些房主是找专门的设计师进行设计，也有些房主是根据自己的经验和喜好去设计。姑且不去置评他们设计的效果如何，在这里和大家分享一下当前的家居装修的现状。房地产市场的火爆，相应的导致其附带的产业的发展，新房交付，新房建成，都需要进行装饰，由于装修想法和设计方案的不同，设计出来的装修效果也是不同的。目前室内装修乱象丛生，装修之后往往达不到预期的效果。目前国内装修装饰行业存在一些问题：1.盲目追求独特有些房主追求独特个性、时尚，在房间里按照自己意志、不合理的装饰各种主题墙、造型吊顶、夹墙等等。盲目追求独特和差异性，反而会使装修效果适得其反。 2.色彩不搭配在房间设计和家居装设上，使用过度的色调，这种过度，不仅仅指的是色彩的滥用，也指鲜明色彩的过度使用。比如大红大紫，这样会影响室内人的视觉效果、睡眠和情绪，在一定程度上造成了视觉上的污染。 3.装修过度一味追求高端大气上档次，不切实际地使用高档的装修材料。装修是一门综合性的学科，它旨在创建一个优良的居住环境和用户体检。家的装修装饰最主要是展现一种亲和力和温暖。大家在平时生活中，通过参考朋友家、亲人、邻居家的成房效果，都会在内心给自己提供一种合理的设计模板。看的多了，参考的方案多了，那自己的设计也就愈臻完美了。1.2 应用的开发意义当今社会，人们对自己的生活居住环境，赋予了新的意义，合理的、饱含文化的、舒适的、温暖的家居环境，正在成为当前家居装修的主流。爱家装App开发的目的是为广大房主提供装修的优秀装修范例和模板，以期启发装修他们的灵感。爱家装iOS手机客户端的开发，极大的便利了用户的生活体验，随时随地的浏览各式各样的装修精品图片信息，了解时下最新的设计师和设计风格，便于广大用户及时掌握装修装饰的动向。为满足大量房主的设计需求，爱家装App的设计师模块，是全国各地的优秀设计师在这里展示自己的优秀的设计作品和设计风格，同时也为设计师展示自我智慧和才华搭建了一个好的平台，也为房主选择装修设计师提供了参考。希望爱家装App成为全国房主提供装修的必备。第2章 应用的开发工具和相关介绍2.1 应用的开发工具和运行环境操作系统：Mac OS 10.10；软件开发工具：Xcode 6.2及6.3；硬件配置：一台iMac /MacPro/MacAir苹果系列的电脑，一台苹果系列的测试机（iPhone手机系列、itouch/air/ iPad/iPod），iPhone系列手机及屏幕大小如图2-1所示：图2-1 iPhone手机屏幕2.2 应用开发相关介绍2.2.1 iOS开发介绍iOS是运行于苹果移动系列产品上的操作系统，它为手机软件提供运行环境。根据设备不同，操作系统具有不同的系统应用程序，例如Phone、Mail以及Safari，这些应用程序可以为用户提供标准系统服务。iPhoneSDK包含开发、安装及运行本地应用程序所需的工具和接口。本地应用程序使用iOS系统框架和Objective-C语言进行构建，并且直接运行于iOS设备。可以说本地应用程序和其他系统应用程序具有相同地位。本地应用程序和用户数据都可以通过iTunes同步到用户计算机。2.2.2 iOS系统架构iOS系统架构可分为四个层次：Core OS（核心操作系统层）、Core Service（核心服务层）、Media（媒体层）以及Cocoa Touch（可触摸层），如图2-2所示：图2-2 iOS系统架构图Core OS：这一层提供整个iOS的一些基础功能，比如内存管理、线程管理、硬件驱动，是一个开源的Unix核心。硬件和系统框架之间的接口是有核心层的驱动提供的。Core Services：这一层在Core OS基础之上提供了更加完备的功能，包括Foundation.Framework和Core Foundation.Framework，Foundation提供了一系列处理字串，时间，日历，排列，组合等的基本功能；Core servieces还提供了Core Location, SQLite, 和Address Book功能. 其中Security是用来处理认证，密码管理，按安全性管理的； Core Location是用来处理GPS定位的；SQLLite是轻量级的数据库，而AddressBook则用来处理电话薄资料的。Media：提供了音乐、影片、图像等多媒体功能。Media Player 实现了影片的播放， Core Animation支持动画的实现。Cocoa Touch：最上面一层，它是Objective-C的API, 其中最核心的部分是UIKit.Framework，应用程序界面上的各种组件全是由它来提供的。另外屏幕上的多点触摸事件、文字的输出、图片、相机或文件的存取等也是由它负责处理的。2.2.3 OC语言简介OC语言，即ObjectiveC语言，这是一门面向对象（OOP）的语言，有封装、继承和多态三大特性。它有静态语言的特性(如C+)，又有动态语言的效率(动态绑定、动态加载等)。封装是把存在的事物“封装”成一个抽象的类。继承是子类可以使用基类或者父类的功能和方法，无需重新编写。多态不同对象以自己的方式响应相同的消息的能力。OC的类可分为接口和实现两部分，即interface和 implementation，通过他们来实现类声明和定义。成员变量也有三种访问类型， public（公开的）,protected（受保护的）,private（私有方法，子类不可继承）。2.2.4 Xcode简介Xcode是运行在Mac OS下,用于开发iOS应用程序，由apple公司开发，向开发人员提供的非开源集成开发环境。Xcode 具有统一的用户界面设计，编码、测试、调试都在一个简单的窗口内完成。苹果电脑公司的 Mac OS X 综合开发环境Xcode 为各种类型的 Mac OS X软件项目提供项目编辑、搜索和浏览，文件编辑，项目构建和调试设备等功能。Xcode可用来辅助开发应用程序、工具、架构、数据库、嵌入包、核心扩展和设备驱动程序。Xcode目前已更新到6.3版，支持iOS 8.3。2.2.5 App真机测试和应用上线完成真机测试，首先需要一台苹果系列的真机，真机指的是iPhone、iTouch、iPod、ipad的苹果系列产品，需要一个iOSdeveloper账号，账号收费。将真机连接到你的开发设备上，在苹果官方开发网站，在iOS Provisioning Portal生成了开发证书,然后再Xcode 完成了证书的安装。菜单：window-Organizer，然后选择Devices,运行程序。即完成了真机测试流程。发布iOS应用程序到AppStore首先将App准备好，确保iOS应用程序已经在模拟器（Simulator）中做了全面的测试确认没有Bug了。如果在决定发布前一定要把好测试关，直到App真正准备好发布了。 App发布概括起来需要以下几个流程： 1.注册一个AppID，在Xcode的设置中设定Bundle Identifier 2.创建一个Distribution证书（DistributionCertificate）； 3.生成DistributionProvisioningProfile文件； 4.用DistributionProfile为应用的签名； 5.App打包（Archive）； 6.在iTunesConnect填写App的相关信息，版本、各个屏幕尺寸的图片截图、App图标、适应人群、公司相关信息、联系人、测试账号等等,都要认真填写； 7.登录iTunesConnect，上传该App应用；以上大部分的操作是在ProvisioningPortal、Xcode、KeychainAccess工具和iTunesConnect中完成的。2.2.6 App Store简介App Store是apple公司官方商店，向其产品的用户提供软件的下载和更新。App Store创建的用户、开发者、苹果公司三方共赢的商业链条，苹果公司是App Store的开发者与管理者。Apple公司发布了对应iPhone的应用开发包（SDK），供广大开发者下载，以便第三方应用开发人员开发出iPhone及Touch的应用软件。软件的收益由Apple公司和软件开发方三七分成。第3章 应用需求分析当今社会，房屋是人们赖以生存的生活、休息、工作环境。目前社会上的房屋装修的水平高低不一、设计师水平也有高有低。广大房主迫切需要专业的装修指导软件，为自己提供专业的房屋参考方案和指导意见，像看新闻一样，有图有文，为便于用户的随时随地的浏览信息，iOS端的爱家装就应用而生。用户的登录可借助第三方的社交（如腾讯微博等）平台，分享自己动向，同时有利于信息传播。通过调查，用户在浏览网上信息时，大部分人不喜欢满篇都是文字的信息，也不喜欢全是图片的生涩表达，反而是图文并茂的信息受到大家的青睐。装修类的App自然是离不开图片的展示和相应的文字描述。软件信息以图片展示为主，每个用户展示的在软件上的图片，其他用户可以评论和点赞以及分享。有时候突然迸发的设计灵感，往往会创造出意想不到的艺术作品，装修装饰也是一门艺术门类，它需要设计师合理利用空间，创造出完美的作品。房屋根据面积、户型、类型、主题（婚房、旧房改造、色彩搭配、智能家居等）、装饰（绿植、吊灯、布艺、背景墙、灯光等）、家具（沙发、电视、空调、橱柜、书桌、儿童床、陈列柜、书桌等），装修方案也是不同的，在这里，需要尽量细化筛选的条件，以便用户及时有效的找到有用的装修范例。房主可以将自己的装修进展分享给大家，建议建一个记录房主每天装修进程的区域，供房主分享和其它用户观看，同时可设立讨论区，供大家讨论当前房子装修的经验和心得。谈到设计，大家首先想到的是设计师，设计师的装修方案的好与差，直接关系到房子的装修，所以选择一个合格的设计师是非常重要的，在App中创建一个专属设计师们的页面，用于分享自己的装修理念和装修作品，用户可以作为极佳的参考。另外用户可以根据该区域的设计者的设计作品，挑选心仪的设计师。作为一个App，还要考虑用户的体验，当发现某一个装修装饰图册符合自己的理念。可以加入收藏，存入本地，以便下次查看、持续关注。这是一个社交的社会，用户对自己特别喜欢的装修装饰方案，可以进行社会化的分享，以便更多的人了解到。iOS 爱家装App的设计与实现旨在为广大用户提供装修装饰的风格设计，随时随地了解装修的信息。第4章 总体设计4.1 总体架构设计该应用分五大模块，分别是“浏览”、“灵感”、“社区”、“设计师”以及“我”，而浏览模块又分“精选”、“作品”和“晒家”三个子模块，社区分“房主日记”和“讨论区”两个子模块，“灵感” 、“设计师”以及上面的五个子模块点击后分别进入相对应的“详情页面”，相对应的社区页面，则是瀑布流显示的图册，点击进入大图浏览模式，包括该图片的评论信息，总体流程图如图4-1所示:图4-1 流程图4.2 原型设计首先认真去阅读需求分析、程序原型设计图、接口文档，查看切图。爱家装主页面的原型设计如图4-2所示(尺寸省略)：图4-2 主页原型图主页面是“浏览”模块，从页面结构看，从上向下，分别是导航栏（包含题目、导航按钮）、分页控制条、轮播图（四张滚动显示）、主要内容、工具栏（这里含五个按钮），内容分条显示，每一条上显示装修图片、图片的名称、图片的作者、作者头像等信息。还有三个触发事件的点击按钮，以图标为背景图，显示赞和评论的数量多少。第5章 详细的设计与实现5.1 技术开发准备在打开Xcode开始编码前，需要配置一些环境，在管理第三方类库的问题上，需在控制台输入一系列的指令，安装cocoapods，这是一个很方便的工具。需要一些诸如NsHttpReques、AFNetworking（进行数据的请求）、SDWebImage（进行图片的缓存和异步加载）、EGORefresh（完成一些刷新页面和加载功能）等的封装好的Third Part类库，输入名称，自动完成下载，非常的方便。还需要创建一些公共的头文件、宏定义和基类（父类，有些视图继承自它，可以继承它的除私有方法以外的所有方法，极大的减少工作量），这些可以减少代码的冗余，提高编程效率。那下面就可以正式开始编程，创建一个viewController，继承自基类（本应用的基类是表格UITableViewController视图）指定导航栏和工具栏，有利于页面之间的交互（push、pop等）。在这里不得不提到MVC设计模式，这是非常重要的（模型和view视图不同通信联系，而controller是他们之间的桥梁），创建M、V、C。图5-1 MVC设计模式MVC模式在项目编码过程中每一个模块的具体实现，如图5-2所示： 图5-2 设计中的MVC 需建一些辅助的功能类，单例（功能类，即可调用，又可传值）、封装view（图文混排、数据解析类）、委托、类目等等。5.2 模块的UI实现根据原型设计图稿，对五大UI模块进行了实现，以及触发事件的响应和跳转。5.2.1 “浏览”模块由原型图可知，主页面是“浏览”模块（精选页面）的，从页面结构看，从上向下，分别是导航栏（包含题目、导航按钮（触发事件，跳转筛选页面）、分页控制条、轮播图（四张滚动显示、可点击）、tableView表视图（显示该页面的主要内容）、工具栏（这里含五个模块的切换按钮），其中tableView表视图，由若干个cell单元格组成，分条显示内容，cell上有若干UILabel、UIImageVIew等，显示装修图片、图片的名称、图片的作者、作者头像等信息，cell上还有三个触发事件的UIbutton点击按钮，以图标为背景图，UILabel显示赞和评论的数量多少。如图5-3和图5-4所示： 图5-3 精选 图5-4 晒家 作品和晒家与精选相比较，不同点在于它门没有轮播图效果，其他功能相似。点击cell，进入“详情”，这里实现通过tableView视图，其中cell上的图片作为背景，每个cell底部的显示三个按钮，已封装成一个View，直接可以使用和复用。点击此区域，实现导航栏上的右按钮增加分享功能。如下图所示： 图5-5 分享5.2.2 “灵感”模块导航栏有标题、飞鸟动画、按钮。其下部正文显示，包含风格和照片墙两大区域，分别用轮播图（左右方向）和瀑布流效果。如下图所示： 图5-6 灵感主页面 图5-7 灵感详情 其下级页面为“详情页面”，显示一个ViewController，图像及图册是详情，评论详情的显示，分享功能，已经评论区域的评论者详情均可看到。另外，导航栏按钮指向筛选列表，导航栏右上按钮触发此列表弹出，如图5-8和图5-9所示： 图5-8 灵感画册 图5-9 灵感筛选 5.2.3 “社区”模块社区主要包括房主日记和讨论区，房主日记和讨论区骏使用表格视图显示，封装样式的cell，在房主日记单元格里，显示用户发表的标题、日记数目、户型、三张简图、用户图标和用户名等信息，单元格选中，分别进入详情，房主日记在根据时间轴在视图上对图文混排的日记进行展示，其下面显示浏览者对其日记的评论。如图5-10和图5-11所示： 图5-10 社区房主日记 图5-11 社区讨论区 讨论区页面相较于房主日记，增加了导航栏左按钮进行讨论话题的筛选，用户可以根据讨论的话题，直接进入该讨论区域。讨论区单元格，封装的是讨论话题、图像、话题类别、评论数和浏览数等信息， 单元格选中，分别进入详情，房主日记在根据时间轴在视图上对图文混排的日记进行展示，其下面显示浏览者对起日记 评论。它的详情描述，展示该讨论的其他用户的评论。5.2.4 “设计师”模块设计师模块，沿用基类的表格视图，封装单元格，显示设计师的信息和设计理念和部分作品，以及设计师的基本信息。使用图文混排的效果展示设计师作品内容。页面如图5-12和图5-13所示： 图5-12 设计师主页 图5-13 设计师详情 左导航按钮触发，城市的列表选择的视图，封装成抽屉效果进行特效显示。右按钮显示actionsheet的风格显示筛选内容。设计师界面的下级界面选中的设计师的详情介绍。如图5-14和图5-15所示： 图5-14 城市筛选 图5-15 设计师图册 5.2.5 “我”模块“我” 采用普通视图，一个区域显示登录要求的提示，采用View，其余区域显示相关的模块，添加手势，触发方法，我的收藏，显示收藏内容列表；缓存清理触发缓存警告框显示，显示缓存大小，是否清除以及程序的相关详情等。如图5-16所示： 图5-16 “我”主页面其中登录，其后面的UI实现，是接口调用第三方，不需自己实现；登录入口如图5-17和图5-18所示： 图5-17 腾讯微博登录 图5-18 新浪微博登录 5.3模块功能实现5.3.1 登录登录使用友盟第三方，采用OAuth授权方式进行访问，友盟有封装好的方法，可以直接调用这些方法，实现功能，如图5-19所示。 图5-19 登录 引入框架，导入第三方类库，引用头文件UMSocial.h。使用第三方账号登录的流程如下： 1 验证并获取UID，通过UID查询本地账号的信息； 2 提示用户输入相应的腾讯或者新浪微博账号及其密码，进行授权； 3 将UID和该账号绑定； 4 登录成功；5.3.2 分享分享，上面已经引入的友盟第三方，在分享的viewcontroller中引入头文件，授权登录之后。frameworks中使用的第三方SDK，里面的TencentWeiboSSO和SinaSSO分别代表腾讯和新浪微博的Sdk。设置分享的Appkey ,UMSocialData setAppKey：54391fcdfd98c54c8a034975;获取到社交的第三方平台，对相关信息进行设置。5.3.3 收藏在浏览详情以及灵感详情中，用户可以将自己喜欢的图片资料收藏起来，供自己再次使用，如图5-20所示： 图5-20 收藏 收藏的原理是，收藏到本地，在本地列表中查询，取出。NSString * filePath = documents stringByAppendingPathComponent:DATA_FILE_NAME; NSFileManager * defaultManage = NSFileManager defaultManager; /如果document下面没有ShopDataBase.sqlite文件 if (!defaultManage fileExistsAtPath:filePath) /就把包中的数据库文件拷贝到沙盒documents文件夹下 NSString * bundlFilePath = NSBundle mainBundle pathForResource:LoveHome ofType:sqlite;5.3.4 缓存清理浏览图片，移动应用都会做图片缓存的处理，缓存的消耗，影响手机运行的速度。缓存文件一般存在于沙盒中，清除沙盒中的文件清空即可，如图5-21所示。 图5-21 清理缓存这里使用第三方类库中的SDWebImage，这个类库里自己实现了清理缓存的操作，直接拿过来调用即可。获得沙盒中图片缓存的大小NSInteger cacheSize = SDImageCache sharedImageCache getSize;清理缓存SDImageCache sharedImageCache clearDisk;第6章 应用测试在app编码的过程中，已经进行初步的功能和页面实现的测试；在整个App完成编码后，在模拟器和真机上测试，主要在以下几个方面进行重点的测试：屏幕的适配：运行在不同型号的iPhone真机上，运行查看屏幕是否适配；动画测试：验证启动页面的启动效果和飞鸟效果；视图显示测试：查看数据页面正常显示，测试接口是否正确；页面跳转： 点击cell、按钮，测试是否正常弹出提示或者跳转；轮播图测试：左右滑动浏览和灵感页面的轮播图，测试是否出现滚动浏览；分页测试：测试浏览和社区页面的分页效果的实现；上拉加载下拉刷新测试：分别向上/向下滑动视图，测试是否上滑时加载新数据，下拉时刷新当前页面数据，测试数据请求是否正常；瀑布流效果测试：查看图片是否变型，测试灵感页面的瀑布流的高度自适应；筛选测试：选定风格条件，测试筛选是否成功；城市列表测试：查看城市列表，测试城市列表是否显示完全；登录测试： 分别用腾讯微博账号和新浪账号登录，测试是否正常登录；收藏测试： 点击收藏，测试是否正常收藏；点赞测试： 测试赞是否成功；大图浏览测试：灵感页面，测试是否支持大图浏览；清理缓存测试：点清理缓存，测试是否显示缓存大小、缓存是否清零；分享测试： 分享到新浪微博，测试是否完成授权，是否成功登录，以及登录个人微博账号查看是否分享成功。经过测试后，有一些页面出现屏幕不适配的问题，改进后显示正常；功能测试方面，点赞和评论的功能，超越起先的预期，总出现问题，待解决；登录、分享、缓存清理测试正常经过反复测试、修改，基本完成功能（上线，审核通过，已上架）。第7章 总结与体会爱家装App是应用已经在App Store上线，并有一定数量的用户下载使用。在App的开发上，后台数据是通过接口获取的，对于后台的数据库设计了解不多，由于工作的原因，该App做的过于粗糙，有些界面的效果，没有实现，没有达到预期的效果。通过本软件的独立开发，学到了很多东西，纵观整个程序的设计过程，从cocoaPods管理第三方、MVC的搭建，到分享，到后期的真机测试、App上线审核查了很多资料，加深了对这些知识点和技术点的掌握。在项目开发过程中，主要通过查看苹果官方API文档、iOS书籍和相关的技术博客，其中51CTO、Code4app、CocoaChina对我帮助高度者留下的宝贵财富。例如瀑布流效果的实现，根据网络返回的高度比例设定页面展示的不同高度。数据的请求和封装等等。由于时间的限制和某些个人原因，在上线后，发现爱家装App存在两个大的bug，第一个是一些小的按钮无法点击，评论、赞等，评论只能读不能评论，直接默认是cell的