教程说明
- 技术工具: iOS SDK
- 操作难度: 普通
- 执行时间: 30 到60分钟
在本系列指南的三篇文章中，我将带大家一同学习如何从零开始，设计并创建一款小型企业应用程序。
最终效果
作为简单的示例，我们不妨将这款预期作品称为“商务应用”，其作用是向用户展示小型企业提供的服务项目。希望大家能够以此为起点，一步步操作并理解应用程序的设计过程，进而在未来的开发工作中制作出优秀且极具市场竞争力的产品。
准备好了吗？咱们这就开始！
创建项目
创建一个新的Xcode项目，并使用选项卡应用程序模板。我们将项目命名为“商务应用指南”，同时勾选对话框中的“使用自动引用计数”以及“使用Storyboard”两个选项。点击“下一步”，选择项目的保存位置，现在万事俱备、只欠“开发”了。
为应用程序设计启动画面
选择Sotryboard文件，调入MainStoryBoard_iPhone，现在大家看到的应该如下图所示。这是Xcode为我们创建的初始视图控制器，一切美化及提升都需要以此为基础。
首先要做的是完成基础视图，先在Storyboard中选择FirstViewController，然后删除屏幕中作为范例存在的两个标签。接着选择FirstViewController.h文件并声明以下变量：
- @property (nonatomic, strong) IBOutlet UILabel* logoLabel;
- @property (nonatomic, strong) IBOutlet UILabel* descriptionLabel;
- @property (nonatomic, strong) IBOutlet UIButton* callUsButton;
- @property (nonatomic, strong) IBOutlet UIButton* directionsButton;
- @property (nonatomic, strong) IBOutlet UILabel* copyrightLabel;
以上是屏幕中已经存在的UI元素，我们之后还要有针对性地进行调整，借以让应用程序更具个性。
现在让我们将以上变量整合到FirstViewController.m文件当中。
- @synthesize logoLabel, descriptionLabel, callUsButton, directionsButton, copyrightLabel;
下一步要做的是创建标签并将其添加到屏幕当中。下面列出的代码用于定义函数，进而创建具备自定义特性的标签。标签上所设置的属性包括颜色、阴影、阴影偏移以及排列状态。
- -(UILabel*)createLabelWithFrame:(CGRect)frame andFontSize:(float)fontSize andText:(NSString*)text
- {
- UILabel* label = [[UILabel alloc] initWithFrame:frame];
- [label setFont:[UIFont systemFontOfSize:fontSize]];
- [label setTextColor:[UIColor whiteColor]];
- [label setShadowColor:[UIColor blackColor]];
- [label setShadowOffset:CGSizeMake(0, -1)];
- [label setTextAlignment:UITextAlignmentCenter];
- [label setBackgroundColor:[UIColor clearColor]];
- [label setText:text];
- return label;
- }
现在我们可以调用此方法并将返回值分配给两个标签，每次调用都要使用不同的参数值。如此数次之后，我们将标签添加到ViewController当中。
- - (void)viewDidLoad
- {
- self.descriptionLabel = [self createLabelWithFrame:CGRectMake(42, 91, 238, 55) andFontSize:19 andText:@"A short description goes here"];
- self.copyrightLabel = [self createLabelWithFrame:CGRectMake(22, 379, 269, 23) andFontSize:11 andText:@"Copyright 2012 Attorney Biz"];
- [self.view addSubview:descriptionLabel];
- [self.view addSubview:copyrightLabel];
- [super viewDidLoad];
- // Do any additional setup after loading the view, typically from a nib.
- }
到这里如果大家尝试运行应用程序，就会发现我们设定的标签已经被正确添加到视图当中，而且其位置及尺寸都会随参数的变化而有所不同。
由于背景跟标签都是白色，因此我们暂时还无法识别标签的样式。下面要做的是在视图中添加背景纹理。这里我们要使用的是一款纤维质地的蓝色纹理，是我在其它移动应用教程中制作出来的。但在这里，它将再次发挥作用。
这里我们将要使用的图片命名为bg-splash.pngm，这样就可以将其作为背景图案添加到以下代码中，进而作用于viewDidLoad方法了。整个过程相当于先根据图片创建彩色图案，再将该彩色图案设定为背景。
- UIColor *backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"bg-splash.png"]];
- [self.view setBackgroundColor:backgroundColor];
如果这时运行应用程序，我们会清楚看到蓝色背景反衬下的标签。到这一步，我们的应用程序已经逐渐成形了。
添加渐变标签
现在我们需要在屏幕上添加一个渐变标签，要实现这种效果，开源组件FXLabel是大家的最好选择。由于苹果公司对系统封闭性的坚持，我们很难直接利用辅助代码为视图添加渐变效果，一般只能手动画一幅带渐变效果的图片。这里我们从Github网站上下载FXLabel.h和FXLabel.m两个文件，并将其添加到项目当中。
将以下方法添加到viewDidLoad顶端：
- self.logoLabel = [[FXLabel alloc] initWithFrame:CGRectMake(14, 11, 280, 87)];
- [logoLabel setFont:[UIFont boldSystemFontOfSize:45]];
- [logoLabel setTextColor:[UIColor whiteColor]];
- [logoLabel setShadowColor:[UIColor blackColor]];
- [logoLabel setShadowOffset:CGSizeMake(0, 2)];
- [logoLabel setTextAlignment:UITextAlignmentCenter];
- [logoLabel setBackgroundColor:[UIColor clearColor]];
- [logoLabel setText:@"Attorney Biz"];
- [logoLabel setGradientStartColor:[UIColor colorWithRed:163.0/255 green:203.0/255 blue:222.0/255 alpha:1.0]];
- [logoLabel setGradientEndColor:[UIColor whiteColor]];
- [self.view addSubview:logoLabel];
以上代码的定制内容与前面提到的其它标签相似，但在这款商务应用中，我们希望实现背景由蓝色向白色的渐变效果。如果大家在模拟器中运行该应用，那么显示结果如下图所示：
添加按钮
在下面的步骤中，我们要为应用程序添加按钮。具体代码内容如下：
- -(UIButton*)createButtonWithFrame:(CGRect)frame andLabel:(NSString*)label
- {
- UIButton *button = [[UIButton alloc] initWithFrame:frame];
- UIColor* buttonColor = [UIColor colorWithRed:95.0/255 green:113.0/255 blue:126.0/255 alpha:1.0];
- [button setTitle:label forState:UIControlStateNormal];
- [button setTitleColor:buttonColor forState:UIControlStateNormal];
- [button setBackgroundImage:[UIImage imageNamed:@"button-splash.png"] forState:UIControlStateNormal];
- [button.titleLabel setFont:[UIFont boldSystemFontOfSize:18]];
- return button;
- }
该函数将在特定位置以特定文本创建按钮。在该方法中，我们同样引入自定义元素：将文本内容颜色改为灰色，背景图案也采用资源文件夹中的范例图片。
在添加方法并定义头文件之后，接下来就是调用该方法并将处理得到的图像分配给“与我们联系”以及“导航”按钮。
- self.callUsButton = [self createButtonWithFrame:CGRectMake(22, 259, 276, 52) andLabel:@"Call us"];
- self.directionsButton = [self createButtonWithFrame:CGRectMake(22, 319, 276, 52) andLabel:@"Directions"];
- [self.view addSubview:callUsButton];
- [self.view addSubview:directionsButton];
将以上代码段添加到FistViewController.m文件内的viewDidLoad方法中。由此新的createButton方法将正式生效，通过变更具体参数，我们就能实现按钮及文本内容的位置移动。
这时按钮已经被成功加入应用视图。
如果这时启动应用程序，大家会看到如下画面，这就是我们的阶段性设计成果。
进一步调整
细心的读者朋友可能会发现，上图所示的屏幕与我在文章开头所展示的最终显示效果并不完全一致。说明标签的换行位置过于突兀，而且“Attorney Biz”字样也缺乏渐变效果。
为了让说明内容以开头所示的形式分为两行，我们要将以下代码添加到viewDidLoad方法中创建descriptionLabel之后的位置。
- [descriptionLabel setNumberOfLines:2];
为视觉元素赋予功能
现在，我们的屏幕视图已经基本完成，但这只是视觉效果，还无法响应任何操作、按钮也不会激活任何事件。这可不行，我们得通过以下代码定义两套方法。第一套方法将呼叫特定电话号码，而第二套方法则打开地图并显示指定位置（在本范例中，指定位置为伦敦）。
- -(void)callNumber
- {
- UIApplication *app = [UIApplication sharedApplication];
- [app openURL:[NSURL URLWithString:[NSString stringWithFormat:@"tel:004-102-3929"]]];
- }
- -(void)openMap
- {
- UIApplication *app = [UIApplication sharedApplication];
- [app openURL:[NSURL URLWithString:@"http://maps.google.com/maps?q=Paris"]];
- }
下一步是将我们的按钮与新方法关联起来。
- [self.callUsButton addTarget:self action:@selector(callNumber) forControlEvents:UIControlEventTouchUpInside];
- [self.directionsButton addTarget:self action:@selector(openMap) forControlEvents:UIControlEventTouchUpInside];
现在当我们点击对应按钮，应用程序就会尝试发起电话呼叫或者打开地图应用。
注意：模拟器无法实现电话呼叫功能，因此这部分内容只能在iPhone实机上进行测试。
总结
商务应用系列文章的第一部分到此将告一段落。在第二及第三部分中，我们将学习更多应用程序设计内容并为作品添加更多精彩的要素，这些经验相信会在大家未来的程序开发工作中起到重要作用。
如果大家还有什么问题，不妨在评论栏中留言并与其他朋友一同讨论。
原文链接： http://mobile.tutsplus.com/tutorials/iphone/design-build-a-small-business-app-project-setup/
