ios 界面开发_iOS开发新手指南：界面-第一部分

多年来，Apple凭借其iPhone和iPad系列一直是移动世界的领先行业。 尽管它可能在每次正式发布时都会大肆宣传，但它在移动平台中也占有很大的市场份额，这可能是大多数客户希望他们的应用程序存在于Apple应用程序商店中的原因。 因此成为开发人员学习和构建iPhone应用程序的原因。

好消息是，iPhone应用程序的开发并不像您想象的那么难，并且这篇文章是作为全面指南指导您完成构建iPhone应用程序的完整过程的。

我们将讨论开发该应用程序的原因，阶段和工具，最终您将遵循一个简单的教程，使用Xcode设计基本的iPhone应用程序。

因此，无论您是要学习业务还是只是拥有一个惊人的应用创意，它可能使您成为百万富翁，让我们开始构建您的第一个iPhone应用！

为什么要为Apple开发？

我经常看到这个问题，所以我想解释一下为什么您应该对iPhone开发感兴趣。 就像我在引言中所说的那样，iPhone目前在移动平台中占有很大的市场份额 。

我认为这个理由足以让您学习开发iPhone应用程序，因为无论您是为自己开发的还是为客户开发的，大多数人都希望世界上许多人都可以访问他们的应用程序。

从开发的角度来看， Apple喜欢简单的东西 ，这适用于他们的产品和框架。 iOS是为所有Apple移动设备提供动力的操作系统 。 其中包括iPod Touch，iPhone和iPad。 因此，请记住，当您为iPhone开发应用程序时，可能会为所有其他使用iOS的设备开发应用程序！

此外，使上述功能更加重要的是可以节省多少编码工作。 当您为iPhone应用程序编写代码时， 所有Apple的计算设备都使用相同的编程语言 。 这意味着当您开发iPhone应用程序时，该应用程序以后可以集成到iPad甚至Mac中。

Objective-C是支持所有框架的核心编程语言。 与Objective-C一起，您还将使用Cocoa Touch开发iPhone应用程序，该编程框架可驱动iOS上的用户交互。

这些只是一些信息，可帮助您开始iPhone应用程序开发。 开发是一个相当复杂的过程，但是请放慢脚步。 因此，原因在这里，而决定权由您决定。 无论答案是否定的，您都可以随时跳到下一个主题： 为iPhone设计应用程序 。

规划您的iPhone应用程序结构

在创建iPhone应用程序的标准思想中，您需要经历几个阶段 。 第一阶段包括计划和草绘 。

首先，您需要了解应用程序将要做什么 。 人们为什么要下载它？ 您想包括哪些功能 ？ 这是最重要的阶段，好像您做对了一样，在编码阶段，您将避免很多混乱和麻烦 。

最糟糕的是，它使您回到绘图板上。

我建议为您的应用程序的几页（或视图）绘制一些粗略的想法 。 只需在一张纸上绘制一个矩形形状（可能是5或6个形状），然后在应用程序的每个视图上绘制所需的功能即可。

您可以将视图视为网站中的不同页面。 每个视图将提供不同的功能，例如登录表单，联系人列表或数据表。

下面，我构造了不同的UI栏元素的简短集合：

• 状态栏 –显示设备的当前电池电量，3G连接，接收栏，电话运营商等。 建议您始终包含这些元素。
• 导航栏 –为您的用户提供在页面层次结构之间导航的选项。 它通常在工具栏的左侧包括一个按钮，使用户可以返回到上一个应用程序视图。
• 工具栏 –出现在iPhone应用程序的底部。 这将保留一些与某些功能相关的图标，例如“ 共享” ，“ 下载” ，“ 删除 ”等。
• 标签栏 –与工具栏非常相似，但现在您正在使用标签。 用户单击选项卡图标时，它将自动突出显示，并显示有光泽的悬停状态。 此栏用于在视图之间切换，而不是提供直接功能。

此列表仅包含您在大多数应用中可以找到的工具栏。 您还可以考虑其他一些视图和样式，可以在Apple的iOS UI元素使用指南中找到它们。 如果您对iPhone的UI元素有疑问，我强烈建议您参考本文档。

为了节省时间，我不会描述每个UI元素。 有太多要考虑的元素，您最终不会在单个应用程序中使用所有元素。 但是，当您勾勒出自己的观点时，您可以从上面建议的准则以及您喜欢使用它们的其他iPhone应用中汲取灵感 。

设计Photoshop样机

我假设你们中的大多数人都对使用Adobe Photoshop相当满意。 它是用于为网站，横幅，徽标和移动模型创建图形的首屈一指的软件。 为网络设计图形是一个相当简单的过程，但是在iPhone应用程序设计中则要复杂一些。

如果您想构建一个应用程序，那么您确实应该从一开始就创建像素完美的模型设计 。

首先，我们应该讨论Photoshop设置。 由于我们是为iPhone设计的，因此我们需要考虑两种不同的设计风格。 常规的iPhone显示屏为320 x 480像素 。 但是，iPhone 4包括视网膜显示屏，该显示屏在相同屏幕尺寸内的像素数量增加了一倍 。 因此，您应该将分辨率提高一倍，达到640 x 960像素，并按照此标准设计布局。

这意味着您还需要为您的模型创建2套图标 。 最初，图标设置为163ppi，但对于iPhone 4，您需要包含326ppi的图标 。 传统上，图标的文件名末尾带有@ 2x标记，例如“ icon@2x.png ”。

现在，让我们优化我们的新文档设置。 首先，我们需要编辑一些首选项，因此可以访问Photoshop>编辑>首选项> 辅助线，网格和切片 。 我们将每隔20px将网格线设置为2 。 设计视网膜显示时， 2px的线将在屏幕上显示1点 。 这是缩小应用程序时需要牢记的重要规则。

我倾向于发现更容易地构建具有更高分辨率的设计，然后按比例缩小它们，但是您可以尝试两种方法，然后看看哪种方法最适合您 。 我们正在使用640 x 960像素（326ppi）的像素–如果您认为经常使用它，请将其保存为自定义预设。

使用模板元素构建

现在，您可以使用Photoshop自己创建像素完美的布局，但是事实证明这是一项非常繁琐且乏味的工作。

这是一个包含太多元素的巨大文件。 为了简化操作，您可以按v激活移动工具 ，然后单击其选项栏上的“ 自动选择 ”，然后选择“ 图层 ”，而不是“组”。 使用设置，您可以单击任何元素，Photoshop会将您带到其相应的图层！

随意使用模型 ，或者甚至可以从模型创建应用程序的原型。 根据您的应用程序，您可以在核心区域中包含一系列功能，您可以在此PSD文件中找到许多功能。 也可以转到这些元素的图层并编辑字体，渐变颜色和其他设计样式。 只需确保您没有调整任何大小，因为所有的条形图和UI元素均设置为默认标准尺寸。

用Xcode开发应用

用于iOS和Mac OS X编程的开发人员工具称为Xcode 。 如果您正在运行OS X Lion，则可以在Mac App Store中免费找到Xcode和所有适用的软件包。

安装完成后，启动Xcode并显示其欢迎屏幕。 在这里，您可以加载较旧的项目，也可以选择创建一个新项目。 现在，您需要单击“ 创建一个新的Xcode项目 ”，然后模板窗口将带有一些选项。 在iOS>应用程序下，单击“ 单一视图应用程序 ”，然后单击“下一步”。 您可以给新应用程序起一个名字 ，例如Test （最好没有空格），然后在Company Identifier上键入任何单词，例如mycompany ，最后选择一个目录并单击“ Save”。

Xcode将建立文件目录，并将您发送到新窗口中进行工作。 您应该看到列出了许多文件选项，但是以应用程序命名的文件夹是主要焦点。

使用Xcode，您可以使用两个选项来设计前端元素。 经典的xib / nib格式是Mac OS X和iOS应用程序的标准配置，需要您每次设计一个新的页面视图。 但是，当您在单个应用程序中创建更多视图时，笔尖文件的数量可能会变得太多，因此新的情节提要文件将所有笔尖视图保存在单个编辑器窗格中。 在这里，您可以轻松地删除和添加UI元素和功能。

此外，您将在同一文件夹组中遇到.h和.m文件。 这些是标头和实现代码的短文件名。 在这些文件中，您可以编写应用程序运行所需的所有Objective-C函数和变量。 解释Xcode如何与MVC（模型，视图，控制器）一起使用可能是个好主意，这就是每个控制器需要2个文件的原因。

MVC编程层次结构

要了解该应用程序的工作方式，您需要了解其编程架构。 Xcode以模型，视图，控制器（MVC）为基础 ，可以将您的所有显示和界面代码与逻辑和处理功能区分开，并且实际上没有其他选择。 MVC乍一看似乎令人困惑，但是如果您试图理解它并开始构建一些基本应用程序，那么您会喜欢上该结构的。

为了更容易理解，我在下面的列表中列出了每个对象：

• 模型 –包含您的所有逻辑和核心数据。 这包括变量，与外部RSS feed或图像的连接，详细功能以及数字运算。 该层与视图完全分离，因此您可以轻松更改视图，并且仍然可以使用相同的数据。
• 视图 –应用程序中的屏幕或显示样式。 表格列表，个人资料页面，文章摘要页面，音频播放器，视频播放器，这些都是视图的示例。 您可以更改其样式并删除元素，但仍将在模型中使用相同的数据。
• 控制器 –充当其他两个之间的中介。 您将视图中的对象连接到ViewController，后者将信息与您的模型进行传递。 因此，通过这种方式，用户可以点击按钮并将其注册到模型中。 然后运行注销功能，并通过同一控制器传递一条消息“成功注销！”。

因此，基本上，您的模型拥有显示在屏幕上某个位置所需的所有信息和功能 。 但是模型不能与屏幕交互，只有视图可以 。 视图大部分都是视觉效果，并且只能通过ViewController提取数据 。 Controller实际上是一种从前端设计中隐藏后端数据的更为精致的方法 。 这样，您可以多次翻新设计，同时又不会失去任何功能。

有了这些知识，开始构建您的前几个应用程序就不难了。 如前所述， Objective-C是您用于开发应用程序的核心编程语言。 它基于C语言构建，具有更新的语法和一些其他范例。 您将需要大量时间来熟悉该语言，但是对于初学者，我建议您使用Mobiletuts +的教程系列 。

情节提要的设计视图

现在，我们已经研究了应用程序的技术方面，我们应该花一些时间来设计接口。 我假设您在创建项目时一直选中“ Storyboard”选项 ，这意味着您可以在窗口左侧的文件夹组中的某个位置找到一个MainStoryboard_iPhone.storyboard文件。 单击文件以选择它并打开视图。

新的边栏应直接出现在文件夹组的右侧。 这称为文档大纲 ，它是一种快速预览方法，用于检查此情节提要中的所有可用视图。

我们首先要在视图控制器中添加一些页面元素。 我们需要两个不同的元素： 导航栏和选项卡栏 。 在抓取它们之前，请访问窗口右侧的“ 属性”检查器 （“视图”>“实用程序”>“显示属性”检查器），然后查找“ 状态栏”标签。 默认情况下，它设置为Inferred （使用标准的iPhone状态颜色），但是如果您的应用程序设计更适合该颜色，则还可以选择“ 黑色”或“ 半透明黑色” 。

对象库

如果窗口右侧的“ 实用程序”窗格不可见，则可以通过访问“视图”>“实用程序”>“显示实用程序”来启用它。 在“实用工具”窗格上，在底部查找一个名为“ 对象库”的面板。 它具有一个下拉菜单，其中“ Objects ”作为列表的第一项。 如果找不到它，则可以选择“视图”>“实用程序”>“显示对象库”。

从对象库的下拉菜单中，找到并选择Windows＆Bars 。 现在，单击导航栏 ，将其拖动到视图窗口中，并将其直接放在黑色状态栏 （带有电池图标）下。 我们现在可以自定义栏的标题说明。 双击当前显示为“ Title ”的文本，您将在“实用工具”窗格中看到一个名为“ Title ”的标签，您可以从此处将标题描述更改为“ Test ”。 点击“ Enter”以见证更改。

再次在Windows＆Bars面板中，向下滚动以找到Tab Bar ，然后将其拖动到视图窗口中并将其放置在应用程序的最底部。 默认情况下，这两个元素看起来很棒。

现在，也许您希望导航栏的渐变与底部的选项卡栏匹配，然后单击导航栏，然后在“实用工具”窗格的“ 属性”面板上向右看。 第一个选项称为Style ，它设置为Default。 将样式从默认更改为黑色不透明 ，我们将提供匹配的颜色设置！

我们还要在应用程序的底部栏中添加另一个选项卡按钮。 再次将鼠标光标移至Windows＆Bars面板，然后向下滚动到Tab Bar下方的Tab Bar Item 。 将其拖到您的应用程序窗口中，并将其放置在2个现有“标签栏”按钮的中间。 如果双击此新按钮，则可以在“实用工具”窗格中看到一些其他选项，然后从此处更改项目的图像和标题 。 例如，我已将新添加的标签栏项目的标题更改为“ Bookmark ”。

因此，这是有关在Xcode中设计视图的简短教程。 这不是一个非常困难的过程，但是需要更多的时间来习惯该界面。 如果您愿意的话，可以多添加一些元素，也可以访问Apple的iOS开发资源以获得更多学习资源，发现更多内容也不是一件坏事！

敬请期待第二部分

到此，我们结束了iPhone应用程序设计和开发指南的第一部分。 在下一部分中，我们将更深入地研究Objective-C和Cocoa Touch，您将最终学习构建功能良好的iPhone应用程序，敬请期待！

iOS设计库

对于在那里的设计师，我也希望能给您带来一些启发，因此，我在下面列出了一些很棒的iPhone应用程序视图。 该列表包含了许多启发性的应用程序元素，您可能以前从未注意到过。 欢迎在下面的评论部分中分享您的想法，应用程序视图或问题，谢谢！

翻译自: https://www.hongkiat.com/blog/ios-development-guide-part1/