基于IOS唯美之家设计与实现方案Word文件下载.docx
《基于IOS唯美之家设计与实现方案Word文件下载.docx》由会员分享，可在线阅读，更多相关《基于IOS唯美之家设计与实现方案Word文件下载.docx（29页珍藏版）》请在冰点文库上搜索。
2客户端需求分析
2.1总体需求分析
生活节奏的加快，今天的手机已不再是单纯的通讯工具，已经成了集通讯、音乐、电影、游戏娱乐为一体的个人便携终端。
然而科技不仅仅只是止步于此，手机的通信娱乐功能渐渐地不能够满足人们的需求。
人们希望可以在手机上完成自己所需要的事情，其中一大热门便是室内的设计及装修。
现如今我国的现状是房子等同于家，这个想法已深深地印在每个国人的思想中，买完房之后总是要装修的，但面对各种各样的设计装修公司已眼花缭乱，不知该如何选择，所以，手机室内设计装修APP就此出现。
唯美之家APP具有互联网的优势，能够将信息快速的传递给用户，在下载了客户端后，想要了解什么样的产品信息，客户只要用手轻轻一点就可以获得最新的产品信息，非常的方便快捷。
手机客户端不仅会将产品的信息传递给客户，同时也会将客户的意见或想法反馈给商家，让商家更好的了解并解决客户的需要。
唯美之家APP实现了商家与客户的零距离交流，更有利于商家提供给客户满意的商品和装修方案。
唯美之家APP不仅方便的客户，也对商家的发展更加有利。
2.2课题研究领域的发展现状
1.国外发展现状
2.国内发展现状
国内的APP应用软件起步比美国等西方国家慢了一两年，但是目前其发展速度飞快，处于高速增长阶段。
现今已涌现大量优秀的APP开发公司，无论是老牌的还是创业型的，他们对APP应用软件的渴望程度十分强烈。
比较优秀的如“互联在线”，其专注于手机APP的开发与推广，移动互联网应用开发涉及苹果IOS和安卓等系统平台，智能手机APP开发的服务已涉及、酒店、美容、汽车、医疗、旅游、地产、服装、商场、娱乐、传媒等产业，致力于为企业提供一站式的移动互联网应用解决方案。
3相关开发技术
3.1iOS
iOS是iPad、iPhone、iPodtouch以及AppleTV的操作系统，iOS的界面简单易用,其功能令人惊叹,也具有极强的稳定性,这些特点是iPhone、iPad和iPodtouch的强大基础，Apple设备凭借iOS内置的众多技术和功能始终遥遥领先,保持着自己的地位,使其他对手只能望其项背。
iOS所拥有的应用程序是所有移动操作系统里面最多的,iOS平台拥有数量庞大的移动App,几乎每类App都有数千款。
3.2XCode
TheXcodesuite包含有GNUCompilerCollection自由软件（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等编程模式。
协力厂商更提供了GNUPascal，FreePascal,Ada,C#,Perl,Haskell和D语言。
Xcode套件使用GDB作为其后台调试工具。
3.3OC
OC语言是一种简单的面向对象的编程语言，它的面向对象特性参考了SmallTalk-80语言。
跟C++是在同一时间段诞生的，没有借鉴C++。
用于嵌入式开发，网络服务器端开发。
它扩展了ANSI
C编程语言，将SmallTalk式的消息传递机制加入到ANSI
C中。
它是苹果的OS
X（X表示第十代）和IOS操作系统，及其相关的API、Cocoa和Cocoa
Touch的主要编程语言。
3.4MVC设计模式
MVC本来是存在于Desktop程序中的，M是指数据模型，V是指用户界面，C则是控制器。
使用MVC是将M和V的实现代码分离，从而使同一个程序可以使用不同的表现形式。
比如一批统计数据你可以分别用柱状图、饼图来表示。
C存在的目的则是确保M和V的同步，一旦M改变，V应该同步更新，MVC就是Observer设计模式的一个特例。
它强制性的使应用程序的输入、处理和输出分开。
使用MVC应用程序被分成三个核心部件：
模型、视图、控制器。
它们各自处理自己的任务。
4客户端总体设计
4.1总体设计
图4-1展示了客户端的总体架构，在设计客户端的时候，保持了MVC三层架构和MVC的设计原则。
客户端View层包括各种UI界面，包括Cocoa框架提供的一些View，如表视图UITableView等，还包括了自定义的视图，比如网格视图、列表单元格视图等等。
在Controller层主要是以ViewController为父类的多种控制类，ViewController是iOS应用程序中非常重要的部分，是应用程序和视图之间的重要桥梁，既要管理应用中的众多视图,又需要和数据模型做交互。
在model层,主要包括了一些实体类、propertylist文件、本地数据库以及本地文件等。
图4-1客户端构架图
4.2客户端UI设计
一款应用UI界面的作用不仅仅是给用户提供一个易操作的界面,更重要的是,好的UI可以给用户留下一个好的第一印象。
在界面的设计过程中,要尽量站在用户的角度来考虑,要遵循简单原则、友善原则、容错原则、习惯原则、把握行为以及心理因素原则等等,要尽量使UI设计的很自然,让用户用起来得心应手,并在保证美观性的同时,也要保证设计的安全性、可靠性等等[17]。
如图4-2所示,在进行UI设计时,需要符合UI设计的一些通用性规范,主要使用了侧边菜单栏和navigation导航栏结合的方式进行导航。
图4-2客户端总体设计图
4.2.1主界面
用户在进入主界面之后，主要包括了三个组成部分：
（1）底边菜单栏，分别有浏览、灵感、社区、设计师、我五个按钮，点击不同的按钮就可以进入不同的页面，浏览自己想要的信息。
（2）顶部导航栏，根据点击底边菜单栏的按钮，则会转换为不同的导航栏按钮，随之产生不同的的信息。
（3）中间部分则是展示的地方，当点击不同的按钮时，中间展示部分则会展示出不同的图片和文字信息，用户可以浏览精美装修的图片或者是其他用户上传的装修图片。
4.2.2浏览界面
浏览界面一级页面的标签按钮在页面顶部，点击精选按钮，跳转到主界面。
点击作品按钮则进入各种设计的作品的界面，在此页面的右上角有一个四格按钮，点击后进入按需求选择类型的界面，用户可以通过选择面积、户型来浏览自己所需要的作品，点击左上角Back按钮返回上一级页面。
点击晒家按钮，进入用户自己上传的家居装修的界面，用户可以选择自己喜欢的装修点击进去进行详细的浏览，也可以评论和分享。
右上角的四格按钮点击进入分类浏览界面。
4.2.3灵感界面
该界面是用户或设计师上传的局部详细设计的照片，用户可以在此界面浏览各个环境或角落的精彩设计。
右上角的四格按钮点击后进入分类筛选的界面，在此界面，用户可以按照空间、主题、局部、装饰、家具关键词进行选择性浏览。
点击左上角灵感画册的按钮则可以返回上一级页面。
4.2.4社区界面
该界面的顶部有三个按钮，分别是房主日记，讨讨论区以及选择排序按钮。
点击房主日记的按钮后，出现的界面是其他用户上传的自己在装修时的每天的记录，用户可以浏览其他用户在装修时的各种情况。
当点击某一个日记的时候，则会进入此日记的详细内容的界面，用户可以在此界面浏览上传用户在不同时间的装修情况及想法，用户也可以对每篇日记进行评论。
左上角的Back点击后返回上一级页面，右上角的是分享按钮，用户可以分享该日记。
点击讨论区按钮，进入讨论界面，在该页面，用户可以上传自己的装修情况和问题与其他用户进行讨论。
4.2.5设计师界面
用户在点击设计师按钮后进入到设计师界面，在该页面用户可以浏览设计师和设计师的作品。
页面左上角的城市按钮点击后可以选择所属城市的设计师。
当用户选择某一个设计师后，点击进入该设计师的详细介绍页面，在详细介绍页面，用户可以欣赏设计师的做品画册。
在页面顶部有设计师的头像和其以验证过的作品，预约人数以及客户评价数量。
在设计师头像下方则有服务介绍和关于设计师，点击任何一个则会进入设计师的信息介绍及收费情况页面。
点击左上角的按钮便会返回上一级页面。
4.2.6我界面
在我界面，分为三个部分：
清理缓存、关于我们、退出登录。
（1）清理缓存，用来清理图片缓存。
（2）关于我们，用来展示客户端版权、版本号以及开发者的信息。
（3）退出登录，用来退出当前登录的账号。
5客户端详细设计与实现
5.1装修画册的设计与实现
如图5-2所示，这里用的是tableView，中间的单元格是一系列UITableViewCell对象，表中的每一行内容都是在UITableView中放置的。
每个单元格是一个自定义的imageItem，用来展示受欢迎的设计的照片，每个照片的下方是一个Label，展示每个画册的介绍和名称。
点击单元格进入更详细的二级分类页面，用于浏览该画册的更详细的信息。
图5-1装修画册
主要代码：
-
（void）viewDidLoad
{
[super
viewDidLoad];
self.title
=
@"
画册"
;
self.photoList
[NSMutableArray
array];
//
Do
any
additional
setup
after
loading
the
view.
UICollectionViewFlowLayout
*
layout
（UICollectionViewFlowLayout
*）self.collectionViewLayout;
layout.sectionInset
UIEdgeInsetsMake（K_LEFT_MARGIN,
K_LEFT_MARGIN,
K_LEFT_MARGIN）;
layout.itemSize
CGSizeMake（（self.view.width
3
K_LEFT_MARGIN）
/
2,
（self.collectionView.width
2）;
layout.minimumInteritemSpacing
K_LEFT_MARGIN;
layout.minimumLineSpacing
[self.collectionView
registerClass:
[PhotoListCell
class]
forCellWithReuseIdentifier:
collectionAlbum];
ViewController根视图控制器,其他视图控制器都是在这个rootviewcontroller的基础上push。
最下面只能放一块积木，至于这个积木是什么颜色，你需要自己定制，这就是下面的mainViewController了。
在在这之上进行下一步的搭建，在里面进行填充。
5.2风格画册选择的设计与实现
当点击左上角的风格按钮后，将会出现一个风格选择的界面，用户可以根据自己的需求和喜好来选择风格画册，如图5-2所示。
图5-2风格画册选择
（UITableViewCell
*）tableView:
（UITableView
*）tableView
cellForRowAtIndexPath:
（NSIndexPath
*）indexPath
UserCell
*cell
[tableView
dequeueReusableCellWithIdentifier:
userCell];
NSDictionary
dic
[self.userArray
objectAtIndex:
indexPath.row];
[cell.image
sd_setImageWithURL:
[NSURL
URLWithString:
[dic
objectForKey:
user_face"
]]];
cell.image.ID
user_id"
];
cell.text
user_nick"
return
cell;
}
（void）tableView:
didSelectRowAtIndexPath:
UserController
user
[[UserController
alloc]
init];
user.user_id
[self.navigationController
pushViewController:
animated:
YES];
[user
release];
（CGFloat）tableView:
heightForFooterInSection:
（NSInteger）section
1;
这里用的是UITableView，中间的单元格是一系列UITableViewCell对象，表中的每一行内容都是在UITableView中放置的。
一次只能点击一个按钮，当点击后界面将会随之产生变化，进入到所选择的界面。
5.3装修画册选择的设计与实现
装修画册的选择是为了让用户能够更准确的查看画册，左侧是一个菜单栏，用户可以通过选择空间、主题、局部、装饰、家具来进行选择性的浏览自己所需要的画册。
页面采用UISearchDisplayController实现，点击关键词则直接进入搜索结果列表界面，界面如图5-3所示。
点击自己所需要的关键词后，进入二级界面，界面会自动弹出，用户可以浏览自己选择的关键词的画册，点击右上角四格按钮返回一级搜索界面，如图5-4所示。
图5-3选择界面
图5-4关键词画册界面
画册列表"
[self.tableView
[IdeaPhotoListCell
forCellReuseIdentifier:
cellIdentifier];
self.navigationItem.rightBarButtonItem
[[[UIBarButtonItem
initWithImage:
[UIImage
imageNamed:
筛选icon.png"
]
style:
UIBarButtonItemStyleBordered
target:
self
action:
@selector（doActionSheet:
）]
autorelease];
self.ideaPhotolistArray
arrayWithCapacity:
1];
__block
IdeaPhotoListController
ideaPhotoList
self;
addHeaderWithCallback:
^{
ideaPhotoList.ideaList_Page
0;
[ideaPhotoList
getData];
}];
[ideaPhotoList.tableView
addFooterWithCallback:
UIKit中有一些类可以用来操纵单个图像，还有一个图像类可以用来显示图像。
Apple还提供了一种特殊的导航控制器，用于从图像库中选择图像。
如果图像存储在内存中，你可以创建一个NSData对象作为initWithData方法的原始输入，来初始化一个UIImage对象。
如果图像是一张网络图片，可以使用NSData来进行预载，然后用它来初始化UIImage对象。
UITableViewController是系统提供的一个便利类，主要是为了方便我们使用UITableView，该类生成的时候就将自身设置成了其包含的tableView的dataSource和delegate，并创建了很多代理函数的框架，为我们大大的节省了时间，我们可以通过其tableView属性获取该controller内部维护的tableView对象。
默认情况下使用UITableViewController创建的tableView是充满全屏的，如果需要用到tableView是不充满全屏的话，我们应该使用UIViewController自己创建和维护tableView。
5.4收藏画册，网友评论，赞过的画册的设计与实现
在用户选中某风格的装修图册，可以展示具体装修图片，文字及网友评论等。
页面顶部用的是一个自定义的imageItem，展示该画册的封面tableView，下面是一UITableViewCell对象，是在UITableView中放置的，用户点击后可以查看该画册的具体设计灵感和局部图片，页面下面是Label，展示收入画册的用户及评论。
如图5-4所示。
图5-4收藏画册等界面
#pragma
mark
UITableViewDataSource
（NSInteger）numberOfSectionsInTableView:
*）tableView
3;
（NSString
titleForHeaderInSection:
if
（section
==
0）
晒家画册"
}else
1）{
灵感画册"
赞过的画册"
uicontrol创建用户界面控件对象。
在窗体上创建各种组建（比如、按钮、静态文本框、弹出式菜单等）。
并指定这些组件的回调函数。
如果设计了一个自定义控件类，可以使sendActionsForControlEvent方法，为基本的UIControl事件或自己的自定义事件发送通知。
5.5我界面的设计与实现
我界面分为三个模块，如图5-6所示。
图5-6我界面图
清理缓存是用第三方框架实现的，点击清理缓存单元格，会弹出一个alertView，用户点击OK后，开始清理图片缓存。
关于我们主要展示客户端版本及开发者的信息，用imageView来实现。
-（void）tableView:
（UITableView*）tableViewdidSelectRowAtIndexPath:
（NSIndexPath*）indexPath
if（indexPath.section==0）
[UMFeedbackshowFeedback:
[[[UIApplicationsharedApplication].delegatewindow]rootViewController]withAppkey:
UMENG_APPKEY];
if（indexPath.section==1）
NSLog（@"
3区0号"
）;
UIAlertView*alertView=[[[UIAlertViewalloc]initWithTitle:
温馨提示"
message:
是否要清理图片缓存?
"
delegate:
selfcancelButtonTitle:
OK"
otherButtonTitles:
Cancel"
nil]autorelease];
[alertViewshow];
[[SDImageCachesharedImageCache]clearDisk];
if（indexPath.section==2）
TheDevelopersVC*theDevelopers
升级会员 