基于IOS唯美之家设计与实现方案Word文件下载.docx

1、2客户端需求分析2.1 总体需求分析生活节奏的加快，今天的手机已不再是单纯的通讯工具，已经成了集通讯、音乐、电影、游戏娱乐为一体的个人便携终端。然而科技不仅仅只是止步于此，手机的通信娱乐功能渐渐地不能够满足人们的需求。人们希望可以在手机上完成自己所需要的事情，其中一大热门便是室内的设计及装修。现如今我国的现状是房子等同于家，这个想法已深深地印在每个国人的思想中，买完房之后总是要装修的，但面对各种各样的设计装修公司已眼花缭乱，不知该如何选择，所以，手机室内设计装修APP就此出现。唯美之家APP具有互联网的优势，能够将信息快速的传递给用户，在下载了客户端后，想要了解什么样的产品信息，客户只要用手轻

2、轻一点就可以获得最新的产品信息，非常的方便快捷。手机客户端不仅会将产品的信息传递给客户，同时也会将客户的意见或想法反馈给商家，让商家更好的了解并解决客户的需要。唯美之家APP实现了商家与客户的零距离交流，更有利于商家提供给客户满意的商品和装修方案。唯美之家APP不仅方便的客户，也对商家的发展更加有利。2.2 课题研究领域的发展现状1.国外发展现状2.国内发展现状国内的APP应用软件起步比美国等西方国家慢了一两年，但是目前其发展速度飞快，处于高速增长阶段。现今已涌现大量优秀的APP开发公司，无论是老牌的还是创业型的，他们对APP应用软件的渴望程度十分强烈。比较优秀的如“互联在线”，其专注于手机A

3、PP的开发与推广，移动互联网应用开发涉及苹果IOS和安卓等系统平台，智能手机APP开发的服务已涉及、酒店、美容、汽车、医疗、旅游、地产、服装、商场、娱乐、传媒等产业，致力于为企业提供一站式的移动互联网应用解决方案。3相关开发技术3.1 iOSiOS是iPad、iPhone、iPod touch以及Apple TV的操作系统，iOS的界面简单易用,其功能令人惊叹,也具有极强的稳定性,这些特点是iPhone、iPad和iPod touch的强大基础，Apple设备凭借iOS内置的众多技术和功能始终遥遥领先,保持着自己的地位,使其他对手只能望其项背。iOS所拥有的应用程序是所有移动操作系统里面最多的

4、,iOS平台拥有数量庞大的移动App,几乎每类App都有数千款。3.2 XCodeThe Xcode suite 包含有GNU Compiler Collection自由软件 （GCC、 apple-darwin9-gcc-4.0.1 以及 apple-darwin9-gcc-4.2.1, 默认的是第一个），并支持 C语言、C+、Fortran、Objective-C、Objective-C+、Java、AppleScript、Python以及Ruby，还提供Cocoa、Carbon以及Java等编程模式。协力厂商更提供了 GNU Pascal，Free Pascal, Ada, C#, Pe

5、rl, Haskell 和 D语言。Xcode套件使用 GDB作为其后台调试工具。3.3 OCOC语言是一种简单的面向对象的编程语言，它的面向对象特性参考了SmallTalk-80语言。跟C+是在同一时间段诞生的，没有借鉴C+。用于嵌入式开发，网络服务器端开发。它扩展了ANSIC编程语言，将SmallTalk式的消息传递机制加入到ANSIC中。它是苹果的OSX（X表示第十代）和IOS操作系统，及其相关的API、Cocoa和CocoaTouch的主要编程语言。3.4 MVC设计模式MVC本来是存在于Desktop程序中的，M是指数据模型，V是指用户界面，C则是控制器。使用MVC是将M和V的实现代

6、码分离，从而使同一个程序可以使用不同的表现形式。比如一批统计数据你可以分别用柱状图、饼图来表示。C存在的目的则是确保M和V的同步，一旦M改变，V应该同步更新， MVC就是Observer设计模式的一个特例。它强制性的使应用程序的输入、处理和输出分开。使用MVC应用程序被分成三个核心部件：模型、视图、控制器。它们各自处理自己的任务。4客户端总体设计4.1 总体设计图4-1展示了客户端的总体架构，在设计客户端的时候，保持了MVC三层架构和MVC的设计原则。客户端View层包括各种UI界面，包括Cocoa框架提供的一些View，如表视图UITableView等，还包括了自定义的视图，比如网格视图、列

7、表单元格视图等等。在Controller层主要是以ViewController为父类的多种控制类，ViewController是iOS应用程序中非常重要的部分，是应用程序和视图之间的重要桥梁，既要管理应用中的众多视图,又需要和数据模型做交互。在model层, 主要包括了一些实体类、property list文件、本地数据库以及本地文件等。图4-1 客户端构架图4.2 客户端UI设计一款应用UI界面的作用不仅仅是给用户提供一个易操作的界面,更重要的是,好的UI可以给用户留下一个好的第一印象。在界面的设计过程中,要尽量站在用户的角度来考虑,要遵循简单原则、友善原则、容错原则、习惯原则、把握行为以及

8、心理因素原则等等,要尽量使UI设计的很自然,让用户用起来得心应手,并在保证美观性的同时,也要保证设计的安全性、可靠性等等17。如图4-2所示,在进行UI设计时,需要符合UI设计的一些通用性规范,主要使用了侧边菜单栏和navigation导航栏结合的方式进行导航。图4-2 客户端总体设计图4.2.1 主界面用户在进入主界面之后，主要包括了三个组成部分：（1）底边菜单栏，分别有浏览、灵感、社区、设计师、我五个按钮，点击不同的按钮就可以进入不同的页面，浏览自己想要的信息。（2）顶部导航栏，根据点击底边菜单栏的按钮，则会转换为不同的导航栏按钮，随之产生不同的的信息。（3）中间部分则是展示的地方，当点击

9、不同的按钮时，中间展示部分则会展示出不同的图片和文字信息，用户可以浏览精美装修的图片或者是其他用户上传的装修图片。4.2.2 浏览界面浏览界面一级页面的标签按钮在页面顶部，点击精选按钮，跳转到主界面。点击作品按钮则进入各种设计的作品的界面，在此页面的右上角有一个四格按钮，点击后进入按需求选择类型的界面，用户可以通过选择面积、户型来浏览自己所需要的作品，点击左上角Back按钮返回上一级页面。点击晒家按钮，进入用户自己上传的家居装修的界面，用户可以选择自己喜欢的装修点击进去进行详细的浏览，也可以评论和分享。右上角的四格按钮点击进入分类浏览界面。4.2.3 灵感界面该界面是用户或设计师上传的局部详细

10、设计的照片，用户可以在此界面浏览各个环境或角落的精彩设计。右上角的四格按钮点击后进入分类筛选的界面，在此界面，用户可以按照空间、主题、局部、装饰、家具关键词进行选择性浏览。点击左上角灵感画册的按钮则可以返回上一级页面。4.2.4 社区界面该界面的顶部有三个按钮，分别是房主日记，讨讨论区以及选择排序按钮。点击房主日记的按钮后，出现的界面是其他用户上传的自己在装修时的每天的记录，用户可以浏览其他用户在装修时的各种情况。当点击某一个日记的时候，则会进入此日记的详细内容的界面，用户可以在此界面浏览上传用户在不同时间的装修情况及想法，用户也可以对每篇日记进行评论。左上角的Back点击后返回上一级页面，右

11、上角的是分享按钮，用户可以分享该日记。点击讨论区按钮，进入讨论界面，在该页面，用户可以上传自己的装修情况和问题与其他用户进行讨论。4.2.5 设计师界面用户在点击设计师按钮后进入到设计师界面，在 该页面用户可以浏览设计师和设计师的作品。页面左上角的城市按钮点击后可以选择所属城市的设计师。当用户选择某一个设计师后，点击进入该设计师的详细介绍页面，在详细介绍页面，用户可以欣赏设计师的做品画册。在页面顶部有设计师的头像和其以验证过的作品，预约人数以及客户评价数量。在设计师头像下方则有服务介绍和关于设计师，点击任何一个则会进入设计师的信息介绍及收费情况页面。点击左上角的按钮便会返回上一级页面。4.2.

12、6 我界面在我界面，分为三个部分：清理缓存、关于我们、退出登录。（1）清理缓存，用来清理图片缓存。（2）关于我们，用来展示客户端版权、版本号以及开发者的信息。（3）退出登录，用来退出当前登录的账号。5客户端详细设计与实现5.1 装修画册的设计与实现如图5-2所示，这里用的是tableView，中间的单元格是一系列UITableViewCell对象，表中的每一行内容都是在UITableView中放置的。每个单元格是一个自定义的imageItem，用来展示受欢迎的设计的照片，每个照片的下方是一个Label，展示每个画册的介绍和名称 。点击单元格进入更详细的二级分类页面，用于浏览该画册的更详细的信息

13、。图5-1装修画册主要代码：-（void）viewDidLoadsuperviewDidLoad;self.title=画册;self.photoListNSMutableArrayarray;/Doanyadditionalsetupafterloadingtheview.UICollectionViewFlowLayout*layout（UICollectionViewFlowLayout*）self.collectionViewLayout;layout.sectionInsetUIEdgeInsetsMake（K_LEFT_MARGIN,K_LEFT_MARGIN,K_LEFT_MAR

14、GIN）;layout.itemSizeCGSizeMake（self.view.width3K_LEFT_MARGIN）/2,（self.collectionView.width2）;layout.minimumInteritemSpacingK_LEFT_MARGIN;layout.minimumLineSpacingself.collectionViewregisterClass:PhotoListCellclassforCellWithReuseIdentifier:collectionAlbum;ViewController 根视图控制器,其他视图控制器都是在这个rootviewco

15、ntroller的基础上push。最下面只能放一块积木，至于这个积木是什么颜色，你需要自己定制，这就是下面的mainViewController了。在在这之上进行下一步的搭建，在里面进行填充。5.2风格画册选择的设计与实现当点击左上角的风格按钮后，将会出现一个风格选择的界面，用户可以根据自己的需求和喜好来选择风格画册，如图5-2所示。图5-2 风格画册选择（UITableViewCell*）tableView:（UITableView*）tableViewcellForRowAtIndexPath:（NSIndexPath*）indexPathUserCell*celltableViewdeq

16、ueueReusableCellWithIdentifier:userCell;NSDictionarydicself.userArrayobjectAtIndex:indexPath.row;cell.imagesd_setImageWithURL:NSURLURLWithString:dicobjectForKey:user_face;cell.image.IDuser_id;cell.textuser_nickreturncell;（void）tableView:didSelectRowAtIndexPath:UserControlleruserUserControllerallocin

17、it;user.user_idself.navigationControllerpushViewController:animated:YES;userrelease;（CGFloat）tableView:heightForFooterInSection:（NSInteger）section1; 这里用的是UITableView，中间的单元格是一系列UITableViewCell对象，表中的每一行内容都是在UITableView中放置的。一次只能点击一个按钮，当点击后界面将会随之产生变化，进入到所选择的界面。5.3 装修画册选择的设计与实现装修画册的选择是为了让用户能够更准确的查看画册，左侧是

18、一个菜单栏，用户可以通过选择空间、主题、局部、装饰、家具来进行选择性的浏览自己所需要的画册。页面采用UISearchDisplayController实现，点击关键词则直接进入搜索结果列表界面，界面如图5-3所示。点击自己所需要的关键词后，进入二级界面，界面会自动弹出，用户可以浏览自己选择的关键词的画册，点击右上角四格按钮返回一级搜索界面，如图5-4所示。图5-3 选择界面图5-4 关键词画册界面画册列表self.tableViewIdeaPhotoListCellforCellReuseIdentifier:cellIdentifier;self.navigationItem.rightBa

19、rButtonItemUIBarButtonIteminitWithImage:UIImageimageNamed:筛选icon.pngstyle:UIBarButtonItemStyleBorderedtarget:selfaction:selector（doActionSheet:）autorelease;self.ideaPhotolistArrayarrayWithCapacity:1;_blockIdeaPhotoListControllerideaPhotoListself;addHeaderWithCallback:ideaPhotoList.ideaList_Page0;ide

20、aPhotoListgetData;ideaPhotoList.tableViewaddFooterWithCallback:UIKit中有一些类可以用来操纵单个图像，还有一个图像类可以用来显示图像。Apple还提供了一种特殊的导航控制器，用于从图像库中选择图像。如果图像存储在内存中，你可以创建一个NSData 对象作为initWithData 方法的原始输入，来初始化一个UIImage对象。如果图像是一张网络图片，可以使用NSData来进行预载，然后用它来初始化UIImage对象。UITableViewController是系统提供的一个便利类，主要是为了方便我们使用UITableView，

21、该类生成的时候就将自身设置成了其包含的tableView的dataSource和delegate，并创建了很多代理函数的框架，为我们大大的节省了时间，我们可以通过其tableView属性获取该controller内部维护的tableView对象。默认情况下使用UITableViewController创建的tableView是充满全屏的，如果需要用到tableView是不充满全屏的话，我们应该使用UIViewController自己创建和维护tableView。5.4 收藏画册，网友评论，赞过的画册的设计与实现在用户选中某风格的装修图册，可以展示具体装修图片，文字及网友评论等。页面顶部用的是一

22、个自定义的imageItem，展示该画册的封面tableView，下面是一UITableViewCell对象，是在UITableView中放置的，用户点击后可以查看该画册的具体设计灵感和局部图片，页面下面是Label，展示收入画册的用户及评论。如图5-4所示。图5-4 收藏画册等界面#pragmamarkUITableViewDataSource（NSInteger）numberOfSectionsInTableView:*）tableView3;（NSStringtitleForHeaderInSection:if（section=0）晒家画册else1）灵感画册赞过的画册uicontrol

23、 创建用户界面控件对象。在窗体上创建各种组建（比如、按钮、静态文本框、弹出式菜单等）。并指定这些组件的回调函数。如果设计了一个自定义控件类，可以使sendActionsForControlEvent方法，为基本的UIControl事件或自己的自定义事件发送通知。5.5 我界面的设计与实现我界面分为三个模块，如图5-6所示。图5-6 我界面图清理缓存是用第三方框架实现的，点击清理缓存单元格，会弹出一个alertView，用户点击OK后，开始清理图片缓存。关于我们主要展示客户端版本及开发者的信息，用imageView来实现。-（void）tableView:（UITableView *）table

24、View didSelectRowAtIndexPath:（NSIndexPath *）indexPath if （indexPath.section = 0） UMFeedback showFeedback:UIApplication sharedApplication.delegate window rootViewController withAppkey:UMENG_APPKEY;if （indexPath.section = 1） NSLog（3区0号）; UIAlertView *alertView=UIAlertView alloc initWithTitle:温馨提示 message:是否要清理图片缓存? delegate:self cancelButtonTitle:OK otherButtonTitles:Cancel, nil autorelease;alertView show;SDImageCache sharedImageCache clearDisk;if （indexPath.section = 2）TheDevelopersVC *theDevelopers